生成AIが指定した書体が、Studioに持ち込むと別の書体になる理由——システムフォントとWebフォントの違い

生成AIが作ったサイトは、ブラウザで開くと、洗練された書体で表示されます。ところが、同じサイトをStudioに持ち込むと、書体が思っていたものと違って見える——この相談は少なくありません。

原因として多いのが、AIが書体を「システムフォント」で指定していることです。この記事では、その仕組みと、最初からつまずかない指示、Studioでの確認と直し方を整理します。

書体の指定には、2種類ある

Studioの公式ヘルプでは、フォントを「システムフォント」と「Webフォント」に分けて説明しています。

なぜ、AIのサイトで書体が変わるのか

生成AIは、書体を指定するとき、次のような「候補の並び」を書くことがよくあります。

• 先頭の「-apple-system」や「Hiragino Sans」は、Macやスマホに最初から入っているシステムフォント
• ブラウザは、並びの先頭から順に「この端末にあるか」を調べ、あった書体を使う。だから、Macでは美しく見える
• Studioに持ち込むと、並びの先頭の書体が使われる。Studio側にその書体が無いと、既定のフォントに落ちる（SHITAJIで取り込む場合の注意）

font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;

最初の指示で、書体を決めておく

いちばん手戻りが少ないのは、最初の指示で、書体を「Webフォント」にそろえておくことです。次の一文を添えてください。

font-familyの先頭には、実際にlinkタグで読み込んでいるWebフォント（たとえば、Google Fontsの「Noto Sans JP」）の名前を書いてください。システムフォントの名前は、候補の後ろに回してください。

Studioに取り込んだあと、書体を確かめる・直す

取り込んだあとで書体が違って見えるときは、Studioの画面で、そのテキストが使っている書体を確かめます。公式ヘルプで案内されている確認の流れは次のとおりです。

1. 確かめたいテキストのボックスを選ぶ
2. 右側のパネルの「テキスト」タブを開く
3. 「タイポグラフィ」の「フォント」の欄をクリックし、設定中のフォント名を確かめる
4. フォントの設定で「システムフォント」を選び、そのフォント名で検索する。同じ名前が見つかれば、そのテキストはシステムフォントを使っている
5. Webフォントに切り替えるか、システムフォントのままにして、見る人の環境ごとの代わりの書体（サブフォント）を設定する

よくある質問

まとめ

生成AIのサイトで書体が変わる大きな原因は、書体をシステムフォントで指定していることです。最初の指示で「font-familyの先頭には、読み込んでいるWebフォントを書く」と決めておけば、取り込んだあとの手直しが減ります。

頼み方の基本はChatGPT・Claude・GeminiにWebサイトの下書きを作らせるプロンプトのコツ5つ、取り込んだあとに編集しやすい形を保つ考え方は生成AIで作ったサイトの文章・画像を、あとから自分で直せるようにしておくコツにまとめています。