webデザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スリームデザインの無料メールマガジン

ピックアップ記事

  1. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  2. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  3. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  4. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  5. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…

関連記事

  1. フォトショップ

    photoshopで肌をなめらかでキレイに仕上げるとっておきの方法。

    photoshopで肌をなめらかに仕上げたいと思った場合にはぼかしを使…

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル

よく読まれている人気の記事

最近の記事

  1. Photoshop CCのメニュー文字やツールバーが異常に小…
  2. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単な…
  3. 「コレがやりたかった!」GIFアニメ(動く画像)のPCモック…

思考系のおもろい記事

ブログラ
  1. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  2. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  4. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  5. キュレーション

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
PAGE TOP