WEBサイトの閲覧の中心が、パソコンからスマートフォンへと移行しつつあります。現在はその過渡期とも言えるタイミング。制作現場でも、スマホ専用サイトの制作、レスポンシブWEBデザインによるスマホ対応、モバイルファーストでスマホサイトのデザインから先に考える…など、さまざまな方法を模索中といった状況があります。

しかし、このような方法論だけではユーザーが満足するスマホサイトは完成しません。ユーザーにとって重要なことは、スマホサイトの使い勝手。そこで今回は、高いユーザビリティを実現し、より愛されるスマホサイトを制作するための10のポイントをまとめてみました。自社のスマホサイトのチェックを行う時にも役立ちます！ぜひ参考にしてみてください。

スマホサイトの使い勝手を高めるための10のポイント

1.PCとスマートフォンの違いを理解する

スマホサイトを制作する際に避けなければならないことは、単にPC版の情報がスマホで問題なく閲覧できれば良いというような意識で、PCとスマートフォンの違いを理解しないまま作ってしまうことです。

PCとスマートフォンでは、画面に載る情報量、利用シーンや目的、使い方などが異なります。PCは落ち着いてデスクの前に座って作業することが多く、画面も大きいので1度に多くの情報を処理できますが、スマートフォンは移動中などのスキマ時間に使用することが多くなります。ご自身の行動を振り返ってみても、面倒な操作が必要なサイトや重くてなかなか開かないページなど、見るのをやめてしまった経験も少なくないのではないでしょうか。

まずはスマートフォンの閲覧環境の特徴、パソコンとの違いをしっかりと理解することから、始めてみましょう。

2.文字サイズに気をつける

移動中に閲覧することも多いスマホサイトは、小さな文字だと読みづらく感じてしまうことがあります。逆にレスポンシブWEBデザインで作られたサイトの見出しなどが、PCの画面に対してはちょうど良い大きさでも、スマートフォンで閲覧する際には大きすぎて、何行にも改行されてしまい非常に読みづらくなる…といった場合もあります。

フォントサイズは情報を伝えるためにとても重要。細心の配慮をしなければ、有益な情報が掲載されていても読む気をそいでしまいます。場合によってはPCサイトよりも文字数を減らすことなども考えて、スマホサイトでの閲覧に最適なフォントサイズ、文字量になるように心がけましょう。

3.ボタンなどのリンクをわかりやすくデザインする

スマホサイトは画面をスクロールして見ていくため、重要なボタンやリンクのあるパーツなども見落とされ、流されてしまう可能性が高くなります。テキストリンクのようなわかりづらい処理はなるべく使わず、大きなボタンにするなど、「これはリンク要素である」と明確にわかる表現にする必要があります。

4.ファーストビューを意識。重要な情報から画面上部に掲載する

最近はiPhone 6、iPhone 6 Plusに代表されるように、スマートフォンが巨大化する傾向にはありますが、それでもPCに比べると1画面に表示される情報量はかなり少なくなります。掲載する情報の優先順位は、PCよりもさらに注意して決めていかなければいけません。サイトの中で1番見せたい情報、ユーザーの求めている情報をしっかりと考え、下層ページへのリンクなどもファーストビューに設けると良いでしょう。

特にレスポンシブWEBデザインでは、PCで何カラムもあるようなレイアウトの情報量を、すべて1カラムで表現し、かなり下までスクロールをしないと必要な情報にたどり着けないようなサイトもあります。このような状態にならないよう、スマホサイトに掲載する情報の吟味は重要です。

5.メニュー操作などにスワイプを効果的に活用する

スマートフォンでは、タップ（画面を軽く叩く）するだけではなく、スワイプ（画面で指を滑らせる）によって操作することもできます。それによって複数枚の画像をスライドギャラリーのように見せたり、隠れているメニューを表示させたり、再び隠したりすることも可能です。

ユーザビリティを考慮すると、前に進むタップだけでなく、前後の行き来などの複数のアクションが行えるスワイプを効果的に活用するとよいでしょう。タップとスワイプをうまく組み合わせて、1つの指でサクサクと操作できる画面づくりをめざしましょう。

6.タップすることの多いパーツを、親指周辺に置く

スマートフォンの操作を行う時は、片手で使うことも多くあります。そこで、頻繁にタップすることのあるものや、重要で押してもらいたボタンなどは、左下に配置しておきましょう。

また、スマホは左手でも右手でも使用する方がいるので、できれば両利きに対応するためにボタンの幅を画面いっぱいになるように配置すると、左右どちらの指でも押しやすくなります。

7.入力フォームを簡潔にしてハードルを下げる

スマートフォンでサイトを見ている人が多いとはいえ、購入や問い合わせなど具体的なアクションを伴う利用となると、PC利用に比べて少なくなってしまうのが現状です。

スマホサイトからも申し込みや問い合わせが増えるようにするために、フォームの入力項目をPCサイトよりも簡潔にしてハードルを下げるなどの配慮が重要になります。スマホサイトでは、必要最低限の情報を入力してもらい、それ以外の項目は時間のある時にPCサイトから入力できるようにするなど工夫してみましょう。

8.スマホの強み、電話での問い合わせボタンを設ける

問い合わせに関して、PCではできないスマホならではの機能として、電話からの申し込みボタンがあれば、タップしてそのまま電話をかけることができる、ということです。

スマートフォンを使っている状況を考えると、面倒な文字入力での問い合わせを促すよりも、電話で問い合わせた方が楽で早い場合も多いもの。電話ボタンの設置も積極的に行っていくとよいでしょう。

9.リキッドレイアウトでデザインする

iPhone 、Androidのスマホの大きさを見てみると、各メーカーからさまざまなサイズのものが発売されており、これにタブレットなども入れると把握しきれないような数になってしまいます。さらに、ほとんどのスマートフォンは、本体を傾けることで画面の縦横の向きを変えられるため、対応しなければいけない場面の幅はさらに多くなります。

それら1つ1つに対して最適な画面を制作することは不可能。ブラウザの表示領域に合わせてコンテンツの幅・位置を可変で表示させるリキッドレイアウトでデザインしておけば、様々な閲覧環境でのユーザビリティを高めることができます。

10.色数は少なくし、フォントの種類も絞る

UI（ユーザーインターフェイス）に多くの色を利用すると、ユーザーを混乱させる原因になります。特に太陽光の下や暗い場所で利用される事も多いスマホサイトでは、できる限りベース2色+アクセント1色の3色以下、もしくは同じ色味の統一したカラースキームを利用するのが良いでしょう。

また、利用するフォントの種類も少なくし、できれば1つに抑えましょう。AppleがiOS7で極細のヘルベチカという書体を採用したことでUI全体の統一性がアップしたように、シンプルでユーザビリティの高いサイトに仕上がります。

今回のまとめ

今回は、スマホサイトならではのユーザビリティ向上のポイントをまとめてみました。制作会社にスマホサイトを依頼する際や、公開前のレビュー時などに活用いただければと思います。自社でスマホサイトを運営しているという方は、さっそくチェックしてみてください。

スマートフォンが普及してきたことで、WEBサイトはこれまでよりもさらに、見るものから使うものへと変化しています。ちょっとした使いづらさのために、せっかく訪れて来たユーザーが、問い合わせたり申し込んだりするのをやめてしまった…などということがないように、集客力強化のためにも、スマホサイトの最適化を進めていきましょう！