UD書体のきほん|文字とフォントのことはじめ06

テキスト 自動的に生成された説明

背景パターン 自動的に生成された説明
Adobe Fonts|UD書体の効果サンプル

見やすく、わかりやすく、読み間違えのない文字を目指して

文字・フォント・デザインの情報をお届けする連載「文字とフォントのことはじめ」、第6回はUD書体について取り上げます。
UD=Universal Designとは、年齢・性別・能力等の違いにかかわらず、誰にとってもわかりやすい、使いやすいデザイン設計のことです。これを書体に当てはめると、どのような人であっても、見やすく、読みやすい文字、読み間違えることのない文字を備えた書体=UD書体ということができるでしょう。
図は2つの書体で「ぽぼ」「835」という文字を表示し、それをぼかしたものです。弱視者の視界を正確に表現したものではなく、あくまで模式的なものですが、それぞれの文字は下の書体=UD書体のほうがはっきりとわかるのではないでしょうか。文字のかたち、ひとつひとつに目を配り、読み間違いのない文字を目指して、現在では、フォントメーカー各社がそれぞれの考えに基づいたUD書体をリリースしています。
この記事では、UD書体の特徴からAdobe Fontsで利用可能なフォントまで紹介していきましょう。

UD書体と一般書体、どこが違うの?

誰にとっても見やすく、読みやすく、間違えることのない文字を目指して作られたUD書体は、一般的な書体とどのような点が異なるのでしょうか。
その方法はフォントメーカーや書体によりさまざまですが、代表的な処理としては「画線の簡略化」「開口部の拡大」「濁点・半濁点の拡大」「読み間違えやすい文字の差別化」があります。
一般的な書体とその書体をUD化した書体を比べた下の図を見ると、「山」はよりシンプルなかたちに、「な」は3画目を離すことでよりはっきりとした文字のかたちに変えていることがわかります。
「C」「3」は開口部を大きくすることで、「C」と「O(オー)」「0(ゼロ)」との読み間違い、「3」と「8」の読み間違いを減らす配慮がされています。
右下の例は、小文字のエル「l」です。こうした文字は前後関係から類推できることも多々ありますが、たとえ一文字で使われたときにも、確実にその文字とわかる、そのような配慮が見て取れます。

Adobe Fonts|UD書体解説

モリサワ・新ゴとUD新ゴの比較例。UD新ゴはAdobe Fontsで利用可能 https://fonts.adobe.com/fonts/a-otf-ud-shin-go-pr6n

「UD書体が誰にとっても見やすく、読みやすいのなら、すべての文字にUD書体を使ったほうがいいの?」
そのような疑問を持つ人もいるのではないでしょうか。
もし、UD書体を使うべきかどうかを迷ったら、いま手がけているデザインは、誰がどのように接するものなのかを考えてみましょう。公共機関のサイン・看板・お知らせのようなものや、警告・注意書き・取扱説明書のようなもの、読み落とさないでほしい文章や読み間違えない配慮が必要なものなら、UD書体を使うほうが文字情報を的確に伝えることができるでしょう。
一方、風合いのある筆文字でお店のイメージを伝えたい、小説やエッセイを流れるように読み進められる仕上がりにしたいというように、ターゲットや目的がはっきりしている場合には、そのニーズに応えられる書体をセレクトするほうが、より効果的なデザインになります。書体はあくまでTPOで選ぶものであり、UD書体はその選択肢のひとつと考えましょう。

Adobe Fonts|UD書体使用例

左:新ゴ/右:UD新ゴ。適切な行間を取り、地色とのコントラストがあれば可読性は十分に担保できる

そもそも、デザインにおける見やすさ・読みやすさ・伝わりやすさは、文字のかたちだけで決定するものではありません。文字の大きさ、配色、レイアウトに気を配らなければ、せっかくのUD書体も力を発揮することはできません。
たとえ、UD書体であっても、目を凝らさないと見えないほど小さく配置されたり、行間がなくタイルのように並べられた文章では読みにくくなってしまいますし(右)、UD書体にカテゴライズされていない書体であっても、十分な視認性・可読性を持つ書体はたくさんあり、使いかたの工夫によって、見間違いや読み間違いを抑える配慮をすることもできるのです(左)。

Adobe Fonts|UD書体使用例

視認性・可読性を求められるシチュエーションではUD書体は非常に効果的です

Adobe Fontsでは、こうしたUD書体を17ファミリー・23書体を利用することができます(2023年8月現在)。
UD書体を探すには、Adobe Fontsのフィルター「分類」で「UD」を選びましょう。複数のウェイトがある場合でも、「ファミリーを追加」ボタンを押すことで、ファミリーに含まれるすべてのフォントを一括アクティベートすることができます。

Adobe Fonts|フィルタ画面

Adobe Fontsで使えるUD書体

UD書体にはその文字のスタイルに応じて、ゴシック系、丸ゴシック系、明朝系等、いくつもの種類があります。ここでは、Adobe Fontsで利用可能なUD書体をカテゴリに分けて紹介します。
*フォント名の後につく( )はAdobe Fontsで利用できるウェイト・スタイル数を示します。

ゴシック系UD書体

Adobe Fonts|UD書体サンプル

ゴシック体は、ユニバーサルデザインと相性のよいスタイルで、現在リリースされているUD書体の多くがゴシックスタイルを採用しています。
何を使うか迷ったら、まずはモリサワ「UD新ゴ」「TBUDゴシック」、フォントワークス「UD角ゴ_ラージ」「UD角ゴ_スモール」をアクティベートしてみましょう。なかでも「UD角ゴ_ラージ」は3ウェイト揃っているので、ランク分けが必要なデザインでもすぐに活用することができます。

丸ゴシック系UD書体

Adobe Fonts|UD書体サンプル

ゴシック体と並んで人気のUD書体が丸ゴシック体です。
ゴシック体よりも親しみを感じやすく、低年齢層にもやさしくアプローチすることができます。Adobe Fontsでは4ファミリーが提供されており、「UD丸ゴ_ラージ」は3つのウェイトを利用できます。

コンデンス系UD書体

Adobe Fonts|UD書体サンプル

商品ラベルや成分表示など、限られたスペースでも読みやすさ、見やすさが必要なときに便利なのが、コンデンス系UD書体です。通常のゴシック系UD書体に比べて幅が狭く設計されており、80なら水平比率80%、60なら水平比率60%というように文字自体にあらかじめ変形がかけられているので、同じスペースでもより多くの文字を表示することができます。

明朝系UD書体

Adobe Fonts|UD書体サンプル

ゴシック・丸ゴシック系に比べると数は多くありませんが、Adobe Fontsでは明朝系UD書体も4書体が利用可能です。通常の明朝体と比べると、線幅の抑揚は抑えられ、よりはっきりとした文字になっています。デザインイメージを考えるうえで、ゴシック・丸ゴシック体よりも明朝体がふさわしいとき、明朝系UD書体は頼もしい選択肢になるでしょう。

UDデジタル教科書体

Adobe Fonts|UD書体サンプル

Adobe Fontsではゴシック体、丸ゴシック体、明朝体以外のUD書体も提供されています。
なかでも注目したいのが、モリサワ「UDデジタル教科書体」です。
手の動きにを重視した文字のかたちが特徴で、ロービジョン(弱視)、ディスクレシア(読み書き障害)にも配慮したデザインになっており、従来の教科書体と比べても、硬筆やサインペンによる手書き文字のような自然な佇まいを備えています。
もともとは教科書での使用を想定して作られた書体ですが、その用途は見やすさ、読みやすさを求めるデザインの現場で急速な広がりを見せています。「UDデジタル教科書体」はいま、UD書体のなかでもっとも注目を集めている書体といっても過言ではありません。

Adobe Fontsでは新しい書体も随時、追加されているので、定期的にチェックすることで、これまで知らなかった新しい書体に巡り会えるかもしれません。
書体は文字に表情を与える重要なツールであり、書体を数多く持っていることは自身のデザインの幅を広げることにつながります。
Adobe Fontsの多彩な書体を使いこなし、より訴求力のあるデザインを作り上げましょう。

Adobe Fonts|UDフォントパック

フォントパックならセレクトされたUD書体を一括アクティベートすることも可能
「ウェイトが豊富なUD基本フォントパック」 https://fonts.adobe.com/collections/fwud-pack

背景パターン 自動的に生成された説明
Adobe Fonts|イメージ

文字の表現力を広げるフォントが揃うAdobe Fonts

アドビでは、クリエイティブには欠かせない道具のひとつであるフォントを、より自由に、柔軟に使えるクラウドフォントサービス「Adobe Fonts」を展開しています。2023年8月現在、その数は日本語フォント650超、Adobe Fonts全体では25,000以上。膨大なフォントをメディアを問わず、商用/非商用問わず、自由に使うことができます。
書体名がわからなくても「明朝」「ゴシック」「丸ゴシック」「筆書体」「デザイン書体」といった書体の分類から探すことができ、イメージしたフォントにすばやく辿り着けるようになっています。

“もっといろいろなフォントを見てみたい、使ってみたい!”

そう思えたらまずは一度、Adobe Fontsを開いてみましょう。
そこには高品質でユニークなデザインの書体が待っているはずです。

Adobe Fontsを無料で試してみる

Open Adobe Fonts