---
title: "絵文字・特殊文字が□（豆腐）になるときの対処"
description: "絵文字や記号が□や文字化けで表示される悩みを持つ人向けに、豆腐と文字化けの原因の違いを区別しながら、フォントと文字コードの両面から切り分けて直す手順を説明します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/emoji-tofu"
markdown: "https://giga-site.com/articles/emoji-tofu/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# 絵文字・特殊文字が□（豆腐）になるときの対処

絵文字や記号、一部の漢字が□（いわゆる豆腐）や文字化けで表示される——その多くは、その文字を描けるフォントがない、または文字コードの不一致が原因です。この記事では豆腐と文字化けの違いを区別し、フォントと文字コードの両面から原因を切り分けて直す手順を解説します。

> Source HTML: https://giga-site.com/articles/emoji-tofu
> Article index: https://giga-site.com/articles/index.md

## 豆腐と文字化けは別物

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

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

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

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

- 指定したフォントがその絵文字・記号・漢字の字形を持っていない
- ページの文字コード指定（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のまま差し替えられるので、フォントや文字コードを直しては各環境で確認する作業を、リンクを送り直さずに進められます。社外と共有する場合は認証と公開期限を設定しておくと安心です。

## よくある質問

### □（豆腐）と文字化けはどう違いますか。

豆腐は文字は正しく読み込めているが描けるフォントがない状態で、フォントの問題です。意味不明な別の文字に置き換わる文字化けは、文字コードの解釈ずれが原因のことが多く、原因の調べ方が変わります。

### 文字化けを防ぐ基本の設定は何ですか。

ページの先頭で文字コードをUTF-8と明示し、ファイル自体もUTF-8で保存することです。この二つがそろっていないと化けが起きやすいので、まずここを確認してください。

### 絵文字が一部の端末でだけ豆腐になります。

古い環境にその絵文字のデータが入っていないことがあります。確実に表示したい場合は、絵文字に対応したフォントを指定するか、重要な箇所は画像化して環境差の影響を受けないようにする方法があります。

### 自分の画面では正常なのに、なぜ他人の環境で豆腐になるのですか。

自分の端末には該当フォントが入っているため正しく見えているだけのことがあります。異なるOSや端末の人に確認してもらい、特定環境で起きる豆腐を見つけるのが確実です。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [公開したHTMLのフォームが送信できないときの対処](https://giga-site.com/articles/form-not-submitting/index.md)
- [iframeが表示されないときの原因と対処](https://giga-site.com/articles/iframe-not-showing/index.md)
- [外部CDNのCSS・JSが読み込めないときの対処](https://giga-site.com/articles/external-cdn-not-loading/index.md)
- [スマホだけ表示が崩れるときの原因と直し方](https://giga-site.com/articles/broken-only-on-mobile/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "絵文字・特殊文字が□（豆腐）になるときの対処",
  "description": "絵文字や記号が□や文字化けで表示される悩みを持つ人向けに、豆腐と文字化けの原因の違いを区別しながら、フォントと文字コードの両面から切り分けて直す手順を説明します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/emoji-tofu",
  "url": "https://giga-site.com/articles/emoji-tofu",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "□（豆腐）と文字化けはどう違いますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "豆腐は文字は正しく読み込めているが描けるフォントがない状態で、フォントの問題です。意味不明な別の文字に置き換わる文字化けは、文字コードの解釈ずれが原因のことが多く、原因の調べ方が変わります。"
      }
    },
    {
      "@type": "Question",
      "name": "文字化けを防ぐ基本の設定は何ですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ページの先頭で文字コードをUTF-8と明示し、ファイル自体もUTF-8で保存することです。この二つがそろっていないと化けが起きやすいので、まずここを確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "絵文字が一部の端末でだけ豆腐になります。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "古い環境にその絵文字のデータが入っていないことがあります。確実に表示したい場合は、絵文字に対応したフォントを指定するか、重要な箇所は画像化して環境差の影響を受けないようにする方法があります。"
      }
    },
    {
      "@type": "Question",
      "name": "自分の画面では正常なのに、なぜ他人の環境で豆腐になるのですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "自分の端末には該当フォントが入っているため正しく見えているだけのことがあります。異なるOSや端末の人に確認してもらい、特定環境で起きる豆腐を見つけるのが確実です。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```