豆腐文字 (Tofu) とは
この記事は約 4 分で読めます。
□ という空白の四角が突然表示される現象。これが「豆腐文字 (tofu)」と呼ばれる、フォントが対応していない文字の表示方法です。画面に □ や ⌷ が並ぶと、何かのバグに見えますが、実際にはレンダリング側が「この文字を持っていません」と正直に伝える設計です。 絵文字や装飾文字でよく遭遇する現象で、対策を知っているとデザインや UI の判断が合理的になります。
定義
豆腐文字 (tofu) は、Unicode のコードポイントに対応するグリフをフォントが持っていない場合に、 代替として描画される空白の四角形やプレースホルダ図形のことです。技術的には Unicode 規格や OpenType 規格における 「.notdef glyph」(not defined glyph、定義されていないグリフ) の慣用的呼び名です。
「豆腐」という呼称は、見た目が豆腐のような白い四角に似ていることから、Web 開発者・タイポグラファの間で広まりました。 Google が世界中の文字を網羅することを目的としたフォントファミリーに「Noto」(No Tofu = 豆腐をなくす) という名前を付けたのも、この語に由来しています。
豆腐文字が出る原因
1. フォントが文字を持っていない
最も典型的な原因。Web ページの CSS で指定したフォントが、特定の Unicode コードポイントに対応するグリフを持たない場合、 ブラウザはフォールバックフォントを順に試し、それでも対応するグリフが見つからないと豆腐文字を表示します。
2. システムフォントが古い
新しい絵文字 (Unicode 14.0 以降の絵文字など) は、古い OS のシステムフォントには含まれていません。 Android 8 以前、iOS 12 以前、Windows 10 (一定の時期より前) では、最新絵文字が豆腐になるケースがあります。
3. フォント未指定のフォールバック失敗
CSS で font-family を 1 つだけ指定し、ジェネリック (sans-serif など) のフォールバックを書いていない場合、 OS が適切なフォントを推測できずに豆腐になることがあります。
4. 装飾文字 (Unicode 拡張領域)
絵文字アートでよく使われる 𓆩 𓆪 𖣘 ৎ などの装飾文字は、Unicode の補助多言語面や私用面 (PUA) にあり、 標準フォントが持たないことが多い領域です。古い端末で豆腐化しやすい代表格です。
豆腐文字の見た目のバリエーション
| 表示 | 環境 | 意味 |
|---|---|---|
| □ | 多くの OS | 標準的な .notdef グリフ |
| ⌷ | 一部のフォント | 未定義の代替表示 |
| ? | 古い端末 | クエスチョンマーク |
| U+1F33B (16 進) | デバッグ表示 | コードポイントを文字列で表示 |
対策
1. Web フォントで対応文字を確保
Google Fonts の Noto Color Emoji や Twemoji を Web フォントとして配信すると、ユーザー端末のフォントに依存せず絵文字を表示できます。 ブランドが視覚的な一貫性を保ちたい場合の定石です。
2. フォントスタックの工夫
CSS で複数のフォントを順に指定し、対応していない文字は次のフォントで補完されるようにします。
font-family: "Hiragino Sans", "Yu Gothic", "Noto Color Emoji", sans-serif;3. 互換性の高い文字を選ぶ
絵文字アートでは、装飾文字を使う前に「広く対応されている記号 (⌒ ⊹ ✧ ☆) で代替できないか」を検討します。 どうしても凝った装飾を使いたいなら、対象オーディエンスの端末で表示されるか事前に確認します。
4. テキスト表示の代替
どうしても豆腐になる可能性が高い場合、JavaScript で対応していない文字を検出し、画像や代替テキストに置き換える戦略もあります。 実装コストは上がりますが、SNS のコメント欄を Web に埋め込むときなどに有効です。
実務での見え方
- 古い Android: 装飾文字 𓆩 𖣘 が豆腐になりやすい
- 古い Windows: 絵文字全般がモノクロまたは豆腐
- Linux 一部のディストロ: デフォルトフォントが絵文字非対応で豆腐化
- 古い iOS: 最新絵文字 (Unicode 15.0 以降) が豆腐になるケース
よくある誤解
- ❌ 「豆腐文字はバグ」→ ✅ 正常な「対応していない」シグナル
- ❌ 「フォントを変えれば解決する」→ ✅ そのフォントもグリフを持っている必要あり
- ❌ 「Web フォントを入れれば全端末で表示される」→ ✅ ブラウザによってはダウンロードを失敗する可能性がある