PC、スマートフォンを扱っている人であれば、一度は「文字コードって何だろう？」と思った経験があるのではないでしょうか。

文字コードには様々なものがありますが、その中でもスタンダードなのがUnicodeの「UTF-8」です。日頃、文字コードを意識している方は少ないかと思いますが、コンピューター上で文字を扱うための重要な要素ですので、基本的なことはぜひ知っておきたいものです。

そこで今回は、「UTF-8」の基本知識から各ブラウザにおいての確認方法までをまとめてご紹介します。

目次

  1. UTF-8（ユーティーエフエイト）とは
  2. そもそも文字コードとは？
  3. UTF-8以外の代表的な文字コード
  4. 文字コードの確認・変換方法［PCの場合］
  5. 文字コードの確認・変換方法［スマホの場合］
  6. 文字コードの基礎知識をつけておこう

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

資料をダウンロード

UTF-8（ユーティーエフエイト）とは

utf8.png
　
UTF-8とは、世界的にも最もポピュラーな文字コードで、Unicode用の符号化方式の1つです。ASCIIで定義している文字を、Unicodeでそのまま使用することを目的として制定しています。

世界中の様々な文字を集合体が「文字集合」と言い、文字集合で定義した個々の文字をコンピューター上で表示する数値の振り方が「符号化方式」と言います。UTF-8は、後者に属しています。

UTF-8は、ASCIIコードとの互換性が高いことから、世界中の多くのソフトウェアが用いています。幅広く普及していることを考えると、UTF-8は世界的にもポビュラーな文字コードだと言えるでしょう。

符号化方式にはUTF-8以外にもUTF-16などが有名で様々なシーンで活用されますが、UTF-8ほど対応するソフトウェアは多くありません。
　　

UTF-8（ユーティーエフエイト）の仕組みとは

utf8_2.png
画像引用元：UTF-8の冗長なエンコード：本当は怖い文字コードの話

UTF-8は、ASCIIと互換性を持たせた規格となっているため、一部の文字はASCIIと全く同じです。ASCIIと同じ部分は1バイトで表現し、そのほかの部分を2〜6バイトで表現する可変長の符号化方式となっています。漢字、仮名文字は3〜4で表現するため、UTF-16と比較するとデータサイズが大きくなります。

そもそも文字コードとは？

文字コードとは何か.gif

文字コードとは、コンピュータ上で文字を扱うために個々の文字、記号に割り当てられた固有の番号のことです。コンピューターはデータを数値でしか扱えないため、文字も数値で扱わなければなりません。そのため、文字を表示するには文字コードが必要となります。

UTF-8以外の代表的な文字コード

文字コードには数多くの種類がありますが、代表的な文字コードは以下のとおりです。
　　

1. JIS（ジス）コード

インターネット上で標準的な文字コードで、特に電子メールでの使用が一般的です。
　　

2. Shift_JIS（シフトジス）

Microsoft社が開発したコードで、ASCIIコードの文字に日本語の文字を加えた物です。Windows、Macでも採用しており、PC上のファイルで広く用いられています。
　　

3. EUC

Extended Unix Codeを略したもので、日本語UNIXが使用しています。
　　

4. Unicode（ユニコード）

Windows、Java、XMLなどで用いられている文字コードです。ここでは文字コードとして説明していますが、「符号化文字集合」と言い、他の文字コードと違います。わかりやすく言うと、日本語、ロシア語、ギリシャ語、記号……など、世界中の文字を集め、それぞれに番号を付けて利用できるようにしている文字集合のことです。
　　
Unicodeで管理している文字を実際に使う際には、「文字符号化方式（エンコーディング）」を使い、符号化文字集合をコンピューター上で扱えるように数値変換します。

「文字符号化方式」の代表的なものが、よく耳にするUTF-8やUTF-16です。「Unicode＝UTF-16」「Unicode＝UTF-8」と誤解してしまいがちですが、「符号化形式」の中にUTF-8やUTF-16を含みます。

文字コードの確認・変換方法［PCの場合］

ここからは、PCでの文字コードの確認と変換方法をご紹介します。
　　

Internet Explorer（インターネットエクスプローラー）

ie.png
画像引用元：Windows 8.1 / 7のInternet Explorer 11でホームページを開くと文字化けする場合の対処方法

Internet ExplorerでWebページを開き、文字コードの不一致が原因で文字化けした時は、以下の方法で対処してみてください。

文字化けしているホームページを表示した状態でキーボードの「Alt」キーを押し、メニューバーから「表示」>「エンコード」をクリックしてテキストエンコーディングを変更します。
　　
ie2.png
画像引用元：Windows 8.1 / 7のInternet Explorer 11で互換表示を利用する方法

閲覧中のWebページが旧バージョン向けに作られていて文字化けする場合、互換表示を有効にしてみます。
　　
ie3.png
画像引用元：Windows 8.1 / 7のInternet Explorer 11でインターネット一時ファイルを削除する方法

一時ファイルの影響で文字化けしている場合、一時ファイルを削除します。
　　
上記の方法を試しても改善しない場合、Internet Explorerを初期状態に戻してみましょう。
　　

Firefox （ファイアーフォックス）

FirefoxでWebページを開いた時に文字化けした場合、以下の方法を試してみましょう。

firefox1.png

1.メニュー「表示」>「テキストエンコーディング」を選択し、テキストエンコーディングを変更します。
　　
firefox2.png

2.Firefoxの環境設定「詳細」>「ネットワーク」>「キャッシュされたWebページ」>「今すぐ消去」をクリックして、Webページのキャッシュをクリアします。
　　

Safari（サファリ）

MacOS標準のブラウザであるSafariでは、Webページに標準のテキストエンコーディングに入っていない文字を使っている場合で、正しいエンコーディングを指定していない場合、文字を正しく表示しないことがあります。

以下の方法でエンコーディングを変更すると、文字を正しく表示することが可能です。

safari.png

「表示」>「テキストエンコーディング」を選択＞変更したいものを選びます。
　　
safari2.png

文字を正しく表示しないことが頻繁にあるときには、「Safari」>「環境設定」>「詳細」をクリックし、デフォルトのテキストエンコーディングを変更します。
　　

Google Chrome（グーグルクローム）　

chrome.png
画像引用元：Chromium Code ReviewsHelp

以前、Google Chromeにはエンコーディングメニューがあり、手動設定することができました。バージョンアップに伴い、自動検出の精度が高くなったため、現在はエンコーディングメニューがありません。

今後は自動検出強化によりおそらく文字化けの問題は出ないものと思われますが、万一の際にはテキストエンコーディングの拡張機能が存在しますので、試してみるといいのではないでしょうか。

参考：
テキストエンコーディングの拡張機能はこちら
　　

文字コードの確認・変換方法［スマホの場合］

スマートフォンでの、文字コードの確認と変換方法をご紹介します。
　　

iPhone（アイフォーン）

文字コード選択Webユーティリティ.png
画像引用元：文字コード選択Webユーティリティ

エンコードが原因で文字化けすることが多くありますが、Safariが文字化けするという声もあります。文字化けした場合「文字コード選択Webユーティリティ」または「ドルフィンブラウザ」を使用して対処しましょう。

◆文字コード選択Webユーティリティを使う方法

1.「文字コード選択Webユーティリティ」をiPhoneにインストールする
2.Safariで文字化けしたページを開き、URL先頭に「chhttp://」を追加して開く
　iOS7以前で、URLを入力する箇所に既にhttp://〜と表示されている場合は、UR先頭に「ch」のみ追加する
3.文字コード選択Webユーティリティのダイアログが出たら「開く」をクリックする。文字コード選択Webユーティリティのブラウザ画面が表示されます。
4.ブラウザ画面右下にある「iボタン」をクリックする
5.文字コードを選択肢、完了をクリックする

参考：
文字コード選択Webユーティリティはこちら
　　

◆ドルフィンブラウザを使う方法

1.ドルフィンブラウザアプリをiPhoneにインストールする
2.Safariで文字化けしたページのURLをコピーする
3.ドルフィンブラウザアプリに、コピーしたURLをペーストして開く

参考：
ドルフィンブラウザはこちら
　　

Android（アンドロイド）

ドルフィンブラウザ.png
画像引用元：ドルフィンブラウザ：フラッシュ＆アドブロック対応最速ブラウザ

AndroidでWebページが文字化けする原因の多くがエンコードですので、変更すれば大半が直ります。しかし、定番ブラウザの1つであるChromeには現在エンコードメニューが無く、手動で変更することができません。そのため、文字化けでどうしても見れない場合には、別のブラウザに変更すると回避できる可能性があります。ドルフィンブラウザをはじめとした、ほかのブラウザを使用することで対処ができます。
　　
参考：
ドルフィンブラウザはこちら
　　

文字コードの基礎知識をつけておこう

普段あまり耳にしない「文字コード」ですが、しっかりと理解しておくことで万が一ファイルやWebページ、メールが文字化けしてしまった時、慌てずに対処できます。また、PCやスマートフォンを使っていれば度々「文字コード」という言葉を目にすることがありますので、主要なものの基礎知識については最低限知っておきたいものです。

様々な文字コード体系がありますが、特に今回ご紹介した「UTF-8」はスタンダードなものですので、どのようなものなのか知っておきましょう。

Webディレクター・デザイナー向けお役立ち資料

【パワーポイント作成】伝わるデザインのコツ

【パワーポイント作成】伝わるデザインのコツ

ほんの一手間で驚くほど見やすく変わる！パワーポイントやGoogleスライドなど資料のデザインを見やすく仕上げるコツを解説します。
マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

　　

この記事を読んだ方はこちらもチェック

文字化けを変換して誰でも簡単に解読できるサイト・ツール10選

文字化けを変換して誰でも簡単に解読できるサイト・ツール10選

インターネットにアクセスした時に、Webページが文字化けして内容が読めずに困った経験はないでしょうか。今回は文字化けを変換し、読めるように解読してくれるサイトやツールをご紹介します。
ちゃんと確認してる？メルマガ制作・配信で役立つチェックリスト項目32選

ちゃんと確認してる？メルマガ制作・配信で役立つチェックリスト項目32選

今回は、メール配信・メルマガ制作で使えるチェックリストをご紹介します。 せっかく考えたメルマガの効果が上がらない……とお悩みのメルマガ担当者の方は、ぜひ目をとおしてみてください。