【Web集客】PCサイトとスマホサイトの違い

2015年5月13日2022年2月8日初心者向け,ユーザビリティ,スマートフォン

皆さんスマートフォンの普及率、どの程度なのかご存知ですか？
内閣府「消費動向調査」によると日本でのスマートフォンの普及率は54.7%だとか。
サイトを閲覧したり、ネットショッピングしたり、スマートフォンで全て完結してしまう時代。
スマートフォン対応はもはや必須となってきましたね！
今回はWEBサイトをスマホ対応させる上での気をつけるべきポイントを幾つかご紹介したいと思います。

利用シーンを意識する

デスクトップPCでサイトを閲覧する場面を想定してみてください。
オフィスや自宅の書斎など、ある程度限定されたシーンを想定できますね。
ではスマートフォンはどうでしょう？通勤中？家事の合間？受付の待ち時間？様々なシーンが思い浮かんできませんか？
スマートフォンサイトではこの「シーン」と「ユーザーがどのような行動をとるか」を想定して、コンテンツの優先度やUIのデザインを変えることが求められます。

例えば「飲食店の口コミサイト」
PCユーザーは「メニュー」が目的なのか、「口コミ」が目的なのか？
スマートフォンユーザーは「お店までの地図」が目的なのか「予約電話番号」が知りたいのか？
こういったシーンによってユーザーが何を求めているかを見極めコンテンツの優先順位をつけましょう。

画面サイズの違い

当たり前のことなのですが、デスクトップPCに比べてスマートフォンの画面はとても小さいです。
PCと同じ情報をすべて入れようとすると長大でとても見にくいページになってしまいがち…
ここは思いっきって情報をまとめることがとても重要になってきます！
いくら良質なコンテンツでもユーザーが離脱してしまったらなんの意味もないのですから…

以下の基準をもって画面設計を考えてみましょう

簡潔に

できるだけシンプルに、冗長なテキストを読みたいユーザーなどいないのです。

見やすく

文字のサイズ、行間は大丈夫ですか？ボタンは押しやすいですか？

大胆に

余計な修飾など入れずに、本当にユーザーにとって必要なコンテンツだけ入れましょう。
また以下のガイドラインにも一度目を通しておいてみてください。
・iOSヒューマンインターフェイスガイドライン
・Material Guidelines

3．回線速度の違い

スマートフォンは回線速度が環境によってとても左右されます。
ページの読み込みが遅かったり、ローディングがいつまでも終わらなかったり、ユーザーの離脱を招く一番の原因ですね。
こういった自体を極力回避するためにも画像はロスレス圧縮、CSSで表現できる部分はできるだけCSSで、長いjavascriptなどもコードを圧縮する等、できるだけ軽いページにするように心がけましょう。