読者です 読者をやめる 読者になる 読者になる

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

f:id:smallstart:20170114004737p:plain

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

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

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

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

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

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

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

f:id:smallstart:20170114013725p:plain

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

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

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

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

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

f:id:smallstart:20170114004737p:plain

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

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

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

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

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

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