WEBデザインにおけるタイポグラフィ効果について解説していこうと思います！
美しく読みやすいサイトを作るにはタイポグラフィはとても重要な役割を果たしています。
WEBデザインにおいて最も多く使用されているのが『文字』であり、コンセプトに適した書体を選択したり、文字のサイズや行間、太さを変化させてユーザーにわかりやすく情報を伝えることはとても大切です。
タイポグラフィとは
文章を読みやすく見せるデザインの手法と、文字で1つのデザインを作る手法の2つの意味合いがあります
私たちが普段何気なく見ている本やWebサイトにも、タイポグラフィによってスラスラと読めるように考えられて文字が配置されており、広告で自然と目に入ってくる文字も計算されたタイポグラフィによるものです。
タイポグラフィと聞くと、美しくデザイン性の高いものがイメージされるかもしれませんが、違和感や引っかかりがなくスラスラと文章を読めるタイポグラフィも、デザイナーの中では高く評価されています。
タイポグラフィの基本テクニック
複数行にわたって読ませる文章では行間が大切になります。CSSのline-heightを使って調整がおすすめです。
文字サイズやフォントによっても左右されますが、欧文だと120％〜、日本語だと150％〜200％程行間を空けると読みやすくなると言われています。また、アクセシビリティのガイドラインでは1行間の文字は、全角の場合40字以内が推奨されています。
ユーザーは、斜め読みや読み飛ばしをしてサイトの内容を把握します。見出しと本文にはメリハリをつけて文章の文字にコントラストを作りましょう。
一般的な本文のフォントサイズは14px~16pxが多く、見出しは2倍以上のサイズを設定し、文字の太さでも差別化をするとわかりやすい見え方になります。
フォントの基本を理解する
フォントは和文と欧文に分けられ、明朝体やセリフ体は線の幅に変化があり、うろこやセリフと呼ばれる飾りがあります。
飾りがなく、線の幅が一定のフォントをゴシック体、サンセリフ体と言います。
和文フォントは、大きく分けて行書体、明朝体、ゴシック体、手書きに分けられ、欧文フォントはスクリプト体、セリフ体、サンセリフ体、手書きに分けられる。
手書き文字を含む江戸書体やポップ体などの特殊な装飾書体は、種類が豊富なためこれらの書体はタイトルなどのデザイン性を重視する場所におすすめです。
可読性を考慮して本文全体には使わないようにしましょう
フォントの印象を理解する
フォントの印象を知り、サイトの使用目的に合わせた適切なフォントを選択すると、ブランドの共感度が上がり効果的に見せることができます。
ライト・ボールド
ライト（文字が細いフォント）は、フェミニンで華奢な美しさがあります。背が高くスマートな印象で、現代女性の美的感覚にマッチしています。
ボールド（文字が太いフォント）は、力強くポップな印象です。可読性が高く目立つため、見た人にインパクトを与えます。
どんなに小さな表示でも、ライトを選ぶかボールドを選ぶかで、顧客がブランドに抱くイメージは大きく変わります。
マーケティングや顧客ロイヤリティの確立には、細部へのこだわりが大切です。
角ばったもの・丸みのあるもの
角ばったフォントは、危険さ、力強さ耐久性を表現したい場合に最適です。
丸みのあるフォントは、柔らかさ、心地よさ、女性らしさを出したいときに適しています。
幼児向けブランドや美容ブランド、スイーツなどに使うフォントとして便利です。
小文字・大文字
小文字のフォントは、思いやりやイノベーションを想起させます。
そのため、福祉系の企業や、クリエイティブ制作に関わるブランドに合っています。
大文字のフォントは、より権威的なイメージを与えます。
BMW、Nike、Sonyなどの世界的に有名な大型ブランドでは、ロゴを大きく使うことで、ブランドの確固たる地位を表現しています。
大文字と小文字を適切に組み合わせ配置することで、読みやすさはアップします。
背の高さ
背の低いフォントは重く安定した雰囲気があり、背の高いフォントは軽く華麗なイメージがあります。
人間は無意識に、背の高さから重厚感をおぼえます。そのため、背の低い横文字のフォントを使えば、耐久性と安定感がある、ずっしりとしたイメージをブランドに与えられます。
＜まとめ＞
文字を使うことが多いWebサイトではタイポグラフィの知識は必要になります。
文字のデザインやフォントは相手にどう見せるかを印象づける心理効果もありますので是非活用してみて下さい！