あなたの作成したサイト、誰にでも見やすいですか?
あなたが「普通」と思っているWebサイト。ある人にとっては、見づらい、わかりにくい、使いにくいものになっているかもしれません。
障がい者、日本語に不慣れな外国人、小さな文字が読みにくくなった高齢者。いまやインターネットを使うのは、老若男女、国内外を問いません。
まずは、Webデザインにおけるユニバーサルデザインの基本について、解説していきます。
1. ユニバーサルデザインって何?
ユニバーサルデザインとは、誰もが使いやすいデザインであることです。
つまり、年齢、ハンディキャップの有無、国籍の違いに関わらず、すべての人が快適に利用できるようにする考え方です。
Webにおけるユニバーサルデザインとは、どんな人が訪れても迷わず、ストレスなく目的を達成できる設計を指します。
2. なぜユニバーサルデザインが必要なのか
考えが進む背景には、高齢化、外国人の増加、その他、社会環境の変化や価値観の多様化が見られます。
こうした変化に対応し、社会全体の包摂力を高めることが求められています。
私自身、前職の経験から、幅広い年齢層・国籍の方と接してきました。
特に視覚的ハンデのある方が多かったこともあり、自らWebサイトを構築する中で、アクセシビリティのあり方について考えさせられました。
それが、本テーマのきっかけです。
3. Webにおけるユニバーサルデザイン【実践編】
では実際に、Webデザインで取り入れやすいポイントを見てみましょう。
①配色
・色覚特性を考慮
日本人男性の20人に1人、女性の500人に1人は、多数派とは色の見え方が異なります。
配色によっては、区別しにくい色の組み合わせがあります。
また、高齢者は加齢によって発症する白内障の場合がほとんどです。
その場合、「明度が似た色の組み合わせ」が見分けにくくなります。黄色や茶色にかすんで見えることも知っておきましょう。
・色以外の情報を伝える
色だけでなく、アイコンやテキスト、大きさなどを加えましょう。
模様やラベル、枠などでも工夫が可能です。
②タイポグラフィー
・UDフォント
UDフォントは、誤読されることなく正しく理解できる、文字の判読性を高めた書体です。
例えば、「0(ゼロ)」と「O(オー)」など紛らわしい文字も、区別しやすく設計されています。
字面（文字を設計する正方形のスペース）が大きく、画線がシンプルなのが特徴です。
また、余白を確保したり、読み間違いを減らす工夫がされています。
・文字組み
本文文字サイズで、ニュースサイトなど幅広い年齢の方が読まれるサイトに多いのは、15px~16pxです。
行間は文字サイズの1.5倍以上、1行の文字数は、全角で35〜45文字程度が読みやすいとされています。
次に、文字揃え。基本的に、本文は左揃えをおすすめします。
両端揃えでは、行数や余白が可変の場合、変な位置で改行されたり、文章の頭が揃わず読みづらくなってしまいます。
・視野や光の影響への配慮
視野欠損や物が被るなどで、文字の一部がかくれてしまう場合、シルエットが似ている文字は、読み間違えが起こりやすいです。
また、光がまぶしく感じられる場合には、細い線が飛んでしまい、文字の形が認識しづらくなります。
③Webアクセシビリティ
・画像の代替テキスト
img（画像タグ）要素には、その内容を説明するために、alt属性で代替テキストを設定しましょう。
画像が表示されない時や、音声として読み上げる時にも、情報をもれなく伝えてくれます。
・キーボード操作への対応
タッチデバイスからのアクセスが増えている今、ユーザーはパソコンのマウスを使っているとは限りません。
例えば、リンクは青文字に下線が付いているのが望ましいとされます。
普通の文字に装飾として下線を引くと、混乱を招くことがあるので、注意が必要です。
マウスやタップができない状況でも、キーボードで操作できる仕様にすることが望まれます。
・わかりやすい言葉づかい
専門用語や難しい漢字は、理解の妨げになります。
特に公共性の高いデザインには、ひらがなを適度に混ぜるなど、平易な表現を心掛けましょう。
読み手の知識レベルを想定し、説明を添えることも大切です。
4. まとめ
ユニバーサルデザインは、特定の人だけのものではなく、多くの人の利便性を高めてくれます。
また、注目したいのは、SEOや集客にも効果的であることです。
わかりやすく使いやすいユーザー視点の使いやすさは、サイトの滞在時間を延ばし、結果としてコンバージョンにもつながります。
実際に取り組むには、腰が重くなりがちですが、「伝えたいものを、広く伝える」本来の目的に立ち帰り、ユニバーサルデザインを意識したクリエイティブを目指しましょう。
最後までご覧いただき、ありがとうございました💐
