せっかくホームページを制作しても文字化けをしてしまうと、ユーザーに閲覧してもらえなくなってしまうだけではなく、クローラーが読み込めないためSEO的にもマイナスの評価を受けてしまいます。原因と対処方法をしっかりと把握し必ず対策しておきましょう。

 

文字化けの起こる理由

文字コードが合っていないため正常に表示されないことが原因

ウェブサイト上で文字を表示するためには「０」と「１」だけで表された数字の羅列を「文字コード」を通して変換する必要があります。もともとコンピューターは「０」と「１」だけでデータを理解して、動作しています。「文字を表示する」という動作も例外ではなく、ページ内部で「０」と「１」で記述されたコードを変換して表示することで文字として読めるようになっています。そのウェブページで表示する際の変換作業で使用されるのが文字コードです。文字コードはOSや環境によっていくつかの種類があり、どの文字コードに対応した表記をしているかが重要になってきます。つまり、対応していない文字コードで表示しようとした結果文字化けという現象が起こってしまいます。

ブラウザが自動判別した文字コードが間違っている

ホームページなどを表示するブラウザは、基本的に自動でそのページがどの文字コードで書かれているかを判別しています。なので、読む側は文字コードを意識することはあまりありません。しかし、この自動判別が間違っていた際には文字化けしてしまいます。

ブラウザの設定を変更すれば閲覧することは可能

SafariやGoogle Chromeなどのブラウザには、設定でページの表示に使用する文字コードを指定する機能があります。こちらを用いれば文字化けしているページでも読むことはできます。しかし、その都度読む側に設定をしてもらわないといけないのでユーザーに負担がかかります。あくまでもユーザー側の応急処置的な操作ですので、自動判別で正常に表示できるようなサイト作りを目指しましょう。

 

文字コードとは

文字コードは「０」と「１」だけで表された数字の羅列を文字として読めるようにする際に使用されるコード表です。

現在使用されている代表的な文字コードには以下のようなものがあります。

 

●    ホームページ制作では主流となっているUTF-8

UTF-8は文字コードの基礎となった「ASCIIコード」をベースに作られた文字コードです。こちらは世界中のどの言語でも表示できるように作られており、コーディングではもっとも普及している文字コードと言われています。デメリットとしてはひらがなの表示に使用する容量が大きくなることが挙げられますが、現在の処理技術であればそこまで問題にされることはありません。

●    Windows系のファイル保存やテキストコードで目にするShift_JIS

Shift_JISは「ASCIIコード」にひらがなを追加して作られました。そのため日本人向けの文字コードではあるのですが、このコードでHTMLなどを書くとページを表示するために記載された文字列の記号と混同してしまうことがあり、一部の文字化けや正常に表示できない原因となります。国内向けの文字コードと言えます。

●    UTF-16も使われてはいるが対応するソフトウェアが少ない

UTF-16は「ASCIIコード」をベースとせずに、独自の文字コードで世界中の言語を表示します。扱える言語が多い分、使用される場面もありますが対応するソフトウェアは限られています。

●    EUC-JPはUNIX系で使用されるが使用が限定される

EUC-JPはUTF-8などが普及する前のUNIX系OSやサーバーで使用されていました。しかし、現在ではあまり使用されることはありません。

 

文字化け対策の方法

HTMLのヘッダーまたはCSSに文字コードを指定する記述を行う

文字化けをしないようにするにはそのページがどの言語で記述してあるかを、HTMLやCSSで指定する必要があります。記述していない場合でも表示はできますが、ブラウザの判別任せになってしまうため、指定しておくことでその文字コードで表示するよう指示できます。

●    HTMLへの記載例とコードの意味

実際のHTMLファイルには

　　<meta http-equiv="content-type" charset="utf-8">

上記のコードをヘッダーに記述します。注意点としてはヘッダーでないと効力がありません。必ずmetaタグで指定し、ヘッダーで使うようにしましょう。コードの意味としては「文字を表示する際に使用する文字コードをutf-8に指定します。」となっています。応用的な使い方をすると、ページ内の外部JavaScriptが文字化けするのを防ぐために

　<script src="XXXX.js" charset="utf-8"></script>

といったように<script>タグで指定することも可能です。

●    CSSの場合

前述のHTMLに記述する方法以外にCSSで指定する場合、

　　@charset "UTF-8";

と記述します。HTML５以前では<link>タグを用いていましたが、HTML５以降で上記の記述方法でないと指定できなくなりました。現在一部のページで文字化けが発生している場合は、こうしたバージョンによる変更点を確認して修正しましょう。

 

まとめ

文字化けはHTMLやCSSに一手間加えるだけで解決できます。逆にこうした問題を放置しているとホームページが文字化けしたまま、もしくはそれに気づかないままになってしまいます。文字化けは読む人にとっては大問題です。多くの場合文字化けしているサイトを見ただけで訪問者は離脱してしまうため、ページを作った企業にとっても大きな機会損失になります。また、ブラウザで文字コードを変更する方法を知っている人であれば読むことができますが、手間取らせてしまう上、変更して読めてもそこに欲しい情報がなければ、評判や印象はかなり悪くなってしまいます。今一度制作したホームページがどの環境でも正しく表示されているかを確認するとともに、HTML５の最新ルールや更新点を理解しておきましょう。