v e r. 2 . 5

Universalユ ニ バ ー サ ル

Design Guide
デ ザイ ンガ イド

株 式 会 社インテリジェントターミナル
クリエイティブ 事 業 部
2017.8.1

使 用 書 体：U D 新ゴ

Universal Design Guide
FONTv e r. 2 . 5

文字は可読性の高いサイズ、または視認性の高いフォントを使用します。
また、文字間の調整やフォントの組み合わせ、強弱・大小など様々な要素にも配慮していきます

推奨文字サイズ

推奨フォント■最小文字サイズ：10Q（7.1pt）以上■ユニバーサルデザイン（UD）系／・UD新ゴ ・UD新丸ゴ ・UD黎ミン・ヒラギノUD角ゴ/丸ゴ/明朝

・UDタイポス515 ・FOT-UD角ゴ_ラージ ・FOT-UD丸ゴ_ラージ ・FOT-UD明朝 など■行間：文字サイズの1.5倍以上□ゴシック系／・新ゴ ・ゴシックMB101 ・見出ゴMB31 ・太ゴB101 ・中ゴシックBBB など※判型や企画内容により、やむを得ず推奨サイズより小さい文字サイズを使 用することがありますが、その場合は可能な限り視認性の高いフォントの使用に留意します。

□明朝系／・リュウミン・太ミンA101 ・見出ミンMA31 など※WEBサイトではフォントの指定ができない場合があるので、文字サイズでの調整とします。

▲

推奨フォントの比較見本▲

最小文字サイズ見本

認認 ササ 勝勝MS Pゴシック

ゴシック系 新ゴR Q数：10Q（7.1pt）／行間：15Q（10.6pt）

MS 明朝

UD黎ミン

MSゴシック❷ユニバーサルデザインとは、文化・言語・国籍の違い、老若男女といった差異、障がいなどの能力の如何を問わずに利用することができる施設・製品・情報の設計またはデザインのことです。

UD新ゴ

❹❸

❶

明朝系 UD黎ミンR Q数：11Q（7.1pt）／行間：16.5Q（12pt）❶飛び出た箇所がないことでスッキリ見える❷1角のスペースを最大限に使うことで画数の多い漢字もつぶれにくい

ユニバーサルデザインとは、文化・言語・国籍の違い、老若男女といった差異、障がいなどの能力の如何を問わずに利用することができる施設・製品・情報の設計またはデザインのことです。

▲

ヒラギノUD明朝 W4▲

UD新ゴ R❹点を長くすることによってはっきり見える❺線が重なる部分も空きを多く作ることで可読性が高くなる▲

リュウミン M-KL

❸ふところが 深くなり、より判 別 性が高まる❺▲

推奨フォント見本：例

ゴシックMB101 R

新ゴ

ユニバーサルデザインとは、文化・言語・ユニバーサルデザインとは、文化・言語・国ユニバーサルデザインとは、文化・言語・国ユニバーサルデザインとは、文化・言語・国籍の違い、老若男女といった差異、障が籍の違い、老若男女といった差異、障がい籍の違い、老若男女といった差異、障がい国籍の違い、老若男女といった差異、障がいなどの能力の如何を問わずに利用するなどの能力の如何を問わずに利用することなどの能力の如何を問わずに利用するこいなどの能力の如何を問わずに利用するこことができる施設・製品・情報の設計またができる施設・製品・情報の設計またはデとができる施設・製品・情報の設計またはとができる施設・製品・情報の設計またははデザインのことです。

ザインのことです。

デザインのことです。

デザインのことです。

使 用 書 体：U D 新ゴ

Universal Design Guide
C OL O Rv e r. 2 . 5

識別可能な色・柄に配慮。
カラーシミュレーターを利用し、検証しながら制作します

配色

検証用カラーシミュレーターの利用

カラー以外のデザイン処理

色弱者には「赤」や「緑」の色の見え方が異なる

通常処理

カラーバリエーションにのみ頼った識別方法をため背景色などの兼ね合い次第では返って目立見直し、その他のデザイン処理や敢えて重複したたない場合や「オレンジ」と「緑」など配色によっテキスト表示など表現方法を模索しています。ては同じ色に見えてしまうものもあるので色の・ドロップシャドウや光彩効果で文字を見やすく選定や明暗の差などに注意します。

・色に頼らない文字の装飾▲色の区別がつきにくい・色自体の見え方が異なる人の見え方例
色覚が普通に見える人
P型：色弱の約25%

・模様をつけて面分けをわかりやすく

D型：色弱の約75%
T型：色弱の約0.02%▲

ユニバーサルデザイン推奨配色例

基本カラー

0,75,95,0
255,51,0

サブカラー

0,3,40,0
255,255,153

C, M ,Y,K
R,G,B

15,10,10,0
204,204,204

75,0,65,0
51,153,102

30,0,0,0
180,235,250

18,10,0,55
114,132,144

100,45,0,0
0,65,255

0,25,15,0
255,211,204

50,50,50,1000,0,055,0,0,0
102,204,255

0,25,45,0235,190,140

0,55,35,0
255,153,153

20,0,80,0
203,242,102

0,45,100,0
255,153,0

25,30,0,0
195,180,220

使 用 書 体：U D 新ゴ

P・D型での色認識例

0,0,0,0
255,255,255

45,0,45,0118,228,166

55,90,100,0102,51,0

通常処理

明暗基調

0,0,100,0
255,255,030,95,0,0
153,0,102

P・D型での色認識例

改善後重要ポイントをピンクで目立たせたはずが、埋もれてしまうことも。シミュレーターで色の検証を繰り返し、適切な色を選定していきます。

色 分 け の みで は 識 別 が 困 難になる場合があるため、柄や処理によって識別を補助した例。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□！ ＵＤの起源□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□！ ＵＤの起源□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

ＵＤの起源は？
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□？ ＵＤって何？

××は▲▲▲▲になるんだ！

□□□□□□□□□□□□□□□□□□□□□□□□？ ＵＤって何？
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

ＵＤって何？
□□□□□□□□□□□□□❸□□□□□□□□□□□□□□□□□□□□□□□□□□□□●●すると▲▲▲▲するんだね□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□●●すると▲▲▲▲するんだね

ユニバーサルデザインの「いろは」

UDの「いろは」は難しくない！
しくみを理解すればカンタン！

❶□□□□□□□□□□□□□□

使 用 書 体：U D 新ゴUDの「いろは」は難しくない！
しくみを理解すればカンタン！

UDの「いろは」は難しくない！
しくみを理解すればカンタン！

❻□□□□□□□□□□□□□□□□□□□□□□□□□□

××は▲▲▲▲になるんだ！

❹ユニバーサルデザインの「いろは」❺ユニバーサルデザインの「いろは」❹キャッチ/リードの組み方向を本文と同じに❺写真やイラストは本文中に配置せず、一定の場所に固めて配置❻見出しが同じライン上に来るように文章を調整❶アイコンを付け、内容をわかりやすく❷写真は本文への食い込みを避け、キャプションとセットで配置❸イラストなどを使用し、本文の内容をわかりやすく説明
3段組みの例。
写真が本文の間に置かれることにより、テキストが回り込んでいる。
写真のキャプションは左下にまとめている。

❷U Dを意 識したレイアウトパターン2
U Dを意 識したレイアウトパターン1
一 般 的なレイアウト例❺□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

可能な限りシンプルに、かつ、わかりやすい表現で構成し、全体の流れを壊さないレイアウトを実践します
PLAN &LAYOUTv e r. 2 . 5

Universal Design Guide

構成・レイアウト例

狭窄や弱視などの障がいのある方々は日ごろよりルーペなどの拡大鏡を使って文字を読んでいます。

その方々に配慮した内容やレイアウトを展開することにより、より多くの方々に情報をわかりやすく提供することができます。

Universal Design Guidev e r. 2 . 5

U n i ve rsa l Design（ベースの考え方：Normalization）が 適 用される人々
文化・言語・国籍の違い、老若男女といった差異、障害・能力の如何を問わずに利用することができる施設・製品・情報の設計またはデザイン。

■国籍・民族・言 語
地球上で独立国とされているのは203カ国、民族（部族含む）は250以
上、言語は方言も含め510以上現存するとされる■性別

バリアフリー（Accessibility）が 必 要とされる人々
高齢者等の社会生活弱者や障がい者が社会生活に参加する上で生活の支障となる物理的な障がいや精神的な障壁を取り除くための施策、若しくは具体的に障がいを取り除いた状態。一般的には障がい者が利用する上での障壁が取り除かれた状態として広く使われている。

身 体 障 が い 者：393.7万人（平成26年 障害者白書など）

世界の男女比はほぼ 1：1。日本では男：女 =48.7%：51.3% と女性の割合が増えてきている・肢体不自由：44.2% ・内部障がい：24.1% ・聴覚言語障がい：8.4% ・視覚障がい：8.2% ・不詳：15.1%■年齢・下肢切断

・心臓機能・１級〜６級

・全盲
（1級）

日本の年少（0〜14歳）
人口は約1,573万人、生産年齢（15〜64歳）
人口

・下肢機能障害・腎臓機能など

・視野狭窄（2〜5級）

・体幹機能障害・呼吸器機能・弱視（2〜6級）などなどなど

は約7,631万人

65歳以上 の 高 齢 者：約 3, 479万 人（ 平 成 29年 ）現状では4人に１人（27.4％）
が65歳以上ということになるが、21世紀半ばには3人に１人になると予測されている

身体障がい者 の 中 の 6 5 歳以上 の 割 合：6 8 .7 %身体障害者は年々増加している。日本の人口における高齢者の割合が増加していることから、今後も身体障がい者の人数は増加の予想。

色弱：推計3 0 0 万人 以 上
白内障／老視精 神 障 が い 者：320.1万人

知的障がい者：74.1万人「精神障がい者」とは、精神分裂病、精神作用物質による急性中「知的障がい者」とは、一般的には金銭管理・読み書き・計算な毒又はその依存症、知的障がい、精神病質その他の精神疾患

ど、日常生活や学校生活の上で頭脳を使う知的行動に支障がを有する者をいう。

ある者をいう。

■で囲まれた人々（日本人の約3,800万人）へのユーザビリティ向上を目指し、健常者と高齢者・障がい者に分け隔てなく受け入れられるユニバーサルデザインを推進していきます

使 用 書 体：U D 新ゴ