スマホでも見やすい、最新のスマートサイト設計術

日常生活に欠かせないツールとなったスマートフォン。どんな情報を集めるときも、いまやパソコンを使わず、手軽にスマホで調べものをしてしまいますが、見ているサイトのUIの設計が悪いと、求めていた情報を得られず、結果離脱に繋がってしまいます。
そのような事態を防ぐためにも、今回はスマホサイト設計の際に抑えておきたい4つのポイントをご紹介します。

【１】タッチデバイスに適応したナビゲーションを作る
ユーザーが最短で求めている情報にたどり着くように、サイトにはナビゲーションを用意しなければなりません。例えば、飲食店ならトップの他に『店舗紹介』『メニュー』『アクセス』『予約』などのカテゴリーを設け、ユーザーの欲求に合わせた動線を置くのが親切です。この際、ナビゲーションは、トップページに置いておくか、あるいはアイコンとして表示させるか、もしくはアコーディオンタイプで用意するかは、サイトのイメージに合わせると良いです。いずれにしても、サイトデザインを崩さない上で、タップしやすいサイズのボタンを用意するのが良いでしょう。

【２】画像はスマホディスプレイで閲覧することを想定してサイズを決める
画像を配置するとサイトの雰囲気が一気に華やぎます。しかし、ついPC画面での表示を想定してサイズを決めてしまうとスマホで閲覧した際、なんだか乱雑に見えてしまったり、１枚の画像が細部まで見えなかったり、とその存在意義を台無しにしてしまいます。スマホサイトの画像は、大きく表示するものと、逆に画像を表示させないものを、効果的に決めると良いです。先の例に挙げた飲食店の場合、メイン料理写真は画面いっぱいに表示させて、サイドメニューの料理はあえて掲載しない、というようにするとメリハリがつき、ユーザーにとって価値のある写真になります。

【３】タップできる場所を大きくとる
ナビゲーションをはじめ、ユーザーがスマホでサイトに深く潜るためには、ボタンやアイコンを何度かタップすることが必須になります。その際、タップできるエリアが小さいと、上手に押せなかったり、あるいは意図したボタンと違うものを押してしまったりと、ストレスに繋がります。タップできるのが文字だけでなく、アイコン全体にするなど、タップしやすい大きさのボタンを用意すべきです。また、そのボタンが押せるのかどうなのか、スマホではわかりづらいので、デザイン上で「タップできます！」というアピールができる処理をするのがいいでしょう。

【４】スクロールできる余白を用意する
スマホで情報を探す際、指で上下にスクロールする作業が発生します。ボタンやアイコンで画面を埋め尽くしてしまうと、スクロール可能なエリアが狭まってしまい、動かしづらいサイトとなってしまいます。なので、サイトの左右の柱や、コンテンツとコンテンツの間に余白を作り、タップしても反応のないある程度の空間を作らなければなりません。

以上4点を押さえ、ユーザーにとって使いやすく、運営者も効率的にコンバージョンを増やせる、win-winなサイト作りを目指しましょう。