Webデザインの95%はフォントで決まる?!│Web制作会社のデザイン関連コラム

Columnコラム

Webデザイン

Webデザインの95%はフォントで決まる?!Webデザイナーなら知っておきたい3つのポイント

Webデザインの95%はフォントで決まる?!Webデザイナーなら知っておきたい3つのポイント

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

Webデザインの95%はフォントで決まる?!Webデザイナーなら知っておきたい3つのポイント

昨今、Webフォントが多用される様になってきました。
また、レスポンシブなどシンプルなデザインが流行ってきており、フォントによってデザインのテイストがガラリと変わります。
そのため、Webデザインにおける文字の重要性は結構高いのではないでしょうか?

今回はwebタイポグラフィに関して考えていきたいと思います。

タイポグラフィとは

タイポグラフィとは簡単に言うと「文字のデザイン」の事です。
情報伝達に適した書体や大きさ、字間により注目度や可読性、美しさ等への配慮が重要となってきます。
タイポグラフィというと、紙媒体での活用を考えられる方が多いと思いますが、実は、webデザインにおいても求められてきているのです。

webタイポグラフィの役割とは

タイポグラフィによる情報の伝達方法は大きく分けて2つあります。
文字を「魅せる」ことと、「読ませる」事です。

先ず、「文字を魅せる」という事を考えてみたいと思います。
「魅せる文字」はキャッチコピーやロゴなどに良く用いられます。
例え同じ文言だったとしても書体やウェイトなどのデザイン次第で情報の伝わり方は変わってきます。ブランドイメージを正しく伝え、企業イメージを向上させるためにもタイポグラフィは重要な役割を担っているのです。

一方、「読ませる文字」は本文等の文章に用いられます。
「魅せる文字」とは少々異なり、正しい情報内容を伝える事が求められているため、見易さと読み易さを重視ししなければなりません。
webフォントが良く用いられ、「魅せる文字」の様に細かな調整が難しいですが、CSSで簡単な指定をするだけでも、大幅に見え方は変わってきます。
この「読ませる文字」を意識したデザインはユーザビリティに配慮したデザインという事もできます。

「魅せる文字」にせよ、「読ませる文字」にせよ、より良く見せる事はデザイナーにとって大事なスキルです。
基本的な知識を身に付けてストレスの無いWebデザインをしたいものです。

webタイポグラフィの3つの捉え方

ちょっとした配慮で情報の受け取り易さやイメージの伝わり方が変わってきます。
ここでは、幾つかある中の基本的な3つのポイントをご紹介致します。

字間を調整する

webfont95_15030201.jpg

ただ単に文字を打っただけでは左右の余白が異なって見える事があり、粗雑な印象を与えてしまいます。
そのため、文字詰め(カーニング)を行い字間の調整をする必要があります。

大きさを変える

webfont95_15030202.jpg

同じ書体で同じサイズ指定をしていても見た目の大きさは異なる事があります。
特にアルファベットと平仮名・カタカナを用いる際には大きさがバラバラになってしまいます。
文字に合わせて大きさのバランスを整えていきます。

これとは逆に、敢えて大きさを不揃いにして文字に動きを出す事があります。
それにより、特定の情報を強調させる事が出来ます。

デザインするものに合わせて調整を行いましょう。

行間と行長を調整する

webfont95_15030203.jpg

複数行にわたる文章に関しては行間と行長が読みやすさに大きく影響を与えいます。
書体やサイズなどの条件によって異なってくるのですが、行間は150~190%、行長は最長で30~40文字、最短で13~15文字程度が一般的に読み易いとされています。

最後に

今は優良なデザインをまとめたサイトもあるので、その様なサイトを活用しながら様々なwebサイトを見比べてみてください。
文字の見せ方・表現方法によって伝わり方の違いを実感できるはずです。

関連するサービス

Webデザイン

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

レスポンシブWebデザイン

UI/UXデザイン

text_totop