目指せ、Webデザイナー！

文字化けの原因と回避方法

文字化けの原因と回避方法

テキストより引用〜

Webの文字化けには、必ず原因があります。文字化けの仕組みを知って対策方法を身につけましょう。

Webでは、リロードすれば大抵直り、CGIやデータベースを使用しているサイトでは、なかなか直らないそうです。

文字化けの多くは、文字コードを変換し損ねた場合に起こります。

文字コード

HTMLでは、HEAD内にMETAタグで宣言をして文字コードを指定します。
ここで文字コードの指定をしなかった場合、TITLEの部分の日本語が文字化けすることもあります。

日本語の文字コードは、シフトJISのほかに、JISやEUC(Cxtensive Unix Code)等があります。

JISコードは、インターネットメールなどに使われます。
シフトJISは、Windows98やMac OS 9等のパソコンで使用されています。
EUCは略語の通り、Unixの日本語環境で使用されます。

インターネットで使用される文字コードは、IANA(Internet Assigned Numbers Authority)という団体が管理をしています。
ここで登録されていない文字コードは使用しないほうが良いでしょう。

外国語Webページを作るときに

「日本語のWebページ作成時には、シフトJISをしておくと良い」と有ります。
JISだろうが、EUCだろうが、勝手に判断してくれますので問題はありません。

問題なのは外国語のページを作成するときです。
この際は、きちんとMETAタグで宣言をする必要があります。
これを忘れると、海外のユーザに文字化けのページを公開（後悔？）することになります。

理由は簡単です。
（英語などの場合）全角文字に対応していないからです。
もし、全角の文字やスペースが残ったままになっていると対応していないブラウザでは文字化けして表示されてしまいます。

英語のページを作る際には、Latin-1(ISO-8859-1)を指定して、欧文フォント表示のチェックをしておきましょう。

機種依存文字

例え同じ文字コードを使っていようと、文字化けすることがあります。
原因は、「製作者が使っている機種にしか入っていない文字」を使っているからです。つまり、「機種依存文字」と言うことです。

例としてあげると、丸数字（数字を丸で囲んだもの）や、ローマ数字です。
Web上でも結構使うことがあるので、注意が必要です。

半角カタカナ

携帯電話のメールでは良く使われる半角カタカナ。使うのは、ケータイだけにしましょう。
JISコードには半角カタカナがありません。文字化けになります。
また、ソフトによっては検索できなかったり、禁則処理が適用されなかったりします。

HTML4.01で記述すれば、半角カタカナを使用しても特にトラブルはないそうです。
でも、それだけきっちりと書ける人がそんなものを使うかと考えると………

「美乳」と「雀の往来」

データベースやCGIを使う場合にはEUCで書いたほうがベターです。
なぜなら、シフトJISの場合はエスケープ・シーケンスが入ってしまうからです。

EUCのHTMLファイルで、文字化けを防ぐのに良い方法があります。
HEADの中（の上部）に、<!--美乳-->や、<!--雀の往来-->と書いておくだけです。

「冗談でしょ？」と思った貴方。ウソではありません。
テキストによれば、

「これらの文字はEUC独自の文字コード範囲が割り当てられているため、この文字が記述してあれば、ブラウザはメタタグでの指定に頼ることなく、そのHTMLファイルの文字コードはEUCだと認識して文字化けを回避できる」

とのこです。 まぁ、おまじないだと思っても変わらないでしょう。

他にも、「龠」や「京」でも同じ効果があるそうです。
Yahoo!のソースを見てみると、確かに「京」と書いてあります。

テキストには余談として書いてありますが、

「この方法を考えた人が、幾つかの文字候補の中から、面白がって覚えやすいものを選んだのだと思います」

だそうです。

「文字コードを扱うプログラマーの中では有名な話なので、興味のある人は検索してみるといいでしょう」

とあります。 暇な人、興味のある人は検索してみると面白いかもしれません。

フォント指定による文字化け

日本語の文章を表示するのに、欧文フォントを指定しまうと文字化けをすることがあります。
もっとも、ブラウザやＯＳのバージョンによりけりと言うことなので、まぁ大丈夫だとは思いますが…用心するのに越したことはありません。

基本は、日本語なら日本語のフォント、欧文なら欧文のフォントときちんと指定することです。

読ませる文章？

読ませる文章？

テキストより引用〜

Webで文章を読ませるためには、的確な編集作業と、きれいな文字組みが必要となります。CSSの利用がポイントです。

Webの文字が読みにくいのは、前回やったとおりです。
ユーザに読ませるためには、幾つかのコツがあります。

Webテキストのポイント

印刷物に比べて、Webの文章は可読性が低いです。

まずは、文章自体の長さを短くするようにしましょう。
もっとも、印刷するものであってもダラダラ書くのはいただけません。

ボリュームがある場合は、タイトルや小見出しを工夫する必要があります。
「たとえ、本文が読まれなくても大体わかる」ようににしましょう。
小見出しの数を多くするのも良いでしょう。

本文の文体も、出来るだけやさしいものにしましょう。
どこかの国の憲法のようにしても、読みにくいだけです。

誤字脱字は必ず調べましょう。
「たかが１つ」かもしれませんが、情報の信用性をなくすには十分です。

用語や記号の統一も必要です。これも、信用性に関ってきかねません。
たとえば「パソコンをPCと略す。全角か半角かまできちんと統一する」と言うことです。
全角と半角が違うと、「別の物」としてとらえる人がいるかもしれませんので注意が必要です。

記号は、Webでは表示できないものが多々あります。

引用についても注意が必要です。
引用元はどこか、ということが明らかになっているか注意しましょう。

文字組のコツ

１行の長さを指定する
ウィンドウサイズが可変だと、１行の長さはユーザによって変わります。
この、「変わる」と言うのが曲者です。デザイナーには予測が出来ないからです。

テキストの長さは可変にしないほうが良いでしょう。
CSSを使ったり、テーブルに入れたりして、長さを指定しておきましょう。

フォントについて

HTMLのFONTタグは非推奨のタグです。フォントを設定するにはCSSを使いましょう。
ただ、どんなに「カッコイイ」フォントを使っても、ユーザ（見る側）の環境に入っていなければブラウザの標準フォントで表示されます。

CSSを使えば、文字のサイズを絶対値指定できます。
しかし、画面解像度の違いにより必ずしも同じ大きさで表示できるわけではありません。

行間を指定するときにもCSSを使います。
この値にも絶対値を指定できます。が、ユーザの環境によっては、行間が狭くなったりしてしまうことがあります。
%等の相対値を使ったほうが良いでしょう。

段落

Webでは（通常は）行間が狭いため、どこまでが１つの段落かわかりにくいです。

CSSを使えば、確かに１文字下げと言うことが出来ます。
しかし、段落ごとに間を空けるなどして工夫する必要があります。

感想

ようは、変なことをしなければ良いのです。
「わかりやすい文章で書きませう」などとするのは「バカ」がやることです。
しかもわざわざ第２水準の漢字や、旧字体まで使ったりする奴は終わっています。

結局、文章は読みやすくてナンボの代物なのです。
読みにくいものは「文章」ではなく、「文字の羅列」にすぎません。

あとWebに限らず、文章で誤字脱字が無いかをチェックするのは常識ですね？
文体をやさしく。どこかの国の憲法は、国民に知られるとまずいことが書いてあるためにあんな古臭い文体を使っているのです。

ただ盲点だったのは「テキストの幅を固定する」ということ。
たしかに、固定しておかないと用語が途中で途切れたりとかしかねませんね。

でもまぁ、変なことをしないでいればＯＫです。
変な記号を使ったりとか、変な文体で書いたりとか…常識的に考えれば特に難しいことではありませんね？

Webの文字

Webの文字

テキストより引用〜

Web上の文字は読みにくいと言われますが、それはなぜでしょうか？　ユーザーが少しでも読みやすいように文字の見せ方を考えましょう。

「HTML」という言語からみ手の通り、Webの基本は文章です。
ですから、読みやすいに越したことはありません。

しかし、いくつかの問題もあります。
Webでは、テキストやフォントのコントロールに制限が多いのです。
なかなかデザイナーの思い通りにはならないのです。

それでは、なぜ問題なのかを見ていきましょう。

Webの文字の問題点

フォントを特定できない

普通の印刷物は、作る人がどんなフォントにするかを決めて、印刷すれば終わりです。
製作者の選んだフォントで印刷されます。

しかし、Webではそうは行きません。
Webのテキストは、ユーザが使用しているブラウザによって異なります。

また、デザイナーの環境では搭載されていようが、ユーザの側に入っていなければ表示できません。

サイズが特定できない

Webでは、「どのユーザが見ても同じ大きさに見える」ということが出来ません。

まずHTMLでは絶対的な大きさを決定できません。
「標準よりどのくらい大きいか？　どのくらい小さいか？」と言うことだけです。
しかもその「標準」というものもブラウザによって変わります。
ユーザが変更することも出来ます。

CSSを使えば、絶対的なサイズの指定が出来ます。
12ポイントなら、12ポイントで表示されます…が、そううまくはいきません。

パソコンは、ユーザによってモニタの解像度が違います。
ですから、絶対値で指定しようと（同じモニタ、又は解像度でなければ）違う大きさで表示されてしまいます。

小さいフォントは表示できない

パソコンのモニタは、印刷物に比べて解像度が低いです。
小さいサイズの文字を表示することが出来ないのです。

印刷のときに使用するルビ（ふりがな）は5.5ポイントと決まっているそうです。
しかし、モニタで見るとつぶれて表示されてしまいます。
モニタでは8又は9ポイントが限界です。

また、9ポイントとかいったサイズでは、「明朝体」とか「ゴシック体」というフォントの違いを表現できません。

行間の指定が出来ない

HTMLでは行間の指定が出来ません。

通常はブラウザの表示機能に任せられています。しかし、問題があります。
ブラウザは、欧米の文字にあわせて設計されているのです。
ですから、日本語を表示すると行間が狭すぎて読みづらいことがあるのです。

行間の設定はCSSで行います。

１行の文字数を指定できない

日本語の原稿用紙は升目が書いてあるため１行の文字数がきっちりと決まっています。
しかし、Webではそうは行きません

たとえテーブルなどで幅を指定したところで、徒労に終わります。
フォント、文字のサイズが変わるからです。

段落がわかりにくい

日本語の段落は先頭を１文字下げて表すことが多いです。
しかし、Webでは行間が狭いためどこまでが１つの段落かわかりづらいのです。

記号や外国語

印刷物なら、どんなフォントを使おうが印刷した後で変わることはありません。

例えばハングル。今現在これをサポートしているものはありません（？）。
現状では画像にせざる終えません。

他にも機種依存等の文字もあります。
半角のカタカナや特殊な記号などの類です。
まぁ、まず使うことは無いようなものです。
しかしこれらを、「どうしても使いたい」と言う場合は画像にするしかありません。

背景色と文字色

印刷物で一番読みやすいものは、白地の紙に黒のインクで文字を印刷したものです。
しかし、Webでは一概にそうとは言えません。

紙と違い、モニタは発光しています。
そのため、白地に黒い文字ではコントラストが強すぎてしまい、逆に読みにくくなってしまうこともあります。

それだけならともかく、背景が強すぎて文字が埋もれてしまうこともあります。
特にリンクの部分などがそうです。

読めなければ意味が無いので、配色には気をつけましょう。

縦組みが出来ない

日本語の場合、縦組みのほうが読みやすいそうです。
もっとも、縦書きで使っていたものですからね。

しかし、Webで文章を縦組みにすることは出来ないのです。
たしかに、CSSを使えば出来なくはありません。
ただ、その設定はIE5.5以上のみに対応している独自の拡張スタイルシートです。

どうしても縦書きにするときは、文章を画像にするか、FlashやPDFなどのプラグインを利用するしかありません。

タブやインデントが出来ない

文章を整形するときに、タブやインデントを使用できません。
CSSで設定をすれば出来なくは無いですが、イチイチ設定をしなければなりません。

テーブルに流し込むか、TTタグやPREタグを使って、等幅フォントで表示するしかないようです。