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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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