意外な落とし穴！ホームページの文字化け対策をしておこう

せっかくホームページを制作しても文字化けをしてしまうと、ユーザーに閲覧してもらえなくなってしまうだけではなく、クローラーが読み込めないため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５以降で上記の記述方法でないと指定できなくなりました。現在一部のページで文字化けが発生している場合は、こうしたバージョンによる変更点を確認して修正しましょう。
 

まとめ

イノーバでは、豊富な経験と知識を持つ専門スタッフが、お客様のホームページ制作をトータルサポートいたします。文字化け対策はもちろん、SEO対策、レスポンシブデザイン、アクセス解析など、効果的なWebサイト運営に必要な要素を網羅。お客様のビジネス成長に貢献するホームページ制作を目指します。ぜひ一度ご相談ください。

ぜひこちらの記事もお読みください：ホームページ要素

ホームページの文字の大きさはどうすれば良い？最新のデータからチェックポイントを紹介

ホームページの幅はなぜ重要なのか？最新のデータから適切な幅を設定しよう

ホームページに文章やデータを引用する際のルールとは？

知らなかったでは済まされない。ホームページ制作者のための参考文献の引用方法  

FAQ

Q1: 文字化けが起こる主な原因は何ですか？

A1: 文字コードが合っていないことが主な原因です。ウェブページ内部のコードを変換して表示する際、対応していない文字コードを使用すると文字化けが起こります。

Q2: ブラウザの自動判別で文字化けが起きた場合、ユーザーはどうすれば良いですか？

A2: ブラウザの設定で表示に使用する文字コードを指定することで、文字化けしているページも読むことができます。ただし、ユーザー側の応急処置的な操作になるため、制作者側が自動判別で正常に表示できるようにサイトを作ることが重要です。

Q3: ホームページ制作で主流の文字コードは何ですか？

A3: UTF-8が主流となっています。世界中のどの言語でも表示でき、コーディングで最も普及している文字コードです。

Q4: 文字化け対策として、HTMLやCSSではどのように文字コードを指定すれば良いですか？

A4: HTMLではheadタグ内にmetaタグを使って<meta charset="utf-8">と指定します。CSSの場合は、スタイルシート内の先頭に@charset "UTF-8";と記述します。

Q5: 文字化けを放置するとどのようなデメリットがありますか？

A5: 読む人にとって大問題となり、多くの場合、訪問者が離脱してしまいます。企業にとっても大きな機会損失になるだけでなく、サイトの評判や印象が悪くなるリスクがあります。