デザインの参考にしたい！今っぽい見出しデザインまとめ18選

こんにちは、デザイナーの藤田です。
デザインをやっていると、見出しのデザインに悩むことって結構ありますよね！

自分のデザインストックを増やすためにも、今回のブログでは今っぽい見出しデザインをタイプ別にまとめてみました！

▼目次

• ジャンプ率パターン
• 罫線パターン
• 縦書きパターン
• カラーパターン
• アイコン＆イラストパターン
• その他

ミニマムなデザインでは見出しに過度な装飾を加えずに、本文に対し見出しの文字サイズを大きくすることで見出しを目立たせるサイトが近年多いですね。
以下でご紹介するのは、見出し周りの余白感やジャンプ率の比率がきれいだなと感じたサイトです。

1. 角館伝四郎 DENSHIRO

http://denshiro.jp/

見出し周りの余白を広めにとることで、高級感が感じられるデザインになっています。

2. ヤフー株式会社｜採用情報

http://hr.yahoo.co.jp/

ここまでジャンプ率を付けると潔いですね！

3. Tens Sunglasses：Filter Your World

http://www.tenslife.com/

見出しのフォントの種類が本文のフォントと大きく変わると目が行きますね。

個人的な感想ですが、最近一番見かける見出しパターンが、見出し周りをシンプルな罫線で装飾するパターンだと感じております。
罫線の太さや長さ、見出しや本文との余白のバランスがきれいだと素敵なデザインになりますね！

4. 株式会社オバケ｜ovaqe inc

http://ovq.jp/

カナ文字のデバイスフォントを使って見出しをきれいにレイアウトしているのが、参考になります。

5. Pasco｜MY BAGEL（マイベーグル）

http://www.pasconet.co.jp/mybagel-special/

罫線にちょっとしたあしらいを加えると、オシャレな雰囲気になりますね！

6. Hair & Life Design TREE

http://treehair.com/

罫線をギザギザや波型にするとまた違った印象に！

見出しを縦書きにすると、視線の動きを変えられたり、左右もしくは上下に大きな余白を作れるレイアウトになるため、シンプルに見出しを目立たせるには最適な手法かと思います。
またデザインの流れが見出しで変わりることでメリハリがつくので、個人的に最近すごく気になっている見出しパターンです。

7. ヤヱガキ酒造株式会社 ｜八重垣

http://www.yaegaki.co.jp/sake/

『八重垣』の他、日本酒、焼酎、梅酒の醸造を行う寛文6年(1666年)創業の蔵元。ジャンプ率を大きくつけることでかなりインパクトのあるデザインになっています。

8. 有馬温泉 上大坊（かみおおぼう）

http://www.kamiobo.com/

縦書きの見出しと横書きの本文のレイアウトが素敵です！

9. holo shirts.（ホーローシャツ）

http://holoshirts.com/

かなり勇気がいるデザインですが、ゴシック体の縦書きは斬新かつおしゃれですね。
和の印象をそんなにもたせたくない場合にも使えます！

見出しに色味を加えることで、閲覧者に与えたい印象を強くしたり、コーポレート（ブランド）カラーを強く打ち出せるデザインになります。
見出し自体の誘目性も上がり、一石二鳥です。

10. ブロードメディア株式会社

http://www.broadmedia.co.jp/

見出しに色味を付けることやセクションの句切れをしっかりとつけることで全体的にメリハリのしっかりとした、とても好印象なデザインになってます。

11. 株式会社ジェイアイエヌ｜JINS

http://www.jins-jp.com/jins-screen/

誘目性の高い赤色を見出しに使うと、インパクトも強くなりますね。

12. Wild Wagon Co｜STATIONERY GOODS for the wild ones

http://wildwagon.co.nz/

罫線パターンとの複合技ですが、ちょっと色味を足したいときや、差し色を加えたいときに有効的なデザインです。

文字以外の要素を見出し周りに配置すると、文字を読み込まなくても、どのような内容が記載されているかが伝わりやすくなります。また見出し自体の誘目性も上がる効果があります。

13. 黒川温泉 深山山荘

http://www.miyama-sansou.com/

幾何学的なアイコンの形状が今っぽくておしゃれです。

14. TOKYO FM WORLD

http://www.tfm.co.jp/tfmworld/ja/

ラジオの象徴である電波を見出し周りに配置することで、閲覧者にサービスの印象が強く残るデザインになってます。

15. VIEWING（ビューイング）

http://viewing.oita.jp/

イラストを見出し周りに使用すると全体のトーンが柔らかくなり、親しみやすいデザインになりますね。

上記のパターンには含まれないような、個性的で今っぽい見出しデザインもご紹介します。

16. STUDIO D’ARTISAN（ステュディオ・ダ・ルチザン）

http://www.dartisan.co.jp/

見出しを円形に配置し、親しみやすくかわいらしい雰囲気になっています。

17. TABLIER（タブリエ）｜PLANTS＆SALON

http://tablier-3.com/

手書きフォントにすることで、こちらも親しみやすく柔らかい雰囲気のデザインになっています。

18. Pelamp

http://komesan-design.jp/

画像では伝わりづらいですが、アニメーションを加えることによって見出しの誘目性を高めています。

まとめ

見出しまわりの余白感やあしらいがまとめてるサイトを最近あまり見なかったのでまとめてみました。こちらの記事が少しでもみなさまのデザイン業務の手助けになれば幸いでございます。

それではまた！