最近はスマートフォンの普及によって、スマートフォンからアクセスしてくるユーザーが非常に増えた。
BtoC(消費者をターゲットとしている)企業やサービスのアクセス解析などを見ると、アクセス全体の8割がスマートフォンからのアクセスであることも珍しくない。
最近は家に帰ってもPCを開かずにスマートフォンでインターネットを利用するユーザーも多い。
ソファやベッドに寝っ転がりながら操作することができ、１秒で立ち上げられるWEBブラウザもその要因になっているようだ。
ちなみにこのブログはPCユーザーが８割だ。仕事にまつわるブログなので、仕事中に会社などからPCで閲覧されていると予想している。
さらにGoogleも下記のように公式に発表し、モバイルフレンドリーアップデートというスマホ最適化されているWEBサイトを高く評価するとしている。
モバイル版の検索結果では、モバイル フレンドリーなページの掲載順位が引き上げられ、検索ユーザーは、小さなスクリーン上でも読みやすい、高品質で関連性の高い検索結果をより簡単に見つけることができるようになります。
モバイル フレンドリー アップデートを開始します( Google ウェブマスター向け公式ブログ )
以上のことからスマートフォンサイトの制作需要は非常に高まっている。
「スマートフォンからもPCサイトは見えるのだからいいじゃないか」
と言っていた人もいるかもしれないが、競合が着々とスマートフォンで見やすいフォントサイズ、押しやすいボタン、横スクロール無し、など圧倒的に操作性が高まって行く中で、自社だけがそのままという訳にはいかない。
では具体的にどのようなことに気をつけてスマートフォンサイトを制作していけば良いのか。
今日はスマートフォンだからこそ気をつけておきたいスマートフォンサイト制作時の注意点について紹介しよう。
スマートフォンとPCのデバイスの違いを理解する
まずはデバイスの差を理解しておこう。スマートフォンとPCで異なる点をいくつか紹介する。これがスマートフォンサイト設計時にまず頭に入っていることが重要だ。
指による操作
当たり前のことだがスマートフォンは指で操作する。PCはマウスカーソルで操作をする。この違いは非常に大きい。
マウスは【点】で的を絞って一発でクリックできるのに対して、指ではマウスの何倍も大きな範囲を同時にクリックすることになる。
マウスカーソルであればなんなくクリックできるリンク先も指ではかなり難しくなる。文字情報のコピーも同様である程度の文字サイズとスペースがないと検討はずれのところばかりコピーすることになりストレスが増える。
画面が小さい
PCモニタに比べてスマートフォンの画面はかなり小さい。横幅だけで言っても1/3程度にはなる。
1/3の画面にPCサイトがそのまま表示されればもちろん画像もテキストも極小になる。そうなるとやらねばならないのが【拡大（ピンチ）】だ。これができるからスマートフォンサイトはいらないのではないかという話もいただくことがある。
しかしピンチを行うことはスクロールすることとは別の操作になるので基本的に両手になる。片手操作を封じられるのはスマートフォンの操作性が少なからず失われていると考える。
電話をかけられる
スマートフォンは電話なので直接電話がかけられる。電話によるお問い合わせや注文が可能な商品であればこの機能を使わない手はない。
また、PCでは当たり前に表示していた電話番号も、ボタンをタップするだけでかけることができるので電話番号の表示は必ずしも必要ではない。
外出中のナビゲーションに使われる
PCと違って外出中に使われる可能性の高いスマートフォンではナビゲーションの情報がPCサイトよりも多く求められる。例えばPCサイトではよくある「この地図を印刷する」などの機能もスマートフォンサイトでは使われる場面がかなり少ないだろう。
スマートフォンであれば具体的な目的地への地図のナビゲーションや、その外観、目印となる建物などがユーザーの役に立つ。
以上がスマートフォンとPCの大きく異なる点だ。
下記からは異なる点を考慮した具体的な施策について説明する。
スマートフォンサイト制作時に意識しておきたい具体的な施策
１，ページはファーストビューの３倍程度に留める
PCサイトよりも画面の小さいスマートフォンサイトだが、PCサイトとの整合性を保つために、PCサイトのTOPで表示されている情報をすべてスマートフォンサイトのTOPで表示させようとするとかなり長いページになることがあり得る。
しかしスマートフォンのようなデバイスでは縦にあまりに長いとその中から情報を見つけるのも困難になってくる。
筆者が独自にやっていることだがファーストビューの３倍程度に1ページの長さを押さえておけばまず大きなストレスはない。
どうしても情報を残しておきたい場合にはアコーディオンにしたり、ページ内リンクをつけるなどの工夫をしている。
２，リンク・段落の上下余白はしっかり取る
スマートフォンサイトは指で操作するのは先ほど説明した通り、親指であれ、人差し指であれ、マウスカーソルの何倍もタップエリアが広い。タップしようとしてリンクの下のリンクをクリックしてしまったりしてしまう。
PCサイトで設計するよりも多く余白を取ることが非常に重要だ。
目安としてはiphoneやandroidのホーム画面に並ぶアイコン同士の余白ぐらいとっておけば、普段から触りなれているのでユーザーもタップしやすいのだろうと筆者は考えている。
３，ボタンは右端配置か幅一杯のボタンサイズを採用する
スマートフォンでボタンを配置する場合には横幅一杯の長さで作ることをおすすめする。
なぜかというと左右どちらの手で片手操作していたとしても簡単にタップすることができる。
レイアウト上、左右どちらかにボタンを寄せたいのであれば人間は右利きが多いので右に寄せている。
右手親指操作についてはランディングページ専門制作会社のギャプライズさんが書くブログでヒートマップを使った実験によって立証されているので是非チェックしていただきたい。
ライバルを出し抜け！スマートフォンサイト制作でコンバージョン率を上げる7つのポイント(LPO研究所)
４，フォームでは入力方式をラベルに合わせる
スマートフォンではフォームで入力する際に入力タイプを選ぶことができる。
例えば電話番号の入力フォームであれば番号しか打ち込めないようにする。
メールアドレスであれば英語の入力フォームであり、@（アットマーク）がデフォルト表示されるインプットを選ぶ。
これらはinputタグのtype属性でそれぞれ用意があるので試してみてほしい。htmlコーディングができる人であれば簡単に設定ができるはずだ。
下記にサンプルフォームを置いておくのでスマートフォンから実際に確認してほしい。
５，電話クリックボタンには電話番号はいらない
スマートフォンサイトであれば電話をかけるボタンを設置することは行うとして、その際にPCサイトの名残で電話をかけるボタンに電話番号を記載しているサイトをよく見かける。
何か特別な理由がなければ基本的には電話がかけられれば電話をかけるボタンに電話番号の記載は必要ないはずだ。
電話番号よりも「電話をかける」「電話で問合せる」などの言葉を入れたり営業時間を記載する方がよりアクションにつながるだろう。
以上がスマートフォンサイトを制作する際に注意しておくべき点だ。
まだまだあると思うがここは基本的な部分として知っておいてほしい。
スマートフォンに限らず、アップルウォッチが最近では発売されるなど今後ウェアラブルデバイスの多様化はさらに進んでいくと予想される。
デバイスの特性を理解して、既存のPCサイトにとらわれずに設計していくことが重要になりそうだ。