皆さんは、だれにでも見やすいデザインを意識してコンテンツを作成することができていますか？
作成者自身は見やすいデザインを作成しているつもりでも、ほかの人にとってはそうでない場合もあります。
今回は「Webデザインで今すぐ取り入れたいユニバーサルデザインの基本」についてご紹介します。
ユニバーサルデザインとは
ユニバーサルデザインとは、だれもが使いやすいように設計されたデザインのことです。
ユニバーサルデザインと聞くと、街中にあるものや日用品を想像する人もいるかもしれません。実際に信号機やドラム式洗濯機、シャンプーボトル等に取り入れられています。しかし、世界中の人が利用しているWebにおいても例外ではありません。
Web上でもユニバーサルデザインに配慮する必要がある理由
なぜユニバーサルデザインを意識してWeb上のコンテンツを作成する必要があるのでしょうか。それは人によって見え方が異なるからです。
人によって見え方が異なる理由として、特性による見え方の違いがあります。
特性による見え方の一例
・1型色覚 赤色が見えづらい
・2型色覚 緑色が見えづらい
・3型色覚 青色が見えづらい
・白内障 視界がぼやける
特性だけでなく見ている環境によっても、見え方が異なる場合があります。例えば、端末や端末の設定、照明の明るさ等です。
またデジタル庁が公開している「ウェブアクセシビリティ導入ガイドブック」では、以下のように記されています。
デジタル庁は「誰一人取り残されない、人に優しいデジタル化を。」をミッションに掲げています。誰一人取り残されないデジタル化を実現するために、何より大切なことはウェブアクセシビリティの確保です。視覚に障害がある人、怪我をして一時的に手が使えなくなっている人など、様々な状況にある利用者が、音声読み上げや点字ディスプレイなどの多様な支援技術を通じて、デジタル庁はもちろん、あらゆる行政機関・公共機関等のウェブサイトや情報システムを使える社会にしていきたいと考えています。
このようにWeb上でもユニバーサルデザインに配慮してコンテンツを作成することは、だれもが使いやすく設計することにつながっていきます。
今すぐ取り入れられるユニバーサルデザイン
では実際にWeb上でコンテンツを作成する際、どのような点に注意したら良いのでしょうか。
文字を工夫する
UDフォントを使う
UDフォントとは、だれにでも読みやすくわかりやすいように設計されたフォントのことです。UDフォントのUDはユニバーサルデザインを指します。
UDフォントの特徴の一例
・シンプルな画線
・大文字の「I（アイ）」と小文字の「l（エル）」のような似た文字の差別化
・濁点と半濁点の違いが分かりやすいように大きくする等の工夫
・文字の線の太さを均一に
UDフォントでは、以下のように似た文字の差別化がされています。
またUDフォントは複数のメーカーが開発しています。
以下はパナソニックとイワタが共同で開発した世界初のUDフォント、「イワタUDフォント」の特徴です。
他にも様々なUDフォントがあります。
以下はデザインツールCanvaで使用できるUDフォントの一例です。
フォントを指定しない
スマートフォンやPCには、ユーザー自身が読みやすいフォントに変更できる機能があります。しかしWeb制作を行う際に作成者がフォントを指定してしまうと、ユーザーが見やすいフォントに変更できないこともあります。
例えば、可能な限り文字画像を使用しないようにすることで、ユーザーがフォントを変更できるようにしておく等です。
このような配慮がユーザーへの配慮につながります。
配色を工夫する
先述したように、色の区別がつきにくい人もいるため、配色の際には工夫が必要です。
コントラストをつける
コントラストをつけることで、色の違いが分かりやすくなります。
コントラストとは、明度、色相、彩度の差がある色同士を組み合わせることです。
以下の画像のように、コントラストの比率によって「モルモット」の文字の見やすさが異なります。
暖色同士、寒色同士の配色にしない
赤と緑など、色覚特性によって色の違いが分かりにくい場合があります。そのため暖色と寒色を組み合わせた配色にすることで、色の違いが分かりやすくなります。
以下のように一般色覚では違う色に見えても、色覚特性によって色の違いが区別しにくい場合があります。
シミュレーションツールを使う
誰にでも見やすいデザインになるように工夫しても、「本当に誰にでも見やすい配色になっているのかな？」と疑問に思いますよね。そのような時はシミュレーションツールを使って、見え方を確認してみましょう。
■ Illustrator、Photoshop
設定を行うことで、「P型色覚」もしくは「D型色覚」の見え方を確認することができます。
設定方法は、IllustratorもPhotoshopも同じです。
①画面上部にあるメニューバーの「表示」メニューをクリック
②「校正設定」をクリック
③「P型（１型）色覚」もしくは「D型（２型）色覚」を選択
以下のように見え方を確認することができます。
■ Google Chromeの開発者ツール
Google Chromeを使うと、ソフトウェアを用意することなく見え方を確認することができます。
①開発者ツールを開く
②開発者ツール右上の「︙」から「その他のツール」を選択し、「レンダリング」をクリック。「レンダリング」が開発者ツール下部に表示される。
③「レンダリング」内下部の「色覚異常をエミュレート」の中から任意なものを選択する。
以下の6種類の見え方を確認することができます。
・かすみ目
・低コントラスト
・１型２色覚（赤色の識別不可）
・2型２色覚（緑色の識別不可）
・3型２色覚（青色の識別不可）
・色覚異常（色の識別不可）
以下のように見え方を確認することができます。（「１型２色覚（赤色の識別不可）」を選択）
まとめ
今回は「Webデザインで今すぐ取り入れたいユニバーサルデザインの基本」についてご紹介しました。だれにでも見やすいデザインを作成しようとすると、難しく感じてしまうかもしれません。しかしユニバーサルデザインを意識してコンテンツを作成することは、多様性に配慮することにもつながります。今回ご紹介した方法はすぐに実践できるものがほとんどですので、取り入れていただけると幸いです。
お客様のご要望に合わせたWebサイトを制作します
福岡情報ビジネスセンターでは、お客様のご要望に合わせたWebサイトを制作いたします。お気軽にご相談ください。
