• サイトマップ

フォントの表現

1つ上のWebデザインを目指すなら、フォントの扱いには気を配りましょう。 PCで入力しっぱなしの文字を使わず、 フォントの選択から細かい調整まで気を配ることが質の高いデザインを生みます。 ユーザは意識して文字の細かいところは見ません。しかし、 無意識に感じ取ってはいます。あなたが細かい配慮を欠かさなければ、ユーザは感じます。 「なんかこのサイトいいな」ってね。

フォントの表現には以下の点に注意しましょう。

• フォントの選択
• 文字揃え

また、HTMLなどでテキストを表現する場合に使用される システムフォントや、 テキストの表示ついてよく問題になる機種依存文字についても最後に触れたいと思います。

フォントの選択

フォントの選択は重要です。 フォントいかんによってユーザに与える印象はまったく変わってしまうのです。 以下は代表的な明朝系とゴシック系のフォントについて解説です。

明朝系	繊細なイメージを持ちます。日本語の美しさが引き立つフォントです。 硬いイメージもあり、学術的な内容の場合は威厳がでていいかも。大学の レポートなどでこのフォントを使うとなぜか説得力があるので不思議です（笑）。
ゴシック系	力強い印象を持ちます。和文英文どちらでも非常に視認性が高くWeb上では使いやすいフォントだと思います。 軽いイメージもあり、使い方によっては躍動感や軽快なイメージを演出できます。明朝系が年配の方に好まれる のに対して、若者に支持されるフォントのようです。

明朝系、ゴシック系のフォントはPCに標準でインストールされているので使いやすいと思います。 細かく凝ればこれらのフォントにも膨大な数がありますが、プロでないかぎり大丈夫です。 しかし、これらのフォントだけではなかなかデザインに幅がでないのも事実です。

そんな時はフリーまたはシェアのフォントを使いましょう！ 無料で使えるフリーフォント、 ちょっとしたおこずかい程度の金額で使えるシェアフォントにも かっこいいフォントはやまほどあります。 これらのフォントは本格的な商用ではないので漢字などはほとんどの場合使えませんが (第一水準の漢字＜日常よく使われる漢字＞であれば使えるものもあります！)、 アルファベット、カタカナ、ひらがな ならOKです。 いろいろあるので是非試してみましょう。

オススメフォント配布サイト

About Font

フォント素材のポータルサイト。とっても有名で膨大な数のサイトが登録されています。

マニアッカーズデザイン

フリーとシェアのフォントがいっぱい。質の高いグラフィックを見ているだけで楽しい。

(注：各サイトの利用規約をよく読んであなたの責任で使用してください！ フォントは使用範囲が広いので特に著作権に注意してね。)

文字揃え

文字揃えはテキストをデザインする上であたりまえですが重要です。 テキストがばらばらでは見た目にも悪いですから。

文字揃えなんて教えてもらわなくてもできるよっなんて思われている方もいるでしょう。 たしかにそうかもしれません。テキストを打ち込んで改行すればいい話です。 でも文字によってそろえ方に微妙な工夫が必要だって知ってましたか？ 文字自体がそろっていても直接見るとそうは見えないという現象があるのです。 知っているのと知らないのとでは違うと思いますよ。

代表的なのはアルファベットの「W」と「J」でしょう。 形が上下や左右で均等じゃないのでこれらの文字とテキストをそろえる場合は注意が必要です。 fig.1-1、fig.1-2は単に位置を合わせたもの。 位置的にはそろっているはずなのですが、「ウ」が出っ張って見えます。

fig.1-1
fig.1-2

fig.2-1、fig.2-2は意図的にずらしてそろえたもの。位置的には左にずれていますが、目でみるとちゃんと 端にそろっていますね。

fig.2-1
fig.2-2

目の錯覚というやつで、実際の位置と目で見る感覚とは微妙にずれがあるのです。あなたはきちんとそろえて いますか？改行だけではそろわないということをお忘れなく。

また、英語と日本語が混在する場合、 同じ文字サイズで文字を書くと文字の高さがそろわなくなってしまう場合があります。 fig.3-1は英語、日本語とも同じ文字サイズのもの、 fig.3-2は日本語はfig.3-1と同じ文字サイズですが英語は日本語より120％大きくしてあります。

fig.3-1
fig.3-2

fig.3-2の方が文字の高さ、大きさがそろって見えますよね？ テキストを打つときは、なんとなく英単語と日本語をつづけて入力していしまいがちです。 しかしもともと違う国の言葉。きちんと分けて考えましょう。 文字サイズが同じでも実際の大きさと同じとは限らないので す。

システムフォントについて

システムフォントとはあらかじめPCにインストールしてあるフォントのことです。 例えばWindowsなら「MSゴシック」や「MS明朝」、Macなら「Osaka」などです。

HTMLでテキストを表示する場合このシステムフォントを使用することになります。 そしてブラウザで使用するシステムフォントはCSSなどで指定することができます。 わざわざ画像化しなくても、色々なフォントを使用することができるので表現の幅が出ますね。

ただしこのシステムフォントを指定する場合、注意しなければいけない点があります。

システムフォントはPCによって異なる場合があり、自分のPCで表示されても 閲覧するユーザの環境で表示されるとは限らないという点です。 でなければ、意図したようにテキストを表示することができません。

フォントの指定に対する対策としては、フォントの指定は複数のフォントを利用する、 フォント名ではなくフォントの系統を指定するという方法が考えられます。

フォントの指定に関する詳しい情報は以下のサイトを参考にしてください。

Web Site 作成支援：CSS font propaties

機種依存文字について

機種依存文字とは、特定のOS特有の文字のことを言います。 便利な文字がある反面、相手の環境に依存してしまい正しく表示できないことから、 これらの文字をWebサイト制作で使用することはタブーと言われています。

Webで機種依存文字をどうしても利用したい場合は文字の画像化をしてください。 グラフィック系のソフトで機種依存文字を画像として保存し、 HTMLの文中に画像として埋め込むのです。 これならば、画像を表示できるブラウザであれば文字を表示できます。 ただし、文字のコピーやペーストができないので、できれば避けたい所ですね。

機種依存文字に関する詳しい情報は以下のサイトを参考にしてください。

penguin-19：機種依存文字一覧表

何が機種依存文字なのか、確認しておきましょう。

機種依存文字チェッカー

チェッカーもあります。