【手順】Studioのフォント置き換え方法｜FONTPLUS終了への実務対応

この記事の要点

• Studioでは、使用中のフォントを別のフォントへ一括で置き換えられ、ウェイトごとに置き換え先を指定できます。
• FONTPLUSの提供終了など、フォントの提供状況が変わると、既存サイトの置き換え対応が必要になります。
• 対応は「影響プロジェクトの洗い出し → 代替フォント選定 → 置き換え → 見た目の確認」の順で、落ち着いて進めるのが安全です。

「使っていたフォントの提供が終わると聞いたが、どのサイトに影響するのか分からない」「フォントを置き換えたら、雰囲気が変わってしまわないか不安」——フォントの提供状況の変化は、複数の案件を抱えているほど対応が大変になります。Studioにはフォントを一括で置き換える機能があり、ウェイトごとに置き換え先を指定することもできます。この記事では、フォント置き換えの手順と、FONTPLUS終了のような状況での実務対応の進め方を解説します。なお本記事の内容は、150名以上が参加するノーコードコミュニティ「ノーコードサロン」に集まる制作現場の知見をもとに、実務でつまずきやすい箇所を優先して整理しています。フォントの提供状況は変わることがあるため、最新情報は公式のアナウンスもご確認ください。

結論：置き換えは「洗い出し → 選定 → 適用 → 確認」で進める

フォントの提供終了に対応するときは、いきなり置き換えを始めるのではなく、順を追って進めるのが安全です。まず影響するプロジェクトを洗い出し、代替フォントを選定してから置き換え、最後に見た目を確認する——この流れで、ひとつひとつ落ち着いて進めることが、崩れを防ぐポイントです。

フォントの追加や基本的な設定についてはStudioでフォントを追加する方法で扱っています。本記事は、すでに使っているフォントを別のフォントへ置き換える対応に焦点を当てています。

フォント置き換えの実務対応手順

手順1：影響プロジェクトを洗い出す

まず、提供終了するフォントを使っている案件をすべてリスト化します。スプレッドシートなどにまとめ、各プロジェクトで該当フォントを使っているかどうかを確認します。最初に影響範囲を把握することで、対応漏れを防げます。複数案件を抱えている場合ほど、この洗い出しが重要です。

手順2：代替フォントを選定する

置き換え先の代替フォントを選びます。たとえば筑紫ゴシックの代替としてA1ゴシックが提案されることがありますが、フォントによって雰囲気は結構異なります。候補を並べて見比べ、元の印象に近いものを選ぶとよいでしょう。デザインの世界観を大きく損なわないフォントを選ぶことが大切です。

手順3：置き換えを適用する

Studioのフォント置き換え機能で、使用中のフォントを代替フォントに切り替えます。置き換え先はウェイト（太さ）ごとに指定できるため、見出しは太め、本文は標準、といった使い分けを保ったまま置き換えられます。

手順4：太さと見た目を確認する

モリサワ書体などに置き換える場合、元のフォントの太さに関わらず一括で指定の太さになることがあります。その場合は、置き換え後に手動で太さを調整していく作業が必要です。置き換えたら、各ページで見た目が崩れていないかを必ず確認しましょう。

よくあるつまずきと対処

• どの案件が対象か分からない：影響プロジェクトの洗い出しを最初に行う
• 雰囲気が変わってしまう：候補を並べて、元に近い代替フォントを選ぶ
• 太さが揃ってしまう：置き換え後に手動でウェイトを調整する

置き換え後に確認すべきチェック項目

フォントを置き換えたら、適用して終わりではなく、見た目への影響を一通り確認することが欠かせません。フォントが変わると、文字の幅や高さが微妙に変化し、これまで1行に収まっていた見出しが2行になったり、ボタン内の文字がはみ出したりすることがあります。置き換え後は、主要なページを順に確認しましょう。

レイアウト崩れを確認する

見出しの折り返し、ボタンやカード内の文字の収まり、ナビゲーションの並びなど、文字幅の変化で崩れやすい箇所を重点的にチェックします。PCとスマホの両方で確認し、崩れがあれば余白や文字サイズを微調整します。フォントの置き換えは、見た目の再確認までがワンセットです。

太さと印象のずれを確認する

モリサワ書体などに置き換えると、太さが一律になったり、元のフォントと雰囲気が変わったりします。デザインの印象が大きく損なわれていないかを確認し、必要に応じて太さを手動で調整しましょう。ノーコードサロンでも、フォント対応は焦らず一つずつ確認しながら進めるべきだという知見が共有されています。落ち着いて粛々と進めることが、崩れの見落としを防ぎます。

よくある質問

よくある質問1. フォントはウェイトごとに置き換えられますか？

置き換えられます。置き換え先をウェイト（太さ）ごとに指定できるため、見出しと本文で異なる太さを使っている場合も、その使い分けを保ったまま置き換えられます。以前より置き換え作業がしやすくなっているため、複数のウェイトを使ったサイトでも対応しやすくなっています。

よくある質問2. 置き換えると太さが変わってしまうのはなぜですか？

モリサワ書体などに置き換える場合、元のフォントの太さに関わらず、一括で指定した太さになることがあります。この場合は、置き換え後に手動で太さを調整する必要があります。置き換え直後は見た目が変わって見えることがあるため、各ページで確認しながら整えましょう。

よくある質問3. 影響する案件が多くて対応しきれません。

まずは影響プロジェクトをすべて洗い出してリスト化し、優先順位を付けて一つずつ進めるのが確実です。焦って一気に対応しようとすると崩れを見落としがちです。コミュニティなどで対応状況や代替フォントの情報を共有すると、判断の助けになります。

よくある質問4. 置き換えは案件ごとに手動で行う必要がありますか？

Studioのフォント置き換え機能はプロジェクト単位で操作するため、複数の案件がある場合は、それぞれのプロジェクトで置き換えを行う必要があります。だからこそ、最初に影響プロジェクトを洗い出してリスト化しておくことが重要です。リストがあれば、対応済み・未対応が一目で分かり、漏れを防げます。焦って一度にすべてを進めようとせず、優先順位を付けて一つずつ確実に対応していくのが、結果的に安全で早い進め方です。対応状況をコミュニティで共有すると、代替フォントの選定でも参考になります。

よくある質問5. 代替フォントはどう選べばよいですか？

元のフォントの雰囲気にできるだけ近いものを選ぶのが基本です。提案された候補をそのまま採用するのではなく、複数の候補を並べて見比べ、字形や太さの印象が元に近いものを選びましょう。フォントはサイトの印象を大きく左右するため、置き換えで世界観が変わってしまわないよう慎重に選ぶことが大切です。判断に迷うときは、他の制作者がどの代替フォントを選んでいるかといった情報も参考になります。実際に置き換えてみて、見た目を確認しながら決めるとよいでしょう。

まとめ

フォントの置き換えは、影響プロジェクトの洗い出し、代替フォントの選定、ウェイトごとの置き換え、見た目の確認、という順で落ち着いて進めるのが安全です。置き換え先はウェイトごとに指定でき、モリサワ書体などでは太さの再調整が必要になる点に注意しましょう。フォントまわりをさらに整えたい方は、フォントの追加・変更や文字組み・文字詰めの設定、カラースタイルでの色管理もあわせて確認すると、文字・色のデザインの完成度が上がります。