読者の目を引く50のブログのヘッダー

Brilliantly-Designed-Blog-Headers-04

ブログのデザインをするのは簡単だと言われています。無数のテンプレートから選んで、それで終わり。確かに、それはそうでしょう。

しかし、既存のテンプレートに画像を追加したりテキストを挿入したりすることで、全く別のブログに見えるほど様変わりすることがあります。ますます盛んになってきているブログ業界においては、他と同じような見た目のブログでは読者を得ることはできません。同じ分野に関するブログであっても、少しだけ個性を加えて他とは違うところを見せつけることで、記憶に残るブログになることができるのです。

印象に残るようなブログを作ることは、必ずしも一からブログをデザインしなければいけないということではありません。テンプレートを使い、その大部分を流用しながら、一部だけを特別なヘッダーに置き換えるだけで、魅力的な見た目を手に入れることができます。そうしてブログの雰囲気を作ることもできますし、見た目からそのブログの内容が伝わりやすくすることもできるでしょう。複雑なことは何もありません。ただ少しだけ変えるので充分なのです。以下の50のブログは、強いインパクトを与えられ、その内容が分かりやすくなっている素晴らしいヘッダーを採用している例です。一緒に見ていきましょう。

01. イラストを使う

01_The_Everywhereist-tb-800x0

The Everywhereist

The Everywhereistは、Geraldineによる旅行ブログです。ヘッダーに美しいイラストを使い、また全体でも同じようなイラストを活用しています。パスポートや地球、写真のフィルムといったアイコンから、このブログが他の国を旅する内容であることが何となく予想できるでしょう。

02. タイトルをそのままマークにする

02_52_Weeks_UX-tb-800x0

52 Weeks of UX

52 Weeks of UXは、そのタイトルの通り、52週間にわたってUX(ユーザーエクスペリエンス、ユーザー体験)について書かれているブログです。そのヘッダーはシンプルかつ凜とした印象で、これからヘッダーからして何を読むことができるのかを期待させてくれます。

03. 文字によるアプローチ

03_Trent_Walton-tb-800x0

Trent Walton

Trent Waltonは、文字を使ったヘッダーを活用しています。読みやすく楽しげなほどに大きく、それでいて綺麗なフォントが用いられています。このサイトの記事は全て素晴らしくデザインされており、それぞれが異なるようになっています。

04. ちょっと動かしてみる

04_VOTD-tb-800x0

VOTD

VOTDは、そのロゴにちょっとした動きを加えることで面白さを演出しています。このように要素に動きを追加することで、面白みが生まれるかもしれません。

05. 表現の強いフォントを使う

05_Wanderlust_Project-tb-800x0

The Wanderlust Project

表現の強いフォントを使うという選択肢を選んだのがThe Wanderlust Projectです。同ブログでは同じフォントが何度も使われており、これにより統一感が生まれています。ヘッダーで画像と共に使うことで、新しい記事への入り口にしているのです。

06. 白地に黒のテキストは鉄板

06_Socialite_Family-tb-800x0

The Socialite Family

雰囲気作りにフォントを使う別の好例として、The Socialite Familyを見てみましょう。コンテンポラリーなライフスタイルを送る人々を紹介する同ブログは、美しい写真と凜としたレイアウトを特徴としています。

07. ロゴを目立たせる

07_Premium_Pixels-tb-800x0

Premium Pixels

Premium Pixelsは、素晴らしいデザインのリソースやチュートリアルをシェアしてくれるブログです。そのヘッダーとなっているのはクールなピクセルのロゴで、更にマウスを重ねると変化します。それ以外にも参考になるような要素がたくさんあるブログなので、ぜひ訪れてみると良いでしょう。

08. フォントとイラストを組み合わせる

08_OneHungryMama-tb-800x0

One Hungry Mama

One Hungry Mamaでは、フォントとイラストをヘッダーに用いることで、そのブログの内容が子供向けの料理に関するものであることを効果的に伝えています。

09. ヘッダーのサイズを小さくする

09_New_Min-tb-800x0

The New Minimum

The New Minimumは、ヘッダーを敢えて細く小さなバーにしているデジタルマガジンです。そのバーの中に雑誌名と何巻目であるかが示されているのです。

10. 大胆に色を使う

10_Joy_The_Baker-tb-800x0

Joy the Baker

Joy the Bakerでは、カラフルな水彩画のような色合いをヘッダーに活用しています。白い背景に黒のフォントでブログ名を表示することで、非常に魅力的な見た目となっています。特にケーキなどがヘッダーにあるわけではありませんが、Baker(パン屋)という言葉から、どんな内容のブログなのかは想像がつきやすくなっています。

11. 大きな画像を使う

11_I_Am_Food-tb-800x0

I Am a Food Blog

I Am a Food Blog――その名の通り、食べ物に関するブログです。このブログが特徴的なのは、非常に細いナビゲーションバーを活用し、画面一杯に広がる画像をヘッダーとして表示している点です。ランディングページを訪れた人はこの美しい写真を見て、まさに名前通りのブログだと感じることになるのです。

12. タイトルをちょっと変化させて表示させる

12_Lark_Linnen-tb-800x0

Lark and Linen

Lark and Linenはインテリアデザインのブログで、ヘッダーに効果を加えたテキストを活用しています。ブログ全体ももちろん美しく、綺麗な写真と素晴らしいフォントの組み合わせでいっぱいです。

13. タイトルだけを使う

13_Keiko_Lynn-tb-800x0

Keiko Lynn

Keiko Lynnは、フォントとイラストを用いて素晴らしいヘッダーを作成することに成功した好例のひとつです。

14. 大きすぎるくらいのフォントを使う

14_Good_Moods-tb-800x0

Good Moods

大は小を兼ねると言います。Good Moodsは大きなフォントをヘッダーに使うことで、その他のブログよりも目立つ存在になることに成功しています。

15. クリエイティブに模様を作る

15_Five_oclock_Cocktails-tb-800x0

The Five O’Clock Cocktail Blog

The Five O’Clock Cocktail Blogは、カクテルグラスを配置することでそれを模様のようにし、ヘッダーとしています。このようにパターン配列によって模様を作り、色を追加するのを試してみるのも良いでしょう。

16. 三次元的なヘッダーを試してみる

16_Friends_Of_Type-tb-800x0

Friend of Type

Friend of Typeは、ヘッダーの中で刺激的なタイトルを表示しています。ページ自体に、トリックアート的な三次元的要素を付与しているのです。この大きな画像は、目を引くこと間違いありません。

17. ミニマルデザインを意識する

17_FVF-tb-800x0

Freude Von Freude Blog

美しい画像と味のあるロゴさえあれば、失敗する方が難しいというものでしょう。Freude Von Freudeは、世界中の様々なクリエイティブな人たちを紹介するブログで、ゴージャスなデザインを表示しながら素晴らしいコンテンツをまとめ上げています。

18. 素晴らしいロゴを活用する

18_Good_Design-tb-800x0

Good Design

Good Designでは、そのロゴを主役として扱っています。自身やブログに素晴らしいマークやロゴがあるなら、このようにそれを前面に押し出すのも良いでしょう。

19. 美しいスクリプトを使う

19_Floret-tb-800x0

Floret Flowers

Floret Flowersは、画面がスクロールされた際に、ヘッダーを折り畳んでナビゲーションリンクが残るようにしています。ユーザーがコンテンツに集中できるような、にくい仕掛けです。

20. ブログのマークを作る

20_Defringe-tb-800x0

Defringe

言葉やロゴの代わりに、ヘッダーとして抽象的なマークを使うというのも試してみると良いでしょう。その場合、モダンでフレッシュなものが良さそうです。Defringeはその参考になるかもしれません。

21. 素晴らしいフォントの組み合わせを試してみる

21_Homey_oh_My-tb-800x0

Homey Oh My!

Homey Oh Myでは、異なるふたつのフォントを組み合わせてヘッダーとすることで、ブログの内容を分かりやすく伝えることに成功しています。フォントを1種類でなく2種類使うことで、見た目にも面白く、刺激的なヘッダーになることもあるのです。

22. スライダーを駆使して情報を与える

22_Harper_Harley-tb-800x0

Harper and Haley

Harper and Haleyは、ナビゲーションバーとスライダーを組み合わせて優れたイメージ画像やちょっとしたテキストを目立たせています。新しいコンテンツや是非読んでもらいたいコンテンツを目立たせるのにとても良い方法です。

23. タイトルを横に寄せる

23_Lust_For_Life-tb-800x0

Lust For Life

通常、ブログタイトルは中央に寄っているものです。Lust For Lifeのように、それをずらしてみるというのも面白いでしょう。この例だと、タイトルは左上に、ダイナミックなフォントで配置されています。

24. とにかくミニマルに

24_lined_and_unlined-tb-800x0

Lined and Unlined

Lined and Unlinedは、Rob Giampietrloの個人的なアーカイブです。そのスタイルはとにかくミニマルで、テキストとアクセント程度の色だけがヘッダーとして使われています。

25. ロゴを真正面に

25_Lauren_Liess-tb-800x0

Lauren Liess

Lauren Liessもまた、クラシックかつエレガントなデザインのブログであると言えるでしょう。クリーンなヘッダーを白地に用いて、ロゴを中心に寄せるようにしてサイドにナビゲーションリンクを配置するという見た目は、きっと参考になるはずです。

26. とにかくエレガントに、凜として

26_La_Dolce_Vita-tb-800x0

La Dolce Vita

La Dolce Vitaの、クリーンかつシンプル、そしてテキストを前面に置いたデザインです。

27. 文字の種類を1種類に限定する

27_Mine_Is_Yours-tb-800x0

Mine is Yours

Mine is Yoursはミニマルを極めたデザインをしており、ナビゲーションリンクにもタイトルにもたったひとつのフォントを用いています。限定することでより多くを表現する手法です。

28. ミニマルなレタリングを活用する

28_Maiedae-tb-800x0

Maiedae

Maiedaeは、ヘッダーに素敵なレタリングを活用しています。これは、アトランタで開催されたMaiedae Mixerというイベントを開催した作者の親友の協力により書かれたレタリングとのこと。

29. 短く、スイートに

29_Nice-tb-800x0

Nice

NiceはTumblrを活用しているブログで、ミニマルなヘッダーとナビゲーションリンクを活用しています。短いからこそ魅力的ということもあるようです。

30. タイトルだけを表示する

30_Panic_Blog-tb-800x0

Panic Blog

ヘッダーとしてタイトルだけを表示しているのがPanic Blogの例で、単刀直入で迫力があります。

31. タイトルを写真の中に入れてしまう

31_The_Little_Green_Notebook-tb-800x0

Little Green Notebook

Little Green Notebookは写真による画像を活用し、ブログタイトルをその中に埋め込んでいます。DIY感のある、暖かみが感じられるデザインになっています。

32. コンテンツに関連する画像を作成する

32_The_Design_Tripper-tb-800x0

Design Tripper

Design Tripperのヘッダーは、見た目に面白く、間違いなく目を引くオリジナリティを発揮しています。

33. グリッドを活用する

33_Storyboard-tb-800x0

Storyboard

StoryboardもTumblrを用いたブログのひとつで、ヘッダーをコンテンツと結合しています。このブログではグリッドが頻繁に用いられていて、レイアウトが揃えられ、結果としてユーザーフレンドリーにもなっています。

34. ヘッダーを使わない

34_Red_And_Toe-tb-800x0

Between Red and Toe

『ヘッダーを使わないことをヘッダーとする』という大胆な作戦もあります。これに成功しているのがBetween Red and Toeで、素晴らしい画像や写真とコンテンツを組み合わせた傑作ブログです。

35. タイトルとコンテンツを重ねる

35_This_is_Glamorous-tb-800x0

This Is Glamorous

シンプルながら理に適ったデザインです。美しくミニマル的なヘッダーとしてブログタイトルを入れ、そのエレガントなスクリプトを下のコンテンツに重ねるように配置しています。このThis is Glamorousはファッションやインテリアなどのデザインを紹介するブログです。

36. ロゴと画像を組み合わせる

36_Vintage_Revivals-tb-800x0

Vintage Revivals

Vintage Revivalsはロゴとブログタイトルを組み合わせて画像の上に配置しています。画像をヘッダーとするのは、ただ『タイトルとリンク』だけを表示するヘッダーに代わる有力な選択肢です。

37. コミック風の見た目を試してみる

37_Thethirstywench-tb-800x0

The Thirsty Wench

The Thirsty Wenchは、まるで漫画の中から飛び出してきたかのような画像をヘッダーとして活用しています。そのイラストはブログの内容に関連するもの。これは真似をする価値のあるアイデアかも知れません。

38. とにかく洗練させる

38_TheRivetPress-tb-800x0

The Rivet Press

The Rivet Pressを見てみると、非常にエレガントなヘッダーと美しいデザインがブログ全体の雰囲気を作り出しています。グリッドを活用することで、ヘッダーの中でコンテンツを紹介しているのです。

39. タイトルを一番大きくする

39_The_Local_Palate-tb-800x0

The Local Palate

The Local Palateは、ヘッダーとなっているスライドイメージの上に大きなタイトルを表示しています。これにより、魅力的かつ面白いレイアウトが実現しているのです。

40. コントラストを意識する

40_Deaf_Pigeon-tb-800x0

Deaf Pigeon

Deaf Pigeonは、黒色でロゴを配置し、その周囲にナビゲーション項目を軽めのウェイトのフォントと薄い色合いで配置しています。見た目としてもヒエラルキーが分かりやすく、コントラストを上手に活用した一例であると言えるでしょう。

41. ブログのために素敵なロゴを作る

41_Decor_8-tb-800x0

Decor8

Decor8は、そのロゴを大きく、ヘッダーのど真ん中に配置しています。シンプルでクラシックですが、ブログのヘッダーとして決して廃れない選択です。

42. コンテンツに合わせてタイトルのスタイルを変更する

42_Chronicles_Her-tb-800x0

The Chronicles of Her

The Chronicles of Herでは、口紅で書かれたようなテキストが用いられています。ブログタイトルのスタイルをコンテンツに合わせたものにすることは、決してマイナスにはなりません。

43. スペースを活用してヒエラルキーを作り出す

43_Ceesk-tb-800x0

Ceeesk’s

たくさんの文字やフォントを使わず、代わりに空白を上手く利用することでヒエラルキーを生み出した好例です。Creeesk’sのヘッダーはコンテンポラリーなヘッダーの一例だと言えるでしょう。

44. コンテンツをビジュアル的に表すようなフォントを選ぶ

44_Car_Crush-tb-800x0

Car Crush

Car Crushは、印象的なスクリプトの上にそのタイトルを配置しています。美しくクラシックな、コレクター垂涎の車に関するブログとしては、こういったレトロなフォントの選択もアリです。

45. ロゴだけを使う

45_Book_Cover_Archive-tb-800x0

Book Cover Archive’s

もしもBook Cover Archive’sのロゴのように、見た目からしてどんな内容なのか分かりやすいロゴやマークがあるなら、それをヘッダーの唯一の要素として使うのも良いでしょう。

46. コンテンポラリーな見た目を目指す

46_70_PP-tb-800x0

70 Percent Pure

70 Percent Pureは、モダンかつクリーンなミニマリストを目指すならどうすれば良いかというお手本のようなブログです。

47. フォントに効果を入れる

47_Baking_Addiction-tb-800x0

My Baking Addiction

My Baking Addictionでは、テクスチャーとフォントを組み合わせたマークを活用し、それをナビゲーションリンクの隣に配置しています。

48. 大きく、大胆かつ美しく

48_Beauty_Boring-tb-800x0

Beauty Is Boring

Beauty Is Boringは、大胆に大きく配置した黒のテキストをヘッダーとしており、その下にナビゲーションリンクを表示しています。クリーンかつミニマルな、ぜひ試してみるべき組み合わせです。

49. コンテンツについて一行か二行程度表示する

49_24_Ways-tb-800x0

24 Ways

ヘッダーをブログのコンテンツに関する内容を表示する場所として活用することもできます。24 Waysは『ウェブオタクたちのための新しいカレンダー』としてこういったヘッダーを活用しています。

50. 単色のブロックを使う

50_I_Love_Typography-tb-800x0

I Love Typography

クラシックな方法ですが、しかしI Love Typographyがそうしているように、いつの時代も安定の方法です。

最後に

以上、50の素晴らしいブログヘッダーの例でした。様々なスタイルやテクニックが用いられたヘッダーによって、あなたの創造力を刺激できたなら幸いです。ぜひ、あなた独自の素敵なヘッダーを作るための参考にしてみてくださいね。