デザイニングWebアクセシビリティ

ナビゲーションに一貫性がないサイトを改善する4つのアプローチ

ナビゲーションのルールが明確になるように設計して、サイト内で一貫性が保たれるようにしまょう

 


このコーナーでは、書籍『デザイニングWebアクセシビリティ』の一部を特別公開しています。筆者陣によるオンライン講座「アクセシビリティ入門(全7回)」放送中。

 

ページごとにナビゲーションの位置、見た目、順序、ラベルが変化すると、道標としての機能が失われ、ユーザーを混乱させます。ナビゲーションのルールが明確になるように設計して、サイト内で一貫性が保たれるようにしましょう。

この記事では全9章の書籍から、第4章「ナビゲーション設計」のナビゲーションに一貫性がないサイトの改善ポイント、4-3「ナビゲーションに一貫性がない」の内容をお届けします。

一貫性がないと予測できない

ユーザーは、ナビゲーションを使ってサイト内のページを次々渡り歩くことがあります。ナビゲーションに一貫性がないと、ナビゲーションを見つけられなかったり、違うものに思えたりして混乱し、スムーズな回遊が難しくなります。

ページごとにナビゲーションの位置が変わる

ページごとにナビゲーションの位置が変わると、サイト内を回遊したいユーザーは、ページを移動するたびにナビゲーションを探さなければなりません。また、画面を拡大しているユーザーやスクリーンリーダーのユーザーは、ナビゲーションを読み飛ばしてコンテンツを読み始めようとします。ナビゲーションの位置がページごとに異なると、同じ操作では読み飛ばせないことがあり、非常に不便になります。

図
ページごとにナビゲーションの位置が変わる例。利用するときに都度探す必要があり、スクリーンリーダーのユーザーは読み飛ばすことが難しくなる。

ページごとにナビゲーションのスタイルが変わる

ナビゲーションの位置やラベル、リンク先が同じでも、見た目が変われば異なるもののように見えます。ひとつのサイト内にスタイルの異なるナビゲーションがあると、ユーザーは違うサイトに来たものと思って混乱してしまいます。

特に、サイト内で展開するマイクロサイトや、運営部署が違うカテゴリに移動した際などに、ナビゲーションのデザインが異なるケースが見られます。色や大きさが同じでも、アイコンなどの装飾の有無や補足文の有無といった細かい差異があると、やはり異なるもののように見えることがあります。

図
ナビゲーションのスタイルがページごとに変わる例。似て非なるデザインが繰り返し出てくると、同じナビゲーションであると認識しづらく、混乱を招く。

ラベルが一貫していない

同じコンテンツを指していても、ナビゲーションのラベルがページによって微妙に異なっていることがあります。ラベルが全く異なれば別物に見えますし、わずかに異なれば、同一のものか異なるものなのかがわからなくなって混乱します。特に、スクリーンリーダーのユーザーは、見た目やレイアウトを頼りにして同一のナビゲーションだと判断することができないため、ラベルが少し違うだけで全くの別物のように伝わることがあります。

図
ナビゲーションのラベルがページによって異なっている例。同じものを指しているのか、違うものを指すのか判断できなくなり、混乱を招く。

理由なく中身が増減したり、順番が変わる

ナビゲーション項目がページごとに増減したり、順番が入れ替わったりすると、複数のページを見て回ったときに混乱します。特に、画面を拡大しているユーザーやスクリーンリーダーのユーザーは、情報の一覧性が低く、ナビゲーションの変化に気づきにくいため、より混乱が生じやすくなります。

図
ページによってナビゲーションの項目が増減したり、順番が入れ替わっている例。項目を切り替えながらの閲覧ができなくなり、混乱の原因になる。

なお、サブメニューが展開したり、ナビゲーションの中身が階層によって変化するような場合もありますが、その挙動が一貫していれば問題ありません。一貫したルールがあれば、ユーザーはその挙動を予想できるからです。

ルールと仕組みで一貫性を保つ

明確なナビゲーションのルールを設計し、ガイドラインを用意してナビゲーションの一貫性を保ちます。また、テンプレートにナビゲーションを含めたり、CMSなどで自動生成する仕組みを用意することも効果的です。

図
ナビゲーションのルールをテンプレート化し、一貫性の考え方をガイドラインに盛り込んだ例。ガイドラインに沿って制作すれば一貫性を保つことができる。

ナビゲーションルールを設計する

ナビゲーションルールを検討する際は、まず大枠のルールから決めていきます。ヘッダ、フッタ、コンテンツエリアなどのエリアのルールを定義し、グローバルナビゲーション、ローカルナビゲーション、パンくずリストなどの有無やルールを決めていきます。ナビゲーションの項目の設計については、「4-1 分類や並び順がわかりづらい」を参考にしてください。

同時に、通常のナビゲーションのルールが適用されない、例外のケースも明確にします。たとえば、送信フォームでは、ユーザーを作業に集中させるため、ナビゲーションを消すことがあります。他にも、トップページ、サイト内検索、お問い合わせ、サイトマップ、404 Not Foundページなどは、通常と異なるルールを適用することがあります。また、広告からのランディングページ、商品プロモーションの特設サイトなどでは、あえて別のサイトのように見せることもあります。別サイトとして見せる場合、違うサイトだと明確にわかるように、はっきりと違いがわかるナビゲーションを用意しましょう。

テンプレートを設計する

ナビゲーションのルールを定義したら、実際にそのナビゲーションを含むテンプレートを用意します。ページ作成時にテンプレートを利用すれば、テンプレートに含まれるナビゲーションのルールも徹底できます。制作を複数の会社で分業する場合も、テンプレートを使えば実装面も含めて一貫性を保てます。

テンプレートからプロトタイプを簡単に作れるというメリットもあります。テンプレートにコンテンツを流し込めば、それだけでナビゲーションが機能するプロトタイプとして利用できます。既存のコンテンツと行き来するユーザーの動線を実際に確認しながらコンテンツを検討することが可能になります。

複数のテンプレートが必要になることもあります。ナビゲーションのパターンが複数あったり、例外が定義されている場合は、それぞれのパターンに沿ったテンプレートを用意しましょう。

ガイドラインを定義する

テンプレートを用意しても、誤用されたり、独自解釈による拡張が行われてしまうと、一貫性が失われます。テンプレートを適切に利用できるようにするために、使い方のガイドラインを用意し、文書化しましょう。ガイドラインにはナビゲーションのルールのほか、テンプレートの使い方なども記載します。テンプレートが複数ある場合は、それぞれをどのページに適用するのかも明記しましょう。予想される誤用については、あらかじめNG集をまとめておくと良いでしょう。

CMSでナビゲーションを管理する

CMSで自動的にナビゲーションを生成すれば、ルールを徹底でき、人為的なミスも回避することができます。手間がかかり間違えやすいところは機械に任せ、コンテンツに注力できる状況を整えましょう。

ただし、機械で生成するということは、融通が利きにくいということでもあります。必要なはずの機能がCMSの制約で実現できなくなってしまっては、本末転倒です。CMSの選定の際に、必要なナビゲーションが実現できるかどうかを確認しておきましょう。「3-6 CMSの導入で失敗する」も参照してください。

図図
CMSでサイト構造を管理し、ナビゲーションを自動出力する例。機械的に生成すればルールを徹底でき、人為ミスも防げる。

『デザイニングWebアクセシビリティ
アクセシブルな設計やコンテンツ制作のアプローチ』

  • 著者:太田良典、伊原力也
  • 定価:本体3,000円+税
  • 発行:ボーンデジタル
  • ISBN:978-4-86246-265-7

本書はアクセシビリティのガイドラインを解説した内容ではなく、サイトの制作プロセスに沿った実践的な内容となっています。それぞれのプロセスの概要と注意点、ユーザーにとって問題が起きるポイント、そして解決アプローチを紹介しています。

本書に書かれた内容を実践し、問題として挙げている点をクリアすれば、WCAG 2.0のレベルAおよびAAの達成基準のほとんどを達成することができます。巻末には、WCAG 2.0の達成基準と本書の内容との対照表を掲載していますので、ガイドラインに沿う場合の参考としてお使いいただけます。

なお、本書では基本的にHTMLとCSSで作られた静的なコンテンツを扱っています。動画や音声、アプリケーションなどについては、基本的な考え方を示すにとどめました。JavaScriptを駆使したWebアプリケーションのアクセシビリティについては、本書の姉妹書である『コーディングWebアクセシビリティ』が入門的な内容となっていますので、あわせて参考にしていただければ幸いです。

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

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

今日の用語

セッション
アクセス解析において、セッションとはWebサイトにアクセスして行う一連の行動を示 ...→用語集へ

インフォメーション

RSSフィード


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