抑えるべきタイポグラフィのポイント│東京のWeb制作会社のタイポグラフィ関連コラム

Columnコラム

Webデザイン

タイポグラフィによるクオリティアップ

タイポグラフィによるクオリティアップ

2016/04/18
このエントリーをはてなブックマークに追加

デザイナーの藤原です。
昨今、「レスポンシブデザイン」や「フラットデザイン」「グリッドデザイン」など、非常に多くのデザイン手法が利用されています。そんな中で、少しでもクオリティを上げるためには、タイポグラフィは必要不可欠です。
タイポグラフィでクオリティ部分の差別化も可能になりますので、デザイナーの方々は是非取り入れていただければと思います。
f-fujiwara_20160408.jpg

タイポグラフィについて

まずはじめに、タイポグラフィについて理解をしておきましょう。

❛❛タイポグラフィ(英: typography)は、活字を用いる印刷技術および活字書体のデザインやその選択・配列などのデザイン表現全般を意味する。 ❜❜

元々は、活版印刷術のことを意味し印刷関連の言葉でした。
しかし、デジタル化が進み現在では書体のデザイン・配列を意味する言葉になりました。

タイポグラフィで魅せる時のポイント

「それでは、早速作っていきましょう!」と言いたいところですが、タイポグラフィとかっこいい名前をしてはいますが、元をたどれば、「文字」です。文字は、読まれることで初めて文字としての意味を持ちます。
なので、「かっこいいから」「なんとなくいい感じ」など意味のないデザインはやめましょう。
タイポグラフィを魅せる時のポイントや気をつけなければならないことをまとめてご紹介します。

フォント選びは慎重に

フォントによって、ユーザーが受け取るイメージは大きく変わります。
なので、フォントの特徴をよく理解しユーザーの目線でフォント選びをしてください。

基本的なことでいうと、明朝体とゴシック体では全く違います。明朝体では、「高級感」や「誠実さ」ですが、ゴシック体では、「親近感」や「柔らかさ」など反対の意味を持つので気をつけましょう。

フォントの種類は少なめに

多くのフォントを使いたいがために、よくミスする方が多いのですが、基本的に使用フォントは3つほどで十分です。
フォントが多いと、とても読みづらくまとまりのない文章に見えてしまいますので気をつけてください。
文字でデザインするはずが、文字でデザインの邪魔になりかねません。

意味のないアライメントのズレは無くすように

アライメントとは文字寄せのことです。
タイポグラフィ以前の問題かと思いますが、意識しないとズレていることもあるので気をつけましょう。
また、読みやすいように基本的に左寄せで記載することも重要です。

文字は適度に強調するように

文字の大きさ・太さなどがすべて同じときの場合、ユーザーはそこに書かれている情報を全く理解してくれません。
見出しや小見出し、本文のフォントに適度の変化を持たせることで、効果的に読ませることが可能です。

行間は適切に

基本的に160~190%ぐらいが読みやすい行間となっています。
行間が狭すぎると、とても読みづらくなりますのでゆとりをもって調整するといいと思います。
ただ、内容次第で変わると思いますので、適切に判断をしてください。

カーニングは丁寧に

すべての文字が、それぞれ異なる余白を持っています。
ただ単にテキストを記入しただけでは、カーニング(文字間)はバラバラでまとまりのない状態です。
特に、カタカナの「ト」や「ッ」などは調整が必要です。

可読性を大切に

背景に画像が敷いてあり、その上に文字が記載されているパターンがよくありますが、可読性をもたせるようにしましょう。
せっかく、かっこ良くデザインできたとしても、可読性が悪く文字が読めなければ何の意味もありません。
f-fujiwara_201604083.jpg

類似フォントの使用は控えるように

類似のフォントを見出しと本文に使ってしまうと、メリハリが無くなってしまいます。
お気に入りのフォントをたくさん使いたい気持ちはよくわかりますが、スタイルが全く違うフォントを組み合わるようにしましょう。

文字の比率変更はしないように

大きさが足りないから、狭いからなどの理由で比率を考えず文字を引き延ばしたりしないようにしてください。
画像の比率を変えないようにデザインを作るのと同じで、フォントも一つのデザインとして扱ってください。

余白は広めに

通常、デザインをする際に全体の要素のバランスなどを考え、きちんとした余白を取ると思いますが、それと同様に、段落など文字と文字の境目は適度に余白を確保してください。
メリハリなど見た目にも関係しますが、文字の読みやすさにも関わってきます。

まとめ

デザインもパターン化してきており、細かい部分でクオリティ面の差が大きくついてくるようになりました。
タイポグラフィもデザインなので、ぜひ文字の魅せ方に注意して作成するとより良いデザインになるのではないでしょうか。
ただ、あくまでもタイポグラフィは「文字」なので読みやすさを大前提に作成をするようにしてください。

Web制作でお困りの方はWeb制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

Webデザイン

デザインガイドライン作成

レスポンシブWebデザイン

text_totop