デザインのトレンド

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


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

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

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

▼目次

ジャンプ率パターン

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

1. 角館伝四郎 DENSHIRO

名称未設定-19
http://denshiro.jp/

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

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

名称未設定-18
http://hr.yahoo.co.jp/

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

3. Tens Sunglasses:Filter Your World

名称未設定-17
http://www.tenslife.com/

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

罫線パターン

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

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

名称未設定-16
http://ovq.jp/

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

5. Pasco|MY BAGEL(マイベーグル)

名称未設定-15
http://www.pasconet.co.jp/mybagel-special/

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

6. Hair & Life Design TREE

名称未設定-14
http://treehair.com/

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

縦書きパターン

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

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

名称未設定-13
http://www.yaegaki.co.jp/sake/

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

8. 有馬温泉 上大坊(かみおおぼう)

名称未設定-12
http://www.kamiobo.com/

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

9. holo shirts.(ホーローシャツ)

名称未設定-11
http://holoshirts.com/

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

カラーパターン

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

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

名称未設定-10
http://www.broadmedia.co.jp/

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

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

名称未設定-9
http://www.jins-jp.com/jins-screen/

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

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

名称未設定-8
http://wildwagon.co.nz/

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

アイコン&イラストパターン

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

13. 黒川温泉 深山山荘

名称未設定-7
http://www.miyama-sansou.com/

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

14. TOKYO FM WORLD

名称未設定-6
http://www.tfm.co.jp/tfmworld/ja/

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

15. VIEWING(ビューイング)

名称未設定-5
http://viewing.oita.jp/

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

その他

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

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

名称未設定-4
http://www.dartisan.co.jp/

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

17. TABLIER(タブリエ)|PLANTS&SALON

名称未設定-3
http://tablier-3.com/

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

18. Pelamp

名称未設定-2
http://komesan-design.jp/

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

まとめ

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

それではまた!


この記事を書いた人

藤田
藤田 デザイナー 2013年入社
デザイナーの藤田です。 野球とビールと猫が好きです。 ジョブズの「来る日も来る日もこれが人生最後の日と思って生きるとしよう。」という言葉が好きです。言葉の通り毎日、全力投球で頑張っております。 どうぞ、よろしくお願い致します。