ホームページTPOを考えてハズさないフォントを選ぶ
服装などに対して使われる言葉にTPOというものがあります。TPOは、Time（時間）-Place（場所）-Occasion（場合）の略語。「時と場所と場合にあった方法」という意味で使われています。
もしTPOをわきまえない服装をしてしまうと、浮いてしまったり、時には周囲の人に不快な印象を与えてしまったりしますよね。
実はフォントの選び方も同じです。フォントはWebデザイナーが自由に決められますが、その選び方にもTPO（※1）というものが存在するのです。
※1.厳密にはTPOの略語的には少しだけ意味が違うかもしれませんが、わかりやすい表現なので、このページではTPOを用いて説明したいと思います。
TPOにあわないフォントを使うとどうなるか
TPOにあわないフォントを使用してしまうとどうなるでしょうか。
まず第一に、閲覧者に違和感を感じさせてしまうでしょう。閲覧者の多くは、例えデザイナーでなくとも違和感を（意識するしないにかかわらず）敏感に感じとります。この違和感は、サイトの信頼度やブランドイメージにも直結してしまうくらいの問題となってしまうのです。
第二に、商品・サービスの訴求力が低下してしまいます。不適切なフォントを使っている場合は他にもデザイン的な問題がある場合も多いと思いますが、お客さんの購買意欲をそいでしまうのです。
WebデザイナーはTPOを考えてフォントを選ぶ必要がある
Webデザイナーが依頼を受けるサイトのほとんどは商用サイトですので、これらは非常に大きな問題点となります。ですからWebデザイナーは、きちんとTPOを考えてフォントを選ばなければなりません。
とは言っても、フォントの選び方はなかなか難しいものです。経験がモノをいう部分が大きいので、実践でセンスを磨くしかありません。しかしそれでは時間もかかるので、重要なポイントだけでもお話ししておきましょう。
フォント選びのポイント
ハズさなければまずはOK！！
私が考える最も重要な点。それは最低限ハズさないように注意するということです。
服装に例えるなら、お洒落なパーティーの席で、あきらかに場違いな服を着なければOKということ。最高にお洒落ではなくても、違和感がない程度であればいいのです。お洒落にコーディネートするのは難しくても、無難な服装ならそう難しくありませんからね。
フォントも同様に、まずは明らかにハズしたフォントを使わないことに注意を払うといいと思います。最高にピッタリあったフォントを選択できるのがベストですが、それは徐々にできれるようになればいいことです。
お洒落に気をつかっていればファッションセンスが向上するのと同様、フォントに気をつけてデザインをしていれば、徐々にフォント選びも上手になってきます。ですからまずはハズさない事を第一にしてみるといいでしょう。
ハズしたフォントとは！？
ハズさないといっても、どれがハズしているかが分からないと仕方がありません。それではハズしたフォントとはどういうものなのでしょうか。
実は身近なところにヒントがあります。私たちは、日々の生活の中で様々な文字を見ています。もちろん、このフォントはなんだ！？などと考えて見ている訳ではありませんが、文章として読むために見たり、あるいは無意識のうちに見ていたりすることが多いのです。
中でも文字を目にする機会が多いのは、印刷物やインターネットでしょう。特に商用の印刷物やウェブサイトは、スキルのあるデザイナーが作っていることが多く、それらを日常的に目にする私たちには、フォントやデザインの“常識”のようなものがすり込まれています。特に印刷物に関しては子供の頃から見ているので、影響度合いが高いはずです。
私が思うにハズしたフォントとは、それらの一般的な常識から明らかに外れているものではないかと思います。そしてそれは自然と知っているのです。（ですからこのページ冒頭で触れたように、一般ユーザもフォントのTPOをわきまえていないサイトを見ると違和感を感じるのです。）
言葉では少し分かりづらいですね。ウェブ上のものではないですが、最近リアルで目にした興味深い例を挙げて説明しましょう。
ハズしている例：ペットボトルの水
これは最近デパートの催事場で販売していた水を思い出して作ってみました。写真にとっていた訳ではないので適当ですが、このペットボトルはあきらかに異彩を放っていました。（商品名はもちろん仮名です）
※左はもとの色。右は色による影響を避けるために無彩色にしたもの
どうでしょう。あなたもちょっと違和感を感じませんか？
飲料水に関しては口に入るモノなので、安全で誠実・キレイなイメージが望まれます。ですからこのようなPOPな感じ（この場合は色も）はあまり適していません。実際スーパーに行ってもこのようなフォントをメインにしている水はそう置いていないでしょう。だから違和感を感じたのだと思います。
ちなみに、私の常識では水といったら下記のような感じですね。
※左は（あくまでも私の）常識的な色。右は無彩色にしたもの
上は私のイメージで水といったらすぐに浮かんだもの。明朝系のフォントを使っています。こちらの方が違和感なくしっくりきませんか？逆に言えばありきたりとも言えますが、そういったことはもっとハイレベルな領域なので、学習段階では気にしなくてもいいでしょう。
もちろん、明朝系以外にも合うフォントはあるかもしれません。しかしあきらかにハズしたフォントを使わないだけでも、素人っぽさが消えることもあるのです。
先ほども言いましたが、適切なフォントを選ぶのは、最初はとても難しいことです。ですから学習途中の段階では、「これはないだろう」というフォントが分かるようになることが大事です。
「これはないだろう」というフォントは、人生を普通に生きているだけでも意識してみれば意外とわかるものですから、この点に注意してフォントを選択していくといいでしょう。
ウェブもリアルも同じ！
この例は商品のラベルなのに、Webのフォント選びと関係あるの？と思われた方もいるかもしれません。しかしウェブもリアル印刷も媒体が違うだけで基本は同じです。この例をあげれば、「どこそこの水」というウェブサイトがあったとしても、ポップ体はきっとあわないでしょうね。
最後に
このページでは、具体的なテクニックはではなく、ハズさないことの重要性をお話ししました。
もっと具体的なテクニックについて知りたい方もいると思いますが、それを説明するのは意外に難しいこと。適切なフォントは、ターゲットによって、商品やサービスによって、価格によって、その他様々な要因によっても変わってくるなど、一概に言うことができないからです。
フォントのTPOを判断する能力は、たくさんのサイトでの使用例を見たり、実際に自分でデザインしたりすることによって習得していくものだと思います。もちろん一朝一夕で覚えられるものではありません。しかし、日ごろから意識してフォントを見たり使用したりすれば、早めに習得できるはずですので、あせらず学習してみてください。
また、是非ともフォント関連の本にも目を通してみることをお勧めします。フォントというのは非常に奥が深く、おもしろいものだというのが分かると思いますよ。（最近私もフォントのおもしろさにはまってます^^）
Web制作Tips- デザイン
- ├フリーの写真素材を有効活用しよう
- ├デザイナーならこだわりたいカーニング（文字詰め）
- ├文字のジャンプ率で適切なサイトイメージを演出する
- ├TPOを考えてハズさないフォントを選ぶ
- └失敗しない配色の基本
- ユーザビリティ
- ├そのフォントサイズ、適切ですか？
- ├リンクテキストをわかりやすくする
- ├フォームのリセットボタンを考える
- ├リンク切れ時に適切な404ページを表示をする
- └フォームの確定ボタンは右?左?
- コーディング
- ├文法チェッカーで正しい(X)HTML/CSSを書こう
- └インデントで読みやすいソースコードを
- その他
- ├ディレクトリ構造は適切に
- └絶対パス?相対パス?ファイルの指定方法いろいろ
