【UX】ゼロから学ぶ 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 に一部含まれます。ただし、これらの概念の包括関係には様々な議論があるため、以下に示す図が正しいとは限りません。
ユーザビリティという言葉は非常に曖昧で、捉えにくいものです。なぜなら、製品の特性、使用するユーザ、利用状況などによって "使いやすさ" は変化するためです。ある人にとってはユーザビリティが高いと評価されるものであっても、別の人からはユーザビリティが低いと評価される場合もあります。
そのような問題に対応するため、ユーザの要求や制限などを考慮して設計を行う考え方としてユーザ中心設計 (User Centered Design：UCD) があります。ユーザ中心設計が他のデザインの考え方と大きく異なるのは、ユーザがシステムや機能に合わせるのではなく、ユーザが欲しいインターフェースが何であるかを考え、それらを最適化する点にあります。
Jesse James Garrett が考案した 5 Planes Model は、ユーザのニーズや目的から視覚的デザインまでを 5 階層に分けて定義したモデルです。最初に最下層のユーザのニーズや目的を定義し、上位層にシフトしながらデザインを具現化していく設計手法です。この手法は、ユーザにフォーカスした設計が可能であり、ユーザの求めるデザインを実現する可能性を高めます。
しかし、ユーザが求めるデザインはユーザ毎に異なるため、万人に受け入れられる標準化された 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 ページにおけるアクセシビリティとは、高齢者や障害者にもより使いやすく、情報の取得、または発信できる柔軟性の度合いを意味します。高齢者や障害者であっても知る権利を保証する情報保障として重要であり、特に公共サービスではその意味が大きくなります。アクセシビリティに配慮する方法として、視力の弱いユーザには文字を大きくし、全盲のユーザにはテキストの音声読み上げ機能を導入するなどがあります。アクセシビリティの実装に膨大なリニューアル費用がかかる場合は、費用を抑えるために後付けのプラグインや ASP サービスも普及しています。
総務省は Web アクセシビリティへの情報提供として「みんなの公共サイト運用ガイドライン (2024年版)」を公開しています。その資料の中には、"障害者がインターネット利用で困っていること" の調査結果として "障害に配慮したホームページが少ない" という意見が決して低くない数字で表れています。
アクセシビリティは、UX の中では最も根本的な問題であり、その他すべての構成要素における土台であるという議論があります。なぜなら、情報を評価するという行為は、情報にアクセスできなければ、評価自体も行うことができないからです。また、アクセシビリティとファインダビリティは混同されがちですが、情報を見つけることができても、その情報にアクセスできなければ意味がないため、アクセシビリティが最下層になるのではないかと考えられています。
アクセシビリティは、いくつかのガイドラインが策定されています。W3C からは WCAG (Web Contents Accessibility Guidelines) が策定されています。2023 年に WCAG 2.2 が策定されています。
日本工業規格 (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 ％ の割合で存在します。それぞれの見える色の例は以下の通りになります。
色盲ユーザが取り違えやすいモノは、色に意味を持たせて区別しているもの全般です。カレンダー、グラフ、路線図、地図、標識、案内板、申請用紙、パッケージ、ランプ、ネクタイの柄に至るまで多岐に渡ります。色盲ユーザにも情報を正しく伝えるためには、以下の対応方法があります。
上記のカラーチャートを参考に配色を見直す。
色の濃淡、明暗の差をつけて見やすくする。
色の代わりに記号、数字、シンボルなどで示す。
ハッチング (模様) を付ける。
文字や線を太くする。
弱視のユーザ、または高齢化したユーザは、視力が弱く、細かいボタンや文字を認識することが困難になります。一般的に弱視のユーザは、解像度を大きくしたり、ルーペの機能を使ったり、ブラウザの機能で画面の倍率を大きくしたりしています。また、あるサイトではそれらの機能を使わなくても文字サイズを変更できる "大"、"小" ボタンが付いている場合があります。しかし、文字サイズを変更できるボタンは、本当の意味で弱視のユーザに対するアクセシビリティの向上には寄与していません。なぜなら、"大" ボタンを押したとしても極端な大きさに変更されるわけではなく、およそ 1.5 ～ 2.0 倍程度であり、弱視のユーザは程度の差こそあれ、その程度の大きさでは何も変わっていないのと同じだからです。サイト上には文字だけではなく、その他のパーツが配置されているため、作り手側はそれらのレイアウトを崩さない範囲で大きくしているに過ぎません。そのため、少し視力の弱いユーザには有効かもしれませんが、弱視のユーザには効果があるとは言えません。
聴覚障害
Web ページではテキスト、画像の他にも情報を伝える手段として音楽のマルチメディアを使用している場合があります。多くのユーザはテキストと画像に慣れているため、音楽でしか伝えることができない情報を発信しているサイトは多くありませんが、アクセシビリティを考える場合は、聴覚障害者のことを忘れてはいけません。例えば、自動再生される動画の広告においてサウンドが鳴っているか、ミュート状態で再生しているか表すためのアイコンが表示されているなどです。この手法は、OS やブラウザの機能として Web ページを常にミュート状態にしているユーザや、そもそもコンピュータにサウンドデバイスが付いていないユーザにも分かりやすい表現と言えます。
聴覚障害におけるアクセシビリティの最大の問題点は、音声情報などのコンテンツがあったとしても現状では情報を保障する仕組みが存在しないことです。一部の TV 番組では音声情報を手話で伝えていますが、Web のマルチメディアコンテンツにおいては動画を手話に変換する技術はありません。Youtube などの動画共有サイトの一部のコンテンツで字幕が機械的に付けられていますが、多くは英語の動画で、日本語の動画ではあまり見かけません。しかし、Youtube の字幕機能の素晴らしいところは、英語字幕であっても多くの言語へ翻訳が可能であるという点です。もちろん、その中には日本語も含まれています。ただし、2017 年時点での翻訳品質は改善の余地があり、機械的な翻訳結果になっています。しかし、AI などの先端技術により、それらの問題は間もなく解決されるでしょう。
字幕は聴覚障害のユーザのアクセシビリティをサポートするひとつの手段ですが、問題もあります。例えば、洋画などでは日本語字幕が用意されていますが、吹替版や邦画などでは字幕が用意されていないことです。もちろん、すべての邦画に字幕が用意されていないわけではありません。一部の邦画や劇場では字幕が用意されていますが、それでもなお聴覚障害のユーザは極端に選択の幅を制限されていることには変わりません。また、映画では字幕が存在しますが、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 などを使用する。
フォントサイズを 16 pt 程度に大きくする。
難しい漢字にはルビをふる。
文章を画像などで表現できる場合はビジュアル化する。
実用的なアクセシビリティ
このページを含めて、多くのページではアクセシビリティのガイドラインに準拠していません。アクセシビリティのガイドラインを守るためには多くの時間とコストがかかり、健常者に比べて障害者の割合が低いため、どうしても省略されがちな要素となっています。しかし、"完璧ではないデザイン" と "アクセシビリティを気にしないデザイン" では大きな差があります。ガイドラインのすべての項目に対応できなくとも、アクセシビリティを良くするための努力は続けなくてはなりません。
アクセシビリティのテストを行う場合、テキストのみ表示するブラウザでアクセスすることが有効です。正しく表示されている場合、概ね良好な結果と言えます。本来であれば、障害を持つユーザにユーザビリティテストをしてもらうことが最も良い方法ですが、障害には多くの種類があるため、すべての障害に対応したサイトを構築することは非常に難しいのが現状です。
サイト／ページデザイン
ある研究グループによる調査では、被験者にある問題を出して Web サイトの中から答えを探した時、時間内に正しいページを見つける確率は 42 ％しかありませんでした。さらに、6 つの大企業サイトにて求人を申し込むという課題に対しては 26 ％まで確率が低下しました。単一のページが優れていても、ユーザが複数のページを横断して情報を探したり、ある目的を達成しようとする場合、Web サイトの構造がシンプルでなければ使い勝手は非常に悪いものになります。
"ホームページ" とはいくつかのニュアンスを含みますが、ここではサイトのトップページを指します。ホームページは、各ページとは異なり特別な意味を持ちます。Web サイトの入り口であり、最上位のページであり、すべてのページから帰る場所でもあります。昔のホームページはサイトマップのような意味が強く、サイト全体を俯瞰できるようなデザインが主流でした。しかし、現在では各記事の一覧が時系列に表示されるデザインが主流になっています。
ホームページに各記事の一覧が表示されるデザインは WordPress などの CMS の普及に伴い広がりました。ただし、それらのデザインは個人サイトがメインであり、企業サイトでは以前としてホームページはどのようにデザインするかが課題となっています。代表的な手法としては、画像の一部だけを動かす "シネマグラフ"、スクロールに応じてエフェクトが発生する "パララックス"、グラフなどのデータを視覚的に見やすい形に表現した "インフォグラフィックス"、体験談やエピソードなどの物語を引用してユーザに印象付ける "ストーリーテリング" などです。
企業サイトでも、ユーザの訪問目的が明確である場合、ホームページにはユーザの求める機能を設置しているケースもあります。極端な例で言えば、Google のホームページには検索用のテキストボックスとボタン以外は何も置かれていません。その他にも航空会社では、ホームページに飛行機のチケット予約するためのフォームが設置してあります。多くのユーザのためにデザインをシンプルにする方法は、機能的であり、ユーザの満足度を高めることができます。
しかし、一方でユーザの満足度を下げるホームページも存在します。例えば、アニメーションを見なければ先に進めないスプラッシュページや、Welcome メッセージ、Now Loading が毎回表示されるなど、ユーザに何かしらを強制させるページアクションです。ただし、ユーザを振り分けるために年齢制限など何かの制約に同意しなければ進めない警告ページは、ユーザビリティよりもコンプライアンスの観点から必要になる場合があります。
ナビゲーション
ナビゲーションインターフェースでは、現在ユーザが Web サイト内のどこにいるのか、どこに行けるのかを示す必要があります。最も一般的なナビゲーションとしては、各ページの左上にロゴマークが表示されており、ホームページへのリンクが貼られているナビゲーションです。その他にもナビゲーションにはいくつかの種類があり、大きく分けると以下のナビゲーションが一般的です。
サイトマップ
グローバルナビゲーション
ローカルナビゲーション
パンくずリスト
関連ページ
ページネーション
ヘッダー／フッター
サイト内検索
ページ内リンク
サイト内リンク
外部リンク
これらのナビゲーションについて、個別に見ていきましょう。
サイトマップ
サイトマップとは、サイト全体を俯瞰するための見取り図のようなものです。ここでは、検索エンジンに登録するための XML サイトマップではなく、ユーザがサイトを理解するための HTML サイトマップのことを指します。
サイトマップは、ユーザがサイト全体を理解したい場合や、目的のページを見つけられずに迷った場合などに利用されます。一般的にサイトマップはカテゴリー毎に整理されており、コンテンツが一覧形式で表示されています。例えば、大量のコンテンツを扱う Yahoo! のサイトマップは以下のように整理されています。
グローバルナビゲーション
グローバルナビゲーションとは、サイトのコンテンツをカテゴライズした最上位のメニューです。コンテンツのページに遷移しても決まった場所に、決まった順番で表示されます。
情報はいくつかのコンテンツにカテゴライズされ、ディレクトリ構成に合わせてメニュー化されます。カテゴライズの方法は、サイトの特性によって異なります。例えば、金融機関のサイトでは個人と法人の両方のユーザを対象とするため、それぞれのユーザに最適化されたグローバルナビゲーションを用意しています。
ローカルナビゲーション
ローカルナビゲーションとは、グローバルナビゲーションから選択したコンテンツが更に複数のカテゴリに分類される場合に表示されるサブメニューです。一般的には、グローバルナビゲーションの下や、サイドカラムに表示されます。ローカルナビゲーションは、グローバルナビゲーションとは異なり、コンテンツ毎にメニューの数が変わります。
ローカルナビゲーションは、ディレクトリ構造の深さに依存する場合があります。情報を細かく分類している場合、ディレクトリ構造が深くなるため、ユーザは何度もサブメニューを選択することになります。異業種を合併したコングロマリットのような大企業のサイトでは、ディレクトリ構造が深くなる場合があります。しかし、ユーザが目的の情報にたどり着くまでに何度もサブメニューを選択させることは良い方法とは言えません。ディレクトリ構造が深くなりすぎる場合は、サブドメイン、またはドメインを分割することを検討してください。
パンくずリスト
ユーザが 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 に戻って調べ直さなくてもブラウズによって単語の情報を取得できます。関連ページのナビゲーションも広義の意味でサイト内リンクであると言えます。
ただし、サイト内リンクはサイトの構造とは無関係に配置されるため、ユーザが迷子にならないように情報アーキテクチャの設計も求められます。
外部リンク
外部リンクのナビゲーションとは、記事における根拠資料の出処や、出典、引用、参考にした外部サイトへのリンクです。ユーザには内部リンクと、外部リンクはクリックする前にどちらであるかアイコンで知らせているケースもあります。しかし、外部リンクにはクリックしたときに "別ウィンドウで開く" か "同一ウィンドウで開くか" の根深い議論があります。
別ウィンドウで開く派の意見
ユーザには自身のサイトから離脱して欲しくない。
外部サイトに移動することを明確にしなければユーザに誤解や混乱を与える。
戻りやすいようにウィンドウを分割する方が親切である。
同一ウィンドウで開く派の意見
ブラウザの戻るボタンが使えないため不便である。
ウィンドウの使い方はユーザが決めるべきであり、作り手側が決めるべきではない。
外部サイトへのリンクを区別する場合、アイコンを付ければ十分である。
この問題は、一概にどちらが良いかは決められません。なぜなら、外部サイトから戻る確率や、別ウィンドウとして見比べたい場合や、別ウィンドウ先でアクションを起こした後には閉じてしまうなど、ケースが異なればどちらがユーザビリティとして優れているか評価が異なるためです。
コンテンツデザイン
結局、ユーザはコンテンツ目当てでウェブサイトに足を運ぶものだ。
コンテンツ以外の要素は単なる背景にすぎない。
デザインはコンテンツにアクセスできるようにするためにあるのだ。
劇場に足を運ぶ人のことを考えてみればいい。
劇場を後にした彼らと話をするとしたら
「この劇は面白かったかい？」とは聞きたいだろうが
「衣装はすばらしかったかい？」なんて話にはならないだろう。
デザインはコンテンツを表現するための重要な要素です。殺風景なテキストが並ぶモノトーンなページより、洗練されたデザインである方がユーザに与える印象はまるで違うものになります。しかし、ユーザは洗練されたデザインを見にページを訪れているわけではありません。ユーザは何かしらの情報を求めてページに訪れるため、デザインよりもコンテンツが重視されます。例え、デザインがコンテンツより何倍の時間がかかっていても。
良質なコンテンツの原則
良質なコンテンツの原則とは、「わかりやすいこと」、「役に立つこと」、「親しみやすいこと」 です。
Clear：わかりやすいこと
Web には乱雑な言葉があふれています。その中で良質なコンテンツを確立するためには、一文一文を丁寧に吟味することが大切になります。難しい言葉や専門用語を控え、わかりにくい言い回しは避け、できるだけ短い文章で伝えましょう。Useful：役に立つこと
今書いていることは、ユーザが求めている情報であるかを常に考えてください。多くのユーザは何かしらの問題を抱えて Web サイトに訪れます。Web サイトはユーザの問題を解決する方法のひとつです。ユーザの役に立つ情報をどのようにして伝えるか、他サイトと比較して希少性はあるか、タイトルと記事のゴールが矛盾していないかなどを確認してください。Friendly：親しみやすいこと
記事を書く場合、読み手を意識することが大切です。親しみやすい雰囲気を出すために、的確な言葉を選び、望ましい口調で共感を集めるライティングスタイルを確立しましょう。親しみやすい文章ならば、目的の情報を見つけ出すユーザのストレスを軽減できます。親しみやすいコンテンツならば、ユーザは何度も Web サイトを訪問してくれるでしょう。ユーザを笑顔にするためにはどうすればよいか、この Web サイトに出会えて良かったと思ってくれるためにはどうすればよいかを考えましょう。
読みやすい文章
読みやすい文章については、以下の記事を参考にしてください。
ライティングの種類
ライティングには様々な定義がありますが、大別すると「コンテンツライティング」、「コピーライティング」、「Web ライティング」の 3 種類があります。
コンテンツライティングとは、ユーザが満足するコンテンツを作るためのライティング技術です。ユーザが満足するコンテンツとは、ユーザの問題を解決するための役に立つ情報や、他サイトと比較して希少性の高い情報などです。3 種類のライティングの中でもコンテンツライティングが最も重要になります。
コピーライティングとは、ユーザの興味を引き、読みやすく、また読み進めたくなるようなライティング技術です。キャッチコピーを付ける場合や、ユーザに商品の購入などのアクションを起こさせる場合に用いられます。
コンテンツライティング
Web ライティングの作業も、基本的には紙媒体と同じ流れで作成します。作業フローとしては、「企画」、「執筆」、「編集」、「校正」 の順で作業を行います。
企画とは、コンテンツの方針を決めて、必要な情報を収集し、執筆を行うための準備をします。どのような良質のコンテンツでも、ユーザのニーズがなければ集客にはつながりません。ニーズのあるテーマを調べ、ユーザの興味をひくようなキーワードを決め、ユーザの知りたい情報を収集します。つまり、ユーザが何を必要とし、自分には何が求められているのかを考えるフェーズになります。その上で、どのような方針で執筆するかを決定します。
執筆とは、企画で決めた方針に従い、実際に文章を作成する作業です。ユーザに伝わりやすい文章や、共感できるようなストーリーを作成します。執筆の作業は目次から作成し、その後に内容を肉付けしていくと、文章や全体の構造に流れができあがり、乱れにくくなります。
編集とは、作成した文章を読みやすい文章にする作業です。その他にもユーザの理解を助けるために、図表を追加したり、レイアウトを調整したり、ユーザがアクションを起こしやすいようにします。
校正とは、誤字、脱字、文法誤りをなくし、公開できる状態にする作業です。SEO を意識したキーワードの最終調整や、NG ワードが含まれていないかなどの検証も行います。その他にも、文字コードの確認、HTML の文法エラーの確認、ページスピードのパフォーマンスチューニングも公開前に実施しましょう。
コンテンツの企画
コンテンツを作成するための計画を立てるのがこの企画フェーズになります。ニーズやトレンドからテーマを決めて、検索キーワードとして集客力のあるキーワードを選定し、執筆するための情報を集めます。企画は、以下のステップに分けることができます。
検索件数からニーズを確認する
将来性からテーマを絞り込む
アクションにつながるキーワードを選定する
検索順位で上位になれるキーワードか確認する
各ステップについては次章に示します。
検索件数からニーズを確認する
多くのユーザに訪問してもらい、アクションを起こして欲しい場合、まずはニーズのあるテーマを選ぶことが大切です。ニーズを確認する手段として、検索エンジンのデータを利用してテーマを選出できます。
検索エンジンのデータは、"キーワードプランナー" でチェックできます。キーワードプランナーは、Googleの検索結果に連動して広告を掲載するサービス "Googleアドワーズ" で利用できるツールです。
キーワードプランナーのデータでは、指定したキーワードの検索件数、競合性、推定入札単価、指定したキーワードに関連するキーワードの情報も得られます。キーワードプランナーでコンテンツを作成する分野のキーワードの一覧と検索件数を取得し、それを参考にテーマを選びます。
将来性からテーマを絞り込む
検索件数によって選出したテーマの候補の中で、将来性のあるニーズのテーマを絞り込む作業です。テーマの経時的ニーズの変化を確認し、効果を上げ続けるテーマを選定します。
キーワードプランナーのデータから現在のニーズは確認できますが、将来のニーズは確認できません。将来のニーズを確認するには、"Google トレンド" を利用します。Google トレンドにニーズを確認したいキーワードを入力し、"予測" のチェックを入れると破線で 1 年先までの予測ニーズが表示されます。
Google トレンドでキーワードのニーズを確認する場合は、グラフの傾きに注意してください。
右肩上がりであれば、将来性が高く、ニーズが増える可能性が高いテーマになります。
水平であれば、将来性はありませんが安定しており、普遍的なニーズがあるテーマになります。
右肩下がりであれば、将来性が低く、ニーズが減る可能性が高いテーマになります。
急増している場合は、新しい分野のテーマで将来性は不明です。一過性のニーズである場合もあります。
アクションにつながるキーワードを作成する
テーマを決定したら、そのテーマの中で対策すべきキーワードを選定します。キーワードとは、検索エンジンで検索する際に入力される単語のことです。SEO 対策では、より多くの人が利用し、アクションにつながりやすいキーワードを選べるか否かで成果が大きく変わります。
キーワードには、アクションにつながるキーワードと、アクションにつながらないキーワードがあります。アクションにつながるキーワードとは、ニーズを含むキーワードです。代表的なパターンとしては、以下の 4 パターンがあります。
エリアを含むパターン (「美容院・代官山」、「レストラン・渋谷」など)
解決方法を含むパターン (「ダイエット・方法」、「転職・仕方」など)
購入意思を含むパターン (「デジカメ・激安」、「SEO対策・相場」など)
緊急性を含むパターン (「デジカメ・修理」、「名刺・即日」など)
上記のパターンは、検索ユーザが何を求めているのかが明確であり、購入や問い合せなどのアクションにつながるニーズが含まれています。アクションにつながるキーワードは何かしらの動機を表すキーワードがセットになっています。そのため、選定したテーマにアクションにつながるキーワードを選ぶ場合は、動機を表すキーワードを選定すると良いでしょう。
アクションにつながらないキーワードとは、検索ユーザのニーズとコンテンツが一致していない場合です。例えば、購入や問い合せを目的としているのに、検索ユーザは何かの調べ物に利用していたり、関連情報を集めている場合などです。代表的なパターンとして、以下の 2 パターンがあります。
言葉の意味や情報収集を目的とするキーワード (「SEO対策とは」など)
目的が明確でなく何をしたいか判断できないキーワード (「SEO」など)
何かを調べるパターンでは、対象のキーワードが調べ終わった時点で目的が達成されてしまうので、こちらが期待するアクションをしてくれる確率は低くなります。同様に、目的が明確でないキーワードは、ビッグキーワードに分類されるため、検索結果の上位には大手企業の Web サイトが並び、対策を行うのが難しいため、集客力が低くなる可能性があります。
検索順位で上位になれるキーワードか確認する
キーワードの選定では、同じキーワードを扱っている他のサイトを考慮する必要があります。ニーズと将来性があるテーマで、アクション率の高いキーワードでも、競合するサイトが大手や古参である場合は、成果が出にくい場合があります。
キーワードプランナーでも "競合性" という項目があります。競合性は "高"、"中"、"低" の 3 段階で評価されます。競合性が "高" の場合、多くの広告主が競い合っており、人気のある魅力的なキーワード分野であると言えます。ただし、人気のあるキーワードであるため、検索結果の上位に掲載されるのも難しくなります。
検索エンジンで何かを調べようとするとき、多くのユーザは 1 ページ目、または 2 ページ目までしか訪問しません。将来性があり、ユーザのアクションを得やすいキーワードは検索順位で上位になることは難しいため、スモールキーワードを狙うか、検索順位で上位になるために対策を行うかのどちらかになります。
コンテンツの執筆
企画フェーズで集めた情報から文章を作成していくのが執筆のフェーズです。構成、表現、文章量以外はすべて後続の編集フェーズで行うため、一気に書き上げてしまいましょう。執筆の作業は、以下のステップに分けることができます。
伝わりやすい文章構成にする
アクションを導くストーリータイプを選択する
表記を統一してコンテンツの質を高める
各ステップについては次章に示します。
伝わりやすい文章構成にする
文章を実際に書き出す前に、読み手に伝わりやすい文章構成について確認します。文章構成は、一般的な "起承転結" の型を利用して効果的な文章を作成する方法を説明します。
文章構成やストーリーを考える前に、すべてのコンテンツに明確な目的を持たせ、それらに合った "結論" を用意することが重要です。ただし、単純に結論だけを書けば良いというわけではありません。ユーザが目的のアクションを取りたくなるようなコンテンツを作成する必要があり、結論はユーザにアクションを起こさせるためのトリガーとして用意するべきです。
"起承転結" は 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 インターネット
コンテンツの編集
執筆で書き上げた原案を、より読みやすく無駄のない文章にするのが編集のフェーズです。編集のフェーズは以下のステップに分けることができます。
無駄を省き、文章の完成度を上げる
レイアウト調整によってアクション率を高める
各ステップについては次章に示します。
無駄を省き、文章の完成度を上げる
これ、それ、これら、それら、この、その、前述の、後述の、などは指示代名詞と呼ばれます。指示代名詞が文章中に含まれると理解しにくくなるだけでなく、文章が稚拙になってしまい信頼感を損ねます。そのため、できるだけ具体的なキーワードを使用し、指示代名詞は使わないようにしましょう。ただし、完全に指示代名詞を省くと文章がしつこくなってしまうため、バランスを考えて利用しましょう。
すると、そして (順接)、および、また (並列)、ちなみに、例えば (説明・補足)、さて、では (転換) などは接続詞と呼ばれます。文章の書き方を説明した一部の書籍や Webサイトでは、段落の位置関係を整理し、接続詞を使わないようにしているように書かれているものもあります。しかし、接続詞は文意の流れを補うためにある程度は必要であると考えます。そのため、すべて削除するという方法論より、ユーザを混乱させないように文章全体として分かりやすいかどうかを考えましょう。
ことができる、ものである、ている、こと、もの、などは冗長表現と呼ばれます。冗長表現は回りくどい印象を与えるため、できるだけなくしましょう。ただし、接続詞と同様に目的はユーザに読みやすい文章を提供することなので、すべてを削除する必要はありません。
レイアウト調整によってアクション率を高める
ユーザのアクション率を高めるためにはレイアウトが大きな意味を持ちます。ユーザの視線移動を考慮した適切なレイアウトは、より高いアクション率を実現します。代表的なレイアウトは、「グーテンベルク・ダイヤグラム」、「Zパターン」、「Fパターン」の 3 種類があります。
グーテンベルク・ダイヤグラム
均等に配置された情報を見るときの視線移動を一般的なパターンにしたものです。このパターンは、特にテキストの比重が高いコンテンツに有効です。
グーテンベルク・ダイヤグラムは 4 つの象限に分けることができます。
Primary optical area (一番重要なエリア(左上))
Strong fallow area (強い休閑エリア(右上))
Weak fallow area (弱い休閑エリア(左下))
Terminal area (終点エリア(右下))
視線移動は青い矢印のライン方向に水平運動を伴って下部へ移動します。そのため、重要なエレメントはこのラインに沿って、配置します。例えば、ロゴや見出しなどは左上、画像や重要なコンテンツは中央、アクションボタンなどは右下に配置します。また、休閑エリアには視覚的に強調されるものを配置しない限り、注目は最小限となります。
Z パターンレイアウト
アルファベットの Z のように左上、右上、左下、右下の順に移動します。グーテンベルグ・ダイアグラムとの大きな違いは、休閑エリアを通過するかしないかです。
Z パターンレイアウトは、シンプルなデザインのために少数のエレメントを扱う場合に有効です。また、ある程度しっかりと端から端まで読まれることが想定されるコンテンツの視線移動のパターンとなります。また、Z パターンからの派生で、ジグザグパターンや、黄金比の三角形パターンがあります。
F パターンレイアウトとは、アルファベットの F のように左上から始まり、水平方向に視線移動をしながら下部に移動します。Z パターンとは異なり、流し読みする際の視線移動のパターンとなります。
コンテンツの校正
編集作業によって文章ができたら、リリース前の最終チェックを行うのが校正のフェーズです。リリース前にチェックするべき項目は、以下の 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 原則が有名です。
システム状態の視認性を高める
実環境に合ったシステムを構築する
ユーザーにコントロールの主導権と自由度を与える
一貫性と標準化を保持する
エラーの発生を事前に防止する
記憶しなくても、見ればわかるようなデザインを行う
柔軟性と効率性を持たせる
最小限で美しいデザインを施す
ユーザーによるエラー認識、診断、回復をサポートする
ヘルプとマニュアルを用意する
あとがき
最後までお読み頂きありがとうございました。
高評価やフォローをお待ちしております。
X や note では、ブログやデザインに関する有益な情報を発信しています。
x.com：https://x.com/murashun
この記事が気に入ったらサポートをしてみませんか？