ホームページテンプレ＋αの工夫 その２：フォントをあらかじめしっかり決める

埼玉のホームページ屋、スモールスタートの山崎です。

テストとしてバイオリン弾いてる素材を使ってバナーっぽいモノを作りましたが、やっぱりフォント（字体）で雰囲気だいぶ変わるなぁと。

ーー○ーー○ーー○ーー○ーー○ーー○ーー○ーー○ーー○ーー○ーー○ーー○

実はホームページ作成システムをJimdo（無料版以外のPro / Business版）にした理由の１つに「Webフォントでモリサワが使える」のもあったりします。

このページの説明によると、

Webフォントを使うと閲覧ユーザーの環境に依存せず、テキストを好きな書体で表現することが可能になります。

 図にするとこんな感じです。

で、フォントを作っているメーカーさんも色々あるんですが、「モリサワ」さんのフォントっていうのは簡単に言うと「プロ御用達」なものなんですね。普通に買うと（今ではPC１台に付き年間で･･･なサブスクリプション方式になりましたが）結構するんです。

で、なにがメリットなのか？というと、【観覧ユーザーの環境に依存しないでイメージ通りのフォントで表示できる】んです。さらにそれがいいフォントだと、ただ文字を並べるだけでも見映えがよかったりするんで、【シンプルに見映えよく】したいときに使えるんです。

そうした意味では【cook-doの中華料理】に似てるなと。「手軽に本格派」ってやつで、むしろデザインとか苦手な人ほど重宝すると思います（だって自分がまさにそうだし…）

そこで改めてこの画像。このバナー画像っぽいサンプルは、写真の上に文字を載せただけの実に単純な作りです。ですがだいぶ雰囲気変わりますよね？右の方が左側より安っぽさがないといいますか、しっくりくる感じといいますか･･･

ちなみに左側は上下共にPCに最初から入っているフォント。右上は年間４万くらいする有料のフォントパックの中から選んだもの。右下は実はGoogleが提供してくれているフォントなんです（これは無料、自分のPCに入れてもWebフォントとしても使える）。

ーー○ーー○ーー○ーー○ーー○ーー○ーー○ーー○ーー○ーー○ーー○ーー○

何かしらのWebフォントを使うだけなら、設定すればJimdoに限らず色々できます。調べながらやれば無料でも可能です。「フリー　日本語Webフォント」辺りを検索していただくと出てきますし数百円／月で使える物とかもありますね。

「フリーの日本語フォント」のバリエーションがここ数年ものすごく増えていて、印刷物のデザイン仕事とかしてないならば、それらで十分だわとなるようなクオリティーの高い物もあるんですよね。まとめているようなので参考までに。

よさげな物をインストールして、日頃のワープロ文章やプレゼンスライドのフォント設定を変えるだけでも、見違えますよ。

ただそんな中前回と同様注意点がありまして、それが「バリエーション豊富にし過ぎない」事だったりします。下のサンプルを見ていただけたら一目瞭然ですが、なんかクドいですし、色々と台無しにしているというか･･･。

なので、ホームページで使うのはせいぜい３つくらいかなと。ちなみにウチのホームページでは【ロゴ・グラフィックパーツで使っているフォント】と、【見出し】用と、【本文用】とで使い分けてます。