ABCが苦手でも英語サイト作成編 > 文字化け対策

文字化け対策

読める文章表示は英語サイト作成における最重要ポイント。

いざ、英訳

最初は既存のページに英文を付与するという方式をとりました。

私のページは、写真に簡単な説明文をつけたものが基本です。その日本語の説明の下に、英語の説明を追加したわけです。
これならページ数が増えなくて済みますよね。

”’,¢” ̄,IZq・@White hair boy表示結果

White hair
& grey eyes
Black suit

しかし、1枚終えた時点で不安になりました。
こうやって日本語と英語を対比させると、バイリンガルの目には、訳文の稚拙さやミスがモロ見えではないか。うー、恥ずかピ。

というわけで、そのページは破棄し、別々に作ろうと方針転換しました。単なる見栄からでした。が、見栄もたまには役に立ちます。
その時点ではことの重大性に気づかなかったようですが・・・。

今なら声を大にして言えます。

ひとつのページに日本語と英語を混在させてはいけません。

理由は文字化けです。
私たち日本人のブラウザでは、日本語も英語もきれいに表示されるので、両方並んでいても違和感を覚えません。むしろカッコ良く見えます。

だけど、英語サイトを目当てに来る人のパソコンには、通常日本語フォントが入っていません。日本語は文字化けした状態で表示されます。

文字化けがどういうものか知りたければ、このページのエンコードを西ヨーロッパ言語(ISO)に変えてご覧ください(インターネット・エクスプローラなら、表示→エンコード→)。
見にくいなんてものじゃないでしょ。醜いです。
化け文字はアルファベットと記号及び空き枠で構成されます。部分的にまともな英単語があっても、目立ちません。

こんなページからは、訪問者は確実に退散します。

広告

おばけ退治

たいていの人はホームページ作成にあたって、専用の作成ソフトか、ワープロソフトのHP作成機能をお使いだと思います。
私もホームページ・ビルダー2000(古い)を使っています。タグを知らなくて済むので、ラクチンです。

英文ページを一から作るのならともかく、既存の日本語ページをいじって英語ページに変えるとなると、見落としが出てきます。
普通のやり方としては、日本語を消去して、その部分に英語を埋めていきます。
でも、日本語は見える部分にだけ存在するのではありません。
便利な作成ソフトが、ここに来て不便になります。

見落としやすいのが、代替テキスト。<alt="画像の説明">ですね。
いちいち画像をクリックしないと確認できません。多いと面倒です。
ここはHTMLソースを直接編集したほうが速いし、漏れがありません。うっかりタグを消さないよう、ご注意。

ビルダーに代替テキストをまとめてチェックする機能があれば、活用しましょう。

スタイルやフォント名やMETAにTITLEなど、日本語が使われていても編集画面では見えない場合もあるので、ソースを見ておくことは重要です。

広告

□@□@□@

そうやって何枚か完成したページを保存し、ブラウザでも確認をしました。
ここでふと思いました。参考までに海外のページをのぞこうかしら。

「おいおい、英語のページを作ろうとしているくせに、英語のサイトを見たこともなかったのか?」
なかったのです。だって海外のサイトって、怖そうなんだもん。

でも、大手検索エンジンから飛べば大丈夫かな。
というわけで、いくつかの人形関連サイトを巡り、横文字の洪水に疲れ果てて戻ってきました。
目休めに、英語の少ない自分のページを見ちゃおと、さっき保存したものを呼び出す。
と、れれれれ。□@□@□@!?
何度もチェックしたはずなのに、文字化けしているではないか。Why?

海外のページを見ている間にエンコードが変わったためでした。日本語を表示できる状態でチェックしても無意味なのです。

調べたら全角スペースが残っていました。スペースは見えないので、すり抜けがちです。
レイアウト上、文中に余白が必要なとき、全角スペースを並べると簡単ですが、半角スペースではうまくいきません。小さな特殊文字『&nbsp;』をだーっと並べましょう。

全角の記号や英数字も要注意。プロポーショナルフォントでは、全角と半角の区別がつきにくい場合があります。

英語のページにはエンコードの設定が必要です。
具体的には、次のタグを<HEAD>と</HEAD>の間に挿入します。
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

また、日本語ページにもShift_JISなどの指定をしておいたほうが無難です。

どうしても日本語と英語を混ぜ込むなら、ユニコードにすべきでしょうね。
とはいえ、化けていないからといって、読めない外国語がたくさんあると印象が悪くなります。その意味でもページは厳密に分けるべきと思います。

文字化け解消リンク

言語にかかわらず、文字化けにお悩みのかたは多いのではないでしょうか。完璧に作成したつもりでも、ブラウザやソフトが勝手に化けさせてしまうこともあります。
一般的な文字化けに関しては、次のページも役に立ちますよ。

作ろう英語サイト
サイトマップ
作成編
英語版誕生
英語向きコンテンツ
文字化け対策
トップページのデザイン
手抜き翻訳の極意
スペル・文法
翻訳ソフトで遊ぼう
翻訳サイト比較
ゲストブック設置
訪問者参加
本場のWeb用語
英語でブログ
運営編
英語サイトの宣伝
英語版アフターケア
英文メール
ほめることから始めよう
相互リンク海外編
メーリングリスト効果
英語版のメリット
英語版の弊害
洋風顔文字 :-)
Yahoo推薦
ODP攻略
検索キーワード設定
ランキングの行方
海外通販大繁盛
海外通販その後
英語版に広告を
番外編
和製英語にご用心
英語が苦手で何が悪い
英語ペラペラになる方法
インターネットの男と女
気分はrink free
英語ミニコラム
海外下着事情
アクセス解析顛末記
常連さんお断り
批判されるサイト
教えて君活用術
ABOが苦手でも
アナクロ電脳生活
引っ越し下手は損
迷惑メール包囲網
紹介の連鎖
貧盗恋歌

ABCが苦手でもトップページのデザイン