ホームページの書体を考える

普段何気に使っている文字。文字には、明朝体、ゴシック体と大きく2つに分かれている。

それぞれに、特性をもっていて、用途によって細かく検証されて使い分けられています。

ただ、自分の場合は、書体をセンスというか直感で選んでいた。

今回、書体の勉強会をきっかけに、初めて書体制作の裏側の話を知り、興味を持ちました。

早速、勉強会から帰宅した後、ホームページの書体を考え、新しくしました。

見出ミンMA31


『見出ミンMA31』はこのホームページの見出し<h1,h2,h3>に使っている書体です。

もともと、文字はJimdoのグレードで使い分けできる種類が限定されています。年々サービスが向上され、このフォントが導入されました。このフォントを提供しているのが「モリサワ」という会社です。

 

この書体は、明朝体です。漢字は、確かな太みと存在感を表しています。かなは、やや細めです。漢字とかなの対比によって可読性の高さが特徴なんです。

なので、見出しなどの大きいサイズで重厚さを表現することもできます。また、小見出しでやや小さくなった場合でも、味わいのある見出しと読みやすくしてあるので、広範囲に使うことができる書体なのです。

ナウMM


「ナウ」は、もともと明朝体です。ナウとは、横画の太さを増やし、視認性を高めた現代的な横太明朝体なのです。

最初にこのフォント名から「最新」っぽいイメージがありますよね。書体名は基本的に統一されてなく、各メーカーで自由に表現しているそうです。

ナウは、優雅なイメージがある明朝体を維持しながら、安定した骨格とシンプルなエレメントで構成しています。力強くもあり、それでいて上品なたたずまいを感じる仕上がりになっています。

本文に選んだ理由は、トップページの文字の量が多いので、小さい文字での可読性を損なうことがなく、Webや電子書籍などにも効果的な書体として活用されているからです。

 

紙とWEBでは、選ぶ書体が異なります。

じゅん201


ナビゲーションの書体に使用している「じゅん201」。今回ここだけは、変更せずに使用しています。

「じゅん」の意味はわかりませんでしたが、順番の「順」ではなくて、純粋の「純」という意味を自分なりに込めて選びました。

 

ここからは、書体の説明になりますが、「じゅん」はリズミカルな優しいカーブがあり、柔らかいイメージの表現に好まれる丸ゴシック体です。このホームページで唯一のゴシック体です。

 

手書きのイメージを残しながら、読みやすさを考慮した文字です。視線の流れを妨げず親しみやすいデザインなのです。

先端の丸みと太さがバランスよく調和しているので、絵本や雑誌の本文などに使われているそうです。

 

ページで使用する書体は『3つ』までというルールがあるということで、これまで説明をした書体を今後は使っていきます。

書体はかなを基準にバランスで判断する


モリサワの文字数は、なんと23,058個あるそうです。基本的には、すべて異なるそうです。

ここがすごいところなんですが、例えば同じ書体でも、「行」と「御」は同じ「ぎょうにんべん」でも、画数によって微妙に違うそうです。

つまり、1つ1つを方眼紙に手書きで書体に起こしている作業をしているのです。

さらに、ひらがな、カタカナ、漢字、数字を並べた時のバランスも考慮しながら、修正を繰り返していくそうです。

 

錯視という効果も活用するそうです。これは、視覚が正常にも関わらず、得た情報を実際と異なる情報として認識してしまうことです。例えば、同じ長さでも縦と横だと異なった長さに見えるとか、紙に描いた模様が動いてみえるとか。

これは、脳が視覚情報を処理するにあたって、実際の情報に加えて情報の補完や周囲のの情報とバランスをとろうとする働きです。

 

マスの中では、上と左が大きく見えるというのも、同じことの様です。

 

さらに、マスの中心より上に重みを置くと緊張感を与え、下に向かうと親しみを与える。(重心)

マスに足して横幅が広いと新しいと感じ、狭いと古いと感じる。(ふところ)

 

書体制作には、おおよそ3~4か月かかるそうです。これにまた別にコンセプトを考えたり、市場調査、使用用途など考えたりする時間が必要となるそうです。

 

見せる文字や読みやすい文字

明朝体とゴシック体との組み合わせ・相性

横組みと縦組み

 

実は、0から書体を作る企業は日本だけだそうです。世界の一流ブランドのロゴ書体は基本的に定型のフォントを使用するそうです。ただ、そのままではなく、デザイン性は加えるそうですが、やはり日本のものづくりは分野問わずに凄いなと思います。

 

これまで、数ある中から感覚や直感でフォント選びをしていたことがなんともったいないことだったのかわかりました。フォント数が少ないとか不満を言ってはいけませんね(笑)

また、フリーのフォントもありますが、モリサワの書体へのこだわりを見ると、有料でも全然納得できるというか、こんなに想いをもって活動しているのだから、ここはケチらずに払いましょうよって感じです。

共感したモリサワのホームページはこちら

http://www.morisawa.co.jp/fonts/

 

これからは書体の作られたコンセプトや、使用用途の効果を理解しながら、想いの込められた書体に感謝しながら使用しなくてはいけませんね。書体を変更した後のリンプラのホームページは、益々いい感じになってきました♪