はじめに

ウェブデザインにおいて「見た目の美しさ」と「使いやすさ」は、両立しにくいと思われがちですが、どちらもユーザーにとって心地よい体験を提供するという共通の目的があります。本コラムでは、アクセシビリティとデザイン性の両立について考え、見た目の美しさと使いやすさを両立するためのヒントをご紹介できればと思います。

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

ウェブアクセシビリティとは、ウェブにおけるアクセシビリティのことで、年齢・障害・一時的な状況に関係なく、誰もが不自由なくウェブサイトを使えるようにすることです。
たとえば、
　・文字が小さ過ぎて読めない
　・色の差が分かりにくい
　・読み上げソフトで正しく情報が伝わらない

そういった使いにくさをなくすためのベースの考え方とも言えます。すべての人にとって使いやすいウェブサイトを実現するための国際的なガイドライン「WCAG（ウェブ・コンテンツ・アクセシビリティ・ガイドライン）」に沿って紹介していきます。

デザイナーとして配慮すべきアクセシビリティの基本

ウェブサイトを作成するにあたり、見た目のバランスやブランドらしさを大切にする一方で、誰にとっても使いやすいという視点もデザイナーに求められます。ここでは、デザイナーが押さえておきたいアクセシビリティの基本をご紹介します。

最低限のコントラスト比（4.5:1）を考慮する

テキスト及び文字画像は、背景とのコントラスト比を最低でも4.5:1以上にする必要があります。これは視認性を確保し、すべてのユーザーが情報を読み取れるようにするための基準になります。

ボタンの文言に注意する

視覚障害者や弱視の方がスクリーンリーダー（音声読み上げソフト）でウェブを操作するため、ボタンの文言は「詳しくはこちら」ではなく「お問い合わせはこちら」など意味のあるテキストにする必要があります。

アイコンやラベルを統一する

意味が直感的に伝わるアイコンを選び、同じ機能には常に同じアイコンやラベルを使用することで、ユーザーが迷わず操作できるようにします。

アクセシビリティとデザイン性の両立に向けた対策

1.アクセシビリティとブランドカラーの両立

まずブランドカラーを取り上げ、アクセシビリティとデザイン性について考えていきたいと思います。
ブランドカラーは、企業の認知や統一感を高める重要な要素ですが、配色によっては十分なコントラスト比が得られず、アクセシビリティを満たさないケースもあります。達成しにくい色の傾向として、下記が挙げられます。

・パステルカラー
明度が高く背景のコントラストが弱くなるため、文字やボタンなどに使うと視認性が下がります。
・黄色・黄緑系の色
明るい背景上では特に見えにくく、コントラスト比が基準を下回ることが多い色です。
・青と紫などの近似色
色覚特性によっては区別しにくいため、色だけで情報を伝えるのは避ける必要があります。

こうした色の傾向を理解した上で、解決策の例を3つ挙げて紹介していきます。

解決策①カラーデザインの工夫をする

・アクセシビリティ対応色の設計
明度や彩度を微調整し、コントラスト比を満たす近似カラーを選定します。
・色バリエーションやセカンダリカラーの導入
オレンジなどの高明度・高彩度で成り立つ色は、コントラスト比の調整により濁ってしまうことがあり、色の印象が変わってしまう場合は考慮が必要です。メインカラーにこだわり過ぎず、補助色に使える色を活用することで、デザイン性と視認性の両立がしやすくなります。

解決策②使用場所を工夫する

・ブランドカラーを背景や装飾に使用
背景や装飾などの要素にブランドカラーを使用し、ブランドイメージを維持します。
・テキストやボタンには、補助色（高コントラスト）を使用
視認性や操作性が求められる要素には、高コントラストの補助色を使用して読みやすさや操作のしやすさを確保します。

解決策③色だけに頼らないブランド表現をする

・形・フォント・余白・写真トーンなどでも表現可能
ブランドらしさ＝色だけではありません。形状（角の丸み）や、フォントの選定、余白の取り方やレイアウト、写真のトーンなどでも世界観を表現することができます。

2.アクセシビリティとグラデーションの両立

次にグラデーションボタンを例にして、アクセシビリティとデザイン性について考えていきたいと思います。
グラデーションは、ボタンを魅力的に見せるデザインのひとつです。一方で、文字が読みにくくなってしまったり、コントラスト比が足りなかったりとアクセシビリティ観点で課題もあります。

そこで、デザイン性を保ちつつ、アクセシビリティにも配慮するためには、いくつかの工夫が有効です。
デザイン性を保ちつつ、アクセシビリティにも配慮するために調整したグラデーションボタンの例になります。色の調整や、グラデーションの取り入れ方などを工夫することで両立させることができます。

さいごに

アクセシビリティを考慮するとデザインの幅が狭まってしまうと考える方もいるかもしれません。しかしながら、誰もが不自由なく使えるサイトを作るためにはアクセシビリティが必要不可欠になってきます。先ほど例として挙げたブランドカラーやグラデーションの使い方についても、さまざまなデザイン方法があるかと思います。
今後、アクセシビリティとデザイン性を両立させたサイトの需要が高まるにつれて、デザイナーにもウェブへの理解と柔軟な対応が求められてくると感じました。
ウェブアクセシビリティ対応でお困りの企業様はトライベックまでご相談ください。

【関連リンク】
トライベックブランド研究所：アクセシビリティ診断
アクセシビリティ対応フォーム「XD.FORM a11y」

【参考情報】
Web Content Accessibility Guidelines (WCAG) 2.2