Webデザインをしていると、
「意味を持ってデザインせよ」とお叱りをよく受けるので
自分への備忘録としても。。
皆さんサイトを見るとき、
どんなところについつい目が行っちゃいますか？
今回は「タイポグラフィーで『視線』を集める。」ということで、
タイポグラフィーなんて横文字を使いましたが要は文字で『視線』を集める方法です。
大きさで『視線』を集める。
えがおグループさんの採用サイトを例に見てみましょう。
いきなり、「CHALLENGE」がパワフルに視線を集めます。
もうちょっとスクロールすると、「超える」の文字に視線が行きますね。
これは、「超える」のフォントの大きさ・太さが他の文字の大きさに”比べて”大きいがゆえに視線を集めます。他の文字との差異が大きくかつ、可読性が高い（今回の場合は純粋にデカイ）と情報の優先順位が高くなる傾向にあります。
フォントの種類で『視線』を集める。
次はSINCEさんの公式サイトを見てみましょう。
このサイトでは、見出しは「明朝体」で上品な印象を、
地の文は「ゴシック体」で可読性を高めています。
ファーストビューの印象も相まって、その後の見出しに『視線』を誘導してユーザーの可読性をあげることに成功しています。
多くのサイトで見出しに英語が使われているのも同じような効果を狙ってたりします。
文字詰めで『視線』を集める
次はRINNさんの公式サイトを見てみましょう。
ファーストビューから少しだけスクロールしてみてください。
MEOW！
思わず、『視線』を誘導される仕掛けです。
動きによるインパクトもさることながら、文字一つ一つの間隔が非常に広く取られていることに注意してください。
実はファーストビューのロゴと見出しの文字詰めも地の文より少し広く取られています。
まとめ
タイポグラフィーで『視線』を集める手法を見てきました。
① フォントの大きさや太さで
② フォントの種類で
③ フォントの文字詰めで
①を除いてどれも基本的に１種類で使われることは少ないです。
基本的に他の個所よりもなにかしら異なっている（コントラストが強い）場所に『視線』は誘導される傾向にあります。
そのためWebデザインでは、色、動き、タイポグラフィーなどでコントラストを作っていきます。
しかし、タイポグラフィーでコントラストをつけるときは、乱用するととっ散らかって、かえって可読性の低下という本末転倒な結果を招きやすいので慎重にデザインする必要があります。