見出しのパターンについて考える

Date:

Share post:

見出しって大事ですよね。

ウェブサイトやポスターなどの広告媒体もそうですが、
見出し、というのは本文を読ませるための大切な導入部分となります。

ブログの見出しなんかもそうですよね。
内容を読ませたくなるような魅力的なキャッチがあるかないかで
クリック率はだいぶ変わってきます。

見出しの内容はとても大事です。

しかしながら、同じぐらい大切なのはその見せ方。
どんなに良いことが書いてあっても、読者の目に留まる工夫がないと、
見出しですら人は読み流してしまいます。

そのため、デザインする上で見出しを見出しとわかるよう
しっかり本文と区分けしてみやすくしてあげる工夫をデザイナーは考えなければいけません。

あくまで状況に応じて試行錯誤することが大切ですが、
見出しにばかり工数を割くわけにもいかないので、
いくつかパターンを持つことも大切かと思います。

ということで、今回は見出しのパターンについて考察してみました。

①ジャンプ率を変えるパターン

参考サイト:JAXA 有人宇宙技術部門

見出しと本文のジャンプ率を変える方法です。
見出しを大きくして強調し、見出し→本文への視線誘導をスムーズにします。
過度な装飾を加えずとも読みやすい王道パターンです。
このジャンプ率の変化に加えて、様々な装飾パターンを組み合わせることが多いですね。

②余白で魅せるパターン

参考サイト:パーソナルジム「comme」

見出しと本文の余白やレイアウトを変えてあげる方法です。
ジャンプ率が少なくても、余白の魅せ方次第で見出しの誘目性を上げることができます。
ジャンプ率を上げると目立つ分、少し元気なデザインになりがちなので
余白重視の調整は、落ち着いた雰囲気を出したい時などに有用です。

③英語を組み合わせるパターン

参考サイト:拉麺ししまる

装飾や補助として英語を組み合わせるパターン
日本語+英語という多言語を組み合わせることで情報量が上がり、
注目度が増します。

④アイコンやイラスト組み合わせるパターン

参考サイト:こどもさんかく歯科

文字の横や上などにアイコンやイラストを組み合わせたパターンです。
見出しの内容を間接的に伝えつつ、存在感をアップしてくれます

⑤見出しの書体自体を装飾orフォントを変えるパターン

参考サイト:「すっぽん小町」公式ブランドサイト

見出しに特殊なフォントを使用したり、装飾するパターン。フォントが個性的になることで誘目性が増し、自然と目が止まるようになります。袋文字など派手めの装飾をすることでも、同じ効果が得られます。個性を強調したい場合はオススメの方法です。
ただ、あまり装飾しすぎると可読性や判読性が悪くなってしまう恐れがあります。
また、見出しだけ個性的になりすぎて他の部分との統一感がなくなり、
逆にダサくなってしまったりもするので、扱いには注意が必要です。

⑥罫線で装飾するパターン

参考サイト:下川研究室

見出しの上下左右に罫線を引いて装飾したパターンです。
罫線の長さや太さ、位置、本数などによって雰囲気に違いが出るので、シンプルながらも
個性的なデザインが作れます。

⑦縦書きパターン

参考サイト:Tne Okura TOKYO

見出しを縦にしたパターンです。本文と書式が違うことで、自然と見出しと本文の区切りが明白になります。
明朝などを使った場合は日本の縦書き書式と雰囲気がマッチしますので、和風なデザインなどにはぴったりなパターンですね。

⑧色つけパターン

参考サイト:福岡医健・スポーツ専門学校

見出しに色をつけるパターンです。色をつけることでブランドカラーを強調したり、画面を明るくできます。
ジャンプ率+濃いカラーと組み合わせたりすると、強いインパクトを出してくれます。

いかがでしょうか?
単純にジャンプ率を変えたり、色を変えたり、本文との間隔を
開けてあげるだけだったり…簡単な工夫でも、ググッと人の視線を引きつけるポイントになります。

視線誘導を考えつつ、それぞれ目的のデザインに沿った魅せ方を考えられるよう
常に新しいアイデアを考えられる柔軟性を持っていきたいですね。

Related articles

LaravelでPDF生成(mpdf)

EC関連のシステムなどでは請求書や領...

我流Flutter学習ステップ(6)スマホでの動作...

本シリーズ(?)の最初の投稿で書いた...

その「平均値」に意味はあるのか?

最近「平均」に関して思うところがあっ...

遅まきながら、Vagrant(Virtualbox...

前回は、pumaを常時起動のユーザーサ...