webデザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ピックアップ記事

  1. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  2. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  3. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  4. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  5. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…

関連記事

  1. webデザイン

    【※保存版】WEBデザイナーご用達の本当に使える商用フリーの素材サイトをまとめました。

    WEBデザイナーは技術はもちろん、手持ちのリソース(情報など)が多いほ…

  2. webデザイン

    境界線が複雑な模様やイラストを切り取りせずに合成する裏ワザ的フォトショップ【CS6】技術

    フォトショップで画像を合成させるためには、さまざまな切り取り方法がある…

  3. フォトショップ

    photoshopでアンディ・ウォーホル風なイラストを作ってみよう。

    ポップアートの旗手と呼ばれるアンディ・ウォーホル風なイラストをphot…

  4. フォトショップ

    「あれっ?色味が違う・・」フォトショップで印刷データを作る際に絶対に覚えておくべき3つのこと。

    フォトショップ初心者の方や趣味でデザインをやっている方の中には、印刷し…

  5. 3分の話

    3分でわかる想像力(創造力)を鍛える方法

    想像力はクリエイティブ(創造的)な仕事をする上でとても重要な要素です、…

  6. コピーライティング

    《書籍レビュー》脳科学マーケティング100の心理技術がおもしろい

    《顧客の購買欲求を生み出す脳と心の科学》という副題を付けているだけあっ…

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

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

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. webデザイン

    「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  2. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  3. 3分の話

    フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  4. SEO

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  5. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
PAGE TOP