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

モバイルならではのユーザビリティを押さえたサイト構築のポイントを伝えるこの連載。前回の「モバイルサイト構築前に知っておきたいユーザビリティ10のポイント」では携帯電話の端末特性を説明しましたが、第2回では、モバイルサイトを設計するうえで基本となる考え方を紹介したいと思います。

ユーザビリティに優れたモバイルサイト設計の考え方

さまざまな場面で利用されることの多い携帯向けWebサイト（以降“モバイルサイト”）ですが、サイト構築のゴールであるユーザーアクションや頻繁なサイトへのアクセスを誘発させるためには、ユーザーにとって使いやすいサイトを構築する必要があります。

今回はユーザーが使いやすく、目的を達成しやすいモバイルサイトを設計するうえで基本となるマークアップ言語や文字サイズの考え方、ナビゲーション設計の考え方について紹介していきます。

1. 対応端末とマークアップ言語について
2. 文字サイズの指定について

3. サイト全体のナビゲーション
4. コーナー間での移動ナビゲーション
5. アクセスキーの使い方

はじめに――モバイルサイト構築前のルール作り

1. 対応端末とマークアップ言語について

3キャリア共通のモバイルサイトを構築する場合、サイトのマークアップ言語を大きく分けると、第二世代端末はHTML（CHTMLなど）、第三世代端末はXHTMLに分けられます。

モバイルサイトを構築するときには、世代別のマークアップ言語を把握したうえで、サイトの目的やターゲットとするユーザーによって、HTMLかXHTMLのどちらかを採用します。また、第二世代、第三世代の両方に対応する場合は、HTMLとXHTMLそれぞれで記述したサイトを用意し、アクセスしてきた携帯端末（ユーザーエージェント）に応じて振り分けるシステムを利用することが一般的です。では、具体的にどういった場合にHTMLとXHTMLを選択すればいいのか、いくつか紹介しましょう。

HTMLを使用したサイト構築

ドコモのmovaなど、第二世代の端末のユーザーをターゲットに加える場合は、HTMLをマークアップ言語として使用します。その場合、現在利用されている携帯端末のほとんどに対応できますが、第二世代携帯端末特有の容量制限、HTMLでは使用できないタグなど、制限があるためサイトの表現力はXHTMLのサイトより劣ってしまいます。

また、総務省が示した方針により、主にmovaとDoPa使用されている周波数帯の使用期限は2012年7月24日までとされています。電気通信事業者協会（TCA）発表の2009年1月末現在の事業者別契約数でも、第二世代を第三世代が上回っていますので、現時点ではよほどのことがない限り、HTML版のみのサイト構築はオススメしません。

XHTMLを使用したサイト構築

FOMAやWINなどの第三世代の携帯端末のみをターゲットにした場合はXHTMLをマークアップ言語に使用します。その場合、第二世代の携帯端末に比べて1ページの容量、使用可能なタグが増えるため、サイトの表現力は上がりますが、第二世代の携帯端末はXHTMLでマークアップされたモバイルサイトを閲覧できないため、第二世代の携帯端末用にHTMLで記述した画面を表示させるなど、別途対応が必要となります。

ただし、XHTML対応の第三世代端末の中でもキャリア、機種により使用できるタグが微妙に異なります。3キャリア共通のXHTMLでマークアップする場合はXHTML/CSSに制限があり、使用可能なタグが比較的少ない「iモードXHTML」で使用可能なタグを基準にすると制作しやすいでしょう。

HTMLとXHTMLの両方を使用したサイト構築

システムを導入して、第二世代の携帯端末はHTML、第三世代の携帯端末はXHTMLのサイトに振り分ける方法です。より多くのユーザーをサポートし、世代にあわせたデザインを提供することができますが、HTML/XHTMLの両方を管理しなければならないため、運用の負担は多くなります。

TIPS

今現在、第二世代の携帯電話を使用し続けているユーザーは、携帯電話もしくはモバイルサイトに興味がないユーザーだと推測されます。ですので、これから新しくモバイルサイトを立ち上げる場合、強く公共性を求められるサイトでなければ、ユーザー数の最も多い第三世代を対象とし、XHTMLをベースとしたサイト構築にするのがいいでしょう。

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

モバイルサイトはPCサイトとは違って細かい数値の指定はできませんが、大、中、小と大まかな文字サイズを調整する事ができます。

最近の傾向として図1のように、1行でまとめたいリンクやメインコンテンツではないリンクの文字サイズを小さくして、サイト全体の文字にメリハリをつけることが多くなっています。

サイト設計の初期段階で、サイト内の要素を洗い出し、文字サイズを要素ごとに設定することで、メリハリのある統一した見た目と使い勝手を提供することが可能になります。

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

マークアップ言語やサイト内での文字サイズのルールは、サイト全体や各画面の設計に大きな影響を与える要素となるため、事前に採用する言語やルールを策定したうえで、具体的なサイト設計に進みましょう。

使いやすいモバイルサイトナビゲーション設計3つのポイント

3. サイト全体のナビゲーション

モバイルサイトの設計時で特に重要な要素の1つが、サイト全体に共通するナビゲーションの設計です。モバイルサイトの場合、「ヘッダー」「フッター」およびページ遷移に関するナビゲーション（「次へ」「戻る」や「▲上へ」など）、「アクセスキー」によるナビゲーションが該当します。

サイト内で共通するナビゲーションを設定することで、ユーザーは最低限の操作方法を学習するだけでスムーズに閲覧できるので、ストレスの少ない使いやすいサイトになるでしょう（図2）。

図2　全体ナビゲーションの設計例

4. コーナー間での移動ナビゲーション

モバイルサイトは携帯端末の性質上、1直線のフローになりがちです。別コーナーの関連するページへ移動するリンクがないと、ユーザーはサイトを回遊しにくく、関連ページに気づく前にサイトから離脱してしまう可能性があります（図3）。

図3　コーナー間のナビゲーションを設置

そのため、ユーザーが頻繁にアクセスするページには、フッター部分に関連するコーナーのリンクを追加し、コーナー間を移動できるようにしましょう（図4）。

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

5. アクセスキーの使い方

ページ内のリンクにボタンを割り当てるアクセスキー（HTMLのaccesskey属性）は、PCサイトではほとんど使われることのない機能ですが、モバイルサイトでは、サイト内を移動する方法として頻繁に活用されています。

アクセスキーを設定する場合は、どのリンクに携帯端末のどのキーが割り当てられているかわかりやすくするために、数字の絵文字（もしくは数字）とセットで設定します（図5）。

図5　アクセスキーの使い方

また、図6のように、携帯端末のボタンを十字キーに見立て、キーボタンとブラウザが移動する方向をあわせることで、ユーザーがキー操作を学習する負担を減らすことができます。アクセスキーの設定はページ単位で行うのではなく、サイト全体のナビゲーション構造や機能をもとに設定しましょう。

図6　アクセスキーの振り分けと使い方の一例

PCサイトに比べモバイルサイトは、ユーザーがサイト全体の構造を理解しづらいものです。ですから単純にリンクを追加しただけでは、モバルサイトのナビゲーションとしては不十分です。

サイト内のコンテンツを洗い出したうえで、サイト全体に関わるナビゲーションや関連ページへ移動できる関連リンク、およびアクセスキーの利用方法を総合的に設計することが、直感的に利用できる「ユーザーにとって使いやすいモバイルサイト構築」の最大のポイントとなります。

今回はモバイルサイト構築の基本として採用するマークアップ言語や文字サイズ、サイト全体のナビゲーションに関する考え方を紹介しました。しかし、サイト全体のナビゲーションが使いやすいものであっても、肝心のコンテンツが読みづらく、わかりづらくてはサイト全体の使い勝手として「使いやすいモバイルサイト」とは言いがたいでしょう。そこで次回は、より読みやすくて使い勝手の良いコンテンツ作成のポイントとして、絵文字の活用方法やレイアウトの工夫の方法を紹介する予定です。