みゃうまつもは穏やかに暮らしたい

化学物質過敏症みゃうまつもの雑記帳 言いたいことも言えないこんなおからだじゃ~

UDフォントと適材適所~フォント達のスキルを理解したい

手書きでも、印刷でも、多くの字体が存在し、その字体で受け取るイメージが変わる。

でもそれだけではなかったことを知って去年からちょっと考えていた(だけの) いきもののはなし

ゴメンナサイ今回画像は多いけど文字ばっかり(意味不明?みればわかる

 

 

 

 

みゃうまつものUDフォントとの出会い

みゃうまつもはUDフォントという存在をこのtweetで知った

 

 

UD=ユニバーサルデザイン

年齢や障害の有無、体格、性別、国籍などにかかわらず、できるだけ多くの人にわかりやすく、最初からできるだけ多くの人が利用可能であるようにデザインすること

 

詳しくはこちらをご覧くださいませ

ud-shizuoka.jp

 

 

そうして自分のPCにUDフォントが標準搭載されていたのを知る

Windows10に搭載されているモリサワフォントである

 

BIZ UD

UDデジタル教科書体

*メイリオもユニバーサルデザインを意識して作られたフォントです。本来のUDフォントほどではありませんがこれらが入ってない場合にどうぞ

 

 

このフォントが搭載されたのは

2017年10月 Windows 10 Fall Creators Update からである

なのに去年まで知らなかったみゃうまつもって…(シクシクシク

 

 

最初の日本語UDフォントは家電がきっかけ

デジタルフォントメーカーのイワタに

パナソニック(当時は松下電器グループ)の人が相談を持ち掛ける

 

自社に寄せられる意見

リモコンの文字がつぶれてて見えにくい

の解消方法について

 

 

そこでイワタは

現在リモコンに使用されている通常のゴシック体をちょっと変えて

一文字の大きさを最大にできる工夫をすれば、縮小しても文字がつぶれない

といった事を具体例を挙げてアドバイスした

 

その後パナソニックはイワタを再訪問

UDに配慮した書体を正式に依頼した

 

イワタとパナソニックの共同開発により

日本で最初の「日本語UDフォント」が作られた

 

…とここに書いてあった

news.mynavi.jp

 

めちゃめちゃ面白いので興味のある方是非読んでみてください

 

 

文字を大きくすればいいってもんじゃなかった

ロービジョン(弱視)

ディスレクシア(読み書き障害)

 

単語は知っていたけれど(英語の方は知らなかったが)

そういう場合は文字を大きくしたり

濃淡や間隔に気を付ければいいのだと単純に考えていた

 

色だけではなく文字の形で刺激を受けることがある

という意味を「完全には」理解していなかった

 

 

パナソニックさんの最初の命題(違

文字がつぶれて読めない

とは

単に文字を大きく見せるだけではなくて太さと余白も関係していた

手書きをしていれば自然にする改良(アレンジ)なのに

デジタルフォントではその考えに至らなかったみゃうまつもは

 

 

細いと見にくいから太字にしよう

→縮小すると逆につぶれて読めない、文章だと太字は逆に読み辛い

 

正式な書類はゴシック体ではなくて明朝体

→明朝体特有の細い横棒は飛んでしまって読みにくいこともある

 

 

いわれて初めて

あ確かに!

 

と思った

こんな風にフォントを調整しているのを知らなかった

  • ふところを広くする
  • 識別性を高める
  • 濁点は大きく間隔をあける
  • 刺激を減らす

 

 

ふところを広くする1(パーツを大きく文字自体も大きく)

線と線で囲まれた空間のことを専門用語では「懐(ふところ)」というそうです

UDフォント一覧04ふところ01-5

 ふところを広くすると

 文字パーツ的には大きく(広く)なるので、縮小してもつぶれにくくなります

 (↑でいう所の「ピンクの面積が狭くなる」)

 

UDフォント一覧05ふところ02-5

 また、文字全体も大きくなったりします

 ↑は同じ大きさの四角形の中に同じ文字を入れた状態です

 MSPゴシックの方が緑の面積が大きい=文字が小さい ことがわかります

 同じ大きさの看板に文字を書くときには

 MSPゴシックよりBIZUDPゴシックを使った方が大きく見せられる

 という事です(単純に大きさだけの話 オシャレかとは別の話)

 

 

ふところを広くする2(文字の中の余白)

UDフォント一覧01文字余白-2

 文字のパーツを大きくする(例「吾」の「口」の横幅を広げる)こと以外に

 中の面積を増やすようにすると見やすくなる 

 文字単体で見るとダサいんだけど

 文章として見ると、確かにつぶれにくいね

 

 

ふところを広くする3(空きを広げる)

UDフォント一覧02空き-2

 

UDフォント一覧07空き02-2

 MSPゴシックの方が広がっている漢字もいくつかあるけど

 平仮名、英数になると顕著

 これは横線縦線に湾曲が少ないことや弧の描き方も重要

 昔レタリングでは「Oオー」を基準にCGeとか描いたもんだけど

 みゃうまつもはその影響でBIZUDPに違和感があるのだろうか…

 

 

識別性を高める

UDフォント一覧06識別性-2

 おっきくても間違えるのに縮小されるとさらに厄介なこれらは

 大文字の「Iアイ」は横線が長くなり、

 小文字の「lエル」や「|縦線」との区別がつきやすい

 

 そして嬉しいのが小文字の「lエル」

 足が!足がついてますよ!!!

 

 あとちょっと違うけど、数字の1イチについては

 ひげの部分が直線的になっています(後述の刺激性参照)

 しかし半角と全角の区別がつかないのですがこれはどうなん?

 

 

濁点を大きく間隔を空ける

UDフォント一覧03濁点-2

 濁点が大きいかは文字によって差があるけど

 濁点自体には隙間があるし、なにより

 文字の枠から濁点が飛び出てないので違和感が少ない=ストレスが減る*
  例:ば、バ、ピ、ビ、プ、ぷ(ピビプぷは文字の線に延長上に濁点があるからだろうか*)

 *みゃうまつもの感想です

 

 

刺激が多い文字・少ない文字

文字に刺激?目立つとかじゃなくて?と思ったけど

なんとなく感じていたけれど こうして言葉にされると

ああ、この事だったのかと気づく

(つまり「完全には」理解していなかったわけだ)

 

気持ち悪いけど特に不自由はしていなかったというか

そういうものだと思っていたから しょうがないと思っていたのだ

そうか、これってみゃうまつもにとって刺激だったんだ

 

UDフォント一覧08刺激-2

 

 みゃうまつもの独断で並べた

 刺激の多い順です

 

 刺激の多いフォントは

 明朝体 これは仕方がない(でもUDの方がはるかに怖くない)

 そしてUDではないゴシック体(MS明朝)にも飾りはついている

 こんな風に尖っているととても気になる人もいるはず(みゃうまつもがそうだ)

 …いるよね?(不安

 

UDフォント一覧09刺激02-5

 

 

漢字だとよくわかる

ぴょこん(耳)とはらい(尾)があるとそこに目が行く

「線」の字だといちいちついている「耳」

みゃうまつもはこれがとっても気持ち悪い

 

文章中なら小さいから気にならないけど

看板にでかでか書かれていたり本の表題とかだと

もうだめ

 

だから、みゃうまつもにも優しくしてくれるUDフォント…好き

 

その他の要素

みゃうまつものように

一つの文字のぴょこぴょこにイライラする人のためだけのUDフォントではないので(当たり前だw

もっと要素は沢山ある

 

それは

本の表紙タイトル(刺激性、視認性)

本文・大量の文章(視認性、可読性)

スーパーのPOP(刺激性と可読性)

看板(刺激性)

コードNo.パスワード(小さいスペースに英数の羅列、判読性)

飲食店のメニュー(視認性と時に刺激性)

(みゃうまつもの偏見です)

こんな風に用途によって要求されるスキル(?)が変わるなんてフォントってすごいな

 

これらの要素に対応するとなると

こんなところに配慮したりもする

 

フォントによる可読性の違い

UDフォント一覧10可読性-5

この4つでいうと

ダ と ズム で高さが全然違う明朝体(横では読みたくない縦がいい

へんとつくりで差がありすぎて全く落ち着けない 明朝体の 現

でも長めの一文だとかっこいいのは明朝体

明朝体だけど角がなくなって強弱に乏しいBIZ UDP明朝

明朝なのに味がない…ポスターだと悲しい(でもパンフの一文紹介とかではこっちが読みやすいし雰囲気がいい)

 

めっちゃ目立つMS Pゴシック

文字は大きくて読みやすいだろうけどこれが看板だったらのっぺりしてて

目に留まっても足が止まらないBIZ UDPゴシック

 

というように

どれが絶対に正解!というのはない

ただ、

使う場面によってこのフォントの方がいい

という事実があるだけだ

(注釈や備考等、細かい文字にせざるを得ないなら明朝体の方が逆に読みやすいとか

 教科書ならUDでストレスなく読んで欲しいとかね

 

他にこんなものも

NとかPとかKとか

フォントの後ろについているあれ

MS明朝 とMS P明朝 みたいな

何この記号…

 

note.com

こちらがまとめて確認出来て分かりやすかったです(メモメモ

 

 

ということでその違いを目で確認すべく

 

同じ文章を(英数カナかな記号混じり文章)

モリサワの同じフォント(UDデジタル教科書体)で

Nだけ(PとかKとかなし):等幅

P:英数字がプロポーショナルフォント

K:英数カナかながプロポーショナルフォント

 

の3種で入力してみました

 

UDフォント一覧11デジタル教科書体NPKの違い-2

単純に長さを短縮したいなら K だし

英数日本語交じりの分が多くて詰まっていると読みにくい文章だけらの本なら P

全部等倍で文字数=長さを視覚で感じたい(下書きとか)なら N-R

・・・とか(私見です みなさんはどれが読みやすかったですか?

 

これを分割してスペースがどうやってできたかを調べてみた

UDフォント一覧12デジタル教科書体NPKの違い02-2

 

 

分類方法はまだまだあるし

自分の持ってるフォントだけでも覚えきれない

ましてや売られているフォントに至っては未知の領域

それらが使いこなせたらどんなに素敵だろう…

 

とは思うものの

素人がごちゃごちゃいじっても

結局見にくくなるだけなので

みゃうまつもは自分(の目)に優しいフォントをマンガに使用し

その後UDの存在を知って切り替えたのだった…

 

番外編

みゃうまつものマンガで使用しているフォント

みゃうまつもはこれを全く知らずに

某投稿サイトにレシピマンガを載せていた

その時のフォントは

AR P丸ゴシック体M

 

理由:明朝体のぴょこぴょこが怖くて丸いのがよかったからw

 

今はUDフォントを知り

BIZ UDPゴシック

を使用しています…

 

UDフォント一覧13みゃうまつもフォント-5

このほかに強調文字で
江戸勘亭流(創英角ポップ体より好きあんまり可読性ないけど)

魚石行書(毛筆だけど怖くない)

麗流隷書(⁈が縦書きでもちゃんと出るからw)

 

を使っています

シンプル…(だよね?

 

みゃうまつもがめっちゃ怖いと思っているフォント

行書体、毛筆体はたまに耳がありえない出方をしていて怖いです

 

麗流隷書 より怖い(とうしゃひ

のがこのフォント…

UDフォント一覧14番外編

横書きするからいけなんだよ、みゃうまつも!