noteで書くこのコーナーでは、書籍『デザイニングWebアクセシビリティ』の一部を特別公開しています。筆者陣によるオンライン講座「アクセシビリティ入門(全7回)」放送中。ページごとにナビゲーションの位置、見た目、順序、ラベルが変化すると、道標としての機能が失われ、ユーザーを混乱させます。ナビゲーションのルールが明確になるように設計して、サイト内で一貫性が保たれるようにしましょう。この記事では全9章の書籍から、第4章「ナビゲーション設計」のナビゲーションに一貫性がないサイトの改善ポイント、4-3「ナビゲーションに一貫性がない」の内容をお届けします。一貫性がないと予測できないユーザーは、ナビゲーションを使ってサイト内のページを次々渡り歩くことがあります。ナビゲーションに一貫性がないと、ナビゲーションを見つけられなかったり、違うものに思えたりして混乱し、スムーズな回遊が難しくなります。ページごとにナビゲーションの位置が変わるページごとにナビゲーションの位置が変わると、サイト内を回遊したいユーザーは、ページを移動するたびにナビゲーションを探さなければなりません。画面を拡大しているユーザーやスクリーンリーダーのユーザーは、ナビゲーションを読み飛ばしてコンテンツを読み始めようとします。ナビゲーションの位置がページごとに異なると、同じ操作では読み飛ばせないことがあり、非常に不便になります。ページごとにナビゲーションの位置が変わる例。利用するときに都度探す必要があり、スクリーンリーダーのユーザーは読み飛ばすことが難しくなる。ページごとにナビゲーションのスタイルが変わるナビゲーションの位置やラベル、リンク先が同じでも、見た目が変われば異なるもののように見えます。ひとつのサイト内にスタイルの異なるナビゲーションがあると、ユーザーは違うサイトに来たものと思って混乱してしまいます。サイト内で展開するマイクロサイトや、運営部署が違うカテゴリに移動した際などに、ナビゲーションのデザインが異なるケースが見られます。色や大きさが同じでも、アイコンなどの装飾の有無や補足文の有無といった細かい差異があると、やはり異なるもののように見えることがあります。ナビゲーションのスタイルがページごとに変わる例。似て非なるデザインが繰り返し出てくると、同じナビゲーションであると認識しづらく、混乱を招く。ラベルが一貫していない同じコンテンツを指していても、ナビゲーションのラベルがページによって微妙に異なっていることがあります。ラベルが全く異なれば別物に見えますし、わずかに異なれば、同一のものか異なるものなのかがわからなくなって混乱します。スクリーンリーダーのユーザーは、見た目やレイアウトを頼りにして同一のナビゲーションだと判断することができないため、ラベルが少し違うだけで全くの別物のように伝わることがあります。ナビゲーションのラベルがページによって異なっている例。同じものを指しているのか、違うものを指すのか判断できなくなり、混乱を招く。理由なく中身が増減したり、順番が変わるナビゲーション項目がページごとに増減したり、順番が入れ替わったりすると、複数のページを見て回ったときに混乱します。画面を拡大しているユーザーやスクリーンリーダーのユーザーは、情報の一覧性が低く、ナビゲーションの変化に気づきにくいため、より混乱が生じやすくなります。ページによってナビゲーションの項目が増減したり、順番が入れ替わっている例。項目を切り替えながらの閲覧ができなくなり、混乱の原因になる。サブメニューが展開したり、ナビゲーションの中身が階層によって変化するような場合もありますが、その挙動が一貫していれば問題ありません。一貫したルールがあれば、ユーザーはその挙動を予想できるからです。ルールと仕組みで一貫性を保つ明確なナビゲーションのルールを設計し、ガイドラインを用意してナビゲーションの一貫性を保ちます。テンプレートにナビゲーションを含めたり、CMSなどで自動生成する仕組みを用意することも効果的です。ナビゲーションのルールをテンプレート化し、一貫性の考え方をガイドラインに盛り込んだ例。ガイドラインに沿って制作すれば一貫性を保つことができる。ナビゲーションルールを設計するナビゲーションルールを検討する際は、まず大枠のルールから決めていきます。ヘッダ、フッタ、コンテンツエリアなどのエリアのルールを定義し、グローバルナビゲーション、ローカルナビゲーション、パンくずリストなどの有無やルールを決めていきます。分類や並び順がわかりづらい」を参考にしてください。同時に、通常のナビゲーションのルールが適用されない、例外のケースも明確にします。送信フォームでは、ユーザーを作業に集中させるため、ナビゲーションを消すことがあります。Foundページなどは、通常と異なるルールを適用することがあります。広告からのランディングページ、商品プロモーションの特設サイトなどでは、あえて別のサイトのように見せることもあります。別サイトとして見せる場合、違うサイトだと明確にわかるように、はっきりと違いがわかるナビゲーションを用意しましょう。テンプレートを設計するナビゲーションのルールを定義したら、実際にそのナビゲーションを含むテンプレートを用意します。ページ作成時にテンプレートを利用すれば、テンプレートに含まれるナビゲーションのルールも徹底できます。制作を複数の会社で分業する場合も、テンプレートを使えば実装面も含めて一貫性を保てます。テンプレートからプロトタイプを簡単に作れるというメリットもあります。テンプレートにコンテンツを流し込めば、それだけでナビゲーションが機能するプロトタイプとして利用できます。既存のコンテンツと行き来するユーザーの動線を実際に確認しながらコンテンツを検討することが可能になります。複数のテンプレートが必要になることもあります。ナビゲーションのパターンが複数あったり、例外が定義されている場合は、それぞれのパターンに沿ったテンプレートを用意しましょう。ガイドラインを定義するテンプレートを用意しても、誤用されたり、独自解釈による拡張が行われてしまうと、一貫性が失われます。テンプレートを適切に利用できるようにするために、使い方のガイドラインを用意し、文書化しましょう。ガイドラインにはナビゲーションのルールのほか、テンプレートの使い方なども記載します。テンプレートが複数ある場合は、それぞれをどのページに適用するのかも明記しましょう。予想される誤用については、あらかじめNG集をまとめておくと良いでしょう。CMSでナビゲーションを管理するCMSで自動的にナビゲーションを生成すれば、ルールを徹底でき、人為的なミスも回避することができます。手間がかかり間違えやすいところは機械に任せ、コンテンツに注力できる状況を整えましょう。機械で生成するということは、融通が利きにくいということでもあります。必要なはずの機能がCMSの制約で実現できなくなってしまっては、本末転倒です。CMSの選定の際に、必要なナビゲーションが実現できるかどうかを確認しておきましょう。CMSの導入で失敗する」も参照してください。CMSでサイト構造を管理し、ナビゲーションを自動出力する例。機械的に生成すればルールを徹底でき、人為ミスも防げる。発行:ボーンデジタルISBN:978-4-86246-265-7本書はアクセシビリティのガイドラインを解説した内容ではなく、サイトの制作プロセスに沿った実践的な内容となっています。それぞれのプロセスの概要と注意点、ユーザーにとって問題が起きるポイント、そして解決アプローチを紹介しています。2.0のレベルAおよびAAの達成基準のほとんどを達成することができます。2.0の達成基準と本書の内容との対照表を掲載していますので、ガイドラインに沿う場合の参考としてお使いいただけます。本書では基本的にHTMLとCSSで作られた静的なコンテンツを扱っています。動画や音声、アプリケーションなどについては、基本的な考え方を示すにとどめました。JavaScriptを駆使したWebアプリケーションのアクセシビリティについては、本書の姉妹書である『コーディングWebアクセシビリティ』が入門的な内容となっていますので、あわせて参考にしていただければ幸いです。委員を務めた後、2001年にBAに参加。Web技術の分野で幅広い専門性を持ち、セキュリティ分野においては「第二回IPA賞(情報セキュリティ部門)」を受賞。アクセシビリティ分野では、ウェブアクセシビリティ基盤委員会(WAIC)の委員として活動している。Webプログラミング」など。/ウェブアクセシビリティ基盤委員会(WAIC)理解と普及作業部会委員1999年よりWeb標準に則ったWebサイトの構築業務に従事。2004年にBAに参加。マークアップデザインエンジニアとして業務を行う傍ら、HCD(人間中心設計)プロセス導入を推進。現在はプロジェクト設計、調査分析、コンセプト立案から、アクセシビリティおよびユーザビリティを確保したインタラクションデザイン、さらにフロントエンド実装のディレクションまでを一貫して手がける。クリエイティブユニットmokuva所属。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。ネット広告への強い嫌悪感、テレビや新聞の倍以上に。いいね!伝説のTwitter企業アカウント“中の人”の先駆け。いいね!「おもてなし」は思考停止ワード。いいね!私は変人コレクター。「おもてなし」は思考停止ワード。歴史から最新トピックまでを解説Web担編集部がゼロから学ぶ、Tableau「BI講座」。Patterns』を3名様にプレゼント!【受付終了】企業がDXに向かう取り組み方を考える『デジタルファースト・ソサエティ』を3名様にプレゼント!すべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。