スマホサイトのUI/UX 6つの基本ポイント【レスポンシブwebデザイン】


9011116378_32e56983e3_b

レスポンシブwebデザインでは、「モバイルファースト」というモバイルを起点とした取り組みも主流になるなど、ますますモバイルの重要性が高まっています。
レスポンシブwebデザインを実装する際、スマホサイトでも快適に利用してもらうために、気をつけておきたいUI/UXの基本をまとめました。

【ポイント1】 シンプルにすること

外出中や移動中に利用することが多くなるモバイルサイトは、容量を最小限に抑えた表示速度の高速化が必須です。
また、限られた小さな画面サイズで必要な情報を伝えられるように、無駄を省きシンプルにすることが重要なポイントになります。
見出しや文章は簡潔にして読みやすくし、クオリティの高い画像やアイコンを厳選したシンプルでスマートなデザインが求められます。

【ポイント2】 押しやすいタップ領域の確保

ピンポイントを的確にクリックできるマウス操作とは異なり、スマートフォンは指で操作するために、押し間違いのない最低限必要なタップ領域の確保が必要です。
最低7ミリの「88px」を最小(画面解像度が 326 ppi の場合)とし、つめの長い女性や男性の大きな親指での操作を考慮すると、それ以上のサイズで作成するのがよいでしょう。
(参考:モバイルアプリの最小タップサイズを考える

【ポイント3】 頻繁に利用するボタンは画面の下部へ

ユーザがどのようにスマートフォンを持つのかという調査結果から、約半数のユーザが片手で持ち、親指でタップしやすい範囲は画面の下部に集中していることが分かりました。

HoldPhones_Figure-1

HoldPhones_Figure-2

このことから、頻繁に利用するボタンやナビゲーションは画面の下部にするなどの配慮があるとよさそうです。
(参考:How Do Users Really Hold Mobile Devices?

【ポイント4】 適切な余白

小さい画面にたくさんの情報を収めようと詰め込みすぎるのはよくありません。
タップできるボタン同士がくっつきすぎて誤操作を招いたり、情報が読み取りづらく、必要な情報にたどり着くのが困難になってしまいます。
誤操作の防止、読みやすさを考慮した適切な余白をとることも重要です。

【ポイント5】 フォントとフォントサイズ

iPhoneでは「ヒラギノ角ゴPro W3」と「ヒラギノ角ゴPro W6」の2つの日本語フォントが利用できますが、AndroidにはBoldがないため「ヒラギノ角ゴPro W3」のみで制作し、Boldを用いないデザインをする必要があります。
フォントサイズについては、本文では20px以下のフォントサイズでは読みづらく、24px以上で作成が望ましいでしょう。それにあわせて読みやすい行間の配慮も必要です。

【ポイント6】 フラットデザイン

スマートフォンのサイトでよく見られる「フラットデザイン」は、上記にあるような無駄の無いシンプルな要素と構成のデザインのため、見た目を柔軟に調整するレスポンシブwebデザインと非常に相性がよいといえます。
また、華美な装飾や画像を必要とせずページ容量も軽くなるというメリットもあり、レスポンシブと相性のよいフラットデザインの採用は、スマートフォンとの親和性も高く非常に合理的といえます。

最後に―スマホ表示はさらに重要に!

以上のようなポイントを踏まえ、最終的には実際に成果物を見て触って何度も検証することが、優れたUI/UXを達成するために不可欠です。
また、最後に2016年5月に新バージョンが公開された「モバイルフレンドリーテスト ツール」を利用して、Googleでどのような評価がされるかチェックしてみるのもよいでしょう。

このまとめが、ユーザ視点に立って良質なユーザ体験を提供できているかを確認する参考の一助になれば幸いです。

SNSでもご購読できます。