Google Fonts対応のUDフォント「BIZ UDゴシック」と参考サイト10選

公開日 :

  • デザイン

こんにちは!アンドエイチエーのデザインチームです。

皆さん、ユニバーサルデザインフォント(以下UDフォント)はご存知でしょうか?

UDフォントとは、年齢や性別、障害の有無などに関わらず、どんな人でも読みやすく、誤読が起こりにくいように設計・デザインされたフォントです。

今回紹介するのはUDフォントの中でもGoogle Fonts対応でウェブサイトにも取り入れやすい、BIZ UDゴシック(BIZ UDPゴシック)です。

記事の終わりにはBIZ UDゴシックが使用されている事例を10サイト取り上げましたので、ぜひ最後までご覧ください!

BIZ UDゴシック(BIZ UDPゴシック)とは

BIZ UDゴシックは、株式会社モリサワが開発したUDフォントです。

もともとモリサワにはTBUDゴシックという見やすさに配慮されたUDフォントがありましたが、それをMicrosoft Officeに最適化する目的でBIZ UDゴシックが制作されました。

BIZ UDゴシックのダウンロードはこちら

BIZ UDゴシックとBIZ UDPゴシックの違い・使い分け

BIZ UDゴシックにはBIZ UDPゴシックというプロポーショナルフォントが存在します。

BIZ UDPゴシックのダウンロードはこちら

プロポーショナルフォントとは欧文やかなの幅が文字ごとに異なるフォントで、文章や段落の見た目を整え、長い文章を自然に、読みやすくする効果があります。

一方で通常のBIZ UDゴシックは文字幅が共通の等幅フォントです。

両者を比較してみるとBIZ UDゴシックは欧文の字幅が共通のため、文章の長さが短くなる反面、若干詰まった印象を受けますね。

英数字が混在することが多かったり、テキストが長文になることが想定される場面ではBIZ UDPゴシックの方を使うと可読性のさらなる向上が期待できそうです。

加えて、今回取り上げた参考例10サイトのうち、7サイトがBIZ UDPゴシックでデザインされており、日付や数字の使用が多いウェブデザインではわずかにBIZ UDPゴシックに軍配が上がるのかもしれません。

フォントの特徴

誤読を回避する装飾の省略

BIZ UDゴシックは「ハネ」や「ゲタ」、「ウロコ」といった装飾を一部省略することで文字をクリアに見せ、誤読されにくい細かな工夫が施されています。

誤読のされにくさは日本語に慣れていない外国人がターゲットに含まれる観光系サイトや空港サイトなどにも適した特性といえます。

判別しやすい文字の形

字画同士の空間(ふところ)が広く、文字の形も大きめなため、判別しやすく、読みやすい形状も特徴です。

特に「小さいサイズですべての文字が判別できること」という点はモリサワのUDフォント全般の開発基準ともなっているそうです。

長文でも可読性が高い

フォント自体の個性が控えめな分、長文でも読み疲れしにくいというメリットも。

記事最後のサイト事例でも挙げていますが、地方自治体や福祉関連などターゲット層が幅広く、長文の説明が多くなる場面では非常に心強い特徴の一つです。

実際にウェブサイトで多用されるNoto Sans JPと長文サンプルを比較してみましょう。

まずはNoto Sans JPからです↓

Noto Sans JPを使った長文サンプル(文字間隔2%)

次にBIZ UDPゴシックです↓

BIZ UDPゴシックを使った長文サンプル(文字間隔2%)

わずかではありますが、BIZ UDPゴシックでは句読点や記号、数字、アルファベットが混在したときの日本語とのばらつきが少なく、読み疲れが少し軽減した感じがしませんか?

お手元のデザインツールを使って様々なフォントと比較してみてみると、より違いがわかりやすいと思います!

文章量やターゲット、要件を見極めつつではありますが、BIZ UDゴシック(BIZ UDPゴシック)も候補とすることで最適なフォント選びに繋がる場面があるかもしれません。

Google Fonts対応でウェブフォントとして使いやすい

モリサワが提供するゴシック体のUDフォントには先述のTBUDゴシック、UD新ゴなどがありますが、Google Fontsには対応していません。
一方、今回取り上げたBIZ UDゴシック、BIZ UDPゴシックに関しては、いずれもGoogle Fontsに対応しているため、ウェブサイト制作において無料で使用できます。合わせてAdobe Fontsにも対応しているのもありがたいポイントです。

Google Fonts / BIZ UDゴシック

Google Fonts / BIZ UDPゴシック

Adobe Fonts / BIZ UDゴシック

Adobe Fonts / BIZ UDPゴシック

ウェイトは2種類、対応字数は約12,000字

ウェイトはRegularBoldの2種類で、ウェブで多用されるNoto Sans JPと比較すると少なめです。

一方で対応字数は約12,000字をカバーするため、ある程度様々な状況下での使用が想定でき、サイズや余白で強弱をつけることでウェブサイトのフォントとしては十分な安心感があります。

ゴシック体以外にBIZ UD明朝、BIZ UDP明朝も存在

明朝体であるBIZ UD明朝BIZ UDP明朝もウェブフォントとして公開されているため、BIZ UDゴシックと組み合わせて使いたい場合など、柔軟性が高いです。

Google Fonts / BIZ UD明朝

Adobe Fonts / BIZ UD明朝

Google Fonts / BIZ UDP明朝

Adobe Fonts / BIZ UDP明朝

BIZ UDゴシックが使われているサイト事例10選

それでは実際にBIZ UDゴシック(BIZ UDPゴシック)が使われている事例を10サイト紹介します。

ユニバーサルデザインが求められるということで、地方自治体や福祉に関係するサイトが多いですが、空港のように不特定多数の利用者が見込まれるケース、コーポレート・採用サイトなど情報をわかり易く伝えることが重視されるケースでの使用も見られました。
組み合わせで使われている欧文フォントも記載していますので制作時の参考にもしてみてください!

地方自治体・福祉サイト

仙台市社会福祉協議会

  • 使用フォント:BIZ UDPゴシック

https://www.shakyo-sendai.or.jp/

相模原市 -未来へつながるまち-

  • 使用フォント:BIZ UDPゴシック

https://www.city.sagamihara.kanagawa.jp

立川市

  • 使用フォント:BIZ UDPゴシック

https://www.city.tachikawa.lg.jp

横浜市

  • 使用フォント:BIZ UDPゴシック|Futura PT

https://www.city.yokohama.lg.jp

内閣府ホームページ

  • 使用フォント:BIZ UDPゴシック

https://www.cao.go.jp

コーポレートサイト

株式会社永井製作所

  • 使用フォント:BIZ UDゴシック|Arial

https://nagai-steel.co.jp

リクルートサイト

SEED Recruit Site

https://www.seed-recruit.com

メディアサイト

Weather X 日本気象協会

  • 使用フォント:BIZ UDゴシック|Barlow

https://weather-jwa.jp

OREFOLDER

  • 使用フォント:|BIZ UDPゴシック|RubikPoppins

https://orefolder.jp

空港サイト

いわて花巻空港

  • 使用フォント:|BIZ UDPゴシック|Roboto

https://www.hna-terminal.co.jp

まとめ

いかがでしたでしょうか?

BIZ UDゴシックは現在(2025年6月時点)、日本語ゴシック体UDフォントの中で唯一Google Fonts対応しているため、ユニバーサルデザインが求められる案件を中心に、積極的に使用を検討していきたいフォントですね。

なお、今回の参考事例で紹介している仙台市社会福祉協議会はアンドエイチエーで制作を担当させていただきました。

アクセシビリティ・ユーザービリティが求められるホームページ制作でお困りの方はお気軽にアンドエイチエーにご相談ください。

また、アンドエイチエーのブログでは、同じくGoogle Fonts対応で読みやすい日本語フォント「IBM Plex Sans JP」について解説している記事もアップしているため、気になる方は合わせてご覧ください!

それではまた!

合わせて読みたい!