EmoArt
投稿する
用語集

豆腐文字 (Tofu) とは

最終更新: 2026-05-18·約 4 分

この記事は約 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 フォントを入れれば全端末で表示される」→ ✅ ブラウザによってはダウンロードを失敗する可能性がある

関連用語

  • 絵文字 - 古い端末で豆腐化しやすい代表格
  • Unicode - 豆腐文字が示す「対応外コードポイント」の概念基盤
  • 絵文字アート - 装飾文字使用時に豆腐リスクを意識する場面

この記事は役に立ちましたか?