アンブログ | WEB制作会社アンのメンバーがお届けする情報メディア

アンブログ/株式会社アンのスタッフブログ

デザイン ノウハウ

デザインの基本は文字。デザイナーが押さえておきたいフォントの基礎知識!

こんにちは!新人デザイナーの杏です。
デザイナーになって”フォントの重要性”をとても実感しています!

デザインというと、つい、色や形、余白などにフォーカスしてしまいますが
文字を美しく操り、配置することでデザインは驚くほど魅力的になります。
フォントの知識があることで、デザインの幅は大きく広がります。

今回は覚えておいて絶対損はないフォントの基礎知識をまとめてみました!


タイポグラフィとは?

まず、よく聞く「タイポグラフィ」についてです。

タイポグラフィとは「目的に合わせて読みやすく、美しく見せるために文字を配置する技」のことです。
サイト全体の方向性や、画像との組み合わせ、見た目のデザイン。
タイポグラフィを扱うには知識と経験が必要、奥が深い世界です。

近年はレスポンシブデザインでWEBデザインをすることがスタンダードになっています。
スマートフォンはPCよりも画面が狭いので、いかに、感覚的に、情報を伝えていくか、という観点が重要視される傾向にあります。

デザインはシンプルに、しかし、他のサイトとは違う個性をだして魅力的なコンテンツにするために、
「タイポグラフィ」のスキルは必ず役に立ちます。

タイポグラフィを使いこなすことができれば、デザインは大きく広がります。
デザイナーとしては必ず身に着けておきたいスキルのひとつです!

書体について

次に文字の書体についてご説明します。

まず、そもそも私たちが使っている「日本語」は和文と欧文が混じる少し特殊な言語文化です。さらに、漢字、ひらがな、カタカナ、と種類があるので日本でデザイナーをしている人はそれぞれの文字について知識が必要になります。

「和文フォント」
日本語のフォントの構成は正方形の枠の中に文字がデザインされています。文字が入っている枠を字面枠(じづらわく)と呼びます。その外に少し大きめの仮想ボディーがあります。子供が文字を習うときに、正方形の中に収まるように書きますよね、これが日本語の「和文フォント」の特徴です。

「欧文フォント」
一方、欧文フォントはアセンダライン、キャップライン、ミーンライン、ベースライン、ディセンダラインという5つの線で構成されます。
英語を習うときに5本線で書くことを思い出していただければと思います。
和文と欧文はフォントが作られるメカニズムがそもそも違うので、その特徴は覚えておいた方がいいでしょう。

合成フォント?
Adobeのソフトの一部(illustratorなど)では、漢字、ひらがな、カタカナ、数字、英語・・・ それぞれの相性のいい和文、欧文を設定できる昨日があるそうです。
フォントにこだわりを持っている人たちは、この漢字の組み合わせはこれ・・などと、お気に入りの組み合わせがある方もいるようです。

求めれているデザインからフォントを選定し、しっかりとイメージにあうフォントを選定していきましょう。

異なる雰囲気を醸し出すフォント

フォントの書体毎に生み出す雰囲気は異なります。
与えたい印象、どんな個性を出したいのか、デザインの目的に合わせてフォントを選ぶことは大切です。

日本語フォントの代表格「ゴシック体」と「明朝体」。
フリーフォントでもバリエーションが豊かで数が沢山あります。

しかし使いみちや与えたい印象によっても、それぞれの特徴があります。

ゴシック体
ゴシック体は全体的に動きが少なく、統一感がある雰囲気です。また丸みを帯びている印象も受けます。
ゴシック体の大きな特徴はやはり文字の太さが均一という点だと思います。太さが均一の上に、飾りがない書体です。

シンプルな書体のため、ゴシック体は一般的に視認性が高い書体と言われています。
ゴシックが与える印象としては「若い・親近感・目立つ・力強い」などがあります。
子供向けのものや、目立つことが求められる看板などではゴシック体を使っているものが多いでしょう。

明朝体
筆で書いた字の特徴をそのまま受け継いだのが分かると思いますが、ゴシック体とは違って明朝体は線の太さに強弱があるのが大きな特徴です。
また「ウロコ」と呼ばれる、書き始めの部分に飾りがあります。洋書体の場合はこの飾り部分を「セリフ」と呼びます。

太さに強弱があり、飾りもあるため細かい表現がされている明朝体は、可読性が高い書体と言われています。

明朝が与える印象としては「大人っぽい・洗練・高級感・知的」
不動産などの高額商品や、エレガントな印象を与えたい、化粧品などは明朝体が多いと思います。

いろんなフォントをもっと知りたい!便利なツール&フォント男子!?

フォントは日々新しいフォントが沢山でています。

・いろんなフォントを知りたい!
・お気に入りのフォントを見つけたい!

そう思っても、なかなか難しい場合が多いです。

そんな時に役に立ちそうなツールと情報をご紹介します!

ためしがき
数十種類の無料日本語フォントをブラウザ上で一度に試せて便利な「ためしがき」というツールがあります。
>ためしがき

このフォントを使いたい!と思ってファイルをダウンロードしなくてもブラウザ上で一気に確認ができます!
商用利用可能な日本語のフリーフォントばかり載っているので、フォント選定の時短が可能です。

フォント男子?!
フォントを擬人化したフォント男子という漫画が出ているようです。
>フォント男子

このフォント男子を弊社デザインチームで見ていたのですが
「あああ!!わかるーーーー!!!」とみんな大絶賛でした。

私が一番イメージに近い!!と思ったのは
「リュウミン」君です。

是非見てみてくださいね!
漫画を読みながらフォントの特徴など、フォントうんちくを知ることができるのもおすすめのポイントです。

まとめ

同じ種類の文字でも、大きさや太さを変えるだけで印象ががらりと変わって、見る人に違った印象を与えることができます。

またゴシック体・明朝体それぞれの特徴を活かした使い方をすることで、より見る人にやさしい効果的なデザインが可能になります。

慣れないうちはまずは使ってみて、それぞれの違いをしっかり吸収することが大事でしょう。
そして、慣れてきたら自分なりの使い分け、ルール決めなどしていくことが大切かと思います。
何か制作時のヒントになれば幸いです!