ウェブアクセシビリティとデザインにおける共通の課題
障害者差別解消法の改正などを背景に、コーポレートサイトや特設サイトにおけるウェブアクセシビリティの確保は企業にとって重要な要件となっています。しかし、Webサイト制作の現場においては、ウェブアクセシビリティ基準への準拠が、視覚的な美しさを追求するデザインの制約として捉えられることがあります。
例えば、視覚障がいをお持ちの方や高齢の方への配慮として、テキストと背景のコントラスト比を一定以上に保つ必要がありますが、この要件を満たそうとすると、企業独自のブランドカラーや、洗練された印象を与える淡い色彩、グラデーションの使用が制限されます。また、文字サイズや行間の規定など、ウェブアクセシビリティ要件を厳格に適用するほど、画一的で平坦なレイアウトに陥りやすくなります。
これらをクリアしながら、ユーザーが直感的に迷わず操作できるUXデザインをどのように組み立てるか、というのが現場では課題となってきます。多くのプロジェクトでは、ウェブアクセシビリティを優先してデザインの自由度を下げるか、あるいは、ウェブアクセシビリティ対応を部分的なものにとどめるかという選択をせざるを得ないのが現状です。
100周年サイトに求められた要件とデザイナーの初期アプローチ
中外製薬株式会社様のWebサイトでは、医薬品業界という公共性の高い事業特性に加え、同社が掲げる「患者中心」「フロンティア精神」「誠実」というコアバリューをWebサイト上で具現化するため、2019年からの継続的な取り組みをさらに推し進める形で、創業100周年サイト制作においても高いウェブアクセシビリティ水準の実現を目指しました。
求められた要件は「WCAG 2.2 レベルAAへの準拠」という非常に厳格な国際基準です。この要件を満たしつつ、同社が持つイノベーション企業としての先進性を表現し、企業ブランディングの強化を両立させることがデザインチームに求められました。
最初にとったアプローチは、「ウェブアクセシビリティへの準拠を前提条件として受け入れ、その枠組みのなかで優れたUXデザインを追求する」という方向性の確立です。ウェブアクセシビリティを後付けではなく、画面を構成する基本ルールのなかに最初から含めるアプローチを選択しました。
デザイン着手前に行う「UIルールの事前定義」
本プロジェクトにおいて、高いデザイン性とウェブアクセシビリティを両立できた主な要因は、具体的な画面デザインに入る前段階で「UIルールの事前定義」を徹底したことにあります。
多くのプロジェクトでは、まずビジュアルデザインを作成し、その後の実装フェーズでウェブアクセシビリティの検証を進めることがあります。この進め方では、エラーが発覚して修正しているうちにデザインの統一感が失われたり、数多くの手戻りによるコストとスケジュールの圧迫を招いたりする原因になります。
これを防ぐため、本プロジェクトでは以下の要素について、デザイン着手前に適合レベルを満たす規定を細かく策定しました。
カラーパレットのコントラスト比検証
ブランドカラーをベースにしつつ、WCAG 2.2 レベルAAで求められるコントラスト比（通常のテキストで4.5:1以上、大きなテキストで3:1以上）をあらかじめシミュレーションし、使用可能な色の組み合わせを事前に限定しました。これにより、ビジュアルの美しさを保ちながら基準をクリアするカラーパレットを定義しています。
タイポグラフィと情報の階層化
文字サイズ、行間、文字組のルールを明確に策定。100年の歩みを伝える歴史コンテンツやビジョン紹介といった、豊富なテキストや資料を扱うページにおいて、ユーザーがストレスなく読み進められるよう、見出しの構造（H1〜H6）と視覚的な強弱を一致させる設計を行っています。これにより、音声読み上げソフトを使用するユーザーにとっても、視覚的に閲覧するユーザーにとっても、情報の優先順位が等しく伝わる構造としました。
このルール定義の方法は、例えば新しくブランドサイトを立ち上げる際や、既存の製品特設サイトにウェブアクセシビリティ対応を展開する際などにも同様に行います。デザイナーは基準を満たしているかどうかを都度疑うことなく、自由なビジュアル表現やレイアウトの構築に集中することが可能となります。
視線入力を想定した「コンポーネント単位のUX検証」
今回取り入れたのが、マウスやキーボードを使用せず、アイトラッキング（視線入力）デバイスのみでWebサイト内の全機能を操作できる仕様の実装です。この高度なバリアフリーUX（体験設計）を実現するために導入したのが、「コンポーネント単位の検証」と「3社間連携による品質管理体制」です。
ページ単位ではなくパーツ単位での検証
従来のWebサイト制作では、ページが組み上がった段階で総合的なウェブアクセシビリティ検証を行うことが多くあります。しかし、視線入力や音声読み上げ対応のように複雑な挙動が絡む場合、ページ単位の検証では原因の特定が難しく、修正の影響が広範囲に及びます。
そこで今回は、ボタン、ナビゲーション、スライダーなどの最小単位（コンポーネント）ごとにウェブアクセシビリティツールを用いた検証と構築を繰り返すフローを採用しました。デザイン段階から「このUIパーツは視線入力での選択領域を十分に確保できているか」「音声読み上げでの順番に違和感はないか」を社内でチェックし、実装に耐えうるデザインであることを早期に担保しています。
3社間連携によるチェックの運用
目に見えない部分の配慮、例えば音声読み上げ用の隠しテキストの設定や、タブキーでの遷移順序の最適化においては、ツールによる自動検証だけでは不十分な場合があります。実際の利用環境における使い心地を担保するため、「実装チーム（外部ベンダー）」「検証会社」「中外製薬」の3社による綿密な協議体制を構築しました。
検証会社が実施した専門家による評価（ヒューリスティックチェック）の指摘事項に対し、実装チームとデザイナーが対応方針を検討し、クライアントと合意形成を行うサイクルを細かく回しています。この3社間連携により、予期せぬトラブルを防ぎ、精度の高い実装をスケジュールどおりに完了させることができました。
具体的には、以下のような細部への調整が行われています。
タブキー操作の挙動最適化: キーボードや視線入力で項目を移動する際、視覚的なフォーカスの移動順序が、画面のレイアウトと論理的に一致するよう制御しています。
音声ガイドの読み上げ順序: 複雑なスライドや図表において、視覚情報が得られないユーザーに対しても、文脈が正確に伝わる読み上げ順序と隠しテキストをデザイナーとエンジニアが連携して設計しました。
ガイドライン策定と持続可能な運用体制の構築
Webサイトの公開後、継続的な運用を行うなかで、ウェブアクセシビリティの基準やデザインの品質を維持していくことは重要なポイントです。本プロジェクトでは、一時的なWebサイト制作にとどまらず、「Web戦略の再定義」と「運用基盤の整備」も重要なミッションとなっていました。
多様なステークホルダーとのエンゲージメント醸成といったブランディング目的を果たすため、これまでの歩みや未来へのビジョンを、多くの人に分かりやすく伝える構成力をWebサイト全体に適用しています。
さらに、今回培ったウェブアクセシビリティ基準を、今後のコーポレートサイト全体へ永続的に展開していくことを見据え、プロジェクトの一環として「デザインおよびコーディングガイドライン」の策定を行いました。
このガイドラインには、今回検証を重ねて最適化した配色ルール、コンポーネントの仕様、コーディングの記述規則などがまとめられています。これにより、ニュースリリースの追加やイベント特設ページの作成、新薬情報の更新といった定期的な運用フェーズにおいて、新たなページを追加したり、別のベンダーが運用に加わったりした場合でも、高いウェブアクセシビリティ品質とブランドの一貫性を長期的に維持することが可能となっています。あらかじめこうした共通ルールが共有されていれば、運用の担当者が変わった際や、複数のデザイナーで並行してページを追加する際にも、個人の解釈によるUIのばらつきを防ぎやすくなります。
まとめ
ウェブアクセシビリティへの対応は、デザインの可能性を狭めるものではありません。制作の初期段階における徹底したルール定義、コンポーネント単位での早期検証、そして専門機関を交えた確実な連携体制を構築することで、洗練されたUI/UXデザインと高いウェブアクセシビリティの両立が期待できます。
本Webサイトは、第13回Webグランプリの受賞時（企業グランプリ部門アクセシビリティ賞グランプリ詳細）において、視線操作で全機能が使え、明るく清潔感あるデザインと適切な文字設計で読みやすいWebサイトであると評価されました。また、情報量は多めでも見出しと構造が整理され、スクリーンリーダー対応やスライドへの配慮など、バリアフリー設計が行き届いている点も挙げられています。このように、見た目の美しさと使いやすさを丁寧に作り込むウェブアクセシビリティ対応は、企業のブランド好意度を向上させる有効な施策となり得ます。
自社Webサイトのウェブアクセシビリティ対応や、それに伴うデザインの質的な向上、UI/UXの改善に課題をお持ちの企業担当者様は、ぜひ一度ご相談ください。数多くのコーポレートサイトを手掛けてきた知見をもとに、貴社のブランド価値に貢献する最適なウェブアクセシビリティ設計をご提案いたします。
※記載されている会社名・製品名は各社の商標または登録商標です。
