Safariの検索バーが下に、求められる親指中心のUIデザイン

最近では、スマートフォンの普及に伴い多くの人がスマホ経由で情報収集を行っており、実際にこちらのサイトもおよそ40%ほどのアクセスがスマホ経由となっています（直近一か月のデータ）。そのため、近年ではWebサイトを作成する際、スマホ画面を意識したUIデザインが必須であり、またアプリ作成時にも同様にそれらを意識する必要があります。特に、最近ではスマホの大画面化も相まって、「親指ゾーン」について考えることは必要不可欠となって言います。本記事では親指中心のUIデザインについて取り上げ、今後マーケター及び開発者が意識すべきUIのあり方について考えていきたいと思います。

関連記事：

ナゼ日本でiPhoneのシェア率は高いのか？

BX（ブランドエクスペリエンス）、CX、UX、結局何が違う？

親指ゾーン

少し前にはなりますが、iPhoneをiOS15にアップデートした人の多くはSafariの検索バーの位置に困惑したかと思います。これまで上部に表示されていた検索バーが画面の下部に移動しており、慣れるまで少し時間がかかったのではないでしょうか？また、Safariに限らず多くのアプリやWebページがメニューバー等を下部に移動しています。これは親指による操作性を向上させることまたUX改善が目的だと考えられます。

近年ではスマホの大画面化に伴い人によっては画面全体を親指だけでは操作できなくなってきています。外部サイトになりますが、こちらの記事ではスマホ上で親指が届く範囲を「親指ゾーンと呼び」ヒートマップにして表示しています。このように、スマホ向けページやアプリを作成する際、開発者は親指ゾーンを意識してUIデザインを行うことが求められます。

親指ゾーンを意識したUIデザイン

ヒートマップを見ると、大きめのスマホを右手で持ったとき画面上部特に左上が届かないことが分かる他、右下も案外親指で触れにくいことが分かります。このことを念頭にUIデザインは行うべきでしょう。

頻繁に利用するものを下部・中部に

例えば、頻繁に利用するメニューバーや検索バーはストレスなく操作できる場所が望ましいため中部、下部に配置するのが適切でしょう。また、運営側として積極的に足を運んでほしいページもその付近に配置すると閲覧率の向上が見込めます。一方で、この範囲は情報量が多かったりスクロールを行ったりする範囲のためため誤って押してしまいやすい場所でもあります。そのため、問い合わせボタンや電話をかけるボタンなど、何かしら重要なアクションが生じるボタンは目立ちつつも四隅などの方が良いかもしれません。

あまり利用しないものを上部・四隅に

また逆に、あまり使わないものは四隅（特に上部）に分散させると良いでしょう。例えば、設定に関するボタンなどは頻繁に利用することはないため左上などに配置されることが多いでしょう。その他にも、ページを閉じるボタンなども誤って操作しにくい上部に配置することが望ましいでしょう。誤って閉じてしまうとこれまでページに残した情報が消えてしまう恐れがあり、ユーザーがそれ以降ページに帰ってこなくなる場合もあると言えます。

関連記事：ECサイトにおけるカゴ落ち率はおよそ70%、その対策方法とは

今後のUIデザインのあり方

これからはPCページのUIばかりでなく、スマートフォン向けのUIを大いに意識する必要があり、それは親指ゾーンを意識するにとどまりません。スマホが大画面化することでPC画面のように情報量を増やせると考える人もいると思いますが、やはりスマホ画面はPCと比較すると小さく、少し情報量を増やすだけでごちゃごちゃとした感じが出てしまいます。

そのため、なるべく画面をシンプルに保つことが重要であり、PCのように全てを1ページに収めるのでなく時には2ページに分けるページングの判断も重要でしょう（メニューボタンを押すとメニューページに移動するなど）。また、ページングを行う際にはユーザーにそう設定されていることを理解してもらう必要があります。画像や文章を横にスライドしたらページが切り替わる設定がなされているページがたまにありますが、そう設定されていると見て分かるようになっていなければユーザーは戸惑うでしょう。シンプルさやスタイリッシュさはスマホUIにおいて重要な要素ですが、ユーザーのリテラシー等を過信してしまうことは操作性の低下に繋がりかねません。

まとめ

スマホの操作性は身近なテーマではありますが、親指の可動域「親指ゾーン」についてはあまり考えたことはなかったかもしれません。近年ではスマホは使えてもPCは使えないという人も増えているように、スマホは企業及びブランドとの大きな接点となっています。本記事で紹介したようにスマホUIの改変はユーザーのブランドに対する印象にも関わってくる他、製品・サービスの購入に直結する要素と言え、マーケターにとっても目が離せない領域です。今一度自社のスマホページ及びアプリを見直してみてはいかがでしょうか。

参考：

Scott Hurff “How to design for thumbs in the Era of Huge Screens“