---
title: "文字コード・UTF-8とは？文字化けを防ぐ基礎知識"
description: "日本語ページが別環境で文字化けするのは文字コードのずれが原因です。UTF-8が何をしているのか、どこで指定すれば文字化けを防げるのかを知りたい人向けに、しくみと対策をやさしく説明します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-utf8"
markdown: "https://giga-site.com/articles/what-is-utf8/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 文字コード・UTF-8とは？文字化けを防ぐ基礎知識

せっかく作った日本語のページが、別の環境で開いたら謎の記号だらけになっていた。この「文字化け」の正体は文字コードのずれです。本記事では文字コードとUTF-8とは何か、なぜ文字化けが起きるのか、どう防ぐのかをやさしく解説します。

> Source HTML: https://giga-site.com/articles/what-is-utf8
> Article index: https://giga-site.com/articles/index.md

## 文字コードとは

文字コードとは、文字を数字に対応づけて、コンピュータが扱えるようにするための取り決めです。コンピュータは内部では数値しか扱えないため、「あ」や「A」といった文字をどの数値で表すかをあらかじめ決めておく必要があります。

この対応づけのルールにはいくつもの種類があります。同じ文章でも、保存するときと読むときで違うルールを使ってしまうと、数値の解釈がずれて、まったく別の文字として表示されてしまいます。これが文字化けの根本的な原因です。

## UTF-8とは

UTF-8は、世界中の文字を一つの体系で扱えるように設計された文字コードです。日本語の漢字やひらがな、英数字、記号、さらには各国の文字や絵文字までを共通のルールで表せるため、現在のWebでは事実上の標準として広く使われています。

UTF-8の利点は、英数字を従来どおりコンパクトに表しつつ、日本語などの多様な文字も扱える柔軟さにあります。古い日本語向けの文字コードと違い、複数の言語が混在しても破綻しにくいのが特徴です。

新しくWebページを作る場合は、特別な理由がない限りUTF-8を選ぶのが基本です。編集に使うエディタの保存形式と、ページ側の宣言の両方をUTF-8にそろえることが大切です。

## 実務ではどこで関係する？

文字コードは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

文字コード・UTF-8について迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## 文字化けが起きる仕組み

文字化けは、ファイルを保存したときの文字コードと、ブラウザが読むときに想定した文字コードが食い違うと起こります。次のようなケースが典型です。

- ファイルをUTF-8以外で保存し、ブラウザがUTF-8として読んだ
- ファイルはUTF-8なのに、ページのcharset宣言が別のコードを指している
- 配信時のContent-Typeのcharsetが実際の保存形式と違う
- コピペで別の文字コードの文章が混ざってしまった

## 文字化けを防ぐ手順

文字化けは、保存形式と宣言をそろえれば確実に防げます。次の手順で確認しましょう。

1. エディタの保存形式をUTF-8（できればBOMなし）にそろえる
2. HTMLのhead内の早い位置に charset を utf-8 と宣言するmetaタグを書く
3. 可能なら配信時のContent-Typeにも charset=utf-8 を付ける
4. ブラウザで開き、日本語が正しく表示されるか確認する
5. 化ける場合は、保存形式と宣言が両方ともUTF-8かを照合する

## 共有時の文字化けを早く見つける

文字化けは自分の環境では起きず、別の環境や別ブラウザで開いて初めて表面化することがあります。レビューを依頼する前に、共有URLで実際に開いて確かめておくと安心です。

ギガサイト便はドロップしたHTMLをそのままHTTPSのURLで配信できるため、自分以外の人が別端末で開いたときの見え方を早い段階で確認できます。charsetの宣言漏れによる化けを、関係者に見せる前のレビュー段階で洗い出すのに役立ちます。

## よくある質問

### UTF-8とShift_JISのどちらを使うべきですか

新規に作るならUTF-8をおすすめします。多言語や絵文字も扱え、現在のWebの標準として広く対応しているためです。古い資産でShift_JISが使われている場合は、宣言と保存形式の一致に特に注意が必要です。

### charsetはどこに書けば文字化けを防げますか

HTMLのhead内のなるべく早い位置に、charsetをutf-8と指定するmetaタグを書きます。ブラウザは文書の先頭付近で文字コードを判断するため、後ろに書くと判定が間に合わないことがあります。

### 宣言をUTF-8にしたのに化けるのはなぜですか

宣言だけUTF-8でも、ファイル自体が別の文字コードで保存されているとずれて化けます。エディタの保存形式と宣言の両方をUTF-8にそろえることが必要です。

### BOMは付けたほうがよいですか

一般にはBOMなしのUTF-8が無難です。BOMがあると環境によっては予期しない不具合の原因になることがあるため、特別な理由がなければBOMなしを選ぶとよいでしょう。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [URLエンコードとは？日本語や記号がURLで化ける理由](https://giga-site.com/articles/what-is-url-encoding/index.md)
- [DNSとは？ドメインとサーバーをつなぐ仕組みをやさしく解説](https://giga-site.com/articles/what-is-dns/index.md)
- [ドメインとは？URLの住所をやさしく解説](https://giga-site.com/articles/what-is-domain/index.md)
- [URLの構造とは？スキーム・ホスト・パスの意味を解説](https://giga-site.com/articles/what-is-url-structure/index.md)
- [HTTPステータスコードとは？主要な番号の意味](https://giga-site.com/articles/what-is-http-status-code/index.md)
- [404エラーとは？ページが見つからない原因と仕組み](https://giga-site.com/articles/what-is-404/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "文字コード・UTF-8とは？文字化けを防ぐ基礎知識",
  "description": "日本語ページが別環境で文字化けするのは文字コードのずれが原因です。UTF-8が何をしているのか、どこで指定すれば文字化けを防げるのかを知りたい人向けに、しくみと対策をやさしく説明します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-utf8",
  "url": "https://giga-site.com/articles/what-is-utf8",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "UTF-8とShift_JISのどちらを使うべきですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "新規に作るならUTF-8をおすすめします。多言語や絵文字も扱え、現在のWebの標準として広く対応しているためです。古い資産でShift_JISが使われている場合は、宣言と保存形式の一致に特に注意が必要です。"
      }
    },
    {
      "@type": "Question",
      "name": "charsetはどこに書けば文字化けを防げますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTMLのhead内のなるべく早い位置に、charsetをutf-8と指定するmetaタグを書きます。ブラウザは文書の先頭付近で文字コードを判断するため、後ろに書くと判定が間に合わないことがあります。"
      }
    },
    {
      "@type": "Question",
      "name": "宣言をUTF-8にしたのに化けるのはなぜですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "宣言だけUTF-8でも、ファイル自体が別の文字コードで保存されているとずれて化けます。エディタの保存形式と宣言の両方をUTF-8にそろえることが必要です。"
      }
    },
    {
      "@type": "Question",
      "name": "BOMは付けたほうがよいですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "一般にはBOMなしのUTF-8が無難です。BOMがあると環境によっては予期しない不具合の原因になることがあるため、特別な理由がなければBOMなしを選ぶとよいでしょう。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```