日本語フォントが崩れる・豆腐になる問題を解決する

最初にハマった「豆腐地獄」

NANAKAZOKUがClaude Designを日本語コンテンツに使い始めたとき、最初に直面したのは□□□□□のオンパレードだった。いわゆる豆腐（文字化け）だ。英語プロンプトで生成すると綺麗なのに、日本語テキストを含めたとたんに崩れる。最初はバグかと思ったが、原因は別のところにあった。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。

なぜ崩れるのか

Claude Designが内部で使うフォントシステムは、デフォルトではラテン文字向けが選ばれやすい。日本語を入力すると、以下のどれかが起きる。

• フォールバックフォントが当たる: 日本語グリフのないフォントが選ばれ、□になる
• ウェイトが無視される: 「太字」と指定しても日本語部分だけ細いままになる
• カーニングが崩れる: 欧文と混在すると字間が不自然になる

特に「Playfair Display」「Cormorant Garamond」など欧文書体を指定したときに一番崩れる。欧文専用なので当然なのだが、最初はそこに気づかなかった。

効いた解決策3つ

1. 日本語対応フォントをプロンプトで明示する

フォント名を直接書くだけで8割解決する。

フォントはNoto Sans JPを使用してください。見出しはBold、本文はRegular。

BIZ UDGothicで統一。日英混在でも崩れないようにしてください。

安定しているのはNoto Sans JP、BIZ UDGothic、Hiragino Kaku Gothic（Mac環境向け）。この3つを覚えておけばだいたい対応できる。

2. 英語でレイアウトを固めてから日本語に差し替える

生成時は英語テキストでデザインを完成させ、後からテキストだけ日本語に編集する。面倒に聞こえるが、日本語を入れたまま生成するより結果的に速くて綺麗だった。

プロンプト例：

まず英語のサンプルテキストでデザインを作成してください。
レイアウトが決まったら、テキストを以下の日本語に変更します：
見出し「AIで変わる、デザインの現場」
本文「...」

3. 1行あたりの文字数を指定する

日本語は1文字あたりの情報量が多く、英語と同じ感覚でテキストを詰めるとレイアウトが壊れやすい。

見出しは15文字以内、本文は1行あたり30〜35文字程度に収めてください。

この一行を加えるだけで、折り返しやはみ出しが減った。

まだ解決していない罠

縦書きは今のところ諦めた。和風デザインで縦書きを試みたが、レイアウトが完全に崩壊した。Claude Designは横書き前提の設計で、縦書きへの対応はまだ弱い。

また、8pt以下相当の小さいフォントでひらがなが潰れる問題も残っている。これはエクスポート後のレンダリング環境にも依存するが、細かいサイズは使わないほうが無難。

まとめ

症状	対処
□□□になる	日本語対応フォントを明示する
ウェイトが反映されない	Noto Sans JPのBold/Regularを指定
テキストがはみ出す	1行あたりの文字数を指定
縦書きにしたい	現状は非推奨、諦めが肝心

日本語フォント問題は「最初から正しいフォントを名指しする」で大半が解決する。英語ツールを日本語で使う以上、こちらから歩み寄るしかない。それを受け入れてからは、思ったより快適に使えている。