絵文字・特殊文字が□（豆腐）になるときの対処

豆腐と文字化けは別物

□（豆腐）と、まったく違う文字に化ける現象は原因が異なります。豆腐は「文字は正しく読み込めているが、それを描けるフォントがない」状態です。一方、意味不明な文字に置き換わる文字化けは、文字コードの解釈がずれている可能性が高いです。

まずどちらなのかを見分けることが、最短で直す第一歩です。豆腐ならフォントの問題、化けなら文字コードの問題、と当たりを付けて調べていきます。

原因になりやすいポイント

豆腐や文字化けを生みやすい要因には傾向があります。次のどれに当てはまるかを確認しましょう。

• 指定したフォントがその絵文字・記号・漢字の字形を持っていない
• ページの文字コード指定（charset）がUTF-8になっていない、または抜けている
• ファイル自体がUTF-8以外で保存されている
• 古い環境や一部端末に新しい絵文字のデータが入っていない
• Webフォントの読み込みに失敗し、字形のないフォントに置き換わっている

症状別チェック表

絵文字・特殊文字が□（豆腐）になるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

原因を切り分ける手順

豆腐か化けかを見極めてから、原因を順番に潰していきます。次の流れで進めてください。

1. 症状が□（豆腐）か、別の文字への化けかをまず見分ける
2. 化けの場合は、ページの文字コード指定がUTF-8になっているか、ファイルがUTF-8で保存されているかを確認する
3. 豆腐の場合は、指定フォントを変えて表示されるか試し、フォント由来かを確かめる
4. 別の端末・ブラウザでも同じ症状か確認し、環境固有か全体の問題かを切り分ける
5. 絵文字を確実に出したい場合は、絵文字に対応したフォントを指定する、または画像化を検討する
6. 修正後、複数の環境で正しく表示されるか再確認する

確実に表示させる工夫

ページの先頭で文字コードをUTF-8と明示し、ファイルもUTF-8で保存しておくのが土台です。これだけで文字化けの多くは防げます。そのうえで、絵文字や特殊な記号を多用する場合は、その字形を持つフォントを指定すると豆腐を減らせます。

どうしても環境差をなくしたいロゴ的な記号や特定の絵文字は、画像として埋め込むと表示が安定します。ただし画像にすると拡大時の粗さや読み上げへの配慮が必要なので、用途に応じて使い分けてください。

他環境での見え方を確認してもらう

豆腐や文字化けは、自分の端末には該当フォントが入っているせいで気づきにくいことがあります。OSや端末が違う相手に見てもらうと、特定の環境でだけ起きる豆腐を発見できます。

ギガサイト便なら、確認したいHTMLやZIPをドロップして発行された共有URLを送るだけで、相手はWindowsやmacOS、スマートフォンなど自分の環境で絵文字や記号の表示を確かめられます。修正後は同じURLのまま差し替えられるので、フォントや文字コードを直しては各環境で確認する作業を、リンクを送り直さずに進められます。社外と共有する場合は認証と公開期限を設定しておくと安心です。