モバイルサイト構築のユーザビリティいろは
モバイルユーザビリティ改善のチェックポイント保存版 - 全10回総まとめ(最終回)

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

ページ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

リンクを並べる場合は背景色や区切り線を入れる
リンクを並べる場合は背景色や区切り線を入れる
見出しは本文と差別化して見やすくする
見出しは本文と差別化して見やすくする

復習モバイルサイトを見やすくする絵文字活用&テキストレイアウトのポイント(第3回)

次のページへ

ページ

この記事が役に立ったらシェア!
tweet5このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

人気記事トップ10(過去7日間)

今日の用語

パーミッション
もとは「許諾」を意味する言葉。Webの世界では、サーバー上でのアクセス権を表す場 ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore