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

フォントは文字の表現を豊かにするウェブデザイナーにとって非常に重要なものです。

独学!未経験からWebデザイナーになる!! > Webデザイナーになる > 学習環境を整えよう > 文字表現を豊かにするフォント

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

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

フォントイメージ

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

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

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

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

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

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

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

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

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

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

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

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

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

Windowsの方
ダイナフォント-Windows用

Macの方
ダイナフォント-Mac用

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

ニィスフォント-Windows、Mac用

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

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

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

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

TrueType フォントパーフェクトコレクション-Windows、Mac用

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

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

モリサワフォント

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

モリサワフォント

どのフォントがお勧め!?

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

  • ダイナフォント

もしくは、

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

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

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

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

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

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

12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。

コメント

この記事へのコメントはまだありません。

Webデザイナーになる
学習環境を整えよう
用意すべきソフトウェア
Webデザイン用のPC/モニタ
├文字表現を豊かにするフォント
動作&表示チェック用のブラウザを入手しよう
テストサーバーを立てよう
学習前のプランニング
最低限学習しておきたい基本スキル
どんなWebデザイナーになりたいですか!?
独学?学校?学習方法について
目標を明確にし、期限を設定しよう
Webデザイナーの独学学習法
やってはいけないWebデザインの学習法
楽しんでやることが究極の学習法
学習で大切なのは何よりも実践すること
80対20の法則を意識した学習をしよう
Webサイトを作って作って作りまくれ!
情報を発信することで学ぶ
学習TIPS
良いサイトをたくさん見よう
デザインのお手本はWebの中だけじゃない!
Web制作会社で働くことが最強の学習!
一流クリエイターを気にしてはいけない!
学習の効果はすぐには表れない
学習者にとっての強力な教材-本
馬場が読んだWebの学習に役立つ本
上手な本の選び方
上手な本の選び方-ネット編
本の有効活用法
Webデザイナーの就職・転職に役立つ資格