ユニバーサルデザインとは？Web制作現場でのデザイン要点やツールをご紹介！

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

2024.2.28 更新　/　2023.6.13 公開

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

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

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

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

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

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

このように、なぜ多くの企業がユニバーサルデザインに取り組むのかご存じでしょうか。

今では多くの国でユニバーサルデザインが求められており、その背景には、国際社会における「ダイバーシティ＝多様性」の確立が挙げられます。

ダイバーシティはSDGsの目標に深く関係していますが、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サイト制作では「アクセシビリティ・ユーザビリティ」という言葉がよく使われますが、「全てのユーザが情報にアクセスでき、さらに使いやすいようにデザインする」と言う”考え方”が、ユニバーサルデザインです。

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

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

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

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

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

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

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

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

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

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

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

注：すべてのガイドラインが、どのようなデザインにも当てはまるとは限らない

Copyright 1997 N.C. State University, The Center for Universal Design

さらに詳しくみてみましょう

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

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

ガイドライン

１ａ．誰もが同じ方法で使えるようにする。それが無理なら別の方法でも仕方ないが、公平なものでなくてはならない。

１ｂ．差別感や屈辱感が生じないようにする。

１ｃ．誰もがプライバシーや安心感、安全性を得られるようにする。

１ｄ．使い手にとって魅力あるデザインにする。

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

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

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

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

ガイドライン

２ａ．使い方を選べるようにする。

２ｂ．右利き、左利きどちらでも使えるようにする。

２ｃ．正確な操作がしやすいようにする。

２ｄ．使いやすいペースに合わせられるようにする。

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

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

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

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

ガイドライン

３ａ．不必要に複雑にしない。

３ｂ．直感的にすぐに使えるようにする。

３ｃ．誰にでもわかる用語や言い回しにする。

３ｄ．情報は重要度の高い順にまとめる。

３ｅ．操作のためのガイダンスや操作確認を、効果的に提供する。

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

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

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

ガイドライン

４ａ．大切な情報を十分に伝えられるように、絵や文字、手触りなど異なった方法を併用する。

４ｂ．大切な情報は、（例えば大きな文字で書くなど）できるだけ強調して読みやすくする。

４ｃ．情報をできるだけ区別して説明しやすくする（やり方が口頭で指示しやすくなるように）。

４ｄ．視覚、聴覚などに障がいのある人が利用しているさまざまなやり方や道具でも、情報がうまく伝わるようにする。

点字ブロックなど

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

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

ガイドライン

５ａ．危険やミスをできる限り防ぐ配慮をすること：頻繁に使うものは最もアクセスしやすくし、危険なものはなくしたり、隔離したり、覆うなどする。

５ｂ．危険なときやミスをしたときは警告を出す。

５ｃ．間違っても安全なように配慮をする（フェイルセーフ）。

５ｄ．注意が必要な操作を意図せずにしてしまうことがないように配慮する。

駅のホームドアなど

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

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

ガイドライン

６ａ．自然な姿勢のままで使えるようにする。

６ｂ．あまり力を入れなくても使えるようにする。

６ｃ．同じ動作を何度も繰り返すことを、できるだけ少なくする。

６ｄ．体に無理な負担が持続的にかかることを、できるだけ少なくする。

自動ドアなど

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

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

ガイドライン

７ａ．立っていても座っていても、重要なものは見えるようにする。

７ｂ．立っていても座っていても、あらゆるものに楽に手が届くようにする。

７ｃ．さまざまな手や握りの大きさに対応する。

７ｄ．補助具や介助者のためのスペースを十分に確保する。

多目的トイレなど

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

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

・タイポグラフィ

・配色

・ウェブアクセシビリティ

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

タイポグラフィ

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

文字の読みづらさとして以下が挙げられます。

近視や遠視、乱視、老眼などピントが合わない場合

→文字の込み入った部分がつぶれて見えたり、ぼやけてしまって文字の形が認識しづらくなる

白内障や弱視など光がまぶしく感じられる場合

→細い線が飛んでしまい、文字の形が認識しづらくなる

視野欠損の場合

→シルエットが似ている文字は、読み間違えが起こりやすいやすい

文字の読みやすさ

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

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

UDフォント

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

UDフォントにはこういった特徴があります。 ・字面を大きく、線画をシンプルに ・文字の形がわかりやすく、読み間違えにくい

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

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

https://www.morisawa.co.jp/about/news/6706

https://fonts.google.com/specimen/BIZ+UDGothic

（Google Fontsからダウンロードできます）

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

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

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

文字組み

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

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

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

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

※WCAG：W3C（World Wide Web Consortium）においてアクセシビリティ関連の活動を行うWAI（Web Accessibility Initiative）によって策定されます。

色について

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

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

人間の生まれつきの色の感じ方（色覚）は、大きく５つの型（タイプ）に分けることができ、色の感じ方は異なります。また、色覚は病気や老いによって変わることもあります。

こうした人間の色覚の多様性に対応し、より多くの人に利用しやすい配色を行った製品や施設・建築物、サービス、情報を提供するという考え方を「カラーユニバーサルデザイン（略称ＣＵＤ）」と呼びます。

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

目のしくみ

人は目から入ってくる光によって色を認識しています。目の一番奥にある網膜には、暗いところではたらく桿体（かんたい）と、明るいところではたらく錐体（すいたい）の2種類の視細胞があります。

それぞれ光に反応して、桿体は明暗の、錐体は色の感覚をもたらします。桿体は1種類ですが、錐体にはL錐体、M錐体とS錐体の3種類があります。

L錐体は長波長付近の光（赤）、M錐体は中波長付近の光（緑）、S錐体は短波長付近の光（青）に高い感度で反応する視物質をもっています。それらが光を吸収して興奮すると、その刺激が信号となって視神経を通って脳に伝わり、色として認識されるのです。

錐体の種類や状態、刺激の程度によって見分けにくい色は異なり、似ている人を集めると５つの色覚タイプに分類することができます。

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

色弱障がいの色の見え方

日本人男性の約20人に1人、女性の約500〜600人に1人が色弱者といわれています。

色弱には、赤・緑・青のどの錐体に問題があるかによって3つのタイプがあります。

赤の錐体に問題がある場合を1型（P型）色覚、緑の錐体に問題がある場合を2型（D型）色覚、

青に問題がある場合を3型（T型）色覚といいます。

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

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

それらにに配慮したカラーパレットを作成するためのツールをいくつかご紹介します。

色覚シミュレーション：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でも、以下のようにシュミレーションすることができますので、見え方を確認しながらカラー設計をするようにしましょう。

高齢者の色の見え方

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

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

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

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

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

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

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

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

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

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

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

コントラストチェックツール

▼Adobe Color

https://color.adobe.com/ja/create/color-contrast-analyzer

▼Contrast

https://usecontrast.com/

▼Stark

https://www.getstark.co/

カラーパレット設定

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

パレットの考え方

①まずブランドカラーなどのメインの色のコントラストを確保

②次に文字の白黒を反転させてコントラストが確保できる背景色を決定

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

配色セット

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

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

色以外の情報による改善

色+模様

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

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

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

色+枠

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

色+カタチ

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

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

色以外の情報による改善

テキスト補助

このお問い合わせフォームでは必須項目を文字の色だけで表しているため、赤が認識しづらい人には分かりにくい表現になっています。

必須項目を色だけで表現するのではなく、ラベルにテキストで「必須」と明記することで、より伝わりやすい表現にできます。

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

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

まとめ

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

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

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

UX開発の一例

制作実績：株式会社ポプラ社｜"こどもが本好きになる”小・中学校向け電子書籍読み放題サービス『Yomokka!（よもっか!）』のご紹介

株式会社デパートの手掛けた制作実績「株式会社ポプラ社｜"こどもが本好きになる”小・中学校向け電子書籍読み放題サービス『Yomokka!（よもっか!）』」のプロジェクト概要、課題と解決方法をご紹介しています。

制作実績：株式会社ポプラ社｜「総合百科事典ポプラディア」発 調べ学習応援サービス『Sagasokka!（さがそっか!）』のご紹介

株式会社デパートの手掛けた制作実績「株式会社ポプラ社｜「総合百科事典ポプラディア」発 調べ学習応援サービス『Sagasokka!（さがそっか!）』」のプロジェクト概要、課題と解決方法をご紹介しています。

制作実績：Xfolio（クロスフォリオ）｜サービスサイト制作のご紹介

株式会社デパートの手掛けた制作実績「Xfolio（クロスフォリオ）｜サービスサイト制作」のプロジェクト概要、課題と解決方法をご紹介しています。