【身近な事例付】ユニバーサルデザインとは？現代社会における重要性とWebサイト制作での実践方法をご紹介

よく耳にする「ユニバーサルデザイン」とは具体的にどういったものかご存知でしょうか。 なんとなく知っている方も多いとは思いますが、実際のWeb制作にも取り入れられる要素をご紹介したいと思います。

「ユニバーサルデザイン（Universal Design / UD）」とは

文化・言語・国籍や年齢・性別などの違い、障がいの有無や能力差などを問わずに利用できることを目指した建築・設備・製品・情報などの設計（デザイン）のことを言います。

“あらかじめ全ての人にとって使いやすいものとしてデザインする”という考え方です。

年齢や能力、状況などにかかわらず、できるだけ多くの人が利用できるように『最初から』デザインすることを基本コンセプトとしています。

身近なもので言うとピクトグラム、例えばトイレの男女のマークなどが挙げられます。

ユニバーサルデザインの重要性

なぜ多くの企業がユニバーサルデザインに取り組むのかご存じでしょうか。現代社会において、ユニバーサルデザインは単に「あると便利」というレベルを超え、企業活動において不可欠なぜ多要素となっています。すべての人がサービスや製品を公平に利用できる環境を整備することは、社会全体の包摂性を高め、持続可能な社会を築く上で重要な役割を担っているのです。

サステナビリティとユニバーサルデザイン

ユニバーサルデザインは、年齢、性別、能力、文化などの違いに関わらず、すべての人が利用できる製品や環境を目指す考え方です。そして、サステナビリティとは、地球環境や社会、経済のバランスを保ちながら、将来にわたって持続可能な社会を築くことを意味します。この二つは、相互に深く関連しています。ユニバーサルデザインの実現は、社会全体の包摂性を高め、誰もが社会に参加できる基盤を作ることで、サステナビリティの目標達成に貢献します。

例えば、高齢者や障がいを持つ方も含め、あらゆる人が使いやすい製品やサービスを開発することは、資源の有効活用や廃棄物の削減にもつながり、倫理的な消費を促進します。このような取り組みは、消費者からの共感を得やすく、企業のブランドイメージ向上にも大きく貢献します。また、ユニバーサルデザインに配慮した製品やサービスを提供することで、企業は社会貢献に対する積極的な姿勢を示し、企業の信頼性を高めることができます。さらに、製品やサービスに関する情報の情報開示を徹底し、多様なニーズに応えることで、透明性の高い企業活動を実現し、持続可能な社会の実現に寄与するのです。ユニバーサルデザインは、単に使いやすさを追求するだけでなく、持続可能な社会を築くための重要な要素と言えます。

「ダイバーシティ＝多様性」とユニバーサルデザイン

ユニバーサルデザインは、性別や年齢、能力、文化の違いにかかわらず、誰もが利用できる製品やサービスを目指す考え方ですが、この根底には「ダイバーシティ（多様性）」という概念が深く関わっています。ダイバーシティとは、人々の個性や多様な価値観を尊重し、社会のあらゆる側面でそれらを活かしていくことを意味します。ユニバーサルデザインが「すべての人にとって使いやすいデザイン」を目指すのは、まさにこの多様性を認める「包摂性」の精神に基づいているためです。

例えば、高齢者や障がいを持つ人々はもちろん、外国人や幼い子ども、一時的に怪我をしている人など、多様な利用者のニーズを考慮することで、製品やサービスはより多くの人にとって使いやすくなります。これは、特定の層を排除せず、誰もが社会に参加できる環境を整備するというSDGsの目標とも密接に連携しています。ユニバーサルデザインの取り組みは、単に利便性を高めるだけでなく、社会全体の多様な人々が共生できる包摂的な社会の実現に貢献しているのです。このように、ダイバーシティを前提としたユニバーサルデザインは、現代社会において不可欠な考え方と言えるでしょう。

引用元： 経済産業省 SDGs
https://www.meti.go.jp/policy/trade_policy/sdgs/index.html

ユニバーサルデザインと関係する考え方・言葉

ユニバーサルデザインとバリアフリー

「ユニバーサルデザイン」と似たような言葉の一つに「バリアフリー」というものがあります。同じような意味で使われている印象ですが、実はその考え方には違いがあります。

ユニバーサルデザイン

障がいの有無、年齢、性別、人種等にかかわらず多様な人々が利用しやすいよう都市や生活環境をデザインする考え方。

バリアフリー

障がいのある人が社会生活をしていく上で障壁（バリア）となるものを除去するという意味で、もともと住宅建築用語で登場し、段差等の物理的障壁の除去をいうことが多いが、より広く障がい者の社会参加を困難にしている社会的、制度的、心理的なすべての障壁の除去という意味でも用いられる 

ここまで、ユニバーサルデザインについてお話してきましたが、Webデザインとユニバーサルデザインの関連性と、実際にWebサイトへのユニバーサルデザインをどう取り入れるのかを見ていきましょう。

ユニバーサルデザインとWebサイト

Webサイトやホームページは、世界中の誰もが、自分の好きな場所で、好きなデバイスで、好きな時にアクセスすることができる。それは他の媒体や施設、モノにはない本質的な特徴です。また、今重要視されているウェブアクセシビリティの観点からもまた読み上げ機能など、技術を組み合わせることで目の見えない人にも情報を届けられるなど、Webサイトはその存在そのものが、ユニバーサルデザインなのです。

💡World Wide Web（WWW）を考案したTim Berners-Lee（ティム・バーナーズ=リー）氏の言葉

“ウェブの力はその普遍性にある。障がいの有無にかかわらず、誰もがアクセスできることがその本質である。”

また、今や老若男女たくさんの方が閲覧しているWebサイト。 日本では、小学校でもデジタルデバイスでの授業が導入されたり、高齢化社会においてシニア世代の方のインターネット利用も増えていることから、老眼や近視の方が見ている場合も増えていると考えられます。また、色覚異常などの障がいをお持ちの方が、閲覧者である場合もあります。 

引用元： 内閣府 令和5年版高齢社会白書 高齢化の現状と将来像
https://www8.cao.go.jp/kourei/whitepaper/w-2023/gaiyou/05pdf_indexg.html

 さらにその閲覧している端末が、パソコンかスマートフォンか、の違いはもちろんのこと、例えば、パソコンの画面のサイズ、ブラウザ環境など、端末の設定でも見え方は異なってきます。

見る人が変われば見え方が異なるのが当たり前となった現代で、あらゆるユーザーが不便を感じることなくサイトを見える使えるデザイン設計が必要不可欠といえます。それを叶える一つが、ユニバーサルデザイン設計なのです。

ユニバーサルデザインに配慮したいWebサイトとは

前段でお伝えしたようにWebサイトは、障がいの有無や年齢、言語、国籍などを問わず、誰もがアクセスできる媒体だからこそ、ユニバーサルデザインへの配慮が可能です。具体的には、以下のようなWebサイトでユニバーサルデザインの考え方を取り入れることが推奨されます。

まず、企業のサステナビリティサイトは、企業の社会貢献活動や持続可能性への取り組みを広く伝える役割があるため、多様なステークホルダーが情報を理解できるようにユニバーサルデザインに配慮することが不可欠です。次に、商品やサービスを提供する企業サイトでは、より多くのユーザーに情報を提供し、利用を促すためにもユニバーサルデザインが求められます。特に、高齢者や障がいを持つ方も含め、様々なユーザーが快適に閲覧できる設計が重要です。

>>>サステナビリティサイト支援<<<
デパートではサステナビリティサイトや企業サイトの制作支援を数多く行なっております。
サステナビリティサイトのご支援では、専門知識を有したコンサルティングチームがトータルプランを提案いたします。
ぜひお問合せください。
　

また、教育関連サイトも、あらゆる生徒や保護者、教育関係者が情報を得られるよう、ユニバーサルデザインを意識する必要があります。例えば、読みやすいフォントや適切な文字サイズ、色覚多様性に配慮した配色などが挙げられます。ECサイトも同様で、幅広い年齢層や身体状況のユーザーがスムーズに商品を探し、購入できるよう、操作性の高いデザインや明確な情報提示が求められます。決済プロセスにおいても、誰もが安心して利用できるような配慮が重要です。

これらのサイトでは、特定のユーザー層に限定せず、誰もがストレスなく情報にアクセスし、サービスを利用できるような設計が、ビジネスの機会を拡大し、企業の信頼性を高めることにつながります。

ユニバーサルデザインとアクセシビリティ・ユーザビリティ

Webサイト制作では「アクセシビリティ・ユーザビリティ」という言葉がよく使われますが、「全てのユーザが情報にアクセスでき、さらに使いやすいようにデザインする」と言う”考え方”が、ユニバーサルデザインです。

つまり、アクセシビリティもユーザビリティも全てを包括している考えがユニバーサルデザインとなります。

ユニバーサルデザイン「7つの原則」

ユニバーサルデザインには、その考え方を実現するための「7つの原則」が定められています。

ユニバーサルデザインの7原則は、建築家や工業デザイナー、技術者、環境デザイン研究者などからなるグループが、協力しあってまとめたものです。 

原則1 : 誰にでも公平に利用できること
原則2 : 使う上で自由度が高いこと
原則3 : 使い方が簡単ですぐわかること
原則4 : 必要な情報がすぐに理解できること
原則5 : うっかりミスや危険につながらないデザインであること
原則6 : 無理な姿勢をとることなく、少ない力でも楽に使用できること
原則7 : アクセスしやすいスペースと大きさを確保すること

注：すべてのガイドラインが、どのようなデザインにも当てはまるとは限らない
Copyright 1997 N.C. State University, The Center for Universal Design 

身の回り身の回り例も交え、さらに詳しく見ていきましょう。

原則１：誰にでも公平に利用できること

定義：誰にでも利用できるように作られており、かつ、容易に入手できること。

ガイドライン

1a. 誰もが同じ方法で使えるようにする。それが無理なら別の方法でも仕方ないが、公平なものでなくてはならない。
1b. 差別感や屈辱感が生じないようにする。
1c. 誰もがプライバシーや安心感、安全性を得られるようにする。
1d. 使い手にとって魅力あるデザインにする。

車椅子ロープ　　　　　　　　　　ノンステップバス

引用元： 東京都交通局 バス関連情報 バリアフリー情報
https://www.kotsu.metro.tokyo.jp/bus/kanren/barrierfree.html

原則2：使う上で自由度が高いこと

定義：使う人のさまざまな好みや能力に合うように作られていること。

ガイドライン

2a. 使い方を選べるようにする。
2b. 右利き、左利きどちらでも使えるようにする。
2c. 正確な操作がしやすいようにする。
2d. 使いやすいペースに合わせられるようにする。 

右利きでも左利きでも使用可能なハサミ

引用元：Craft Design Technology（クラフトデザインテクノロジー）ハサミ（シルバー）
https://www.craftdesigntechnology.co.jp/products/312

原則3：使い方が簡単ですぐわかること

定義：使う人の経験や知識、言語能力、集中力に関係なく、使い方がわかりやすく作られていること。

ガイドライン

3a. 不必要に複雑にしない。
3b. 直感的にすぐに使えるようにする。
3c. 誰にでもわかる用語や言い回しにする。
3d. 情報は重要度の高い順にまとめる。
3e. 操作のためのガイダンスや操作確認を、効果的に提供する。

エレベーターのボタンなど

原則4：必要な情報がすぐに理解できること

定義：使用状況や、使う人の視覚、聴覚などの感覚能力に関係なく、必要な情報が効果的に伝わるように作られていること。

ガイドライン

4a. 大切な情報を十分に伝えられるように、絵や文字、手触りなど異なった方法を併用する。
4b. 大切な情報は、（例えば大きな文字で書くなど）できるだけ強調して読みやすくする。
4c. 情報をできるだけ区別して説明しやすくする（やり方が口頭で指示しやすくなるように）。
4d. 視覚、聴覚などに障がいのある人が利用しているさまざまなやり方や道具でも、情報がうまく伝わるようにする。

点字ブロックなど

原則5：うっかりミスや危険につながらないデザインであること

定義：ついうっかりしたり、意図しない行動が、危険や思わぬ結果につながらないように作られていること。

ガイドライン

5a. 危険やミスをできる限り防ぐ配慮をすること：頻繁に使うものは最もアクセスしやすくし、危険なものはなくしたり、隔離したり、覆うなどする。
5b. 危険なときやミスをしたときは警告を出す。
5c. 間違っても安全なように配慮をする（フェイルセーフ）。
5d. 注意が必要な操作を意図せずにしてしまうことがないように配慮する。

駅のホームドアなど

原則6：無理な姿勢をとることなく、少ない力でも楽に使用できること

定義：効率よく、気持ちよく、疲れないで使えるようにすること。

ガイドライン

6a. 自然な姿勢のままで使えるようにする。
6b. あまり力を入れなくても使えるようにする。
6c. 同じ動作を何度も繰り返すことを、できるだけ少なくする。
6d. 体に無理な負担が持続的にかかることを、できるだけ少なくする。

自動ドアなど

原則7：アクセスしやすいスペースと大きさを確保すること

定義：どんな体格や姿勢、移動能力の人にも、アクセスしやすく、操作がしやすいスペースや大きさにすること。

ガイドライン

7a. 立っていても座っていても、重要なものは見えるようにする。
7b. 立っていても座っていても、あらゆるものに楽に手が届くようにする。
7c. さまざまな手や握りの大きさに対応する。
7d. 補助具や介助者のためのスペースを十分に確保する。

多目的トイレなど

Webデザインにおけるユニバーサルデザイン実践編

7つの原則に基づいて考えていくと、Webサイトを制作する上であらゆることに配慮が必要になりますが、Webデザインにおいて留意できる点としては大きく以下の3点が挙げられるでしょう。

・タイポグラフィ
・配色
・ウェブアクセシビリティ

それぞれを詳しくみていきましょう。

UD実践編【タイポグラフィ】

視力がある人にとって、日常で最も目にする情報は文字です。そして、Webサイトの大部分を占めるのも文字。つまり文字は、情報が伝わるかどうかを左右する最も重要な要素といえます。文字の読みづらさとして以下が挙げられます。

近視や遠視、乱視、老眼などピントが合わない場合
→文字の込み入った部分がつぶれて見えたり、ぼやけてしまって文字の形が認識しづらくなる 

白内障や弱視など光がまぶしく感じられる場合
→細い線が飛んでしまい、文字の形が認識しづらくなる 

視野欠損の場合
→シルエットが似ている文字は、読み間違えが起こりやすいやすい

文字の読みやすさ

文字の読みやすさには、 「視認性：文字の形がわかりやすい」 「判読性：誤読しにくく見分けやすい」 「可読性：文章が読みやすい」 の3つの種類があります。

Webデザインの際にこのポイントに留意して、フォント選定やサイズ定義、レイアウトを組んでいきましょう。

UDフォント

読みやすさに加えて、わかりやすく読み間違いがないように、可読性や視認性、判読性が高くなるようにデザインされのが「UDフォント」です。 日本初のUDフォントはフォントメーカーのイワタとパナソニックの共同開発で作られました。

UDフォントにはこういった特徴があります。

・字面を大きく、線画をシンプルに
・文字の形がわかりやすく、読み間違えにくい

シンプルさや、アキの確保、似ている形をいかに差別化させるかがポイントとなっています。

UDフォントの取り扱いはさまざまなメーカーから出ていますが、無料でWebフォントとして使用できるのは、モリサワからでている「BIZ UDフォント」になります。

モリサワ 「Google Fonts」へユニバーサルデザインに配慮した「BIZ UDフォント」を提供
https://www.morisawa.co.jp/about/news/6706

Google Fonts：BIZ UDGothic
https://fonts.google.com/specimen/BIZ+UDGothic 

UDフォントを使わない場合明朝体よりゴシック体

UDフォントを使用しない場合でも、明朝体よりゴシック体を選びましょう。

視力が悪い人にとっては明朝体は線が細すぎて見えにくいですし、視覚過敏の人にとっては明朝体の細い部分を認識しづらかったり、縦横の線の太さの違いやはらい、ハネなどが刺激となるようです。

文字組み

一行あたりの文字数：40文字まで（半角の場合80文字まで）

フォントやその大きさだけではなく、文章を認識するエリアにも課題があります。日本語本文の場合は、1行あたり10字以上、35〜40字くらいまでの文字数が視線の移動が大きくならずに読みやすくなります。

行間：段落中の行送りは少なくとも1.5文字分。段落の間隔は、その行送りの少なくとも 1.5 倍以上。

WCAG では文字サイズの1.5倍以上の行送りを確保するように言われています。
※WCAG：W3C（World Wide Web Consortium）においてアクセシビリティ関連の活動を行うWAI（Web Accessibility Initiative）によって策定されます。

文字揃え：テキストを均等割付けしない（両端揃えにしない）

UD実践編【色について】

前述したように多様な色覚を持つ人がいることに配慮し、情報が正しく伝わるように色の設計をする「カラーユニバーサルデザイン」という言葉があります。

カラーユニバーサルデザイン（CUD）とは、「カラー」＝「色（可視光線が目から入り脳で起こる色知覚を示す言葉）」＋「ユニバーサルデザイン」＝「普遍的な、全体の」を示します。

人間の生まれつきの色の感じ方（色覚）は、大きく５つの型（タイプ）に分けることができ、色の感じ方は異なります。また、色覚は病気や老いによって変わることもあります。こうした人間の色覚の多様性に対応し、より多くの人に利用しやすい配色を行った製品や施設・建築物、サービス、情報を提供するという考え方を「カラーユニバーサルデザイン（略称CUD）」と呼びます。

目のしくみを理解し、それに基づいて配慮していくことは、ウェブデザインやコンテンツのアクセシビリティを向上させる上で非常に重要です。以下に、目のしくみを知り、配慮していくためのポイントを詳しく見ていきましょう。

目のしくみ

人は目から入ってくる光によって色を認識しています。目の一番奥にある網膜には、暗いところではたらく桿体（かんたい）と、明るいところではたらく錐体（すいたい）の2種類の視細胞があります。それぞれ光に反応して、桿体は明暗の、錐体は色の感覚をもたらします。桿体は1種類ですが、錐体にはL錐体、M錐体とS錐体の3種類があります。

L錐体は長波長付近の光（赤）、M錐体は中波長付近の光（緑）、S錐体は短波長付近の光（青）に高い感度で反応する視物質をもっています。それらが光を吸収して興奮すると、その刺激が信号となって視神経を通って脳に伝わり、色として認識されるのです。錐体の種類や状態、刺激の程度によって見分けにくい色は異なり、似ている人を集めると5つの色覚タイプに分類することができます。

引用元：NPO 人にやさしい色づかいをすすめる会 色覚についての基礎知識 
https://cud.nagoya/basic/

色弱障がいの色の見え方

日本人男性の約20人に1人、女性の約500〜600人に1人が色弱者といわれています。色弱には、赤・緑・青のどの錐体に問題があるかによって3つのタイプがあります。赤の錐体に問題がある場合を1型（P型）色覚、緑の錐体に問題がある場合を2型（D型）色覚、青に問題がある場合を3型（T型）色覚といいます。

このように色覚に障がいのある場合に、色の差を見分けられなかったり、配色の意図を正しく認識できない場合があります。

1型（P型）の人は濃い赤と黒の見分けがつきづらく、2型（D型）の人は赤と緑の見分けがつきづらいのが特徴です。

高齢者の色の見え方

高齢者にとっては次のような配色が見分けづらくなります。

• 水晶体が黄色っぽく濁るため、白と黄色の組み合わせが見分けにい

• 青系の光の透過率が下がるため、紺色と黒の見分けがつきにくい

• 目に入る光の量が減少するため、コントラストの低い配色が見分けにい

高齢者の見分けづらい配色は、一般色覚者やロービジョン（何らかの原因により視覚に障がいを受け「見えにくい」「まぶしい」「見える範囲が 狭くて歩きにくい」など日常生活での不自由さをきたしている状態）の人にも見分けづらい配色です。ですので、ここを改善することで、利用者全体への伝わりやすさも向上させることができます。

コントラストを確保する事で配色の改善ができる

コントラスト比とは、情報を伝えている要素とその背景との相対的な明るさの比率をいいます。

背景と要素が同じ色のときは1：1、白と黒の組み合わせがコントラスト最大で21：1になります。

Webサイトを見る人の環境や視力は様々で、例えば外でスマホを見るとき画面が暗いと感じる時があります。見る人や環境はさまざまなので然るべきコントラスト比がなければ、情報を正確に伝えることのできない事もあるでしょう。

そこで、WCAG（Web Content Accessibility Guidelines）では、少なくとも 4.5：1 以上のコントラスト比を確保するようにという基準値が定められています。

例えばこの4色、一見良さそうに見えますが、コントラスト比を測ってみると意外と 4.5：1 の基準値を満たせていないことが分かります。コントラスト比は重要な要素になりますが、目視だけでは判断しきれないものですので、こちらもツールを用いて確認しながら、制作すると良いでしょう。

カラーパレットの設定

Webサイトをデザインしていく上で、カラー設計を行う場合は、あらかじめコントラストを確保できる組み合わせをパレットにしておくと、効率よくデザインへ展開することができます。

パレットの考え方

①まずブランドカラーなどのメインの色のコントラストを確保
②次に文字の白黒を反転させてコントラストが確保できる背景色を決定

こうしておけば、あとは明るい色・暗い色のバリエーションを増やしても、いずれもコントラストが確保されたパレットを作ることができます。

配色セット

上記のようにパレットを設定する上で参考にできる、NPO法人 カラーユニバーサルデザイン機構が推奨している配色セットがあります。

引用元：NPO法人 カラーユニバーサルデザイン機構 カラーユニバーサルデザイン推奨配色セットについて
https://cudo.jp/?page_id=1565

より効率良くユニバーサルデザインを取り入れるためのツール

スピードを求められる場面が多いWebデザイン制作において、カラーチェックやコントラストチェックはある程度設計が完了するまで繰り返し行われる工程ですので、膨大な時間がかかってしまう事でしょう。近年では、デザインを行うツール上で簡単にユニバーサルデザインへの配慮をサポートする機能やプラグインが展開されています。デパートでも案件に合わせ導入している、その一部をご紹介いたします。

色覚シミュレーション：Stark

https://www.getstark.co/

Starkは、Webデザインの現場で一般的なデザインツールのFigma、Sketch、Adobe XD や、Google Chrome、Microsoft Edge、Opera、Braveなどの一般的なブラウザーに直接プラグインすることで、デザインにユニバーサルデザインやアクセシビリティを簡単に組み込むことができるようになっています。

Starkのチームの大半が身体に障がいを持っており、彼らはより良いサービスを構築しています。

Starkを活用することで以下の確認を簡単に素早く行うことが可能となり、デザインプロセスの一部としてユニバーサルデザインを取り入れることができます。

• 色のコントラスト・チェッカー

• ビジョン・シミュレーター

• ビジョン・ジェネレーター

• ランドマークとフォーカス順序

• 代替テキスト注釈

• タイポグラフィ分析

• タッチ・ターゲット

色覚シミュレーション：色のシミュレータ

https://asada.website/cvsimulator/j/

色覚障がいの場合の見え方をシュミレーションできるツールがあります。

「色のシミュレータ」というスマホアプリでは、カメラを通してリアルタイムで色の見え方をシミュレーションしたり、写真やスクリーンショットにシミュレーションをかけることができます。

引用元： Kazunori Asada 色のシミュレータ
https://asada.website/cvsimulator/j/

色覚シミュレーション：Adobe

Webデザインでも頻繁に使われているデザインツールのAdobe IllustratorやPhotoshopでも、以下のようにシュミレーションすることができますので、見え方を確認しながらカラー設計をするようにしましょう。

色以外の情報による改善

色+模様

Trello というタスク管理ツールでは、色でラベル分けをすることができます。

「色覚バリアフリーモード」をオンにすると、色だけではなく模様でもラベルを識別できるようになっています。このように背景色に模様やパターン、柄を組み合わせることを「ハッチング」といいます。

引用元：Trelloでラベルの「色覚バリアフリーモード」を有効にした状態
https://support.atlassian.com/ja/trello/docs/adding-labels-to-cards/

色+枠

ボタンなど特に操作が必要なパーツには、フチを付けるだけでも、識別しやすくすることができるでしょう。グラフなどカラーが隣接するものも同様に認識しやすくなります。

色+カタチ

3色で色分けされた折れ線グラフを改善してみましょう。色覚シミュレーションをかけてみると、D型色覚の人には非常に分かりづらい配色になっていることが分かります。

これを改善するために、色の組み合わせを赤・青・グレイに変更しました。さらに、線を太くして色の面積を増やすことで、色を認識しやすくしました。そして、色だけでなく線の種類とマーカーでも3つのグラフを識別できるようにしました。また、グラフの外に凡例として示されていたラベルを、グラフの中に直接書くようにしました。このように、グラフひとつとっても、様々な改善方法が考えられます。

テキスト補助

このお問い合わせフォームでは必須項目を文字の色だけで表しているため、赤が認識しづらい人には分かりにくい表現になっています。必須項目を色だけで表現するのではなく、ラベルにテキストで「必須」と明記することで、より伝わりやすい表現にできます。

UD実践編【ウェブアクセシビリティ】

ユニバーサルデザインには、ウェブアクセシビリティのように明確なガイドラインはありません。 ウェブアクセシビリティの評価項目を対応することで、ユニバーサルデザインという考え方を実行することに繋がります。

ウェブアクセシビリティについてはこちらも合わせてご覧ください。

まとめ

ユニバーサルデザインを意識する事により、様々なバックグラウンドを持つ人々が同様に利用できるだけでなく、一般ユーザーへのユーザビリティの向上も狙うことができます。

デザイン現場ではよく耳にする「ユニバーサルデザイン」。どう取り入れていけば良いか、またツールは何が適切なのかなどを考えると壁は高く感じ、腰が重くなりがちです。 ですが、どんな人にも優しいデザインを目指していくことは世の中を少しずつ良くすることができることだと考え、日々のデザイン業務に取り入れていきたいものです。 今回ご紹介したツールなどを活かしてぜひ「ユニバーサルデザイン」、取り入れていただけたら嬉しいです。

株式会社デパートでは、表層面のみならず、Webサイトを通して得た全ての体験が、優れたUXになることを目指したWeb制作を行っています。お気軽にお問い合わせください。

UX開発の一例