知っておかないと損をする│Web制作会社のWebフォント関連コラム

Columnコラム

Web制作

知っておかないと損をするWebフォントとは!

知っておかないと損をするWebフォントとは!

2015/12/07
このエントリーをはてなブックマークに追加

Webフォントとは何でしょうか?

この世にフォントはたくさんあります。
紀元前から人間は意思疎通を行うために文字を持ちました。最初は文字というよりは絵のようなものでした。その後、改良を重ねていくことで現在の文字へと進化し、人間は文字を持つことで文化を持ち、情報や歴史を残してきました・・・

と小難しいお話を書いてみましたが、それは置いておいて・・・

Webフォントはフォントすべてを指すわけではございません。

そもそもWebフォントって何?

元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、うんたらんたら・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・分からない。

wikipediaより引用

難しくてちんぷんかんぷんですね。でも、デザインをするだけなら基礎さえ抑えておけば大丈夫です。

まずはWebサイトでよく使われる文字を抑えておきましょう。

webfontmurai_01_151113.jpg

3つのフォント

PCのWebデザインを制作するときには大体以下の3つの中からフォントを選択します。

・メイリオ
・MSPゴシック
・ヒラギノ角ゴ

上記の3つは主に一般的なWebサイトで使用されているフォントです。

フォトショップでデザインする場合はよりWeb上で見ているものに近づけるためにアンチエイリアスは鮮明にしておきましょう。ただし、MSPゴシックに関しては鮮明にするのはNGなので、要注意です。

ちなみにスマホサイトの場合はヒラギノを使用します。iPhone ユーザーが多いため、iPhoneで表示できる日本語フォントがヒラギノなので、ヒラギノを使って制作します。

さて、ここで要注意なのは「画像化」です。
デザインを考え、h1やh2を画像で制作し、Webにアップする方もいらっしゃると思います。私もそうすることは多いです。

しかし、メイリオとMSPゴシックは画像にしてはいけない文字なので、デザインをする際は注意する必要があります。
どうしても画像もサイト内のテキストのフォントも統一させたいのならば、ヒラギノで制作するのが良いと思います。

最後に・・・

フォントは選択次第でデザインを大きく変化させますので、慎重に選択する必要があります。

私もとてもその点には苦労させられます。でも、ユーザーに見ていただくデザインだからこそしっかりと考える必要があるのです。
そう考えると文字ひとつ選ぶのだって面白くなると思いませんか?

以上、デザイナーの村井がお送り致しました。

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

ホームページ制作

Webデザイン制作

スマートフォンサイト制作

関連コラム

Webデザイナーなら知っておくべきWebフォントの使い方

Webデザインの95%はフォントで決まる?!Webデザイナーなら知っておきたい3つのポイント

text_totop