フリーランスデザイナーが自由なライフスタイルを実現するための新しいブログの活用法や個性的がほとばしるブログにするためのPhotoshopを使ったデザインのチュートリアルなどを公開中~。

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

ヘッダーデザインの作り方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

目的・用途別で考えるヘッダー(アイキャッチ)の役割
個人ブログコーポレートサイトコンテンツブログ
個人ブログのヘッダー コーポレートサイトのヘッダー コンテンツサイトのヘッダー
アメブロ・ライブドアなど会社のホームページなどアフィリ・アドセンスなど
解説 解説 解説

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

合わせて読みたい関連記事:これでもうレイアウトや配色が苦手なんて言い訳ができないっ!魅せる伝えるヘッダーデザインを作成する5つの工程。Photoshop編

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

関連記事

Wordpress日本語テーマのまとめ
個別ブログ相談会
photoshop日本語チュートリアル
ブログラ

スリームデザインの出版書籍情報

photoshopの本

fotoliaデザインコンテスト大賞受賞作品の解説

tenコレクションデザインコンテスト

スリームデザインおすすめの書籍

本 本本 本

スリームデザインとソーシャルで繋がろう!

 
 
 

カテゴリー