文字表現を豊かにするフォント-独学！未経験からWebデザイナーになる！！

文字表現を豊かにするフォント

・東京近郊の方へ。Webデザイナー就職・転職カウンセリングサービス始めました。
・お悩み相談室。Webデザイナーへの就職・転職の悩み、気軽に相談してください。

ご存じの方も多いかも知れませんが、フォントとはいわゆる書体のことを指します。言葉で言うより見た方が早いですよね。たとえば、同じ文字でも、フォントによって次のように違いがあります。

OSによって種類は異なりますが、もともとOSには初期の状態でフォントがいくつか含まれています。ですから、OSに含まれているフォントだけを使ってデザインをすることも一応可能です。しかし可能ではあるのですが、デザイン的に優れたWebページを作るには、それだけではちょっと難しいのです。

デザインをしていると、当然ながら随所で文字を入力しますよね。その際に適材適所のフォントを選択することで、見違える程デザインが美しくなるのです。

もちろん、どのフォントがどんな場面で合うかは経験を積まないことにはわかりません。ですから最初からいくつも揃える必要はありませんが、できれば安価なものでもいいので、フォントを購入してみることをお勧めします。

「画像部分のフォント」と「HTML内の文字部分のフォント」

フォントの説明に入る前に、勘違いしやすい点について書いておきます。

Webページでは、わざわざ画像にしなくてもいいような部分（この文字部分もそうですね）は、HTML内でただの文字として書きます。ただの文字だからこそ、文字部分をドラッグ＆選択して、コピーしたりできるのです。これらの文字情報を表示するフォントは、ページ作成者が指定することもできなくはないのですが、あまりめずらしいフォントを指定することはありません。なぜなら、作成者が指定したフォントが閲覧者のPCにない場合は、そのブラウザのデフォルトフォント（標準のフォント）に置き換わってしまうからです。

今このページでお話しているのは、そういったHTML内の文字情報に適用するフォントではなく、画像として書きだす文字部分のフォントのことをさしています。画像内にある文字は、あくまでもブラウザから見れば文字ではなく画像です。ですから、幅広い環境でそのフォントを同じように表示できるんですね。Webデザイナーは、こういった部分にこそお洒落なフォントを使っていかなければなりません。

どんなフォントがあるの？

フォントで有名なメーカーはいくつかありますので、ここでご紹介したいと思います。ちなみに、ご存じない方もいるかもしれませんが、フォントというのは実は結構高いものです。それもそのはず、フォント職人さんたちが一生懸命少しずつ作り上げたものが、各メーカーで販売されているフォントだからです。つまり、そう簡単に作れるものではありません。使用する私たちは簡単ですが、作るのは非常に大変だという訳ですね。

ただし、学習段階でそうそうお金をかけてはいられないので、ひとまずはできるだけ安価なものから揃えるのが良いでしょう。本当に絶対必要なものだけに投資をして、それ以外はできるだけコストを抑えるの賢明です。なれてきて、フォントの重要性がわかってきたらさらに必要なフォントを……ということで十分でしょう。

という訳で、ここでは比較的安価で量も豊富なタイプをご紹介します。安価なフォントでも、OSのフォントだけの状態に比べれば十分役に立ちます（というかあるのとないのとでは本当に全然違います）ので、購入の参考にしてみてください。

ダイナフォント　DynaFont TrueType600 + 欧文3000

ダイナコムウェアというフォントの開発をする会社の製品です。Webデザインの本を読んでいたときにここのフォントが紹介されていたので、私も最初ここの製品を購入しました。安価でかつ、欧文フォントもついてくるので、お買い得度が高いです。有名な会社で、しかも安価なパッケージですので、学習用には私がもっともお勧めしているフォントです。

オフィシャルサイトでフォントの見本がPDFファイルで確認できるので、安心して購入できます。

Windowsの方

DynaFont TrueType600+欧文3000 Vista対応版

Macの方

DynaFont Truetype 600 + 欧文 3000 for Macintosh 通常版

ニィス丸徳フォントパック

フォント業界で有名なニィス社の日本語フォントが100書体も入っているパッケージです。通常はかなり高く販売されているフォントも入っていて、この値段は破格です。購入しておいて損はないフォントと言えるでしょう。ただし、このパッケージだと、欧文が入っていないので、後述するTrueType フォントパーフェクトコレクションと合わせて買うといいかもしれませんね。また、残念ながらMacには対応していません。(Windows対応)

→（Windowsのみ）ニィス丸徳フォントパック日本語100書体 Windows対応 TrueType日本語書体

TrueType フォントパーフェクトコレクション

上記ニィスフォントは日本語だけのパッケージですが、このTrueType フォントパーフェクトコレクションは、欧文だけのフォントパッケージです。このパッケージには有名なフォントも多く、有用な欧文フォントを500書体収録していますので、欧文フォントはこれさえあればひとまずはバッチリと言えるでしょう。個人的な話ですが、Futura（フーツラ）という私の大好きなフォントが入っているので買いました。改訂が4版も出ている事からも、売れていることが伺えますね。（Windows,Mac対応）

→（Windows,Mac対応）改訂4版 TrueType フォントパーフェクトコレクション(CDROM付)

モリサワフォント

ちなみにこれは参考までに。日本のフォント会社でも最も有名と思われる会社です。価格は高いのですが、DTP分野で幅広く使用されていますし、Webでもかなり使用されています。幅広いフォントがあるので、もしあとあとになってフォントに物足りなくなったらこの会社のWebサイトをのぞいてみるといいでしょう。繰り返しますが、今すぐ必要なものではなく、参考情報です。ウェブデザイナーとして頭の片隅に入れておいた方が良い情報なので、念のためご紹介しておきます。

→モリサワフォント

どのフォントがお勧め！？

以上、いくつか候補を挙げましたが、個人的には勉強用として、

ダイナフォント

もしくは、

ニィス丸徳フォントパック
＆
TrueType フォントパーフェクトコレクション

のセットをお勧めします。これであれば日本語フォントも欧文フォントもある程度揃いますので。ただ、ダイナフォントを選んでおいたとしても、[ TrueType フォントパーフェクトコレクション ]は買っておいても損はありません。それくらい、プロでもよく使うフォントも入っていますので。

フリーフォントもたくさん

有料のソフトをいくつかお勧めしましたが、フォントにはフリーでも優れたものがたくさんあります。ただし、使用するWebサイトからのリンクが必要なフォントも多いので、そのあたりはライセンスに注意してください（まあライセンスに注意するのは有料のも同じですけれど）。個人的には、探す手間を考えると、ダイナフォント等の幅広く使えるフォントを買った方が良いと思います。私もスポット的にフリーフォントを使ったりはしますけどね。

気に入ったものだけを見つけてインストールするのはなかなか大変ですが、時間がある方は探してみてはいかがでしょうか。

↑このページ最上部へ