左右対称デザインが変えるスマホサイトの操作性

近年、スマートフォンのディスプレイの大型化が目立ってきました。
それに伴って、両手でスマートフォンを操作することも増えたかもしれません。
しかしながら、片手で操作するシーンというのは電車の中や街中など少なからずあるはずです。

つまり…
「 片手でスマートフォンが操作出来た方がいい！ 」
そういうことになりますよね！

しかし、実際のところはどうでしょうか？
世の中に溢れているスマートフォンサイトは右上にハンバーガーメニューボタンを設置している場合がほとんどです。
これでは右手でスマートフォンを操作するなら片手で操作出来ると思いますが、左手で操作する人の場合は非常に難しいですよね。
ユーザー体験の向上のために、この問題を解決しましょう。

左右対称のデザインにすれば利き手関係なく片手で使える？

実際に左右対称のデザインで作成してみました。
【 左右対称デザインサンプル 】 GLOBAL WINE CIRCLE（GitHubはこちら）
JavaScriptなどの動きの部分は怪しいところがありますが…
今回見ていただきたいのは左右対称デザインにすれば本当に片手で操作が出来るかどうかというところです。
iPhone6s(4.7インチ)でも、Galaxy S5(5.1インチ)でも問題なく操作することが出来ました。
他にも多数のスマートフォンで、かつ自分以外の人にも操作してもらいましたが、片手で操作してもらうことが可能でした。
（スクエア型のスマートフォンなどではなく、通常の形状のスマートフォンに限定しています。）

左右対称デザイン導入にあたって考えることは…？

1.コンテンツ量は多くないか。

コンテンツ量が多いウェブサイトの場合は左右対称にすることで、1画面あたりのボタン量が減ってしまいます。
そうした時にユーザー体験が悪化しないか検討することが必要です。
焦らずに一度考えてから設計に移りましょう。

2.左右対称になっているか。

左右対称になっていなければそもそも「左右対称デザイン」を名乗ることはできません。
必ずカンプ作成後（もしくはコーディング後）にもう一度、左右対称になっているか確認しましょう。

3.横空間を使えなくても、ボタンの高さや余白を減らさない。

これをしてしまうと本末転倒です。
この左右対称デザインにする目的はユーザー体験の向上です。
それにも関わらずボタンの高さを小さくしたり余白を減らしてしまうと誤操作や見辛さに繋がってしまうので、
縦に伸びるのが困る場合は左右対称デザインはやめましょう。

4.ボタンの横幅に気をつける。

サンプルを参考に適度な余白をあける。画面幅MAXでボタンを作成すると誤操作に繋がります。
また、小さすぎると片手で操作が出来なくなるので画面幅をwidth100%とした場合、ボタン幅はwidth80%〜90%あたりが適切です。

5.コンテンツの横スクロールについても検討が必要。

両手操作の場合に比べて、片手操作の場合はコンテンツの横スクロールで誤操作を起こす場合が多いです。
どうしても必要で無いならば、別の設計も考えてみる方が良いです。

もっとユーザー体験向上を目指しましょう。

同じような形式に陥りがちなスマートフォン向けWebサイトですが、本当にそれがユーザーにとって「使いやすい」のか。もう一度考えてみましょう。
もちろん、どのWebサイトも似たような形というのは「慣れ」というユーザー体験を与えることに繋がるので、悪いことではありません。
私たちWeb制作者は「左右対称デザイン」に限らず、もっと使いやすくなる設計を常に考える癖を付けられるといいですね！