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

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

※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Windowsの方

DynaFont TypeMuseum 3710+1960 TrueType for Windows

Macの方

DynaFont TypeMuseum 3710+1960 TrueType for Macintosh

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

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

→（Windowsのみ）ニィスまる徳フォントパック

ニィス丸徳フォントパックは、Amazonに、Illustratorで不具合がでたというレビューがありましたので、現在はダイナフォントをお勧めします。

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

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

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

モリサワフォント

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

→モリサワフォント

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

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

ダイナフォント

もしくは、

ダイナフォント
＆
TrueType フォントパーフェクトコレクション

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

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

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

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

↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)