大画面スマホで使いやすいサイトのポイントは？

最近特に増えてきた、画面サイズの大きなスマートフォン。同じ画面内に多くの情報を詰め込んだり、写真を大きな画面で確認できたりするため、ECサイトにとっても多くのメリットがあります。

しかし、その反面、片手で操作する場合は画面の端まで指が届かないなどの理由から使いづらいという声もあり、運営側はこれまで以上に、UIを慎重に設計する必要がありそうです。もちろん、手を持ち替えたり、両手で操作したりすれば、指が届かないという問題は解決できます。ただ、カバンを持っている、満員電車の中で手すりを持っているなど、片手が塞がっている状況でスマートフォンを操作する場面は意外と多いもの。ユーザビリティを確保するうえでは、片手でもストレスなく操作できるUIを設計する必要があります。今回は、片手で操作することを前提に、大画面でも使いやすいECサイトのデザインについて、考えてみましょう。

大画面でも使いやすいUIデザインのポイント

「親指」が届く範囲を意識する

自身もデザイナーであり、モバイルサイトのデザインを手がける4ourth Mobile社の代表でもあるSteven Hoober氏は、スマートフォンを右手で持って片手で操作する際に、親指が届く範囲を「Thumb Zone map」としてまとめて発表しています。

出展：How to design for thumbs in the Era of Huge Screens

上記のなかで、「NATURAL」と表記された緑色の部分は親指が自然に届く範囲、「STRETCH」は多少指を延ばす必要がある範囲。また「ow」は手を持ち変える必要がある範囲です。

これを見ると、ユーザーがストレスなくタップできる範囲は意外と狭いことがおわかりいただけるのではないでしょうか。

また、スマートフォンであるiPhone6までであれば、画面の大きさが変わっても、指が届く範囲にそれほど差はありません。しかし、ファブレットと呼ばれるiPhone6 Plusのサイズになってくると、その範囲が大きく変わってくることにも注意する必要があります。

サイズを配慮したメニューアイコンを画面の下部に置く

さきほど書いた指の稼働範囲をふまえて、大画面でも使いやすいUIデザインのポイントについてお話しましょう。

スマートフォン専用サイトの場合、一般的にメニューアイコン（ハンバーガーアイコン）は画面の右上、もしくは左上に置かれます。指の稼働域を考えると、なぜページの上部にメニューが置かれているのでしょうか。その理由を探ってみましょう。

Apple謹製のUIではページ上部と下部にそれぞれメニューが配置されています。ほとんどのアプリではそれに習い、同じUIになっています。その影響か、スマホサイトでもヘージ上部にメニューが配置されるようになったのではないでしょうか。アプリであれば画面内に収まる長さがほとんどですが、スマホサイトの場合は下にスクロールして内容を読ませる必要があります。

ページ下部にメニューがあった場合、長いページを下へ下へ読み進めるときに、ページ下部に大きなメニューがあると次のコンテンツが隠れて邪魔になってしまいます。

目線はというと、通常、上から下へ移り、スクロールすると、また上に戻って下へという繰り返しを行います。その際に必ずページ下部のメニューがスクロールするたびに目線に入ってきます。

とはいえ、画面の大きなスマートフォンを片手で持った場合、よほど手の大きい人でも画面の上部は指が届きにくくなってしまうもの。メニューアイコンをタップするためには、スマートフォンを持ち替える必要があります。こうした「持ち替え」に対して、操作上のストレスを感じる人は少なくありません。

このストレスを避けるため、スマートフォン専用のサイトを設計する場合は、メニューアイコンを下部に置くことができないかを検討する必要があります。懸念としては、「ページ下部に大きなメニューがあると次のコンテンツが隠れて邪魔になる」点をクリアすれば、明らかに使いやすい設計のスマホサイトになります。

コンテンツが隠れるような、大きなメニューではなく、丸く浮いているボタン(フローティングボタン)や、メニューの高さに配慮すれば邪魔にならないメニューを配置する事ができ、指の稼働域もkeepすることができるUIになるでしょう。

iPhoneの「Reachability」機能に頼らない

ウェブデザイナーのなかには、iPhoneには「Reachability」機能があるから問題ないと主張する人もいるかもしれません。これはiOS8から新しく搭載された機能で、ホームボタンを2度押しすると親指が届く範囲まで画面がスライドされるというものです。

確かに、この機能を使うことで画面の上部にあるメニューアイコンにも容易に手が届くようになります。しかし、本来画面の下に表示されていた要素は見えなくなってしまいますし、2度押しするという新しい操作をひとつ増やしてしまうことになります。また、当然のことですがAndroidにはこの機能は搭載されていません。

こうしたことを考慮すると、「Reachability」機能を安易に解決手段にするのではなく、あくまで指が届く範囲で操作できるUIを設計するべきでしょう。

「使いにくさ」はユーザー離れの原因にも

大画面スマートフォンが増えてきたことで、スマートフォンサイトUIには、これまで以上に工夫が求められるようになってきました。画面の大きさと操作のしやすさは両立しにくい部分もありますが、何の対策もしないと「使いにくいサイト」と思われてしまい、ユーザー離れの原因になりかねません。特に、購入を迷ったり、買い物途中で別のサイトへ離脱されたりすることもあるECサイトでは、こうした「使いにくさ」は致命傷となる恐れもあります。

ユーザーが使いやすいと感じるECサイト設計のために、今回ご紹介したポイントをぜひ参考にしてみてください。

参考：

 

• How to design for thumbs in the Era of Huge Screens | The blog of SCOTT HURFF
• Designing for Large Screen Smartphones | LUKEW
• The Rise of the Phablet: Designing for Larger Phones | UXmatters
• Larger screen size iOS design implications | Roller