モバイルサイト構築のユーザビリティいろは

モバイルユーザビリティ改善のチェックポイント保存版 - 全10回総まとめ（最終回）

モバイルサイトのユーザビリティ改善ポイントをおさらいし、自分でチェックするためのポイントを紹介

この連載では、PCのWebサイトとは異なるモバイルならではのユーザビリティに特化して、モバイルサイト構築におけるユーザビリティの基本、成果を出すためにはどうすればいいのか。制約の多いモバイル端末だからこそ求められるモバイルサイトのユーザビリティ、そのポイントをお伝えします。

TEXT：株式会社IMJモバイルモバイルユーザビリティ研究所

2009年1月から連載してきた「モバイルサイト構築のユーザビリティいろは」も今回で最終回です。そこで今回は、今までの連載内容をおさらいしながら、モバイルサイト構築時におさえておきたいモバイルユーザビリティの総まとめをします。

前半では今までのおさらいをし、最後に自分でモバイルサイトのユーザビリティを改善するためのポイントを紹介します。

モバイルサイト構築時の基本チェックポイント
公式サイトに関するポイント
モバイルメールマガジンに関するポイント
モバイルECサイト構築時のポイント
モバイルFlashサイトの制作ポイント
自分でできる！　モバイルユーザビリティ改善の3ステップ
モバイルユーザビリティ改善のケーススタディ

1. モバイルサイト構築時の基本チェックポイント

1-1. モバイル端末ならではの制約や特性を理解する

モバイルサイトには、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いなど、モバイルならではの端末上の制約が多数あります。モバイルサイトを構築する際には、これらを踏まえたサイト構築が必要です。

また、ユーザーの視線の流れや操作性はPCサイトと大きく異なります。詳しくは第1回で説明しましたが、こうした点を考慮せずに、PCサイトのコンテンツをただモバイルに持ってきただけでは、ユーザーにメッセージを正確に伝えることは難しいでしょう。サイト公開前のテストでは、屋外での利用を考慮してテストすることも欠かせません。

連載第1回で紹介した、どんなモバイルサイトにも当てはまる基本のポイント10個を改めて紹介しておきます。モバイルサイト構築では、これらのポイントを押さえておきましょう。

モバイルサイト全般にいえるユーザビリティ10のポイント

ファーストビューの重視
優先順位の高いものは“画面上部”に掲載
ページ内リンクで操作性を確保
主要導線ページはなるべく軽くして体感速度を理解する
詳細ページでは軽さよりも情報量を優先する
画像“点数”がレンダリングに影響
屋外での閲覧を考慮してコントラストに注意
明度が高く薄い色に注意
フォントサイズの大小を考慮
センテンスごとの改行による可読性の向上

復習モバイルサイト構築前に知っておきたいユーザビリティ10のポイント（第1回）

1-2. サイト全体の文字にメリハリをつけ統一したデザインを心がける

連載第2回では、マークアップ言語の選び方、文字サイズ指定による本文のメリハリの付け方、ナビゲーション設計などを紹介しました。

モバイルサイトはPCサイトと違って細かい数値の指定はできませんが、大、中、小と大まかな文字サイズの調整は可能です。とはいえ、携帯端末やマークアップ言語ごとの表現の制限もあり、文章表現はPCサイトほど柔軟ではありません。文字サイズのルールは、サイト全体の設計や画面設計を左右するので、サイト設計の初期段階でサイト内の要素を洗い出し、文字サイズを要素ごとに設定することで、メリハリのある統一した見た目と使い勝手を提供しましょう。

文字サイズの指定について

復習ユーザビリティを考慮した文字サイズ指定＆ナビゲーション設計のポイント（第2回）

1-3. モバイルサイトのナビゲーション設計について

モバイルサイトのナビゲーションは大きく3つに分類できます。

ヘッダ、フッタを中心としたサイト全体のナビゲーション
アクセスキーのナビゲーション設計
コーナー間での移動ナビゲーション

1のヘッダフッターによる共通ナビゲーションと2のアクセスキーは、うまく連動させてサイト内共通のナビゲーションを設定することで、ユーザーが最低限の操作方法を学習するだけでスムーズに閲覧できる、ストレスの少ない、使いやすいサイトを実現しやすくなります。

また、3のコーナー間での移動ナビゲーションをうまく活用することで、サイトの全体像が認識しづらいモバイルサイトの使い勝手を飛躍的に向上させることができるため、サイト全体の設計時にユーザーのニーズを考慮し、コーナー間ナビゲーションを必要に応じて設定しましょう。

ページの内容にあわせてコーナー間のナビゲーションを設計

1-4. 限られた画面でコンテンツを見やすくわかりやすくする

先にお話ししたように、モバイルサイトのデザインはPCと比べて制限があります。モバイルサイトにおいてコンテンツ自体にあたることの多い「テキスト」をユーザーに見やすく、わかりやすい形で提供するため、次の5つのポイントを考慮しましょう。

見やすくてわかりやすいテキストレイアウト5つのポイント

絵文字の活用方法
全角半角カタカナの使い方
モバイルでも読みやすいテキストの見せ方
絵文字を使わずにテキストを見やすく装飾する方法
画像を使ったレイアウトの調整

前提として1画面に表示できる要素が少ないモバイルサイトにおいては、「文字の代わりに絵文字を使う」「半角カナを使う」などの方法でテキストを短く作ることを意識しましょう。また、“情報のカタマリ”を意識し、背景色や区切り線、見だしの強調などを使ってうまく表現することで、ユーザーにとってわかりやすいテキストレイアウトを実現しましょう。