Webサイト閲覧におけるスマホユーザーの割合は、コーポレートサイトでも5~6割を超えてきているし、メディア系のサイトは7割以上がスマホユーザーである。
スマホ対策はもはや必須になっているが、そもそもPCとスマホでは画面サイズはもちろん、横長か縦長かの違いや、情報を取得する場所や環境の違いもある。
スマホユーザーとPCユーザーの情報取得環境の違いを把握した上で、どうしたらスマホに最適化されたWebサイトが作れるのかを考えていく必要がある。
スマホユーザーとPCユーザーの違いは大きく２つに大別される。
・デバイスの物理的な違い・・・画面サイズや横長・縦長など
・閲覧環境の違い・・・場所（オフィスや通勤の電車など）や接触時間
これらの違いがどのような影響を与えるのだろうか。その観点からスマホの最適化を考える。
画面サイズの違いは情報取得量に大きな影響がある。スマホはPCと比較して細かい情報をまとめて掲載するのに不向きである。
例えば商品スペック表があったとしよう。そこには値段や商品の仕様一覧がズラリと並んでいるとする。こういった情報はPCでは表として一覧性を確保して見せることが可能だが、スマホでそのまま表を表示しようと思ってもとても表示しきれない。
ではどうすべきなのか？
スマホでは情報に階層を持たせればよい。下図のようにPCでは一覧性を高くし、スマホでは階層を持たせた上で必要な情報だけにアクセスしてもらう。
スマホでは、限られたスペースで何を見せるかを考えなければならない。
PCでメインメニューが8個あったとしよう。スマホではどう表示すべきだろうか。
よくあるのはスマホ画面の右上か左上にあるハンバーガーメニュー（ ≡ マークのメニュー）からメニューを展開するパターンだ。しかしハンバーガーメニューはスマートに見えるかもしれないが、スマホという限られた画面サイズの中で訴求するのであれば、特に打ち出したいメニューをもっと全面に打ち出すことも検討に値する。
そこで特定のメニューだけをピックアップして下の例のように見せることも考えたい。
【PC】
【スマホ：メニューを3つピックアップ（他のメニューはフッターに集約）】
PCのようにマウスではなく、指先でのタップなので、クリック範囲は大きくしておきたい。
また、PCではマウスオーバーするとポインターが変化するのでクリックできることが分かるが、スマホにはマウスオーバーという概念がないので、何がクリックできて何がクリックできないかは、より分かりやすくしておくべきだろう。
（もちろんPCでもマウスオーバーせずともクリックできることが分かるのがよい）
スマホの利用シーンを考えると、電車内や運転の休憩時間など移動中や何かの合間ということが考えられる。つまりあまり時間もなければ細かい情報をインプットする余裕もないときではないだろうか。
そのような時にスマホ画面にどのような情報がどのようなデザインで表示されているべきかを考える。ずばりシンプルな表示で限られた情報をサクッと見られるのがよいだろう。
PCで見せている情報をすべてスマホで見せなければならないということはない。スマホでストレスなく閲覧できる情報量を検討し、PC版より情報を削ることも考えたい。
スマホはPCと物理的な違いだけでなく、利用シーンにも大きな違いが見られる。
ターゲットによってその利用シーンはさらに細分化されるため、あなたの会社のターゲットを見極めて、PCスマホそれぞれにおいてどのようなコンテンツの見せ方をすべきかを検討していこう。
