Web ユーザビリティ

はじめに

美しく、そして機能的なデザインは誰もを惹き付ける不思議な魅力を持っています。 建造物、陶器、彫刻、絵画、刀剣など、文化的、または歴史的に価値のある芸術は、長い時間をかけて無駄な部分が削ぎ落とされ、機能美と表現されるまでに進化を遂げています。

情報にもデザインという考え方が存在し、ユーザビリティはあらゆるデザインに適用、または応用できます。 "良いデザイン" と評価されるものには、高いユーザビリティが備わっています。 しかし、"良いデザイン" とは何かを定義することが難しいように、ユーザビリティも広い意味を持ちます。 このページでは、Web におけるユーザビリティ、つまり "Web ユーザビリティ" について説明し、考えていきたいと思います。

本記事の対象となる読者

本記事は、Web デザイナーだけではなく、プログラマー、プロジェクトマネージャーなど、Web に関わるすべてのエンジニアが読者の対象となります。 なぜなら、コンピュータとユーザインターフェースのデザイン開発において、良し悪しの判断は主観的になりやすく、開発現場で建設的な議論を行うには、関係者が正しい基礎知識が必要になるからです。 もしも、開発現場の誰もユーザビリティの知識がない場合、様々な意思決定は声の大きい人の意見に流され、プロジェクトは思うように進まないでしょう。

ユーザビリティの評価に正解はありません。 これから紹介する Web ユーザビリティのデザインパターンも、過去に誰かが決めた定義に過ぎません。 また、Web ユーザビリティの歴史は浅く、かつ不変的なものでもないため、時代によって求めるユーザビリティは変化する場合もあります。 既に定義済みのユーザビリティや、それらの背景、歴史、技術、理由などを知ることは重要ですが、求められているユーザビリティとは何かを常に模索する姿勢がエンジニアには求められます。

Web ユーザビリティとは

"ユーザビリティ (Usability)" とは、有用性と訳され "使いやすさ" や "使い勝手" といった意味合いで使われます。 語源は、use (使う) と able (できる) から来ており "使えること" が本来の意味です。 Web ユーザビリティとは、特に Web デザインにフォーカスしたユーザビリティのことを指します。

Web デザインには様々な概念があります。 一般的には最上位の概念に User Experience Design (UX) があり、User Interface Design (UI) と、Information Architecture (IA) が内包されます。 ユーザビリティは UI に内包され、IA に一部含まれます。 ただし、これらの概念の包括関係には様々な議論があるため、以下に示す図が正しいとは限りません。

UX/IA/UIの概念図
UX/IA/UIの概念図

ユーザビリティという言葉は非常に曖昧で、捉えにくいものです。 なぜなら、製品の特性、使用するユーザ、利用状況などによって "使いやすさ" は変化するためです。 ある人にとってはユーザビリティが高いと評価されるものであっても、別の人からはユーザビリティが低いと評価される場合もあります。

そのような問題に対応するため、ユーザの要求や制限などを考慮して設計を行う考え方として "ユーザ中心設計 (User Centered Design:UCD)" があります。 ユーザ中心設計が他のデザインの考え方と大きく異なるのは、ユーザがシステムや機能に合わせるのではなく、ユーザが欲しいインターフェースが何であるかを考え、それらを最適化する点にあります。

Jesse James Garrett が考案した "5 Planes Model" は、ユーザのニーズや目的から視覚的デザインまでを 5 階層に分けて定義したモデルです。 最初に最下層のユーザのニーズや目的を定義し、上位層にシフトしながらデザインを具現化していく設計手法です。 この手法は、ユーザにフォーカスした設計が可能であり、ユーザの求めるデザインを実現する可能性を高めます。

Jesse James Garrett の 5 Planes Model
Jesse James Garrett の 5 Planes Model

しかし、ユーザが求めるデザインはユーザ毎に異なるため、万人に受け入れられる標準化された Web デザインというものは存在しません。 また、同じくユーザビリティにも多くの意味が含まれているため、合意された定義は存在しませんが、代表的な定義として 2 つあります。 国際標準化機構による "ISO 9241-11" と、ヤコブ・ニールセンの著書「Usability Engineering (日本語訳:ユーザビリティエンジニアリング原論)」に登場する "ユーザビリティ特性" の 2 つです。

ISO 9241-11/JIS Z 8521

ISO 規格である ISO 9241-11 は、ユーザビリティを以下のように定義しています。

  • ユーザビリティ:特定の利用状況において、特定のユーザによって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、ユーザの満足度の度合い。
  • 有効さ:ユーザが指定された目標を達成する上での正確さ、完全性。
  • 効率:ユーザが目標を達成する際に、正確さと完全性に費やした資源。
  • 満足度:製品を使用する際の、不快感のなさ、および肯定的な態度。
  • 利用状況:ユーザ、仕事、装置 (ハードウェア、ソフトウェア、および資材)、ならびに製品が使用される物理的、および社会的環境。

1998 年に成立した ISO 9241-11 は、JIS Z 8521として 1999 年に JIS 化され、ユーザビリティに関する厳密な定義が行われています。 具体的には、ユーザビリティとは "ある製品が、指定された利用者によって、指定された利用の状況下で、指定された目標を達成するために用いられる際の有効さ、効率及び満足度の度合い" として定義されています。 有効さ (effectiveness) は、"ユーザが、指定された目標を達成する上での正確さと完全さ"、効率 (efficiency) は "ユーザが、目標を達成する際に正確さと完全さに費やした資源"、満足度 (satisfaction) は "不快さのないこと、及び製品使用に対しての肯定的な態度" という定義がされています。 有効さと効率の 2 つの概念は、相互排他性があります。 また、満足度は部分的に有効さと効率に従属する関係性を持ちます。 なぜなら、有効であり効率的であれば、それによってユーザが満足感を得られるからです。

ISO 9241-11 のユーザビリティの定義は、ヤコブ・ニールセンの定義と比較して広義の意味になっており、大きなユーザビリティ (big usability) と呼ばれることがあります。 ISO 9241-11 のユーザビリティの定義は、その後、ISO 13407 や ISO 20282、CIF (ISO 25062) などの各種の規格においても用いられることになり、ユーザビリティに関する標準的定義であると言えます。

ユーザビリティ特性

ヤコブ・ニールセンの著書「ユーザビリティエンジニアリング原論」では、インタフェースのユーザビリティとは、以下の 5 つのユーザビリティ特性を定義しています。

  • 学習しやすさ:システムは、ユーザがそれを使ってすぐ作業を始められるよう、簡単に学習できるようにしなければならない。
  • 効率性:システムは、一度ユーザがそれについて学習すれば、後は高い生産性を上げられるよう、効率的な使用を可能にすべきである。
  • 記憶しやすさ:システムは、不定期利用のユーザがしばらく使わなくても、再び使うときに覚え直さないで使えるよう、覚えやすくしなければならない。
  • エラー:システムはエラー発生率を低くし、ユーザがシステム使用中にエラーを起こしにくく、もしエラーが発生しても簡単に回復できるようにしなければならない。また、致命的なエラーが起こってはいけない。
  • 主観的満足度:システムは、ユーザが個人的に満足できるよう、また好きになるよう楽しく利用できるようにしなければならない。

上記の定義は、人間工学、認知工学、感性工学的な側面を考慮したものになっていますが、網羅的、かつ相互排他的になっていないため、概念定義としては不十分なものとなっています。 また、学習のしやすさや効率などの要素は、"問題がない" ことと定義しています。 これは 0 レベルからマイナス方向に減らないようなネガティブな評価方法であると言えます。 一方、ISO では 0 レベルからプラス方向に増やすようなポジティブな評価方法になります。 その意味で、ヤコブ・ニールセンのユーザビリティは、小さなユーザビリティ (small usability) と呼ばれることがあります。

また、ユーザビリティとユーティリティを合わせた概念として "ユースフルネス (usefulness)" という上位概念を位置付けています。 これは ISO9241-11 のユーザビリティ定義に近いものになっています。 しかし、ヤコブ・ニールセンの定義するユーザビリティは、ISO 9241-11 よりも意味が限定的であり、ISO 13407 とは内包関係にあります。 ヤコブ・ニールセンの定義では、"ユーザが望む機能をシステムが満たしているか" は、ユーティリティ (実用性) に含んでいます。 しかし、ISO 13407 の定義するユーザビリティは "その機能をユーザがどれくらい便利に使えるか" という意味であり、ユーティリティとは区別しています。

ヤコブ・ニールセンのユーザビリティ特性については 良質なWebページの作り方 も参照して下さい。

情報アーキテクチャ

Web サイトを作る上で最初に解決するべき重要な問題のひとつに、情報アーキテクチャ (ディレクトリ構造などの情報の分類) の検討があります。 www ディレクトリが公開ディレクトリである場合、一般的な Web サイトのディレクトリ構造の例は以下のようなものがあります。

/www
 |-- /css
 |    |-- style.css
 |
 |-- /img
 |    |-- logo.png
 |
 |-- /js
 |    |-- script.js
 |
 |-- index.html
一般的な Web サイトのディレクトリ構造

Web サイトのディレクトリ構造の決定は以下の 3 点において重要な意味を持ちます。

  1. 情報の "見つけやすさ" と "探しやすさ" (ファインダビリティ)
  2. Web サイトの規模が大きくなった場合の拡張性 (スケーラビリティ)
  3. 公開したページのパーマリンクと被リンク

ファインダビリティはユーザビリティに勝るという言葉があります。 どれだけ洗練されたユーザビリティを実装しても、情報に辿り着くことができなければ意味がないためと言われているのが所以です。 これは、情報アーキテクチャと言うより SEO の分野に近くなりますが、サイト内のディレクトリ構造を整えることは管理や運用コストを下げるだけでなく、ユーザやクローラにも良い影響を与えます。

Web サイトを大きく育てていく場合は、今後の拡張性について考慮するべきです。 例えば、公開ディレクトリ直下にすべての HTML ファイルを格納すれば早い段階で収集がつかなくなります。 これは PC のデスクトップにフォルダ分けをせず様々なファイルを置いていく様子に似ています。 今後の拡張性を考えるならば、一定のルールやポリシーに従ってディレクトリを配置し、一度構造を決めたら変更は行わないようにしましょう。

もしも公開ページが含まれるディレクトリが、何かしらの事情で変更を余儀なくされる場合は、その影響について知っておくべきです。 公開ページのディレクトリが変わると、(必ずしもそうではありませんが、一般的には) URL が変更になります。 URL が変更になった場合、サイト内外からのすべての被リンクが影響を受けます。 その結果、対象の URL が見つからずに 404 エラーが返されます。 その他にも検索エンジンのクロールエラーが発生したり、SNS で獲得した被リンクがすべて無効になるなどの影響も含まれます。

ページを公開した後は、可能な限り変更しない方が良いでしょう。 Web サイトのリニューアルなどに伴い、大幅にディレクトリ構造を変えた例もありますが、Web サイトの構造を整理できるメリットの代償として、大きなデメリットを受ける可能性があります。

情報の分類

情報の分類方法は様々な方法があり、考え方の違いによっても大きく異なります。 例えば、他人の PC を操作した経験がある人は、アクセスしたい目的のファイルがどこに分類されているのか迷子になったことはないでしょうか。 情報を分類して整理するということは簡単そうに見えて、実は非常に難しい問題なのです。

例えば、多くの情報を所蔵している図書館では、どの図書館でも情報がある程度決められたルールで整理されています。 そのため、初めて訪れた図書館でも読みたい本がどの棚に置かれているのか、それほど迷わずに到達できます。

Web サイトで情報を分類するときもこれと同じ問題に直面します。 ただし、情報の分類方法はひとつではないため、Web サイトの特性に合わせた分類方法を選択しなければユーザは混乱するでしょう。 分類方法には "正確に情報を分類するパターン" と "曖昧に情報を分類するパターン" の 2 種類があります。 それぞれのパターンはどのようなものか順番に見ていきましょう。

正確に情報を分類するパターン

情報が正確に分類されたパターンでは、初めて見る場合でも情報がどこに分類されているか簡単に理解できるパターンになっています。 例えば、国語辞典や電話帳などの "あいうえお順" になっているパターンなどが該当します。 これは "既知項目検索 (Known-item search)" と呼ばれ、何が必要か分かっており、それを言葉で表現でき、どこから探し始めればよいか明らかである場合に有効です。 情報を正確に分類するパターンでは、情報を分類するための曖昧さはなく、設計や保守も比較的簡単になります。

アルファベット順

英語圏では "アルファベット順" のみですが、日本語圏では "あいうえお順" と "アルファベット順" の両方が使われます。 そのため、しばしば一般的に使われている英語の用語を探すときは、カタカナの項目を探せば良いのか、アルファベットの項目を探せば良いのか迷う場合があるため、厳密な意味での曖昧さを排除しきれませんが、アルファベット順は正確に情報を分類するパターンに属します。

時系列順

プレスリリースのニュースなどでは時系列順でまとめられており、最新の情報が上位に掲載されるようになっています。 その他にも、歴史の本、日記、TV の番組表、雑誌のバックナンバーなどは、時系列順での分類が適している情報であると言えます。

曖昧に情報を分類するパターン

アメリカの図書館学者メルヴィル・デューイが 1873 年に創案した "デューイ十進分類法" という以下の 000 ~ 900 まで大別する図書分類法があります。 1876 年に初版が公刊され現在では以下の分類になっています。

  • 000:コンピュータサイエンス、情報および総記
  • 100:哲学および心理学
  • 200:宗教
  • 300:社会科学
  • 400:言語
  • 500:自然科学および数学
  • 600:技術
  • 700:芸術
  • 800:文学および修辞学
  • 900:歴史および地理

アメリカでは公共図書館の 95 %、大学図書館の 25 % で使用されていますが、日本では洋書に対して公共図書館で 1 %、大学図書館で 5 % に留まるため、見たことがない方もいるかもしれません。 このような、曖昧に情報を分類するパターンがアメリカの図書館で広く採用されている理由は、自分が何を探しているのか探している本人すらよく分かっていない場合が多いためです。 ぼんやりした情報しか手がかりがない場合、曖昧に情報を分類するパターンは正確に情報を分類するパターンに比べて便利だと感じる場合があります。

曖昧に情報を分類するパターンでは、作業が大変で内容の分類も困難ですが、正確な情報を分類するパターンよりも高い価値をユーザに提供できる場合が多いのです。 曖昧な情報を分類するパターンが成功するかどうかは、分類の質と個別項目の配置にかかっており、厳密なユーザテストが必要になります。 多くの場合、情勢の変化に伴って出現する新規項目の分類に対して、既存項目のメンテナンスをすることになります。 では、曖昧に情報を分類するパターンには何があるのかを見ていきましょう。

トピック

情報をテーマやトピック毎に分類することはユーザに大きな価値を提供しますが、作り手側からすると非常に厄介な分類方法になります。 トピック毎に分類しているサイトは多くありませんが、大半のサイトでは検索機能によりサービスを提供しています。 例えば、Wikipedia などの百科事典に見られる体系では、広範囲のわたって知識に関する情報が網羅されています。

トピックによる分類を行う場合、範囲を広く定義することが重要です。 ユーザがサイト内検索によって期待するコンテンツを見つけられるように全体を設計するようにしましょう。

タスク

タスクの分類方法では、コンテンツやアプリケーションをプロセス、機能、またはタスクの集合にまとめることができます。 この分類方法は、ユーザが実行しようとしている優先度の高いタスクが少数しかない場合に適しています。 例えば、Office の Word、Excel などのリボン形式にまとめられたタスクなどが一般的な例です。

Web サイトでのタスク指向の分類は、ユーザがいくつかの操作を行う Amazon などの電子取引サイトなどで見られます。 電子取引サイト以外でも Web サービス、またはアプリケーションなどでもタスク指向の分類方法が適しています。

ユーザ

Web サイトに訪問するユーザ層が複数存在する場合や、多くのリピーターが利用する場合は、ユーザ層別の体系が適している場合があります。 例えば、Amazon ではユーザの購入履歴や、商品の特性からオススメの商品などの情報が自動的に表示されます。 その他にもユーザ別の情報を表示する事例は、Youtube や Google のパーソナルサーチなど多岐に渡ります。

ただし、ユーザ別の分類は、オープン形式である場合とクローズド形式の 2 種類あります。 オープン形式の場合は、ユーザが自分を対象にしたコンテンツ以外に、他のユーザを対象にしたコンテンツにもアクセスできます。 一方、クローズド形式では他のユーザを対象にしたコンテンツにはアクセスできません。 オープン形式の場合は、重要な情報が含まれる場合があるため、公開範囲の設定やセキュリティに関する問題があります。 そのため、どちらの形式を選択するかは、サイトの特性によって選択すると良いでしょう。

メタファー

メタファーとは、新しいものを親しみやすいものに関連付けることです。 これはユーザビリティを向上させるために、多くはユーザの理解を助けるために使われる手法です。 例えば、デスクトップにコンピュータ、フォルダ、ゴミ箱などがインターフェースにメタファーを適用した例になります。 ユーザはこれらのメタファーのおかげで、機能を直感的に理解できます。

メタファーでは、多くの人が直感的に理解しているものに関連付けることが求められます。 関連付けられたものが何であるか知らないユーザにとって、そのようなメタファーは役に立ちません。

Web の世界では、このメタファーはモバイルにおけるメニューのアイコンなどに利用されています。 モバイルは画面サイズが限られているため、デスクトップほど多くの情報を表示できません。 そのため、メニューなどを文字ではなくメタファーを用いたアイコンなどで表現しています。

ラベリング

ラベリングとは、Web サイト上の情報に、"タグ" と呼ばれるラベルを付け、検索できるようにする分類方法です。 ラベリングは、一般的にタグ付けを行うこと自体を指しますが、個人の Web サイトであれば管理者がラベリングを行いユーザは変更できません。 これに対して、ユーザが情報に対して自由にタグを付けて分類することは "フォークソノミー (folksonomy)" と呼ばれ区別されます。 フォークソノミーを導入しているサイトとしては、Flickr、はてなブックマーク、ニコニコ動画、pixivなどがあります。

ラベルの目的は情報を効果的に伝えることです。 ただし、ラベルは多ければ良いというものではありません。 不適切なラベリングは、ユーザに混乱を与えるだけです。 フォークソノミーが発達しているサイトでは、ユーザ自身が考えた言葉による分類がなされ、情報へのアクセスがしやすいものになっているため、参考になるでしょう。

ラベルの設計

ラベルの設計は単純のように見えて非常に難関です。 言語自体が曖昧であるため、言葉のゆらぎ (多義性) を排除できず、類義語、同音異義語の考慮も必要になり、コンテキストが異なれば使う言葉も異なるためです。

ラベリングにおけるガイドラインとしては、"最小単位" と "一貫性" です。 ラベルの最小単位では、テーマの範囲を小さくすれば、より明確かつ効果的に情報を表現するキーワードを見るけることができます。 ラベルの一貫性では、キーワードの粒度、種類、総合性を考慮しましょう。

ラベリングは正解がないため、難しく考えてしまいがちですが、自動化する方法もあります。 WordPress では、コンテンツを分析して最適なキーワードを自動的にタグとして付けてくれるタグクラウドのプラグインがあります。 また WordPress のプラグイン以外にも同様のタグクラウドサービスもあります。

トップダウンとボトムアップの検索

ある情報にアクセスする場合、多くのユーザは検索エンジンを利用します。 検索エンジンは Web の膨大な情報の中からユーザが探している情報に最も近いページを検索結果に掲載します。 このように Web 全体を横断する検索方法は "トップダウン" の検索方式と呼ばれるのに対して、サイト内を横断するラベリングは "ボトムアップ" の検索方式と呼ばれます。

ラベリングは、サイト内における同一のカテゴリに属する情報を分類するための強力なツールです。 Amazon などでオススメの商品が表示される仕組みは "協調フィルタリング" と呼ばれるアルゴリズムのおかげですが、ラベリングは協調フィルタリングすら上回る利便性をユーザに与える場合があります。 ラベリングの恩恵はそれだけではありません。 ブログに代表されるような雑記は情報の分類が非常に難しい場合がありますが、ラベリングを行うことでコンテンツの分類コストを大幅に下げることができます。

セマンティック Web

セマンティック Web とは、Web ページの情報にメタデータを付与して意味を伝えたり、情報の収集や分析などができるようにすることです。 近年では、Google がリッチスニペットを利用して検索結果に反映するなどの応用例もありますが、セマンティック Web 自体は普及には至っていません。

セマンティック Web はこれまで紹介した方法とは異なり、ユーザに直接的な影響を与えません。 Web ページに埋め込まれたメタデータを Google などの検索エンジンのクローラに対して Web ページの情報を正しく収集・分析・評価させることで、検索を行ったユーザに副次的な効果を与えます。

多くのユーザはトップダウン形式で情報にアクセスすると考えた場合、ある程度の SEO は考慮した方が良いでしょう。 SEO については、Google 検索エンジン最適化のページを参照して下さい。

ファインダビリティ

ファイダビリティ (Findability) とは、情報の見つけやすさを意味します。 ファインダビリティの概念は Web だけではなく、多くの情報の中から目的の情報を探し出すこと全般に通用します。 例えば、図書館の中から目的の本を探したり、百科事典の中から目的の項目を探したりするなどです。 Web は非常に大きな情報の集合体です。 ユーザは、その多くの情報の中から目的の情報を見つけなければいけないため、ファインダビリティの概念が重要視されています。

"情報を検索する" という機能は極めて難しいものです。 同一のキーワードで検索を行っても、検索結果の評価はユーザによって異なるためです。 もしかすると、同一ユーザであったとしても、状況次第で評価が変わるかもしれません。 人工知能、情報の視覚化、パーソナル検索、セマンティック Web などの技術の向上により、検索における諸問題が解決されるという意見もありますが、現状は否定的な意見が多数派です。 "情報の検索" は、これからもノイズが混じり、変則的で、ユーザのニーズや、抱える問題を解決するための完璧な結果は返せないという見方をされています。

検索とは何か?

検索は多くの情報を返してくれます。 天気予報、株価、交通状況、スポーツ試合の結果などです。 あまりにも多くの情報を返すため、困ったら何でも検索すれば解決するという錯覚を起こすほどです。 実際、ユーザは様々な問題を解決するソリューションとして検索を使い、答えやヒントを知ろうとします。

しかし、Web を検索することが答えを知る唯一の方法ではありません。 例えば、家の鍵はどこにしまったのだろう?、両親の結婚記念日はいつだっけ?、体調が悪いけど何かの病気だろうか?などです。 それらの質問を投げかける相手は Web の検索機能ではありません。 自分の家族、または医者に質問することで答えが得られるパターンの質問になります。 ただし、それらの社会的、または社交的な質問についても Web の検索機能を使うユーザが増えてきています。

Google はトップページに "I'm feeling lucky" ボタンを設置しています。 このボタンは、検索結果のトップに掲載されるページに直接アクセスするためのボタンです。 しかし、実際に情報を検索する場合、様々なページをブラウジングして答えを見つけようとします。 それは、売り場を歩き回ったり、棚を物色したり、TV 番組をザッピングしたり、音楽をシャッフルするように、"セレンディピティ" を呼び込む一種の運任せになっている側面もあります。 ユーザが時間をかけてブラウジングするにしろ、質問を色々変えて検索するにしろ、いずれも答えを見つけるための戦術にすぎません。

ユーザがクリエイターのコンテンツにたどり着くためには、検索エンジンがどうしても必要になります。 最適な検索とは、正しいキーワードで質問することです。 間違った質問では、間違った検索結果しか返ってきません。 まるで、"アリババと 40 人の盗賊" に登場する呪文のようです。 しかし、ユーザは問題を解決するために、どのような質問が適切なのか分からない場合があります。 そのため Google では、検索キーワードに関連するキーワードなどを表示して、ユーザが期待するゴールまで誘導するように手助けをしています。

検索における UX の性質としては、以下の要素があります。

  • 利便性 (Useful)
  • 可用性 (Usable)
  • 望ましさ (Desirable)
  • ファインダビリティ (Findable)
  • アクセシビリティ (Accessible)
  • 信用 (Credible)
  • 価値 (Valuable)

検索は、利便性が高く、いつでも利用可能で、シンプルで、速く、正確であることが求められます。 ユーザの抱える問題はそれほどまでに深刻で、根深く、解決が困難であり、今すぐにでも正確な答えを検索によって知りたがっています。 そのため、検索における UX 特性がなければ、ユーザはその検索エンジンを使わなくなるでしょう。 それでは、ユーザの検索を支援するために検索エンジンの UX における具体的な施策を次章から見ていきましょう。

オートコンプリート

オートコンプリートとは、ユーザが入力ボックスに文字を入力すると、自動的にキーワード候補が現れる仕掛けです。 オートコンプリートにより、文字入力にかかる時間が短縮され、スペルの間違いなどの誤字が訂正され、ユーザに他のキーワードを気付かせるメリットがあります。

オートコンプリートは、候補を含むデータの情報源がある場合に実装できます。 例えば、アプリケーションのヘルプトピックでは見出しタイトル、Google ではユーザ個人の検索履歴、Firefox では閲覧履歴とブックマークなどです。 また、Google や Yahoo! ではその他のユーザの行動特性から、検索するキーワードと組み合わせて検索される頻度の多いキーワードを引き当て、サジェスト機能を提供しています。 サジェスト機能は、キーワードの概念や特性を理解し、関連性の高い分野からユーザに有用であるページを探す手助けをしてくれる便利な機能です。 多くの場合、サジェスト機能はオートコンプリートと合わせて提供されています。

オートコンプリートは、範囲指定検索やパーソナライズ検索とも相性がよく、サジェスト機能と同じように合わせて提供されています。 例えば、範囲指定検索では都道府県から市区町村を入力する場合、上位のエリアに存在しない地名は表示されません。 ユーザビリティが考慮された Web アプリケーションにおいて、住所を登録する際に見かけることができます。

インクリメンタルサーチ

インクリメンタルサーチとは、検索したいキーワードをすべて入力してから検索を実行するのではなく、文字を入力するたびに検索結果を即座に表示する仕組みです。 日本語では "逐語検索" や "逐次検索" とも呼ばれます。 インクリメンタルサーチでは、検索キーワードによる絞り込みがリアルタイムで行えるため、すべてのキーワードを打ち込む必要がなく、入力誤りの対処も即座に行えることができます。 そのため、この方法では検索における手順をいくつか省略できるので検索コストを下げることが期待できます。

インクリメンタルサーチは、電子辞書、アドレス帳などで多く採用されています。 ただし、日本語検索では漢字・カナ変換の手順を含むため、インクリメンタルサーチの利点が大幅に減ってしまうデメリットがあります。 そのため、その不便さを補うためにローマ字入力された文字を解析し、漢字・カナ変換しなくてもユーザが何をキーワードを入力しようとしているのか推測するライブラリの開発が進められています。

曖昧さ回避

曖昧さ回避とは、検索キーワードが複数の意味を持ち、ユーザがどの意味で検索しているのか判断できない場合に、通知する機能です。 例えば、"スピード" と検索した場合、速度、映画、音楽グループ、トランプなど、複数の意味があり、検索エンジンには判断ができません。 Wikipedia では曖昧さ回避のページが用意されていて、"スピード (映画)" のように語尾に何に対してのキーワードであるか書かれており、タイトルと内容が一意になるようにしています。 また、Google では曖昧さ回避のページはありませんが、"次の検索結果を表示しています" 機能によって、曖昧さや、検索キーワードが誤っている可能性が高い場合などでも、修正後のキーワードと検索画面を提示するサービスを提供しています。

Google などの検索は、非常に高い技術が集まって実現している高次のソリューションです。 そのため、一般的な Web アプリケーション見られるデータベースから単純な文字列一致のクエリで引き当てるといった検索には注意が必要です。 多くの Web アプリケーションでは、単純な文字列一致による検索が行われているのが現状であり、"スピード" と "SPEED" と "すぴーど" はすべて区別されます。 しかし、ユーザは Google の検索品質に慣れてしまっているため、同じ検索品質を Web アプリケーションにも求める場合があります。 ユーザの期待を裏切る結果を返す場合、それがユーザの過剰な期待値であったとしてもユーザビリティに対する評価や、ユーザの満足度は低下します。

[1] Google Site Search
サービス提供は2018年3月31日まで。

Google は、企業向けにサイト内検索サービスである "Google Site Search"[1] を有料で提供しています。 Google Site Search は Google の技術を利用したサイト内検索サービスであるため、ユーザの期待する検索結果に応えることができます。 また、同様の機能を無料で利用できる "Google カスタム検索エンジン" のサービスもありますが、Google のロゴや検索に連動した広告が表示されます。 そのため、企業サイトでは Google カスタム検索エンジンはあまり利用されていません。 しかし、単純な文字列一致のクエリをやめて、独自で Google と同程度の検索サービスを用意する場合、大きなコストがかかります。 特に日本語は英語に比べて文法の解析が非常に困難であるため、ユーザの意図したキーワードを汲み取ることは難しいでしょう。

スコアリング

検索結果画面における表示順は非常に重要な意味を持ちます。 以下のグラフは、3 つのリサーチ会社が検索順位とユーザのクリック率を調査した結果です。 どの調査結果も同じような結果を示しています。 つまり、ほとんどのユーザは検索結果の上位にしか興味を示しません。 また、ページネーションも考慮するならば、検索結果の 2 ページ目以降まで注目するユーザはごくわずかになります。

検索順位とクリック率
検索順位とクリック率

多くのユーザは検索結果の上位数件のページに目的の情報がなかった場合、それ以降のページを訪問することよりも、検索キーワードを変えて再検索を行います。 そのため、検索エンジンにおける最優先事項は検索のスコアリングであり、そのランキングアルゴリズムが検索エンジンの品質を左右します。 クリエイター側もその特性を充分に理解しており、どうにかして自身のサイトが検索結果の上位にランキングされるように "検索エンジン最適化" を行っています。 検索エンジン最適化については Google 検索エンジン最適化 を参照してください。

ユーザが探している情報を見つけ出すために有効な検索指標として "関連度" があります。 検索キーワードがページ内に含まれているだけではなく、頻出度、近接度、順序、タグ、ドキュメントの長さ、正確性、信頼性、網羅性など、関連度を測るための要素は数多くあります。 また、検索キーワードとは異なるキーワードでも、同じ意味を持つキーワードも検索範囲に含める場合、検索キーワードの変換も必要になり、適合率と再現率の望ましいバランスを保つには、適切なチューニングが必要になります。 例えば、"検索エンジン最適化" と "SEO (Search Engine Optimization)" は同じ意味で使われますが、"SEO" と "瀬尾" には何の関連性もありません。 このような関係性を持つキーワードは無数にあるため、関連度を正しく評価するのは難しい作業になります。

"関連度" 以外にもスコアリングの品質を上げる観点として "人気度 (ポピュラリティ)" があります。 人気度の観点は、SNS のデータを利用します。 例えば、あるページがツイッターや Facebook、はてなブックマークなどで多くのツイート、いいね、ブックマークなどがされている場合、それは人気のあるページであると見なす尺度になり得ます。 ただし、この尺度には 2 つの問題点があります。 ひとつは、多くのユーザがあるページを SNS で共有したとしても、ポジティブな反応とネガティブの反応が混ざる場合があるということです。 性別、国籍、人種、宗教、地位、戦争、憲法など、賛否が分かれる議論や、挑発的、扇動的、タブーな話題、センシティブな問題に触れる場合、多くの反応があります。 しかし、多くの反応があるからと言って、それが必ずしもスコアリングに良い影響を与えるとは限りません。 もうひとつは、互助会などの集団によって SNS データ件数の不正操作され、低品質なページでも人気度があるように見せかけることができてしまうことです。 例えば、はてなブックマークでは、あるページを一定時間内に一定数のブックマークが得られた場合、勢いや拡散されていると判断され、エントリーに表示されます。 ブックマークの数によって、新着エントリー、人気エントリー、ホットエントリーと昇格していきます。 多くのユーザに認知されると、どんな低品質のページであっても、ある程度の確率で共有されます。 このように、少ない人数でもエントリーに登録されてしまえば、"テコの原理" のように多くのシェアを得ることができます。 人気度にはこのような問題点があるため、参考データにはなりますが決め手にはなりません。

横断検索

横断検索とは、複数のデータベースやコレクションを同時に検索するものです。 例えば、Google で検索すると、Web、地図、画像、動画、ニュースなどのジャンルに対して同時に検索されるため、それぞれのジャンル毎に検索する必要がありません。 コンテンツが別々の場所に格納されている場合、ユーザはどこに探しに行けばいいのか分からなくなります。 横断検索は、この問題に対処する方法のひとつですが、根本的な原因はコンテンツが断片化しており、情報が整理されていないことです。 そのため、情報を整理してコンテンツの断片化を解消するのも対処方法のひとつになります。

情報が整理されている場合、横断検索はファセット型ナビゲーションと非常に相性の良いものになります。 横断検索のインターフェースデザイン次第ではファセット型ナビゲーションの一部となり得ます。 ファセット型ナビゲーションについては次章で説明します。

ただし、横断検索には問題点があります。 それは、複数のデータベースやコレクションを同時に検索するため、どうしても検索におけるレスポンスが落ちることです。 データベースやコレクションの数が増えれば増える程、ユーザは何度も検索する手間が省ける代わりにパフォーマンスが低下し、ユーザビリティが相殺されるどころかマイナスになる場合もあります。 例えば、ユーザが望まない、またはニーズが少ないデータベースやコレクションを常に横断検索の対象としている場合、メリットよりもデメリットの方が大きくなります。 横断検索では気を付けなければならない点が 2 点あります。 ユーザが求めるデータベースやコレクションを選別しなければならない点と、パフォーマンスが落ちないようにハードウェア的、ソフトウェア的にチューニングを行わなければならない点です。

ファセット型ナビゲーション

ファセット型ナビゲーションとは、メタデータを利用して検索結果の関連するカテゴリの提示や、絞り込みを行う選択肢を示すナビゲーションモデルです。 ファセット型ナビゲーションは、ガイド型ナビゲーションや、ファセット型検索とも呼ばれます。 例えば、Amazon などでは検索結果画面にファセット型ナビゲーションのフィールドを設けており、ユーザのクエリーに対してカテゴリの選択や絞り込みを行えるようにしています。

Amazon のファセット型ナビゲーション
Amazon のファセット型ナビゲーション

ユーザが "ユーザビリティ" の本について検索すると紙媒体の結果が提示されますが、電子媒体である Kindle の商品を求めていた場合、ファセット型ナビゲーションから Kindle ストアを選択するだけで再検索されます。 ユーザは、いつも完全で正しい検索キーワードを打ち込むとは限りません。 多くの場合は曖昧で断片的なキーワードであり、求めている情報がどこにあるのかすら理解していない場合があります。 ファセット型ナビゲーションは、そんな曖昧なクエリーに対してユーザが求める情報までアクセスできるように手助けするナビゲーションだと言えます。

Amazon では多くの商品を取り扱っているため、ファセット型ナビゲーションに提示する選択肢も必然的に多くなります。 しかし、Amazon のファセット型ナビゲーションでは、もっとも良く選択される 4 ~ 5 件だけを表示し、それ以外の選択肢を非表示にしています。 このデザインが優れている点は、ファセット型ナビゲーションの情報量が適切に調整され、ユーザが検索結果のメインエリアに集中できるという点です。 ファセット型ナビゲーションがどれほど優れたインターフェースであっても、検索結果よりも主張することは本末転倒です。

詳細検索

詳細検索とは、単純な検索よりも多くの条件を付加して検索ができる機能を指します。 詳細検索は、"検索のオプション" や "高度な検索" とも呼ばれます。 大規模なサイトで検索機能を提供している場合、多くは詳細検索も提供しています。

Google の詳細検索画面
Google の詳細検索画面

ただし多くの場合、トップページには単純な検索しか設置されず、詳細検索は隔離されたページに設置され、あまり日の目を見ることはありません。 詳細検索は初心者ユーザの検索ウィザードであると考えられたり、上級者ユーザのパワーツールであると見なされたりします。 このように目的も使い勝手も混乱するような検索ツールは、インターフェースとして失敗しています。

しかし、多くの問題点は抱えるものの、詳細検索は検索におけるアンチパターンではありません。 詳細検索は、そのサイトが提供する検索ツールの可能性を提示してくれます。 例えば Google の詳細検索では、AND 検索、OR 検索、語順、含めないキーワード、言語、地域、最終更新日、サイトまたはドメイン、検索対象の範囲、ファイル形式、ライセンスなど様々な検索オプションが可能であることを提示してくれています。

アクセシビリティ

Web ページにおけるアクセシビリティとは、高齢者や障害者にもより使いやすく、情報の取得、または発信できる柔軟性の度合いを意味します。 高齢者や障害者であっても知る権利を保証する "情報保障" として重要であり、特に公共サービスではその意味が大きくなります。 アクセシビリティに配慮する方法として、視力の弱いユーザには文字を大きくし、全盲のユーザにはテキストの音声読み上げ機能を導入するなどがあります。 アクセシビリティの実装に膨大なリニューアル費用がかかる場合は、費用を抑えるために後付けのプラグインや ASP サービスも普及しています。

総務省は Web アクセシビリティへの情報提供として "みんなの公共サイト運用ガイドライン (2016年版)" を公開しています。 その資料の中には、"障害者がインターネット利用で困っていること" の調査結果として "障害に配慮したホームページが少ない" という意見が決して低くない数字で表れています。

アクセシビリティは、UX の中では最も根本的な問題であり、その他すべての構成要素における土台であるという議論があります。 なぜなら、情報を評価するという行為は、情報にアクセスできなければ、評価自体も行うことができないからです。 また、アクセシビリティとファインダビリティは混同されがちですが、情報を見つけることができても、その情報にアクセスできなければ意味がないため、アクセシビリティが最下層になるのではないかと考えられています。

アクセシビリティは、いくつかのガイドラインが策定されています。 W3C からは WCAG (Web Contents Accessibility Guidelines) が策定されています。 1999 年に WCAG 1.0、2008 年に WCAG 2.0 が策定されています。

国際標準化機構 (ISO) と国際電気標準会議 (IEC) からは 2012 年に技術標準の ISO/IEC 4005:2012 が策定されています。 この指針は WCAG 2.0 がそのまま ISO/IEC 4005:2012 として国際規格に承認されたものです。

日本工業規格 (JIS) からは 2004 年に JIS X 8341-3 が公表されました。 しかし、このガイドラインは国内外の既存ガイドラインなどを参考に日本特有の独自の指針であったため、2010 年に WCAG 2.0 を包含する形で JIS X 8341-3:2010 に改正されました。 さらに 2016 年に WCAG 2.0 が国際規格になったことを受けて、その一致規格となるように JIS X 8341-3:2016 に改正されました。

ガイドラインには 61 の達成基準があり、各基準は A ~ AAA のいずれかのレベル (達成等級) に分類されます。

  • レベル A:25 の達成基準。最も優先される基準で、アクセシビリティの確保に最低限必要なレベル
  • レベル AA:13 の達成基準。諸外国でも公的機関に求められるレベル
  • レベル AAA:23 の達成基準。アクセシビリティとしての最高レベル

達成レベルには "準拠" と "一部準拠" があります。 例えば、レベル A の基準をすべて満たしている場合は、レベル A に準拠となります。 また、レベル A の基準をすべて満たし、レベル AA の基準を一部満たせない場合はレベル AA に一部準拠となります。 これらの達成レベルは個人サイトで問題になることはありませんが、公的機関などではすべてのユーザに情報、サービスを提供できない場合、法的責任が問われる可能性があるため、総務省はレベル AA までの達成を推奨しています。 また、企業サイトでは機会損失や、イメージダウンのリスクにもなります。 特に人命に関わる情報提供や、憲法で保証されている権利のサービスを受ける場合など、Web アクセシビリティが担う責任は重く、また情報の公平性を確保する観点からも期待されています。

アクセシビリティの本質は、障害を持つユーザに配慮し、現行のデザインを改善することによって、すべてのユーザがより公平に情報に対してアクセスできるようになることだと考えます。 本章では、視覚障害、聴覚障害、言語障害、運動障害、学習障害について考えていきたいと思います。

視覚障害

多くの Web ページは高度にビジュアル化されている状況を考えると、最も深刻なアクセシビリティの問題は全盲や、色盲、弱視などの視覚障害者の対応であると言えます。 例えば、色盲のユーザをターゲットにする場合、前景色や背景色のコントラスト比、文字色や背景色のコントラスト比、背景にテクスチャを貼り付けるなどに気を付ける必要があります。

全盲のユーザの場合、スクリーンリーダーなどの音声読み上げ機能によって、ページに書かれている内容を認識できます。 しかし、専用のソフトウェアが必要であったり、正しく読み上げられるかはソフトウェアの品質に左右されたり、ページが長いと目的の情報を探すことが困難であったり、ソフトウェアを利用しても画像や枠線などが認識できないなどの問題点があります。 そのため、音声読み上げ機能を利用しているユーザを考慮する場合、ページの章構成や見出しを整えることで、目的の情報がどこにあるのか探しやすくなります。 また、テキスト以外にも画像には alt 属性を正しく定義することでアクセシビリティを向上させることができます。

色盲のユーザ (先天性色覚異常) は、日本人全体で 300 万人以上、男性で 5 %、女性で 0.2 %の割合で存在します。 男性の方が圧倒的に多く、20 人に 1 人の割合は決して無視できない数字です。 学生時代、色盲か検査するために以下のような図を見たことがある方も多いのではないでしょうか。 これは "石原式色覚異常検査表" と呼ばれ、色覚検査においては高精度、簡易、低費用などの理由から最も一般的に使われます。

石原式色覚異常検査表
石原式色覚異常検査表

色盲のユーザは、タイプにもよりますが多くは赤系統 ~ 緑系統の色が見分けることが困難になります。 赤系統の色が見分けることが困難な P 型 (Protanope:赤色盲者) は 1.5 %、緑系統の色が見分けることが困難な D 型 (Dueteranope:緑色盲者) は 3.5 % の割合で存在します。 それぞれの見える色の例は以下の通りになります。

色盲ユーザの色の見え方
色盲ユーザの色の見え方 (出典:NPO 法人 カラーユニバーサルデザイン機構)

色盲ユーザが取り違えやすいモノは、色に意味を持たせて区別しているもの全般です。 カレンダー、グラフ、路線図、地図、標識、案内板、申請用紙、パッケージ、ランプ、ネクタイの柄に至るまで多岐に渡ります。 色盲ユーザにも情報を正しく伝えるためには、以下の対応方法があります。

  • 上記のカラーチャートを参考に配色を見直す。
  • 色の濃淡、明暗の差をつけて見やすくする。
  • 色の代わりに記号、数字、シンボルなどで示す。
  • ハッチング (模様) を付ける。
  • 文字や線を太くする。

弱視のユーザ、または高齢化したユーザは、視力が弱く、細かいボタンや文字を認識することが困難になります。 一般的に弱視のユーザは、解像度を大きくしたり、ルーペの機能を使ったり、ブラウザの機能で画面の倍率を大きくしたりしています。 また、あるサイトではそれらの機能を使わなくても文字サイズを変更できる "大"、"小" ボタンが付いている場合があります。 しかし、文字サイズを変更できるボタンは、本当の意味で弱視のユーザに対するアクセシビリティの向上には寄与していません。 なぜなら、"大" ボタンを押したとしても極端な大きさに変更されるわけではなく、およそ 1.5 ~ 2.0 倍程度であり、弱視のユーザは程度の差こそあれ、その程度の大きさでは何も変わっていないのと同じだからです。 サイト上には文字だけではなく、その他のパーツが配置されているため、作り手側はそれらのレイアウトを崩さない範囲で大きくしているに過ぎません。 そのため、少し視力の弱いユーザには有効かもしれませんが、弱視のユーザには効果があるとは言えません。

聴覚障害

Web ページではテキスト、画像の他にも情報を伝える手段として音楽のマルチメディアを使用している場合があります。 多くのユーザはテキストと画像に慣れているため、音楽でしか伝えることができない情報を発信しているサイトは多くありませんが、アクセシビリティを考える場合は、聴覚障害者のことを忘れてはいけません。 例えば、自動再生される動画の広告においてサウンドが鳴っているか、ミュート状態で再生しているか表すためのアイコンが表示されているなどです。 この手法は、OS やブラウザの機能として Web ページを常にミュート状態にしているユーザや、そもそもコンピュータにサウンドデバイスが付いていないユーザにも分かりやすい表現と言えます。

聴覚障害におけるアクセシビリティの最大の問題点は、音声情報などのコンテンツがあったとしても現状では情報を保障する仕組みが存在しないことです。 一部の TV 番組では音声情報を手話で伝えていますが、Web のマルチメディアコンテンツにおいては動画を手話に変換する技術はありません。 Youtube などの動画共有サイトの一部のコンテンツで字幕が機械的に付けられていますが、多くは英語の動画で、日本語の動画ではあまり見かけません。 しかし、Youtube の字幕機能の素晴らしいところは、英語字幕であっても多くの言語へ翻訳が可能であるという点です。 もちろん、その中には日本語も含まれています。 ただし、2017 年時点での翻訳品質は改善の余地があり、機械的な翻訳結果になっています。 しかし、AI などの先端技術により、それらの問題は間もなく解決されるでしょう。

Youtube の Caption (字幕) 機能と翻訳機能
Youtube の Caption (字幕) 機能と翻訳機能

字幕は聴覚障害のユーザのアクセシビリティをサポートするひとつの手段ですが、問題もあります。 例えば、洋画などでは日本語字幕が用意されていますが、吹替版や邦画などでは字幕が用意されていないことです。 もちろん、すべての邦画に字幕が用意されていないわけではありません。 一部の邦画や劇場では字幕が用意されていますが、それでもなお聴覚障害のユーザは極端に選択の幅を制限されていることには変わりません。 また、映画では字幕が存在しますが、TV 番組でも字幕が存在します。 日本では文字多重放送、アメリカではクローズド・キャプションの技術で字幕放送を行うことによりアクセシビリティを確保しています。

聴覚障害のユーザのアクセシビリティが問題なるケースは、映像のコンテンツだけではありません。 例えば、Web ページのギミックとしてボタンをクリックしたときに効果音を鳴らしたり、自動再生されるコンテンツで操作系のボタン類や表示がない場合、聴覚障害のユーザは再生されていること自体に気が付きません。 Google Chrome などのモダンブラウザでは、音が鳴っているページを開いているタブにはスピーカーのアイコンが表示される場合がありますが、アクセシビリティの意味合いは低いと考えます。 動画共有サイトでもない限り、ユーザの承諾なしに音を出す仕掛けは好ましくありません。 キャンペーンサイトやプロモーションサイトなどは、それらのギミックを多用する傾向がありますが、その場合においてもアクセシビリティを考慮すべきです。

言語障害

一般的にコンピュータはキーボードとマウスで操作しますが、音声認識の精度が向上したことにより Google も Apple も音声入力によるインターフェースを提供しています。 しかし、言語障害のユーザは音声が認識されないために、それらのインターフェースを使用できません。 言語障害のユーザは、音声入力の代わりにキーボードとマウスで操作を行っていますが、将来的に音声入力のインターフェースがキーボードやマウスよりも使い勝手が良くなった場合、アクセシビリティの問題が顕在化する可能性があります。 例えば、ボイスチェットを行う Facetime などのコミュニケーションソフトウェアでは、お互いが話せることを前提としているため、言語障害のユーザには大きなハンデになります。 そのため、コミュニケーションツールにおいては Skype のように音声、文字、映像など、複数の手段でインタラクティブにコミュニケーションが取れるアクセシビリティが求められます。

言語障害のユーザは、音声で操作するソフトウェア全般に対してアクセスできません。 例えば、Google アシスタントを呼び出す場合、一般的なユーザが "OK, Google." と音声を認識させるだけで済みますが、言語障害のユーザはそれができません。 しかし、音声で操作を行う多くのサービスやソフトウェアは、音声認識以外でも操作を行える代替手段を用意しています。 操作できる機能のショートカットやコマンド類です。 例えば、Google アシスタントを音声で呼び出せない場合、ユーザはマイクをタップすることで代替できます。 ただし、少なくとも音声入力のインターフェースをボタンで呼び出す機能は、言語障害のユーザのためではありません。 言語障害のユーザは、そもそも音声入力ができないので、ボタンで呼び出す代替機能はあくまでも一般ユーザを対象にしたものと言えます。 言語障害のユーザのために用意すべきは、ブラウザ、メール、目覚まし時計、メモ帳、カレンダーといった機能へのショートカットやコマンドそのものです。 例えば、音声入力ではなくジェスチャー入力であれば、それらの問題を解決できます。

運動障害

運動障害のユーザは、コンピュータ自体を扱うことが困難である場合が多く、Web アクセシビリティよりも "コンピュータアクセシビリティ"、または "福祉工学" の分野において議論される場合があります。 ここでは、それらの分野には言及せず、運動障害のユーザが抱える Web アクセシビリティにおける問題点について考えます。

運動障害におけるアクセシビリティは、先天的、または後天的に手や指先の自由が効かないユーザを想像しがちですが、もっと身近な問題として考える必要があります。 例えば、利き腕を怪我した、マウスの調子が悪い、TV やゲーム機器からアクセスしているなどです。 人気のある MMORPG などでは、PC 版と PS や XBOX などのゲーム機版の両方に製品をリリースしている場合があります。 しかし、ゲーム機のコントローラはキーボードとは異なりボタンの数が限られているため、チャットやアクションの操作性に不便を感じる場合があります。 運動障害のユーザにおけるアクセシビリティは、本質的にはこれと同じ問題です。

イギリスの理論物理学者スティーヴン・ホーキング博士は "車椅子の物理学者" として有名です。 博士は、学生時代に死に至る ALS (筋萎縮性側索硬化症) を発症しましたが、途中で進行が急激に弱まり、なんとか死は免れました。 しかし、後遺症により自身の筋肉を動かしてのコミュニケーションが取れなくなってしまいました。 そのため、博士は意思伝達に "重度障害者用意思伝達装置" を用いていますが、もちろん Web のブラウジングも可能です。 ただし、MMORPG を操作するキーボードとコントローラの問題と同じように、それらのコミュニケーションエイドの操作性には課題があります。 それは、健常者と同じ精度では操作できないことです。

Web サイトにはイベントを発生させたり、各ページに遷移するための様々なボタンやリンクがあります。 しかし、アクションを起こすためのクリック範囲が極端に狭かったり、正確にマウスを操作をしなければ選べない階層的なメニューなどは運動障害のユーザのアクセシビリティを著しく下げることになります。 ページ全体に多くのメニューやコンテンツ、ガジェットなどの Web パーツを配置している場合は特に顕著です。 それらの対応としては、シンプルなページ構成、自動スクロールするボタンの設置、キーボード操作でのリンク選択、音声入力のインターフェースを用いるなどして、アクションを起こすための手段を増やすと良いでしょう。

学習障害

学習障害のユーザは、知的障害とは異なり全般的な知的発達に遅れはありませんが、聞く・話す・読む・書く・計算する、または推論するなどの特定の能力の習得において著しい困難を示すユーザを指します。 アメリカでは全人口の 15 % が何らかの学習障害と認定されています。 しかし、日本では学習障害は障害者人口にカウントされていないため、正確な調査報告資料はありませんが、約 4 ~ 9 %が学習障害ではないかと考えられています。

Web アクセシビリティにおいては、特にディスレクシア (読み書き障害) に対する取り組みがなされています。 ディスレクシアのユーザは、文章がどのように認識されるかは本人以外には分かりませんが、以下の特徴が報告されています。

  • 文字の横幅 (カーニング) が極端に狭くなる
  • 漢字の字体を構成する要素が分解される
  • 文字の順序が入れ替わる
  • 文字が鏡文字のように見える
  • 文字が滲んだり、ぼやけたり、歪んだり、浮き出たりして見える
  • 単語をひとつの単位として認識できず、文字をひとつの単位として認識する
  • 飛ばし読みを行ってしまう
  • ひらがなの形が似ている文字を読むのが苦手 ("わ" ・ "れ" ・ "ね")
  • カタカナの形が似ている文字を読むのが苦手 ("ソ" ・ "ン"、"ツ" ・ "シ")
  • 特殊音節 (拗音・長音・促音) の読みが苦手

上記の特徴は文字を読む場合に発生する特徴で、音声を聞く場合には発生しません。 そのため、視覚障害のユーザと同じくテキストを音声読み上げ機能によって認識する方法があります。 また、視覚障害のユーザはとは異なり、以下のアプローチも有効です。

  • 1 行の文字数を 30 文字程度に短くする。
  • パラグラフを認識しやすいように空行や、先頭にスペースを入れる。
  • 文章の背景画像に文字を入れない。
  • ユーザが背景色を任意の色に変更できるようにする。
  • 明朝体などの修飾的なフォントを使わず、ゴシック体や Arial などを使用する。
  • フォントサイズを 12 pt 程度に大きくする。
  • 難しい漢字にはルビをふる。
  • 文章を画像などで表現できる場合はビジュアル化する。

実用的なアクセシビリティ

このページを含めて、多くのページではアクセシビリティのガイドラインに準拠していません。 アクセシビリティのガイドラインを守るためには多くの時間とコストがかかり、健常者に比べて障害者の割合が低いため、どうしても省略されがちな要素となっています。 しかし、"完璧ではないデザイン" と "アクセシビリティを気にしないデザイン" では大きな差があります。 ガイドラインのすべての項目に対応できなくとも、アクセシビリティを良くするための努力は続けなくてはなりません。

アクセシビリティのテストを行う場合、テキストのみ表示するブラウザでアクセスすることが有効です。 正しく表示されている場合、概ね良好な結果と言えます。 本来であれば、障害を持つユーザにユーザビリティテストをしてもらうことが最も良い方法ですが、障害には多くの種類があるため、すべての障害に対応したサイトを構築することは非常に難しいのが現状です。

サイト/ページデザイン

ある研究グループによる調査では、被験者にある問題を出して Web サイトの中から答えを探した時、時間内に正しいページを見つける確率は 42 %しかありませんでした。 さらに、6 つの大企業サイトにて求人を申し込むという課題に対しては 26 %まで確率が低下しました。 単一のページが優れていても、ユーザが複数のページを横断して情報を探したり、ある目的を達成しようとする場合、Web サイトの構造がシンプルでなければ使い勝手は非常に悪いものになります。

"ホームページ" とはいくつかのニュアンスを含みますが、ここではサイトのトップページを指します。 ホームページは、各ページとは異なり特別な意味を持ちます。 Web サイトの入り口であり、最上位のページであり、すべてのページから帰る場所でもあります。 昔のホームページはサイトマップのような意味が強く、サイト全体を俯瞰できるようなデザインが主流でした。 しかし、現在では各記事の一覧が時系列に表示されるデザインが主流になっています。

ホームページに各記事の一覧が表示されるデザインは WordPress などの CMS の普及に伴い広がりました。 ただし、それらのデザインは個人サイトがメインであり、企業サイトでは以前としてホームページはどのようにデザインするかが課題となっています。 代表的な手法としては、画像の一部だけを動かす "シネマグラフ"、スクロールに応じてエフェクトが発生する "パララックス"、グラフなどのデータを視覚的に見やすい形に表現した "インフォグラフィックス"、体験談やエピソードなどの物語を引用してユーザに印象付ける "ストーリーテリング" などです。

企業サイトでも、ユーザの訪問目的が明確である場合、ホームページにはユーザの求める機能を設置しているケースもあります。 極端な例で言えば、Google のホームページには検索用のテキストボックスとボタン以外は何も置かれていません。 その他にも航空会社では、ホームページに飛行機のチケット予約するためのフォームが設置してあります。 多くのユーザのためにデザインをシンプルにする方法は、機能的であり、ユーザの満足度を高めることができます。

ANAのWebサイト
ANAのWebサイト (2015年1月時点)

しかし、一方でユーザの満足度を下げるホームページも存在します。 例えば、アニメーションを見なければ先に進めないスプラッシュページや、Welcome メッセージ、Now Loading が毎回表示されるなど、ユーザに何かしらを強制させるページアクションです。 ただし、ユーザを振り分けるために年齢制限など何かの制約に同意しなければ進めない警告ページは、ユーザビリティよりもコンプライアンスの観点から必要になる場合があります。

ナビゲーション

ナビゲーションインターフェースでは、現在ユーザが Web サイト内のどこにいるのか、どこに行けるのかを示す必要があります。 最も一般的なナビゲーションとしては、各ページの左上にロゴマークが表示されており、ホームページへのリンクが貼られているナビゲーションです。 その他にもナビゲーションにはいくつかの種類があり、大きく分けると以下のナビゲーションが一般的です。

  • サイトマップ
  • グローバルナビゲーション
  • ローカルナビゲーション
  • パンくずリスト
  • 関連ページ
  • ページネーション
  • ヘッダー/フッター
  • サイト内検索
  • ページ内リンク
  • サイト内リンク
  • 外部リンク

これらのナビゲーションについて、個別に見ていきましょう。

サイトマップ

サイトマップとは、サイト全体を俯瞰するための見取り図のようなものです。 ここでは、検索エンジンに登録するための XML サイトマップではなく、ユーザがサイトを理解するためのサイトマップのことを指します。 XML サイトマップについては サイトマップ (sitemap.xml) の作り方 を参照してください。

サイトマップは、ユーザがサイト全体を理解したい場合や、目的のページを見つけられずに迷った場合などに利用されます。 一般的にサイトマップはカテゴリー毎に整理されており、コンテンツが一覧形式で表示されています。 例えば、大量のコンテンツを扱う Amazon のサイトマップは以下のように整理されています。

Amazon のサイトマップ
Amazon のサイトマップ

グローバルナビゲーション

グローバルナビゲーションとは、サイトのコンテンツをカテゴライズした最上位のメニューです。 コンテンツのページに遷移しても決まった場所に、決まった順番で表示されます。

グローバルナビゲーション
グローバルナビゲーション (トップページ)
グローバルナビゲーション
グローバルナビゲーション (コンテンツのページ)

情報はいくつかのコンテンツにカテゴライズされ、ディレクトリ構成に合わせてメニュー化されます。 カテゴライズの方法は、サイトの特性によって異なります。 例えば、金融機関のサイトでは個人と法人の両方のユーザを対象とするため、それぞれのユーザに最適化されたグローバルナビゲーションを用意しています。

ローカルナビゲーション

ローカルナビゲーションとは、グローバルナビゲーションから選択したコンテンツが更に複数のカテゴリに分類される場合に表示されるサブメニューです。 一般的には、グローバルナビゲーションの下や、サイドカラムに表示されます。 ローカルナビゲーションは、グローバルナビゲーションとは異なり、コンテンツ毎にメニューの数が変わります。

ローカルナビゲーションは、ディレクトリ構造の深さに依存する場合があります。 情報を細かく分類している場合、ディレクトリ構造が深くなるため、ユーザは何度もサブメニューを選択することになります。 異業種を合併したコングロマリットのような大企業のサイトでは、ディレクトリ構造が深くなる場合があります。 しかし、ユーザが目的の情報にたどり着くまでに何度もサブメニューを選択させることは良い方法とは言えません。 ディレクトリ構造が深くなりすぎる場合は、サブドメイン、またはドメインを分割することを検討してください。

パンくずリスト

ユーザが Web サイト内のどこにいるのか表すための代表的なナビゲーションインターフェースは、"パンくずリスト" です。 パンくずリストには、"パス型"、"位置型"、"属性型" の 3 種類があります。

  • パス型:どのようなルートで対象のページにたどり着いたのかを示します。動的であるため、同じページでもたどり着くまでの経路が異なれば、表示されるリストも異なります。
  • 位置型:対象のページが Web サイトのどこに位置しているかを示します。静的であるため、たどり着くまでの経路が異なっても、同じページであればリストも同じになります。
  • 属性型:対象のページがどのような属性で分類されているかを示します。

ただし、パンくずリストはユーザビリティとして以下の欠点があります。

  • パス型はブラウザの戻るボタンや履歴と機能が重複している。
  • 位置型はコンテンツが多すぎる場合、コンテンツの位置を把握することが難しい。例えば、Amazon のような検索ベースのナビゲーションパラダイムを採用しているサイトには共通して当てはまる。
  • パンくずリストは、垂直方向のナビゲーションであるため、同階層に何のカテゴリがあるかといった水平方向のナビゲーションを表現できない。

関連ページ

関連ページのナビゲーションとは、ユーザが訪問したページと関連性の高い類似のページをサイドカラム、またはページの下部に表示させるものです。 有名な例として Amazon では同じ商品を買っている他ユーザの購買特性から、クロスセルの可能性が高い商品を表示しています。 その他にも、ニュースサイト、App ストア、ランキングサイト、個人ブログなどでも関連ページ、オススメの商品、App などを表示しています。

関連ページのナビゲーションは、ユーザと作り手側の双方にメリットがあります。 ユーザには、関連性の強い商品、サービス、App、記事に対して新しい情報が得られ、ユーザ満足度を高めることができます。 作り手側には、他ページに流れたユーザに対しても関連ページのナビゲーションから流入することで、回遊率を高め、エンゲージメントの機会を得ることができます。

ユーザにオススメする商品、サービス、App、記事は、特性の計算方法がそれぞれ異なります。 比較的簡単に類似度を計算する方法としては、カテゴリやタグ、重要なキーワードの重複度から算出できます。 しかし、サイトの特性に合わせて高精度で類似度を計算するのは非常に難しい問題となります。 もしも WordPress などの CMS を利用している場合は、プラグインによって自動生成されるモジュールを試してみるのもいいでしょう。

ページネーション

ページネーションとは、検索結果画面のようにページが長すぎる場合、画面を分割して表示するナビゲーションです。 このナビゲーションは検索結果画面によく用いられます。 なぜなら、検索結果件数はクエリーによっては何万件の結果を返す場合もあるため、ある程度の上限を設けないと大量の情報がユーザに返ることになるためです。

ページネーション
ページネーション

また、メディアサイトでは長い記事を分割するためにページネーションが使われている場合があります。 これは一昔前のモバイル機器の通信速度、およびパケットの従量制課金を考慮したページ構成でした。 しかし、現在ではどちらもそれほど問題にならないため、長い記事にページネーションを使うことに 2 つの批判があります。 ひとつは、ユーザが記事をすべて読むためには何度もページネーションをクリックしなければならず、PV を稼ぎのためにあえて導入しているという批判です。 もうひとつは、ページが分割されているために目的の情報をページ内検索では探せないという批判です。 検索結果画面がページネーションを使う理由は理解できますが、ひとつの記事にページネーションを使うべきではありません。

ページネーションは "前へ"、"ページ番号"、"次へ" のナビゲーションが並ぶため、それぞれのクリック範囲が狭くなることがあります。 そのため、スマートフォンでは "前へ" と "次へ" しかクリックできないリニアなナビゲーションが使われている場合があります。 また、デスクトップのブラウザであっても手続き型のプロセスを踏む EC サイトや、ネットバンキングサイトなど、ユーザには順番に戻るか進む以外の動作をしてほしくないサイトで採用されています。

ヘッダー/フッター

ヘッダーやフッターのナビゲーションとは、すべての画面において常駐させておきたいメニューを指します。 ヘッダーに常駐しているナビゲーションとしては、サイト内検索、サイトマップ、よくある質問、ログイン/ログアウト、設定、ヘルプ、言語切替などです。 フッターに常駐しているナビゲーションとしては、企業情報、利用規約、プライバシーポリシー、お問い合わせなどです。

ヘッダーやフッターは、ページによってデザインが変化しないため、ユーザはどのページからでも固定されたナビゲーションを利用できます。 また、作り手側はヘッダーとフッターはすべてのページに配置されているため、もしも変更が生じた場合に備えてページ毎に定義はせず、共通パーツとして定義しています。

サイト内検索

サイト内検索のナビゲーションは、目的の情報をメニューではなくキーワード検索によってサイト内から探すためのナビゲーションです。 Amazon、ツイッターだけでなく、画像コンテンツに特化したインスタグラム、動画コンテンツに特化した YouTube でさえ文字によるサイト内検索は重要なナビゲーションの役割を果たしています。 もちろん、程度の問題はありますが個人サイトにもサイト内検索を設置しているケースもあります。

ただし、サイト内検索には重大な問題があります。 Google のように高精度な検索では問題になりませんが、すべてのサイト内検索が高精度な検索ができるとは限りません。 例えば、単純に検索キーワードに一致したページだけを検索結果ページにリスト化すると、一致しなかった関連性の強いページが表示されず、曖昧な検索ができません。 また、検索キーワードがヒットした順番で並べると、一致率の高いページでも順位が低くなることもあります。 大切なポイントは、ユーザが Google の洗練された検索に慣れているため、サイト内検索でも同じ水準の検索品質を求めるということです。 そのため、サイト内検索で期待していた結果が返ってこなかった場合、それだけでユーザの満足度は低下してしまいます。

ページ内検索のナビゲーションを設置する場合、以下の観点について検討する必要があります。

  • サイトにはコンテンツが十分にあるか?
  • サイト内検索システムを構築する時間とノウハウはあるか?
  • サイト内検索よりも良い代替案がないか?
  • ユーザは検索を面倒に感じないか?

サイト内検索は、コンテンツの共有サイトなどコンテンツが多いサイトによってはベストな方法かもしれません。 しかし、ユーザのためにもっとよい方法が他にないか検討する必要があります。 ユーザは面倒なことは一切やらないという "ユーザビリティの鉄則" があるため、一般的にはサイト内検索よりもブラウズの方が好まれます。 サイト内検索にリソースを割くのであれば、情報アーキテクチャを見直した方が効果的かもしれません。

ページ内リンク

ページ内リンクは、ページのある部分までジャンプするためのナビゲーションです。 例えば、ページの章構成を表した目次などが一般的です。 また、ページ遷移を伴わないリンクもページ内リンクに数えられます。 ただし、pjax や SPA (Single-page Application) などはページのリフレッシュのない単一ページの Web アプリケーションですが、厳密にはページ内リンクには含まれません。

ページ内リンクでは、目次から対象のタイトルまでジャンプする垂直方向、画像がスライドする (カルーセル) 水平方向があります。 水平方向のリンクでは、ユーザが左右のボタンをクリックするか、ある程度の時間が経過した場合、次の画像が流れます。 ただし、水平方向のリンクは垂直方向のリンクとは異なり、URL が変化しない場合が多いため、ブラウザの戻るボタンで前の画像に戻るとは限りません。

カルーセル
カルーセル

サイト内リンク

サイト内リンクは、コンテンツの中に他ページへのリンクを埋め込むナビゲーションです。 例えば、Wikipedia のように文中にテキストリンクを埋め込んでいるナビゲーションが有名です。 文中に未知の単語が登場しても、サイト内リンクが埋め込まれていれば、ユーザは改めて単語の意味を Google に戻って調べ直さなくてもブラウズによって単語の情報を取得できます。 関連ページのナビゲーションも広義の意味でサイト内リンクであると言えます。

ただし、サイト内リンクはサイトの構造とは無関係に配置されるため、ユーザが迷子にならないように情報アーキテクチャの設計も求められます。

外部リンク

外部リンクのナビゲーションとは、記事における根拠資料の出処や、出典、引用、参考にした外部サイトへのリンクです。 ユーザには内部リンクと、外部リンクはクリックする前にどちらであるかアイコンで知らせているケースもあります。 しかし、外部リンクにはクリックしたときに "別ウィンドウで開く" か "同一ウィンドウで開くか" の根深い議論があります。

別ウィンドウで開く派の意見

  • ユーザには自身のサイトから離脱して欲しくない。
  • 外部サイトに移動することを明確にしなければユーザに誤解や混乱を与える。
  • 戻りやすいようにウィンドウを分割する方が親切である。

同一ウィンドウで開く派の意見

  • ブラウザの戻るボタンが使えないため不便である。
  • ウィンドウの使い方はユーザが決めるべきであり、作り手側が決めるべきではない。
  • 外部サイトへのリンクを区別する場合、アイコンを付ければ十分である。

この問題は、一概にどちらが良いかは決められません。 なぜなら、外部サイトから戻る確率や、別ウィンドウとして見比べたい場合や、別ウィンドウ先でアクションを起こした後には閉じてしまうなど、ケースが異なればどちらがユーザビリティとして優れているか評価が異なるためです。

コンテンツデザイン


結局、ユーザはコンテンツ目当てでウェブサイトに足を運ぶものだ。
コンテンツ以外の要素は単なる背景にすぎない。
デザインはコンテンツにアクセスできるようにするためにあるのだ。
劇場に足を運ぶ人のことを考えてみればいい。
劇場を後にした彼らと話をするとしたら
「この劇は面白かったかい?」とは聞きたいだろうが
「衣装はすばらしかったかい?」なんて話にはならないだろう。
コンテンツデザイン
(参考:ヤコブ・ニールセン(著)「Designing Web Usability」P87)

デザインはコンテンツを表現するための重要な要素です。 殺風景なテキストが並ぶモノトーンなページより、洗練されたデザインである方がユーザに与える印象はまるで違うものになります。 しかし、ユーザは洗練されたデザインを見にページを訪れているわけではありません。 ユーザは何かしらの情報を求めてページに訪れるため、デザインよりもコンテンツが重視されます。 例え、デザインがコンテンツより何倍の時間がかかっていても。

良質なコンテンツの原則

良質なコンテンツの原則とは、"わかりやすいこと"、"役に立つこと"、"親しみやすいこと" です。

  • Clear:わかりやすいこと
    Web には乱雑な言葉があふれています。 その中で良質なコンテンツを確立するためには、一文一文を丁寧に吟味することが大切になります。 難しい言葉や専門用語を控え、わかりにくい言い回しは避け、できるだけ短い文章で伝えましょう。
  • Useful:役に立つこと
    今書いていることは、ユーザが求めている情報であるかを常に考えてください。 多くのユーザは何かしらの問題を抱えて Web サイトに訪れます。 Web サイトはユーザの問題を解決する方法のひとつです。 ユーザの役に立つ情報をどのようにして伝えるか、他サイトと比較して希少性はあるか、タイトルと記事のゴールが矛盾していないかなどを確認してください。
  • Friendly:親しみやすいこと
    記事を書く場合、読み手を意識することが大切です。 親しみやすい雰囲気を出すために、的確な言葉を選び、望ましい口調で共感を集めるライティングスタイルを確立しましょう。 親しみやすい文章ならば、目的の情報を見つけ出すユーザのストレスを軽減できます。 親しみやすいコンテンツならば、ユーザは何度も Web サイトを訪問してくれるでしょう。 ユーザを笑顔にするためにはどうすればよいか、この Web サイトに出会えて良かったと思ってくれるためにはどうすればよいかを考えましょう。

読みやすい文章

  1. 1つの段落には1つのトピック
    1つの段落に複数のトピックを詰め込むと要点が何なのか分からなくなります。
  2. 段落の最初に要点を書く
    段落の最初に、その段落で伝えたい要点を書きます。 ユーザは段落の最初の文から、その段落を読むか、飛ばすかを選択できるため、ナナメ読みをできます。
  3. 簡潔に書く
    長い文章は何を伝えたいのかユーザを混乱させる可能性があります。 長くなる場合は、段落を分けてトピック毎に説明します。
  4. 肯定文を使う
    肯定文と否定文では、肯定文の方が分かりやすく伝わります。
  5. 分かりやすく書く
    ユーザの目線に合わせて専門用語や難しい言葉はなるべく避けて書きましょう。 しかし、難しいことを難しく書くことは容易ですが、難しいことを簡潔に書くことは非常に困難です。
  6. 受身の表現を避ける
    主語のない文章は、述語の主体が不明確になります。 "~れる"、"~られる" などの受身の表現は説得力に欠けるため避けた方が無難です。
  7. 可読性を上げる
    背景色と文字色のコントラスト比が高くなるように設定します。 コントラスト比が低い場合、ユーザの可読性を著しく損ねることになります。 また、フォントも読みやすいユニバーサルフォントなどを考慮しましょう。
  8. ユーザの気を散らさない
    無限ループするアニメーション画像や、気が散る主張の激しい広告などは、取り除くことを検討して下さい。 ユーザがテキストを読むことに集中できる環境を提供することも大切なことです。

ライティングの種類

ライティングには様々な定義がありますが、大別すると "コンテンツライティング""コピーライティング""Web ライティング" の 3 種類があります。

コンテンツライティングとは、ユーザが満足するコンテンツを作るためのライティング技術です。 ユーザが満足するコンテンツとは、ユーザの問題を解決するための役に立つ情報や、他サイトと比較して希少性の高い情報などです。 3 種類のライティングの中でもコンテンツライティングが最も重要になります。

コピーライティングとは、ユーザの興味を引き、読みやすく、また読み進めたくなるようなライティング技術です。 キャッチコピーを付ける場合や、ユーザに商品の購入などのアクションを起こさせる場合に用いられます。

コンテンツライティング

Web ライティングの作業も、基本的には紙媒体と同じ流れで作成します。 作業フローとしては、"企画""執筆""編集""校正" の順で作業を行います。

企画とは、コンテンツの方針を決めて、必要な情報を収集し、執筆を行うための準備をします。 どのような良質のコンテンツでも、ユーザのニーズがなければ集客にはつながりません。 ニーズのあるテーマを調べ、ユーザの興味をひくようなキーワードを決め、ユーザの知りたい情報を収集します。 つまり、ユーザが何を必要とし、自分には何が求められているのかを考えるフェーズになります。 その上で、どのような方針で執筆するかを決定します。

執筆とは、企画で決めた方針に従い、実際に文章を作成する作業です。 ユーザに伝わりやすい文章や、共感できるようなストーリーを作成します。 執筆の作業は目次から作成し、その後に内容を肉付けしていくと、文章や全体の構造に流れができあがり、乱れにくくなります。

編集とは、作成した文章を読みやすい文章にする作業です。 その他にもユーザの理解を助けるために、図表を追加したり、レイアウトを調整したり、ユーザがアクションを起こしやすいようにします。

校正とは、誤字、脱字、文法誤りをなくし、公開できる状態にする作業です。 SEO を意識したキーワードの最終調整や、NG ワードが含まれていないかなどの検証も行います。 その他にも、文字コードの確認、HTML の文法エラーの確認、ページスピードのパフォーマンスチューニングも公開前に実施しましょう。

コンテンツの企画

コンテンツを作成するための計画を立てるのがこの企画フェーズになります。 ニーズやトレンドからテーマを決めて、検索キーワードとして集客力のあるキーワードを選定し、執筆するための情報を集めます。 企画は、以下のステップに分けることができます。

  1. 検索件数からニーズを確認する
  2. 将来性からテーマを絞り込む
  3. アクションにつながるキーワードを選定する
  4. 検索順位で上位になれるキーワードか確認する

各ステップについては次章に示します。

検索件数からニーズを確認する

多くのユーザに訪問してもらい、アクションを起こして欲しい場合、まずはニーズのあるテーマを選ぶことが大切です。 ニーズを確認する手段として、検索エンジンのデータを利用してテーマを選出できます。

検索エンジンのデータは、"キーワードプランナー" でチェックできます。 キーワードプランナーは、Googleの検索結果に連動して広告を掲載するサービス "Googleアドワーズ" で利用できるツールです。

キーワードプランナーのデータでは、指定したキーワードの検索件数、競合性、推定入札単価、指定したキーワードに関連するキーワードの情報も得られます。 キーワードプランナーでコンテンツを作成する分野のキーワードの一覧と検索件数を取得し、それを参考にテーマを選びます。

キーワードプランナー
キーワードプランナー
将来性からテーマを絞り込む

検索件数によって選出したテーマの候補の中で、将来性のあるニーズのテーマを絞り込む作業です。 テーマの経時的ニーズの変化を確認し、効果を上げ続けるテーマを選定します。

キーワードプランナーのデータから現在のニーズは確認できますが、将来のニーズは確認できません。 将来のニーズを確認するには、"Google トレンド" を利用します。 Google トレンドにニーズを確認したいキーワードを入力し、"予測" のチェックを入れると破線で 1 年先までの予測ニーズが表示されます。

Google トレンドでキーワードのニーズを確認する場合は、グラフの傾きに注意してください。

  • 右肩上がりであれば、将来性が高く、ニーズが増える可能性が高いテーマになります。
  • 水平であれば、将来性はありませんが安定しており、普遍的なニーズがあるテーマになります。
  • 右肩下がりであれば、将来性が低く、ニーズが減る可能性が高いテーマになります。
  • 急増している場合は、新しい分野のテーマで将来性は不明です。一過性のニーズである場合もあります。
Googleトレンド
Googleトレンド
アクションにつながるキーワードを作成する

テーマを決定したら、そのテーマの中で対策すべきキーワードを選定します。 キーワードとは、検索エンジンで検索する際に入力される単語のことです。 SEO 対策では、より多くの人が利用し、アクションにつながりやすいキーワードを選べるか否かで成果が大きく変わります。

キーワードには、アクションにつながるキーワードと、アクションにつながらないキーワードがあります。 アクションにつながるキーワードとは、ニーズを含むキーワードです。 代表的なパターンとしては、以下の 4 パターンがあります。

  • エリアを含むパターン (「美容院・代官山」、「レストラン・渋谷」など)
  • 解決方法を含むパターン (「ダイエット・方法」、「転職・仕方」など)
  • 購入意思を含むパターン (「デジカメ・激安」、「SEO対策・相場」など)
  • 緊急性を含むパターン (「デジカメ・修理」、「名刺・即日」など)

上記のパターンは、検索ユーザが何を求めているのかが明確であり、購入や問い合せなどのアクションにつながるニーズが含まれています。 アクションにつながるキーワードは何かしらの動機を表すキーワードがセットになっています。 そのため、選定したテーマにアクションにつながるキーワードを選ぶ場合は、動機を表すキーワードを選定すると良いでしょう。

アクションにつながらないキーワードとは、検索ユーザのニーズとコンテンツが一致していない場合です。 例えば、購入や問い合せを目的としているのに、検索ユーザは何かの調べ物に利用していたり、関連情報を集めている場合などです。 代表的なパターンとして、以下の 2 パターンがあります。

  • 言葉の意味や情報収集を目的とするキーワード (「SEO対策とは」など)
  • 目的が明確でなく何をしたいか判断できないキーワード (「SEO」など)

何かを調べるパターンでは、対象のキーワードが調べ終わった時点で目的が達成されてしまうので、こちらが期待するアクションをしてくれる確率は低くなります。 同様に、目的が明確でないキーワードは、ビッグキーワードに分類されるため、検索結果の上位には大手企業の Web サイトが並び、対策を行うのが難しいため、集客力が低くなる可能性があります。

検索順位で上位になれるキーワードか確認する

キーワードの選定では、同じキーワードを扱っている他のサイトを考慮する必要があります。 ニーズと将来性があるテーマで、アクション率の高いキーワードでも、競合するサイトが大手や古参である場合は、成果が出にくい場合があります。

キーワードプランナーでも "競合性" という項目があります。 競合性は "高"、"中"、"低" の 3 段階で評価されます。 競合性が "高" の場合、多くの広告主が競い合っており、人気のある魅力的なキーワード分野であると言えます。 ただし、人気のあるキーワードであるため、検索結果の上位に掲載されるのも難しくなります。

検索エンジンで何かを調べようとするとき、多くのユーザは 1 ページ目、または 2 ページ目までしか訪問しません。 将来性があり、ユーザのアクションを得やすいキーワードは検索順位で上位になることは難しいため、スモールキーワードを狙うか、検索順位で上位になるために対策を行うかのどちらかになります。

コンテンツの執筆

企画フェーズで集めた情報から文章を作成していくのが執筆のフェーズです。 構成、表現、文章量以外はすべて後続の編集フェーズで行うため、一気に書き上げてしまいましょう。 執筆の作業は、以下のステップに分けることができます。

  1. 伝わりやすい文章構成にする
  2. アクションを導くストーリータイプを選択する
  3. 表記を統一してコンテンツの質を高める

各ステップについては次章に示します。

伝わりやすい文章構成にする

文章を実際に書き出す前に、読み手に伝わりやすい文章構成について確認します。 文章構成は、一般的な "起承転結" の型を利用して効果的な文章を作成する方法を説明します。

文章構成やストーリーを考える前に、すべてのコンテンツに明確な目的を持たせ、それらに合った "結論" を用意することが重要です。 ただし、単純に結論だけを書けば良いというわけではありません。 ユーザが目的のアクションを取りたくなるようなコンテンツを作成する必要があり、結論はユーザにアクションを起こさせるためのトリガーとして用意するべきです。

"起承転結" は 4 パートに分かれていますが、実際は "起"・"承"・"転結" (結論) の 3 パートぐらいをイメージすると良いでしょう。 最初の "起"・"承" は導入部分であり、どのようにトピックに入るかで印象が変わってきます。 例えば、大企業や定番商品などは、安心感や信頼感を与えるために、常識から入ります。 逆に、中小企業や新商品などは、興味をわかせ、注意をひきつけたいために、常識の逆から入ります。

アクションを導くストーリータイプを選択する

アクションを導くストーリータイプは大きく分けて以下の 3 つあります。

  • 一般論から各論 (抜け漏れのない商品の紹介)
  • 各論から一般論 (大きな特徴のある商品の紹介)
  • 比較列挙 (複数の特徴のある商品の紹介)

常識となっている一般論でユーザを納得させられるならば、基本的にそれが一番良い方法です。 読み手にとっても納得しやすく、安心感もあります。 しかし、すべての商品やサービスの中には完璧でないものもあります。 その場合、何かしらの特徴を効かせて魅力を上手に伝えるのが、"各論から一般論" や "比較列挙" のストーリータイプです。

一般論から各論のストーリータイプとは、一般常識となっている良いことを確認した上で、それを満たす商品を紹介するのに適したものです。 例えば、好条件の物件を紹介するなら、良い条件の一般論から入り、条件の各論で読み手に具体性を与え、それらを満たす物件であることを説明する流れで紹介すれば納得してもらえるはずです。

各論から一般論のストーリータイプとは、一般常識となっている良い条件が不足している場合、大きな特徴となる "一部" に焦点をあてるものです。 ひとつのことに集中することで、インパクトを与えることができるストーリータイプです。 例えば、好条件をすべて満たさない物件を紹介するなら、そのような物件が一部で人気であるという各論から入り、実はとても割安であると一般化すれば、ユーザはアクションを起こしやすくなります。

比較列挙のストーリータイプとは、複数の点で競合商品や市場平均より優れた商品を紹介する際に適したものです。 すべての条件は満たしておらず、エッジの効いた特徴もない場合でも、魅力的に商品を見せることが可能です。 例えば、他の物件と比較したり該当エリアや市場の平均と比較したりすることでユーザにアクションを起こさせます。

表記を統一してコンテンツの質を高める

文末表記により、読み手の印象が大きく変わります。 また、文末表記が統一されていない場合、非常に読みにくい文章になります。 文末表記とは、断定的・強い主張の場合に用いられる「◯◯だ」、「◯◯である」と、丁寧・親近感のある場合に用いられる「◯◯です。」、「◯◯ます。」があります。 複数の記事を作成する前に、あらかじめどちらの表記で統一するか決めておくと良いでしょう。

表記の統一は文末表記だけではありません。 数字を英数字で表記するか、漢数字で表記するか、単位は何を使うか、半角・全角のどちらで表記するかなどがあります。 個人でブログを書いている場合でも、ゆらぎが発生するため注意が必要です。 複数人で運営しているブログでは特に注意が必要です。 その場合、表記規約などを作成し、全員がその規約に準拠する形で書かなければ、表記がバラバラになってしまいます。

表記の統一として、漢字を使わずにひらがなにするケースがあります。 以下のように強い意味を持たない感じは、ひらがなで統一すると良いでしょう。

  • 予め→ あからじめ
  • 様々な→ さまざまな
  • 敢えて→ あえて
  • 或いは→ あるいは
  • 及び→ および
  • 且つ→ かつ
  • 所謂→ いわゆる
  • 更に→ さらに
  • 既に→ すでに
  • 全て→ すべて
  • 何れ→ いずれ
  • 共に→ ともに
  • → なお
  • 未だ→ いまだ
  • 下さい→ ください
  • 出来ます→ できます
  • 致します→ いたします
  • 頂きます→ いただきます
  • 頑張る→ がんばる
  • 無い→ ない
  • 有る→ ある
  • ~の事→ ~のこと
  • ~と言う→ ~という
  • ~の為→ ~のため
  • ~の通り→ ~のとおり
  • ~故に→ ~ゆえに
  • ~な訳で→ ~な訳で
  • ~欲しい→ ~ほしい

送り仮名や、同じ意味で使う異なる言葉、カタカナの略称の表記も統一するべきポイントになります。

  • 問合せ or 問い合わせ
  • 申込み or 申し込み
  • 取扱い or 取り扱い
  • 囲込み or 囲い込み
  • 製品 or 商品
  • お店 or 店舗
  • 弊社 or 当社
  • 会社 or 企業
  • 社員 or スタッフ
  • 書式 or フォーマット
  • 文章 or ドキュメント
  • 顧客 or クライアント
  • ユーザ or ユーザー
  • サーバ or サーバー
  • ブラウザ or ブラウザー
  • スマホ or スマートフォン
  • PC or パソコン
  • Webサイト or ホームページ
  • アプリ or アプリケーション
  • ネット or インターネット

コンテンツの編集

執筆で書き上げた原案を、より読みやすく無駄のない文章にするのが編集のフェーズです。 編集のフェーズは以下のステップに分けることができます。

  1. 無駄を省き、文章の完成度を上げる
  2. レイアウト調整によってアクション率を高める

各ステップについては次章に示します。

無駄を省き、文章の完成度を上げる

これ、それ、これら、それら、この、その、前述の、後述の、などは指示代名詞と呼ばれます。 指示代名詞が文章中に含まれると理解しにくくなるだけでなく、文章が稚拙になってしまい信頼感を損ねます。 そのため、できるだけ具体的なキーワードを使用し、指示代名詞は使わないようにしましょう。 ただし、完全に指示代名詞を省くと文章がしつこくなってしまうため、バランスを考えて利用しましょう。

すると、そして (順接)、および、また (並列)、ちなみに、例えば (説明・補足)、さて、では (転換) などは接続詞と呼ばれます。 文章の書き方を説明した一部の書籍や Webサイトでは、段落の位置関係を整理し、接続詞を使わないようにしているように書かれているものもあります。 しかし、接続詞は文意の流れを補うためにある程度は必要であると考えます。 そのため、すべて削除するという方法論より、ユーザを混乱させないように文章全体として分かりやすいかどうかを考えましょう。

ことができる、ものである、ている、こと、もの、などは冗長表現と呼ばれます。 冗長表現は回りくどい印象を与えるため、できるだけなくしましょう。 ただし、接続詞と同様に目的はユーザに読みやすい文章を提供することなので、すべてを削除する必要はありません。

レイアウト調整によってアクション率を高める

ユーザのアクション率を高めるためにはレイアウトが大きな意味を持ちます。 ユーザの視線移動を考慮した適切なレイアウトは、より高いアクション率を実現します。 代表的なレイアウトは、"グーテンベルク・ダイヤグラム""Zパターン""Fパターン" の 3 種類があります。

グーテンベルク・ダイヤグラムとは、均等に配置された情報を見るときの視線移動を一般的なパターンにしたものです。 このパターンは、特にテキストの比重が高いコンテンツに有効です。

グーテンベルク・ダイヤグラム
グーテンベルク・ダイヤグラム

グーテンベルク・ダイヤグラムは 4 つの象限に分けることができます。

  • Primary optical area (一番重要なエリア(左上))
  • Strong fallow area (強い休閑エリア(右上))
  • Weak fallow area (弱い休閑エリア(左下))
  • Terminal area (終点エリア(右下))

視線移動は青い矢印のライン方向に水平運動を伴って下部へ移動します。 そのため、重要なエレメントはこのラインに沿って、配置します。 例えば、ロゴや見出しなどは左上、画像や重要なコンテンツは中央、アクションボタンなどは右下に配置します。 また、休閑エリアには視覚的に強調されるものを配置しない限り、注目は最小限となります。

Z パターンレイアウトとは、アルファベットの Z のように左上、右上、左下、右下の順に移動します。 グーテンベルグ・ダイアグラムとの大きな違いは、休閑エリアを通過するかしないかです。

Z パターンレイアウト
Z パターンレイアウト

Z パターンレイアウトは、シンプルなデザインのために少数のエレメントを扱う場合に有効です。 また、ある程度しっかりと端から端まで読まれることが想定されるコンテンツの視線移動のパターンとなります。 また、Z パターンからの派生で、ジグザグパターンや、黄金比の三角形パターンがあります。

ジグザグレイアウト
ジグザグレイアウト
黄金比の三角形レイアウト
黄金比の三角形レイアウト

F パターンレイアウトとは、アルファベットの F のように左上から始まり、水平方向に視線移動をしながら下部に移動します。 Z パターンとは異なり、流し読みする際の視線移動のパターンとなります。

F パターンレイアウト
F パターンレイアウト

コンテンツの校正

編集作業によって文章ができたら、リリース前の最終チェックを行うのが校正のフェーズです。 リリース前にチェックするべき項目は、以下の 4 つです。

  • 間違いのチェック:誤字、脱字、誤変換、誤用、ら抜き言葉などのチェック
  • 禁止表現のチェック:禁忌、不快語、虚偽、誇大表現などのチェック
  • 難読表現のチェック:当て字、難読漢字、難解な言い回しなどのチェック
  • 環境依存のチェック:環境依存文字のチェック

ユーザビリティテスト

ユーザビリティテストとは、ユーザが実際に Web サイトをどのように扱うかを観察、および意見を聞くことで問題点を発見する評価手法です。 ユーザビリティテストは、どれだけ意図された目的が達成されているかを測ることに重きを置いています。 ユーザビリティテストは "検証" であり、後述するアンケート評価などの "調査" とは明確に評価方法を区別しています。

ユーザビリティテストでは少なくとも "観察者" と "被験者" がいます。 被験者は、検証対象である Web サイトを利用したいくつかのタスクを行い、観察者はその様子を記録します。 また、被験者からのフィードバックを受けるために、事前/事後アンケートなどを用いることもあります。

ユーザビリティテストのひとつで、無作為に選ばれたユーザに商品やサービスを利用してもらう "ホールウェイテスト" と呼ばれる手法もあります。 人通りの多い都心部などでは、街頭で新商品のテストを行っている場合もあります。 新デザインの初期段階において、それ以上進めなくなるほどの致命的な問題、すなわち "煉瓦の壁" を発見するために役立ちます。 プロジェクト内のエンジニアや関係者など近しい者は一般的な意見ではなく、専門家としての意見を述べてしまいがちであり、致命的な問題であるにも関わらず見過ごしてしまう可能性があるため、ホールウェイテストが行われます。

A/B テスト/多変量テスト

Web 開発やマーケティングおいて、A/B テスト、または多変量テストは、期待するユーザの行動特性を最大化させる Web ページ上の要因を特定することを目的としたテストです。 例えば、商品の購入ボタンの色は赤色と青色の場合、どちらがより多く購入されるかなどです。 ユーザの行動特性を調べるために、ボタンの色だけを変えた A と B の 2 種類のページを用意し、どちらのページがより効果的であったかを調べます。 大規模な EC サイトでは、テストの結果がわずかな差であっても、全体の利益を考えると大幅な増益になる可能性があります。

A/B テストでは、上記のようにボタンの色のみを変更したほぼ同じデザインのページをテストすることを指すように思われがちですが、大幅にデザインを変更した 2 種類のパターンを試すテストも A/B テストと呼ばれます。 また、A/B パターン以外にも C や D のパターンを同時に試す場合は A/B/C/D テストなどとも呼ばれます。 ただし、ページのパターンを増やす場合、各ページにトラフィックが分散するため、パターンを増やしすぎると有効な統計データも少なくなります。 A/B テストで重要な点は、個々のパーツにおける影響を調べるのではなく、サイトの目標、目的に対してどのように影響があるのか調べることです。

A/B テストと仕組みは同じですが、より多くのパターンを試す多変量テストもあります。 多変量テストは完全実施要因テストとも呼ばれます。 多変量テストとは、Web に配置されたパーツの組み合わせ毎の影響を調べるテストです。 例えば、大規模な EC サイトの場合、ボタンの色の他に、セールス文言、レイアウト、画像の色使い、レビュー欄、コメント欄、ヘッダー、フッターなど多くのパーツがあります。 それらのパーツをどのように組み合わせると成果が最大になるのかテストを行うのが多変量テストです。 多変量テストでは、組み合わせの種類が膨大な数になることもあるため、トラフィック量の多いサイトでなければ有効な統計データが収集できません。

ヒューリスティック評価

ヒューリスティック評価とは、専門家がユーザビリティのチェックを行い、問題点と改善案を抽出する評価手法です。 ヒューリスティックとは "経験則" という意味で、ユーザビリティエンジニアが経験則から問題点を導きます。 ユーザビリティテストと比べて柔軟性があり、被験者を必要とせず、評価期間が短く、コストが少ないことが特長です。 ヒューリスティック評価が適している例としては、企画段階や設計段階におけるユーザビリティの評価、またはプロトタイプにおけるユーザビリティの評価です。 ウォーターフォール型のような積み上げ式の開発では、最終段階で問題点を指摘されても大幅な変更を行うことが難しいため、開発の初期段階で問題点を指摘してもらう方法が有効です。

ヒューリスティックスとしては、以下のヤコブ・ニールセンのユーザビリティ 10 原則が有名です。

  • システム状態の視認性を高める
  • 実環境に合ったシステムを構築する
  • ユーザーにコントロールの主導権と自由度を与える
  • 一貫性と標準化を保持する
  • エラーの発生を事前に防止する
  • 記憶しなくても、見ればわかるようなデザインを行う
  • 柔軟性と効率性を持たせる
  • 最小限で美しいデザインを施す
  • ユーザーによるエラー認識、診断、回復をサポートする
  • ヘルプとマニュアルを用意する

アンケート評価 - WAMMI

WAMMI (Web site Analysis and MeasureMent Inventory) はユーザの主観的評価を測定することを目的に開発された評価手法で、5 つの尺度でユーザビリティを測定します。

具体的なアンケート内容や、尺度、計算方法などは非公開であり、英語、フランス語、ドイツ語、イタリア語などのヨーロッパの言語には対応していますが、日本語には対応していません。 WAMMI のサイトに掲載されている SCALES は以下の通りです。

  • Attractiveness (魅力)
  • Controllability (操作性)
  • Efficiency (効率性)
  • Helpfulness (有用性)
  • Learnability (学習しやすさ)
  • Global Usability (グローバルユーザビリティ)

アンケート評価 - WUS

WUS (Web Usability Scale) とは、富士通とイードが共同で開発した Web ユーザビリティを定量的に評価するためのアンケート評価手法です。 Web ユーザビリティに関する 21 項目のアンケート項目を 5 段階評価で行い、その結果から生成される 7 つの評価要素で評価します。 WUS の評価要素は以下の通りです。

  • 操作のわかりやすさ
  • 構成のわかりやすさ
  • 見やすさ
  • 反応のよさ
  • 好感度
  • 内容の信頼性
  • 役立ち感

まとめ

Web ユーザビリティの正しい知識を手に入れたならば、Web 上に存在するほぼすべてのサイトよりも優れたものが作れるでしょう。 なぜなら、Web ユーザビリティは多くの人が知ってはいますが、深く正しい理解がなく、取り込むのも一苦労で、取り入れたとしても効果が見えにくいため、Web サイトを構築するにあたって複数のタスクがある場合、リソースを投資する価値がないと見なされ優先的に切り捨てられるタスクだからです。 Web ユーザビリティは知っているだけでは価値はありません。 理解し、サイトに取り込み、訪問したユーザが使いやすさを実感してこそ価値がでます。 素晴らしいページを作るのならば、 Web ユーザビリティは必要条件となります。