モバイルフレンドリーなスマホサイトを作成するための10のポイント

2015年の春からGoogleがモバイルフレンドリーなサイトを評価するようになりました。モバイルフレンドリーアップデートにより、ユーザがモバイル端末（スマートフォン、タブレットなど）から検索した場合に、その端末に最適化されたWebサイトが評価されるようになりました。

今回はGoogleに評価されることはもちろん、ユーザーにとって使いやすいモバイルフレンドリーなサイト、特にスマホサイトを作成するためのポイントをまとめました。

「 モバイル フレンドリー」とは？

モバイルフレンドリーとは、Webサイトがスマホやタブレット等のモバイル端末での閲覧に最適化されている状態を指します。

スマホやタブレットが普及する以前のWebサイトは、パソコンでの閲覧を想定しているため、そのままスマホで閲覧すると文字が小さくて見にくかったり、それに伴ってズームやスクロールを繰り返す必要があったりするなど、不便さがありました。

そしてこれは致命的なことで、スマホでサイトを閲覧する状況は電車での移動中であったり、空き時間に閲覧することが想定されるので、スムーズに閲覧できることが重要だからです。

Googleはユーザにとって最適なサイトを検索結果に反映するため、モバイル　フレンドリーアップデートを行ないました。

今回は、共通したポイントもありますが、特に普及が進んでいるモバイル端末であるスマートフォンのモバイルフレンドリー、ユーザビリティに優れたサイトを作成するためのポイントについてまとめました。

モバイルフレンドリーなスマホサイトを作成するための10のポイント

1.ページの表示速度を高速化する

Amazonの調査によって「反応が1秒遅くなると1%の売り上げが下がる」という検証結果が出ているほど、表示速度はコンバージョンに大きな影響を与えます。

スマホの場合、電車の移動中に閲覧するなどの特性もあるため、通信環境が不安定になりやすい環境であっても、高速表示できることが重要です。

スマホサイトを制作・リニューアルする場合は、スマホサイト専用の設計を行いつつ、なるべく画像の使用を避けたり、画像を圧縮して使用したりすることで、表示速度を高速化していきましょう。

2.ボタンはタップしやすい大きさにする

スマホの場合、指でタップして操作する特性上、比較的大きめのボタンでないとクリックしづらかったり、押し間違えたりするなどの事態が起こりやすくなります。

そのため、ボタンなどはタップしやすい大きさに設計することが大切です。

具体的には、44px以上を目安に設定することが望ましいと「iOSヒューマンインタフェースガイドライン」によって定められています。

3.ボタンを右手親指に合わせて配置する

海外サイト・UX mattersの調査によると、片手で操作している人の67%は右手親指で操作しているとされています。

スマホサイトを閲覧する場合、右手親指で操作するユーザの割合の多さを踏まえて、画面上のボタンは右手親指で操作しやすい位置に配置することが大切です。

それによってユーザのストレスを取り除き、コンバージョンの向上につながりやすくなります。

4.ボタンを押したことが実感できるデザインにする

スマホの場合、画面上のボタンをタップした場合、うまく押せたかどうかが分かりづらいという特徴があります。

そのため、ボタンをタップした際、その反応が目に見えて分かるようなデザインにすることが大切です。

例えば、うまく押せた場合にボタンの色を変えたりするなど、「押したことが分かるような効果」を付けることによって、ユーザビリティが高まります。

5.見やすい文字サイズにする

文字を見やすい大きさにすることは、Webサイトのコンテンツを的確に伝えるために重要です。

具体的な目安として、文字は12px以上に設定します。

6.リンクを認知してもらいやすくする

スマホは指での操作になるため、画面上のリンクを認識しづらいという弱みがあります。

そのため、スマホサイトの場合、画面上のボタンに矢印などのアイコンを付けることで、リンクを認識されやすくすることが大切です。

7.電話ボタンを設置する

スマホサイトの場合、電話機能が付いている特性を活かすことが大切です。

サイト内に電話ボタンを設置することで、フォーム入力する手間を減らしつつ

、迅速な問い合わせや予約を行えるため、コンバージョンの向上につながりやすくなります。

特に飲食店予約サイトなど緊急性が高いサイトの場合は、電話によるコンバージョン効果が高まりやすいです。

8.PCサイト版に切り替え可能なリンクを用意する

PCサイトと比較して、スマホサイトは画面に制約がある分、情報量が少なくなりがちです。

そのため、スマホサイトを見て興味を抱いてくれたユーザに対して、より多くの情報を届けるために、スマホサイトからPCサイトに誘導するリンクを設置することが大切です。

その際、リンクに「PC版に切り替える」という表示を付けておくとユーザが認識しやすくなるため、ユーザビリティの向上につながります。

9項目が多い場合はアコーディオン表示にする

アコーディオン表示とは、ある項目ボタンをクリックするとその詳細メニューをボタンの下に表示する手法のことを指します。

スマホの場合、表示領域が狭いことによって、多くの項目を羅列すると見づらくなったり、必要なコンテンツにスムーズにアクセスしづらくなったりします。

アコーディオン表示を実装することで、ユーザにとって分かりやすいメニュー表示になるため、ユーザビリティの向上につながります。

10.選択形式の入力フォームにする

スマホの場合、タップして入力をするため、PCよりも入力作業がストレスに感じやすいという特性があります。

そのため、スマホの入力フォームは、テキストボックスよりも、チェックボックスやラジオボタンなど、選択形式にすることが大切です。

それによって、ユーザビリティが高まりため、フォームからの離脱率の低下につながります。

まとめ

今回は、ユーザビリティが高まるスマホサイト作成のポイントを紹介しました。

PCサイトと比較して、スマホサイトは独自の特性があります。

自社でスマホサイトを作成する場合には、スマホサイトの特性とポイントを押さえた上で、ユーザビリティの高い、モバイルフレンドリーなスマホサイトを作成していきましょう。