公式LINEに登録する

年収1000万円を実現したいデザイナーへ

実践的ノウハウ・情報をお届け

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スリームデザイン

1978年夏生まれの熱しやすく冷めやすいB型。群馬県在住の累計360万PVブロガー。趣味はデザインとマーケティングと玄米ご飯。 フリーランス時代に独学で身に付けた技術を活かし、世界規模のデザインコンテストで日本人初の大賞を受賞&Photoshopの専門書を出版。 ブログ集客のエキスパートとして企業や個人のコンサルティングをしながら、コンテンツマーケティングやコピーライティングを手掛けるブログマーケターである。

最近の記事
おすすめ記事
  1. イケてる見た目に着せ替えチェンジ!ブログの運営目的に適したWordPressテーマに変更する方法

  2. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそうな書籍を4選しました。

  3. Photoshopで立体感や空間を表現してリアリティのある世界観を創る方法

  4. 「ネーミング」を考える前に理解しておきたいその重要性について

  5. Phostohopの切り取り方法をマスターして画像コラージュ作品を作ってみよう!

  6. 中性脂肪が6ヶ月間で208→73にガチ下げ!42歳の私が試した三方向アプローチの結果がヤバイ、、

  7. 「いつも締め切りに追われてしまう」そんな人がミッションを成し遂げるために克服しておきたい3つの心理メカニズムについて

  1. 中性脂肪が6ヶ月間で208→73にガチ下げ!42歳の私が試した三方向アプローチの結果がヤバイ、、

  2. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画のまとめ

  3. わずか10秒っ!Photoshopで部分的に色を変えたいときの【色の置き換え】の使い方&動画解説ダイジェスト

  4. 「ちょっと待って!」Photoshopの初心者にありがちな間違った5つの使い方とスキルが飛躍する解決策

  5. Photoshopユーザー必見!無料になったNik Collectionのヤバすぎる使い方

  6. 【保存版】Photoshopの技術を一気に飛躍させるための日本語で学べる実践テクニック7連発

  7. これだけはブクマしておきたい!Youtubeなどの動画制作で”マジで使える”フリー音楽素材と効果音サイトのまとめ

おすすめ記事

ページ上部へ戻る