UD（ユニバーサルデザイン）フォントを使うとき

最推しの和風ゲームが先日リプレイスし、
雰囲気のある楷書フォントからUDフォントに変更になって文句続出してたので、
改めてユニバーサルデザインとは？UDフォントとは？となりました。

# ユニバーサルデザインとは

> ユニバーサルデザイン（Universal Design／UD）とは、文化・言語・国籍や年齢・性別などの違い、障害の有無や能力差などを問わずに利用できることを目指した建築（設備）・製品・情報などの設計（デザイン）のことである。

出典: [フリー百科事典『ウィキペディア（Wikipedia）』](https://ja.wikipedia.org/wiki/%E3%83%A6%E3%83%8B%E3%83%90%E3%83%BC%E3%82%B5%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3)

## ロン・メイスの７つの原則
1. 誰にとっても公平
2. 自由で柔軟に使える
3. 簡単・単純に使える
4. 明確で認知しやすい
5. 失敗しても安全
6. 身体的な努力が少なく長く使える
7. 誰にでも使える大きさと広さがある

製品やインフラ（ここまではバリアフリー）だけでなく、**情報**や**コミュニケーション**まで広くカバーする言葉。

- [モリサワのユニバーサルデザイン書体、まちづくりや教育に貢献（時事構想2019年6月号
）](https://www.projectdesign.jp/201906/city-promotion-symposium/006471.php)


2020年東京五輪にむけて[ユニバーサルデザインの推進（広義）](https://www.kantei.go.jp/jp/singi/tokyo2020_suishin_honbu/udsuisin/index.html)の取り組みもあり、ここ最近よくみるワードになった。

### 個人的には
私自身はあまりピンとこないけれど、
乳幼児連れで外出するようになってから、バリアフリールート（足腰に負担少ない/ベビーカー対応）やユニバーサルトイレ（オムツ替えからキッズトイレ併設）、標識のピクトグラム（文字が読めない子供でも目的を理解できる）といったところで恩恵をうけていることに気づいた。

# UDフォントとは

**形がわかりやすく、読み間違えにくく、文章になっても読みやすい** ように作られた書体のこと。

線の輪郭をはっきりさせ、余白を均一にし、
濁点・半濁点をより大きくして読み間違えを防いだり、

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54497/6cff7e19-a9d6-7cd7-6ec4-4b696e748c6e.png)
画像の出典：[UD書体 | モリサワ](https://www.morisawa.co.jp/fonts/udfont/)


明朝体では、線の強弱を少なくしてカスレを減らしたりして、
解像度が低いディスプレイや印刷時でも文字の濃度が均一になるように、等の工夫がされている。


![baba51ee-6386-d79e-2ea1-8e53fa3e39a7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54497/66864277-7ecf-5a51-1d83-c61bd4d2577a.png)
画像の出典：[UD書体 | モリサワ](https://www.morisawa.co.jp/fonts/udfont/)


## 識字障害（ディスクレイシア）

[認知されにくい読み書き障害　ＵＤフォントを使うと(産経新聞2019.5.9)](https://www.sankei.com/premium/news/190509/prm1905090001-n1.html)
[トム・クルーズも苦しんだ読み書きの学習障害　親はどう対処すべきか(AERA dot.)
](https://dot.asahi.com/dot/2017101900023.html)
学習障害の１つで、特に就学してから「教科書の文字が認識できない」というものがある。（これも子供持ってから初めて知った）

### ユニバーサルデザインで解決

一般的な教科書書体は、筆書き風で線に強弱があるので**見えにくい**。
でも一般的なゴシック体は、１文字１文字の認識はしやすいが教育現場に準じてなくて**教えにくい**。

**UDデジタル教科書体**なら、硬筆やサインペンを意識した手書き風で、書き順や運筆がわかりやすく**教えやすい**。なおかつ、太さが均一のため**見やすい**。

![8cc4a73e-8fa2-a454-b0df-3cd3ff0a506a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54497/2fa32f35-359b-edb5-23e6-51ea71aa5ee7.png)
画像の出典：[UDデジタル教科書体提供開始| モリサワ](https://www.morisawa.co.jp/topic/upg201802/)



# 有名どころのUDフォント

- [モリサワUDフォント](https://www.morisawa.co.jp/fonts/udfont/) 
- [ヒラギノUDフォント](http://www.screen-hiragino.jp/advantage/)
  - 「ヒラギノフォントは、すべてユニバーサルデザイン対応です。」
- [タイプバンクユニバーサルデザイン書体シリーズ](https://www.typebank.co.jp/tbud/)
- [モトヤUD対応フォント](http://www.motoyafont.jp/udmark/)
- [Uni-Type](https://www.lim.co.jp/products/concept.html)

## UD FONT マーク
UDフォントを使用している成果物に表示できるマーク。
利用の際は各フォントを提供している賛同メーカーごとのガイドラインに従う。
![8f5dbd1c-2840-9ad4-0d92-5aaef0ef56c2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54497/e78c70de-61b9-58b4-aafc-0d7d794d1698.png)

※ UD FONT マークは株式会社モリサワの登録商標。




# Webフォント（クラウド配信）サービス

クラウド配信は変わらず大手がサービス提供してる。
ただWebフォントを使うとサイトパフォーマンスに影響したり、十中八九PageSpeedで点数が落ちてしまうので、使い方は検討が必要そう。

・Adobe Fonts（CCの契約が必要）UD書体→ **5書体**
https://fonts.adobe.com/fonts?browse_mode=japanese&filters=cl:ud

・TypeSquare（有料）UD書体→ **24書体**
https://typesquare.com/

・FONTPLUS（有料） UD書体→ **29書体**
https://fontplus.jp/

・みんなの文字（無料）**1書体**
https://minmoji.ucda.jp/pages/webfont/
電通がつくっただけあって[幅広い活用事例](https://minmoji.ucda.jp/pages/case/)
例）東急百貨店 東横店 案内板、住宅金融支援機構「フラット35」案内ハガキ



# 弊社ではじめるとしたら

## 一度やってみたいサブセット化。
[サブセットフォントメーカー](https://opentype.jp/subsetfontmk.htm)なるものを利用し「Webサイトで使いそうな文字だけ」抜き出して、CSSで読み込む方法。

参考：[日本語Webフォントの流行の最適化「NotoSans」「サブセット化 | Qiita」
](https://qiita.com/tomonari-t/items/aa962786469640df415d)

**名刺**やパフォーマンスとバーターしても良さげな**コーポレートサイト**で、今下期にチャンスがあったらやってみたいかなあ。