WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

最近、Illustratorで過去データを開いたときに「Noto SansのBoldなのに、やけに細い…？」と感じることはありませんか？

ホームページ制作の現場でも、この現象はよく話題になります。
バナーやサイトデザインに使ったテキストが思ったより細く見えると、「設定を間違えたのかな？」と不安になりますよね。

今回は、この「Boldが細く表示される現象」の原因と、解決策についてご紹介します。

解決方法を結論から言いますと…

Illustratorで過去のデータを開いたときに、 Boldが細く表示される場合は、「Noto Sans CJK」にフォントを変更してください。これだけで解決します。

これにてこのブログは終了…でもいいのですが。少しだけ深堀します。

もっと知りたい人にお伝え

Illustratorで過去のデータを開いたときに表示されるこの現象。もちろん過去の制作時は、正常に表示されていたのですが、現在使うときに表示か変わってしまうので困ってしまいます。

ホームページ制作の場合はCSSで制作に指定されるためほぼ起こることはないこの現象。Illustratoで、印刷物のデザインデータに、Noto Sansを使っていた場合のみ起こるのとどのくらい過去のデータなのかや、とても複雑そうな問題かと最初に発見した時は、思ったものです。

データなのか、アプリケーションなのか、問題を切り離していくと「Noto Sans」というフォントそのものが原因だったようです。今一度ここでこの慣れ親しんだフォントについておさらいしてみました。

Noto Sansとは？

• Googleが配布しているオープンソースフォント
• 主に欧文（アルファベットや記号）用
• 日本語の字形は含まれておらず、日本語を入力すると環境依存で別のフォントが自動で割り当てられる（代替表示される）

Noto Sans CJKとは？

• 中国語（C）、日本語（J）、韓国語（K）に対応した「CJK版」
• 5万字以上の文字セットを持ち、日本語の漢字・ひらがな・カタカナまで正しく収録
• 日本語の太さ（Bold / Regular / Light など）も適切にデザインされているため、表示のブレが起こりにくい

なぜBoldが細くなるのか？

Illustratorで「Noto Sans（欧文版）」を指定した場合、日本語部分は自動的に代替フォントに置き換えられます。このことを理解していなかったのと、違和感を感じなかったのがそもそもの原因でした。
そして代替先のフォントによっては Boldが存在しない＝細い表示に見える という現象が発生したようです。

過去の制作環境ではたまたま問題が出なかったのですが、アプリやOSの更新で挙動が変わり、その嚙み合わせみたいたものが変わってしまいBoldのみで表示が正常にできなくなっていたのが今わかる範囲の原因と突き止めました。

余談を少々…

アンチエイリアスで一時的に直ることもある
Illustratorの環境設定で、「アートワークのアンチエイリアス」のチェックを外すとBoldの太さになりますがギザギザ表示になるため、実用的ではありません。

「Noto Sans Japanese」という名前のものもある
実体はNoto Sans CJKの日本語用サブセットです。使うならこちらかCJK版を選べば安心です。

ホームページ制作の現場でも同じ罠がある
CSSで font-family: “Noto Sans”; と書くと欧文版が指定され、日本語は代替フォントに切り替わる可能性があります。この場合は、font-family: “Noto Sans JP”; や Noto Sans CJK JP を指定すれば、日本語も正しく表示されます。

まとめ

今回は、Noto SansのBoldのみが細く表示されてしまう現象の解決方法とその原因をご紹介しました。AdobeのアプリケーションとGoogleのフォントは、冷静に考えればどこまで互いの使いやすさを前提に開発されたのか知る由もなく、今回のような不具合はいつ起こっても不思議でないのかもしれません。

今回の記事が、Noto SansのBoldのみが細く表示されてしまって困っている人のお役に立てたらうれしいです。