知っといて損はない、魅力的なヘッダーデザインを作成するための目的・用途別の指南書。（photoshopなどを使用するデザイナー向け）

ホームページやブログ・コンテンツサイトに欠かすことのできないヘッダー（アイキャッチ）が果たす役割はとても重要です。

ユーザーがサイトに訪れた瞬間に嫌悪感を抱けば即離脱します、その判断は3秒以内だとか・・、どれほど手の込んだ有益なコンテンツを創造しようともユーザーに届く前にブラウザを閉じられてしまえば何の意味もありません。

ウェブサイトにおいてどうすれば効果的にユーザーの視覚に訴えることができるのだろう？

クライアントに「カッコイイヘッダーを作ってよ！」と言われても単純にカッコよくキレイに魅せるヘッダーを完成させればいいと言うわけではなく、どのようなターゲット層に向けて何を発信していくウェブサイトなのか？を十分に把握する必要があります。

しかし、いくらヒヤリングしようと試みてもコンセプトという基本概念をちゃんと理解したうえで依頼してくるクライアントはほぼ皆無というのが現実なので、曖昧な感覚で指示されるままに作成してしまうと「やっぱりここ赤にして！」など修正に追われことになります。

そのようなことが無いように、私たちデザイナーがヘッダーの持つ役割をしっかりと理解し自ら提案していくことはもちろん、そのウェブサイトを活用するであろうユーザーをクライアント以上に想うことが魅力的なヘッダーデザインを作成する秘訣と言えます。

ヘッダーとアイキャッチ画像の認識は混同されがち。

ここでは、ヘッダーとアイキャッチの認識が混同してしまわないように分けて考えます。

通常コーポレートサイトなどで良く見られる【ロゴマークやナビゲーションなどがあるサイトの一番上にある部分をヘッダー】、【サイトの一番目立つ部分のユーザーを惹きつける役割を果たす画像をアイキャッチ】と呼びます。

アメブロなどで良く見られる芸能人ブログは本人の写真を用いてデザインされたものが多いですが、この部分はアイキャッチの役割をもったヘッダーと認識して良いでしょう。

個人ブログ	コーポレートサイト	コンテンツブログ
自己表現・交流を図るもの	ブランディングを目指す	マネタイズを目的とする

この記事では正確に言うとヘッダーではなく ↑ ピンク部分にあたるユーザーを惹きつける効果的なアイキャッチデザインの指南書をお伝えします。

あなたのサイト運用にマッチングした解説を ↓ から読み進めてください。

また、サイトの目的・用途に応じてアイキャッチの意味合いは全く変わるということを理解しているデザイナーはクライアント信頼を勝ち取ります。もしあなたがウェブデザイナーであれば3つとも読み理解し今後の制作に役立ててください。

目的・用途別で考えるヘッダー（アイキャッチ）の役割

個人ブログ	コーポレートサイト	コンテンツブログ
アメブロ・ライブドアなど	会社のホームページなど	アフィリ・アドセンスなど

純粋にロゴ部分やナビゲーションを含んだいわゆるヘッダーデザインを作成する方法を探している方にも無駄な情報にはならないと思うのでお付き合いください。