アクセシビリティ・ユーザビリティ・インフォメーションアーキテクチャ Web制作用語

ホームページ（ウェブサイト）を制作し、長期的に運用していく上で、デザインや記事の内容と同じくらい重要になるのが、利用する人にとっての使いやすさや、情報の探しやすさです。

検索エンジンから適切に評価され、事業の成果へつなげていくためには、表面的な見た目だけを整えるのではなく、土台となる情報設計がしっかりと行われている必要があります。さまざまなデバイスや通信環境から多様なユーザーが訪れるホームページにおいて、誰もがストレスなく情報を取得できる状態を作ることは、結果として検索順位の向上やユーザーの離脱防止にもつながります。

ここでは、ホームページの品質を根本から決定づける3つの重要な概念である、アクセシビリティ、ユーザビリティ、インフォメーションアーキテクチャについて解説します。これらは混同されがちですが、それぞれ明確に異なる役割を持っています。ホームページを通じてユーザーに価値を届けるためには、この3つの違いを正しく把握しておくことが非常に重要です。

これら3つの要素は、訪問者が迷わずに目的のページへとたどり着き、快適にホームページを閲覧できる環境を作るために機能します。それぞれの概念と役割を正しく理解し、設計段階からしっかりと取り入れていくことで、より多くの人に正確な情報が届きやすくなります。ここからは、それぞれの具体的な役割について見ていきます。

アクセシビリティ

アクセシビリティ（accessibility）は、ホームページ（ウェブサイト）においては、サイトの閲覧自体の汎用性の高さ、「様々なユーザーにとって利用のしやすい」、といった意味があります。

例えば、視覚障害者であってもウェブページの読み上げによる情報の受け取りを叶えるために、画像に代替テキストを設定するといったようなことがアクセシビリティです。ホームページ制作においてもこうしたアクセシビリティをなるべく意識する必要があります。

ウェブアクセシビリティとWCAG

ウェブサイト・ホームページのアクセシビリティはウェブアクセシビリティと呼ばれます。

ウェブアクセシビリティについてはW3CよりWCAG（Web Content Accessibility Guidelines）という指針が提唱されています。

ウェブアクセシビリティとは、ホームページ・ウェブサイトやウェブアプリケーションの情報や機能を、誰もが自身の心身の状態や利用環境に関わらず支障なくスームズに利用できる状態を意味します。

WCAG 2 Overview – W3C WAI

視覚障害者や聴覚障害者、高齢者への配慮

視覚障害者や聴覚障害者、高齢者への配慮として、テキストの読み上げや動画音声のクローズドキャプション （Closed Caption） 、フォントの大きさなどを工夫する必要があります。Webデザイン性を高めるためにと、代替テキストなしの画像を設置したり、代替テキストなしの画像リンクを設置したりすることはアクセシビリティを下げる要因となります。

ウェブアクセシビリティ導入ガイドブック – デジタル庁

特定層への配慮からすべてのユーザーのための基盤へ

かつては音声読み上げソフト（スクリーンリーダー）への対応や文字の拡大機能の設置などがアクセシビリティの主役とされていました。もちろんこれらも現在において重要ですが、現代のアクセシビリティは、スマートフォンを屋外の強い日差しの下で見る際の画面のコントラスト比や怪我で一時的にマウスが使えない状態でのキーボード操作など、健常者も含めたあらゆる利用状況を想定します。一時的な状況や加齢による視力低下など、誰もが直面する可能性のある不便さを解消し、誰もが迷わず目的のコンテンツへ到達できるユーザー体験（UX）の核としてアクセシビリティを捉えます。

ホームページ制作・SEOの1ポイント

SEOは、検索エンジンに対する最適化を意味しますが、アクセシビリティは、ユーザーへの利用のしやすさといった点での最適化です。より優れたホームページを制作することを意図する場合は、こうした面も見逃すことはできません。通常の表示でアクセシビリティが完全に満たされない場合は、ホームページ制作において代替版を設置するなどの配慮が必要になるでしょう。

ユーザビリティ

ユーザビリティ（usability）は、ホームページ（ウェブサイト）において、サイトを閲覧するウェブユーザーにとっての使用性・操作性など、ウェブサイトの使いやすさを意味します。ユーザビリティの向上はPV数やWebマーケティング効果に影響しますので、十分に配慮してホームページ制作を行う必要があります。求めている情報への到達の容易さや見やすさ、移動や入力における操作のしやすさなどがユーザービリティに該当します。

モバイルフレンドリーやEFO

モバイルフレンドリーは、スマートフォンなどのモバイルデバイスでのサイト閲覧の際のユーザービリティを意図したものです。
EFOも入力の手間を省くという意味でユーザービリティのためにあります。ホームページ制作時に様々な工夫をこらし、ユーザーの使い勝手の良さを高めることで、Webマーケティング効果を高めることができるでしょう。もちろんモバイルデバイスに対するユーザビリティ向上はモバイルSEOとしての効果も期待することができます。

モバイル サイトとモバイルファースト インデックス – Google 検索セントラル

ユーザービリティと「学習のしやすさ」

ユーザービリティの概念に「学習しやすさ」というものがあります。これは、初めて使用するホームページにおいて、目的の作業をいかに速く正確に終えられるかという点になります。

基本的に学習しやすいホームページは、ユーザビリティも高いものと判断されます。しかし、ホームページによってはリピーターをターゲットにし、熟練時の効率性を目的として想定されているものもあり、このようなケースでは、ユーザービリティのうちの学習のしやすさを犠牲にすることも考えられます。逆に資料請求を目的としたようなホームページや広告用ランディングページなどのように使用回数が1回のみであると想定される場合は、学習しやすさが最も重要な要素となります。

ホームページ制作・SEOの1ポイント

ユーザーの操作性を向上させることは、SEOとしての要素と共通の部分もありますが、ホームページのマーケティングコンバージョンを向上させることに貢献します。ユーザーの離脱性を下げたり、お問わせ率を向上させることに寄与するでしょう。ナビゲーション群への配慮やモバイルフレンドリーはWebマーケティング効果向上だけでなく結果的にSEOにも貢献する事がよくあります。

ホームページ制作時になるべくユーザビリティを高める設計をすることはもちろん、ホームページ公開後であってもユーザビリティ向上のための工夫をこころがけ、必要に応じてサイトカスタマイズなどをしていくと良いでしょう。

ページナビゲーションとユーザビリティ

ホームページ制作において、ページナビゲーションの工夫は、ホームページ（ウェブサイト）のユーザビリティを向上させるのに一役買います。ページナビゲーションをうまく設置することで、ホームページ（ウェブサイト）のPV数を向上させることもできますし、検索エンジンのクローラビリティを向上させることもできます。

ページナビゲーション「ウェブサイトのユーザビリティ」

サイトのユーザビリティとSEO

ユーザーのホームページ操作性であるユーザビリティや検索エンジン経由のアクセスを獲得するためのSEOを無視した場合、ホームページ制作費用に対する効果は著しく低いものになります。サイトのユーザビリティとSEOを無視した場合、ホームページ制作に高額な費用をかけたとしてもほとんどの場合、Webマーケティング効果を期待することはできません。

サイトのユーザビリティとSEOを無視した場合

スマホ表示時のユーザビリティ

「スマホでは使いにくいサイト」は、スマホユーザーからのコンバージョン機会の損失をもたらしてしまいます。スマートフォンサイトのユーザビリティ（ウェブユーザーにとっての使いやすさ）向上は、ウェブサイト・ホームページを運営・ビジネス利用している場合において重要です。スマホユーザーへの配慮、つまりスマートフォンサイトのユーザビリティを考える上では、PCブラウザとスマホブラウザでの操作の違いを考えた上で、リンクへの配慮など様々な点の設計を考える必要があります。

スマートフォンサイトのユーザビリティ リンクへの配慮

インフォメーションアーキテクチャ

インフォメーションアーキテクチャ（Information Architecture）は、ホームページ（ウェブサイト）においては、サイト内の情報・データの組織化を意味します。

インフォメーションアーキテクチャ（情報アーキテクチャ）の考え方を理解したうえでホームページ制作を行うと行わないとではホームページの出来やWebマーケティング成果に大きな違いがあります。

情報の体系化

インフォメーションアーキテクチャは、コンテンツをユーザーにわかりやすく伝えることや、目的のページヘとたどり着きやすくするために、カテゴリ分け、ツリー構造、アンカーによるページ間の関連性など、情報を体系化することを意味します。

その目的は、求めている情報のわかりやすさやその情報の探しやすさ、そして操作のしやすさを向上させることです。ホームページ制作の際には、そのサイトのコンセプトに合わせた掲載コンテンツの絞り込みやそれを実現するための機能の洗い出しが必要になります。それらを元に、ホームページに掲載するコンテンツ収集やサイト構造の検討、ナビゲーションのWebデザインなどを進めていくことなりますが、その作業に共通で必要とされるのが「インフォメーションアーキテクチャ」です。

整理して秩序付ける手法

その手法として、カテゴリーやタグ付けによる分類も一つの方法です。またページの階層やナビゲーション設計も該当します。

大量の情報を意味のあるくくりで整理し秩序を付けることで、文脈を待った情報としてユーザーが理解可能な状態になります。理解は整理することから始まるというように、混沌とした情報のままではWebユーザーからの理解を深めることはできません。

情報の組織体系とは、あるコンテンツをそれを利用するユーザーの目的に合わせてグループ化し、定義することであり。ホームページ制作においては、カテゴリーやタグ等による分類も組織体系として考えることができます。

情報を使いやすく整理し、意味ある分類を行い、それに名前を付けて構造化する考え方が「インフォメーションアーキテクチャ」でありホームページ制作においても、情報の組織化やナビゲーション、ラベリング、検索システムなどを用いて情報を体系化していくというこの考え方は重要になってきます。

ホームページ制作・SEOの1ポイント

ホームページを作成する時、ページ単位のSEOも重要ですが、ホームページ全体の情報の体系化もそれ以上に重要な要素です。重要な部分はどの部分かということを階層構造で示したり、必要な情報を網羅して掲載することや体系化することは、細かなSEOよりも重要になります。SEO内部対策の基本のひとつがこうした体系化とサイト構造です。想像以上に重要な項目ですので大きく着目してホームページ制作やSEOの設計を行う必要があるでしょう。インフォメーションアーキテクチャは、ホームページの各要素に焦点をあて、ユーザビリティを向上させるうえで考えるべきポイントとしてサイト構造やトップベージなどサイト全体の設計にかかわる部分に影響を与えます。

W3C

W3C （World Wide Web Consortium、ワールドワイドウェブ-コンソーシアム）は、ウェブサイト制作言語であるHTML、XML、CSSやウェブブラウザ・ウェブサーバーなど、WWW（World Wide Web）で利用される技術の標準化をすすめる国際的非営利団体です。Web技術の標準化を推進することを目的とした標準化団体となります。

W3C勧告とW3C準拠

このW3Cより、W3C勧告と呼ばれる標準的なウェブの技術仕様が提示されていました。なお、HTML5がW3C勧告となったのは、2014年10月28日です。ホームページ制作（ウェブサイト制作）においては、W3C勧告に基づいたマークアップが標準的でした（このW3C勧告に準拠したウェブサイトは「W3C準拠」と表現されていました）。

現代のホームページ（ウェブサイト）制作の実態に合わせて、標準規格のあり方は大きく変化し、現在では、HTMLの仕様策定はW3CからWHATWGへと移行し、「HTML Living Standard」が正式な標準規格として採用されています。

そのため、現代の制作現場では「W3C準拠」という言葉でHTMLの正確性を表現する機会は減り、HTML Living Standardに沿った最新で適切なコーディングを行うことが重要です。なお、W3Cは現在でもWCAGのようなアクセシビリティガイドラインの策定において、引き続き大きな役割を果たしています。

World Wide Web Consortium (W3C)　W3C公式サイト（英語）

W3Cが策定するアクセシビリティのガイドライン「WCAG」

W3Cの活動の中で、ホームページ（ウェブサイト）のアクセシビリティ向上の明確な指標としてWCAG（Web Content Accessibility Guidelines）が定められています。
これは、年齢や障害の有無に関わらず、すべての人がホームページ上の情報にアクセスしやすくするためのガイドラインです。
より専門的には、適切なコントラスト比の確保や、画像への代替テキストの設置、キーボードのみでの操作性の確保などが求められます。
近年、検索エンジンはユーザー体験を高く評価する傾向にあります。そのため、WCAGに準拠したホームページ（ウェブサイト）制作を行うことは、SEOの観点からも非常に重要です。
誰もが使いやすい設計を心がけることで、事業の対象ユーザー層を大きく広げることにもつながります。

ホームページ制作・SEOの1ポイント

ホームページ制作やSEOを考える上で、必ずしもW3C準拠であるホームページである必要はありません。もちろんSEOは検索エンジンに最適化してホームページ制作を行うという面がありますが、ホームページの価値は、大半がそのコンテンツ内容にあります。

ホームページの表示エラーや論理構造の正確性を保つために、文法の正しさを考えることはホームページ制作の現場としては大切なことですが、SEOやユーザーのことを考える場合は、細かなW3C準拠よりもコンテンツの品質に注力したほうが良いと考えることができます。

WHATWG（Web Hypertext Application Technology Working Group）

W3Cと並んで、ホームページ（ウェブサイト）の標準化において非常に大きな役割を担っている組織がWHATWGです。Apple、Mozilla、Operaなどのブラウザ開発企業が中心となって結成されたコミュニティであり、現在のウェブ仕様策定を実質的に牽引しています。

HTML Living Standardが現在の正式な標準規格

かつてはW3CがHTMLの規格を策定していましたが、現在ではWHATWGが策定する「HTML Living Standard」が正式な標準規格として採用されています。

HTML Living Standard – WHATWG 公式仕様書

W3Cが定めていた仕様と実際のブラウザ実装に乖離が生じたため、より実務の実態に即した、継続的にアップデートされる規格として発展してきました。

現在のホームページ（ウェブサイト）制作においては、このHTML Living Standardに沿ったコーディングを行うことが基本です。

新しいタグや仕様が日々議論され、各ブラウザへスピーディーに実装されていくため、制作者は常に最新の動向を追っていく必要があります。

また、規格に準拠した正しいマークアップは、検索エンジンにページの内容を正確に伝える基盤を形成します。
事業を成長させるための強力なSEO施策としても、WHATWGが定める標準仕様を深く理解し、適切に反映したホームページ（ウェブサイト）を構築することが大切です。

Webセーフカラー

Webセーフカラーは、RGBを各々6段階、計216色で定義して、モニタ・OSなどユーザーの閲覧環境の違いに配慮したウェブ用カラー、ウェブ用カラー値です。かつてはユーザー環境の差異に配慮してホームページ制作でも意識して使用されていました。

Web セーフカラー (Web safe colors) – MDN Web Docs

インターネット黎明期に提唱

元々WindowsやMacintoshなどの異なるOS、環境でも正しく表示されるようにWebセーフカラーとして216色が指定されました。このWebセーフカラーは、1994年にネットスケープ社によって提唱されましたが、現在では閲覧環境による差がほとんど見られないため、ホームページ制作においてWebセーフカラーはあまり意識されません。

ホームページ制作・Webデザインの1ポイント

現在ではモニタの精度が高まっているためほとんど意識されないWebセーフカラーですが、閲覧環境の違いに配慮するということはホームページ制作において重要なポイントであることには変わりありません。モニタやモニタの設定によって色の見え方が異なるという点は今でも変わりありませんので、多少の差異を意識して制作しておくに越したことはありません。

ホームページ（ウェブサイト）のHTML編集方法

ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ修正の基本はこのHTMLとCSSの編集で行います。

ホームページのHTML編集方法

現代のホームページ制作における最新のアクセシビリティ設計と運用戦略

検索エンジンのアルゴリズムが洗練され、法的な枠組みも変化する中で、アクセシビリティの設計はホームページ（ウェブサイト）の成否を分ける非常に大きな要因となっています。事業の機会損失を防ぎ、社会的信用を構築するための具体的な戦略を深く掘り下げていきます。

合理的配慮の義務化と事業における社会的責任

日本国内においても障害者差別解消法の改正により、民間事業者に対しても障害のある方への合理的な配慮の提供が義務化されるなど、Web上の情報提供における法的・社会的な要請は年々強まっています。公共機関だけでなく、一般の事業会社が運営するホームページ（ウェブサイト）においても、情報にアクセスできない障壁（バリア）を取り除くことは、社会的責任を果たす上で必須の取り組みとなっています。アクセシビリティの欠如は、ブランドの信頼を損なうリスクがある一方で、しっかりと対応することで、より広範なユーザー層へリーチできる大きな事業機会を生み出します。

WCAGガイドラインに基づく国際基準の対応

アクセシビリティを高めるための具体的な指標として、W3Cが策定した国際的なガイドラインであるWCAG（Web Content Accessibility Guidelines）が存在します。現代のホームページ（ウェブサイト）制作においては、このWCAGの最新バージョンに準拠した設計が求められます。知覚可能、操作可能、理解可能、堅牢という4つの原則に基づき、色のコントラスト比の確保や、キーボードのみでの操作の保証、エラー発生時の適切なフィードバックなど、多岐にわたる項目をクリアしていくことが重要です。より専門的には、JIS規格（JIS X 8341-3）への対応方針をホームページ（ウェブサイト）上に「アクセシビリティ方針」として明記し、継続的な改善姿勢を示すことが推奨されます。

セマンティックなHTMLマークアップとSEOの親和性

アクセシビリティを向上させるための技術的な基盤は、正しいHTMLマークアップにあります。見出しにはhタグを、段落にはpタグを、関連する要素には適切なタグを用いるといったセマンティック（意味論的）なコーディングを徹底することで、音声読み上げソフトがページ構造を正確に解釈できるようになります。そしてこの取り組みは、検索エンジンのクローラーがページの内容を理解するプロセスと完全に一致します。つまり、アクセシビリティに配慮して正しく意味付けされたホームページ（ウェブサイト）は、結果としてSEOの評価も高まりやすく、検索順位の向上に直結する相乗効果をもたらします。

アクセシビリティと HTML – MDN Web Docs

画像の代替テキスト（alt属性）の適切な設定

視覚に障害のあるユーザーにとって、画像に何が描かれているかを伝える代替テキスト（alt属性）は唯一の情報源です。単に「画像」と記述するのではなく、その画像が持つ意味や役割を具体的なテキストで記述することが重要です。例えば、グラフの画像であればその結論となる数値を、商品の写真であればその特徴を簡潔に説明します。一方で、単なる装飾目的の画像には空のalt属性（alt=””）を指定し、読み上げソフトのノイズにならないよう配慮する緻密な設計が求められます。この代替テキストは画像検索の対象ともなるため、集客の観点でも極めて有効な施策となります。

WAI-ARIAを活用した動的コンテンツのアクセシビリティ

JavaScriptを用いてタブを切り替えたり、ポップアップ（モーダルウィンドウ）を表示させたりする動的なUIは、現代のホームページ（ウェブサイト）に多く見られます。しかし、見た目が変化しても、裏側のコードが適切に設定されていなければ、スクリーンリーダーを利用しているユーザーには何が起こったのか伝わりません。そこで、WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）と呼ばれる属性をHTMLに付加することで、要素の役割や状態（開いているか、閉じているかなど）を支援技術に正しく伝達します。より専門的には、ARIA属性を過信せず、まずは標準のHTMLタグで実装できる構成を模索し、どうしても補えない部分にのみWAI-ARIAを使用するという堅実なアプローチが重要です。

WAI-ARIA の基本 – MDN Web Docs

キーボードトラップの防止とフォーカスインジケータ

マウスを使用せず、キーボードのTabキーのみでホームページ（ウェブサイト）を閲覧するユーザーも多く存在します。キーボード操作でページ内を移動する際、現在どこが選択されているかを示す枠線（フォーカスインジケータ）が視覚的に明確であることが重要です。デザイン上の理由からこの枠線をCSSで消去してしまうと、ユーザーは現在地を見失ってしまいます。また、特定の入力フォームやポップアップに入った後、Tabキーを押しても外に出られなくなる「キーボードトラップ」と呼ばれる現象も防がなければなりません。すべての機能がキーボードのみで操作でき、かつ抜け出せるように緻密にコーディングを施すことが求められます。

カラーコントラストと色に依存しない情報伝達

加齢による視覚の変化や、色覚特性を持つユーザーにとって、背景色と文字色のコントラストが低いテキストは非常に読みにくくなります。WCAGの基準に基づき、十分なコントラスト比を確保した配色設計が重要です。また、「必須項目は赤色で入力してください」といった色だけに依存した指示や表現は避けるべきです。色が判別しにくい環境下でも情報が正確に伝わるよう、テキストによる明記や、アイコンの形状の違いなど、複数の視覚的要素を組み合わせて情報を伝達するインクルーシブなデザインアプローチが、事業の情報をより多くの人に届ける上で効果的です。

達成基準 1.4.3: コントラスト (最低限) を理解する – W3C (WAIC訳)

認知負荷を下げるシンプルなUIと一貫性のあるナビゲーション

アクセシビリティは身体的な障壁を取り除くだけでなく、認知的な負荷を軽減することも含まれます。複雑すぎるレイアウトや、専門用語ばかりが並ぶ難解な文章は、情報を探しているユーザーにストレスを与えます。ホームページ（ウェブサイト）全体を通して、ヘッダーやフッター、メニューの位置といったナビゲーションの一貫性を保つことで、ユーザーはサイトの構造を素早く学習し、迷うことなく目的のページへ到達できます。また、専門的な事業内容を説明する場合であっても、図解を用いたり、平易な言葉に言い換えたりする工夫を凝らすことが、最終的なコンバージョン率を引き上げる重要な施策となります。

レスポンシブデザインにおけるズーム操作の許容

スマートフォンの画面において、文字が小さくて読みにくいと感じたユーザーは、画面をピンチアウトして拡大（ズーム）しようとします。しかし、ホームページ（ウェブサイト）の設定（meta viewportタグ）でこのズーム操作を意図的に禁止しているケースが散見されます。ユーザーが自身の見やすいサイズに画面を調整する自由を奪うことは、アクセシビリティの観点から大きなマイナスとなります。端末の標準機能による拡大操作を許容し、文字サイズを大きくしてもレイアウトが極端に崩れないようにCSSの柔軟性を確保することが、現代のモバイル対応において極めて重要です。

動画コンテンツへの字幕とトランスクリプトの提供

事業の魅力を伝えるために、ホームページ（ウェブサイト）に動画コンテンツを埋め込む手法が一般化しています。しかし、聴覚に障害のあるユーザーや、電車内など音を出せない環境にいるユーザーにとって、音声のみで進行する動画は情報を得ることができません。そのため、動画には必ず同期した字幕（キャプション）を用意することが求められます。さらに、動画内の音声をすべてテキストに書き起こしたトランスクリプト（書き起こしテキスト）をページ内に配置することで、検索エンジンのクローラーも動画の内容をテキストデータとして読み取れるようになり、動画SEOの観点からも絶大な効果を発揮します。

アクセシビリティ対応を継続するための社内体制構築

ホームページ（ウェブサイト）のアクセシビリティ向上は、リニューアル時に一度だけ対応して完了するものではありません。日々のブログ記事の更新や、新しいサービスのページを追加する際にも、常にアクセシビリティの基準を満たし続ける必要があります。そのためには、事業のWeb担当者やコンテンツ制作者に対するガイドラインの周知と、定期的な自動チェックツールの活用、あるいは専門家による監査を行う体制を構築することが重要です。見出しの付け方や画像の代替テキストの設定など、日常的な運用の中にアクセシビリティのルールを組み込むことで、事業の成長とともに持続可能な品質管理が実現します。

誰も取り残さないWeb設計が事業価値を最大化する

現代のWeb環境において、アクセシビリティは単なる福祉的な配慮という枠組みを超え、多様なユーザーの生活基盤を支え、検索エンジンからの正当な評価を獲得するための最も堅固なインフラストラクチャとなっています。見えないユーザーの存在を想像し、緻密なマークアップやコントラストの調整、キーボード操作のテストなど、細部にまでこだわった設計を行うこと。それが結果として、操作に迷わない使いやすいUIを生み出し、離脱率の低下とコンバージョン率の向上という事業の直接的な成果へと繋がります。すべてのユーザーに開かれたホームページ（ウェブサイト）を構築し続ける姿勢こそが、これからのWebマーケティングにおいて常に求められる最も重要な事業戦略となります。

カテゴリ別 Web制作/ホームページ制作用語集