概要

皆さん、Webアプリを作成する時レスポンシブ対応をすると思います。その時、スマホとPCに求めらるデザインは異なります。それは、画面の大きさやユーザと画面の距離、タッチ操作とマウス、トラックパッド操作の違いなどハード面で異なるためUIのベストプラクティスも異なるためです。今回は、異なるポイントとその改善案をまとめてみました。

異なるポイントと改善案

スマホ

タッチ操作のため細かい操作がしづらい
-> 要素を大きめにデザインする必要がある
ホバーをつけることができない（マウスポインタを表示できないため）
-> タッチ操作ができることを直感的にわかる見た目にする
片手操作
-> 右利きが多いことから左上や上部を片手操作で押すことが難しい。ボトムタブなどの採用も考える
スクロール操作が可能
-> カルーセルデザインを採用させやすい（PCでも可能だかスクロールのできるスマホの方が適している）
画面サイズが小さく省スペースする必要がある
-> 空白はできるだけ小さくする。カルーセルデザイン、アコーディオンメニュー、ハンバーガーメニューなどの採用も検討

PC

スマホに比べて画面サイズが大きい
-> マルチカラムレイアウトを可能にする
マウス操作のため細かい操作が可能
-> 要素は小さくていいが、見づらくない大きさにはする（ターゲット層が高齢な場合は文字を大きくするなどの配慮も必要）

おわりに

今回は、スマホとPCのUIの異なるポイントを簡潔にまとめてみました。デザインを作る際の参考に少しでもなれば幸いです。