概要
皆さん、Webアプリを作成する時レスポンシブ対応をすると思います。その時、スマホとPCに求めらるデザインは異なります。それは、画面の大きさやユーザと画面の距離、タッチ操作とマウス、トラックパッド操作の違いなどハード面で異なるためUIのベストプラクティスも異なるためです。今回は、異なるポイントとその改善案をまとめてみました。
異なるポイントと改善案
スマホ
- タッチ操作のため細かい操作がしづらい
-> 要素を大きめにデザインする必要がある - ホバーをつけることができない（マウスポインタを表示できないため）
-> タッチ操作ができることを直感的にわかる見た目にする - 片手操作
-> 右利きが多いことから左上や上部を片手操作で押すことが難しい。ボトムタブなどの採用も考える - スクロール操作が可能
-> カルーセルデザインを採用させやすい（PCでも可能だかスクロールのできるスマホの方が適している） - 画面サイズが小さく省スペースする必要がある
-> 空白はできるだけ小さくする。カルーセルデザイン、アコーディオンメニュー、ハンバーガーメニューなどの採用も検討
PC
- スマホに比べて画面サイズが大きい
-> マルチカラムレイアウトを可能にする - マウス操作のため細かい操作が可能
-> 要素は小さくていいが、見づらくない大きさにはする（ターゲット層が高齢な場合は文字を大きくするなどの配慮も必要）
おわりに
今回は、スマホとPCのUIの異なるポイントを簡潔にまとめてみました。デザインを作る際の参考に少しでもなれば幸いです。