Travelogue(トラベローグ)

Travelogue

クリックではなくタップ(iPhoneサイト制作のコツ)

PCサイトでは「マウスを使ってクリック」しますが、iPhoneサイトでは「指でタップ」します。このとき指で画面に触れる面積がけっこう広いため「押される」エリアが広くなり、目的のリンク項目の周りにある要素にも意図せず触れてしまう可能性が高くなります。
実際にiPhoneを操作してみるとすぐに分かると思いますが、WebサイトのUIを検討する上でこれはかなり大きな違いになります。

つまり例えば、iPhone用に最適化されていないPCサイトをiPhoneで閲覧時に、テキストリンクがリストになっているメニューのようなところは、まず拡大してからでないと目的のリンクを正確にタップすることは難しいものです。

マウスでなく指でタップすることは現在のスマートフォンの操作の基本なので、iPhoneサイトを制作する際にはこのことを大前提として考えることになります。
具体的には「タップしたときにミスって隣りのメニューやボタンを押してしまわないように配慮する」ということです。

では、ミスって隣りのメニューをタップしないための配慮とはどんなものか?ということですが、具体的に参考になる例を挙げてみたいと思います。

↑上の4サイトではスマートフォン特有とも言えるような特徴的なデザインになっています。ちなみにアイコン(イラスト)が並んでいるこのレイアウトはiPhoneのホーム画面と同じです。
感覚的にとてもタップしやすく間違いもおきにくいと思われます。

↑上の4サイトでは大きなボタンやメニューが目立ちます。それぞれデザインは違いますが、高さのあるボタンが多いようです。特に楽天は正方形に近い形状のボタンになっていて特徴的です。

↑上の4サイトでは、サムネイルと各文章を含むブロック全体がひとつのクリッカブルなエリアになっており、ひとつの大きなボタンのように機能しています。
各ブロックがサムネイルや文章数行分の高さを有しているため、この場合も高さを余分に確保していると言えるでしょう。

このように、iPhone(スマートフォン)サイト制作において画面を指でタップしての操作を念頭にUIをデザインするときは、クリッカブルなエリアを大きく、とりわけ高さには十分な配慮が必要であると考えることができると思います。
また、もしリンク項目自体をあまり大きくできない場合でも、ユーザーがミスって隣のリンクを押してしまうような不便を避けるためには、各リンク項目同士はあまりくっつけない(ある程度は離して配置する)程度の配慮はしておいたほうが良いでしょう。

Pagetop