Webサイトの顔とも言えるヘッダーは、サイト訪問者の心をつかむデザインである必要があります。サイト訪問者の心をつかむような、インパクトがありながらも、オシャレでセンスのいいヘッダー。デザイナーになったばかりの人には少しハードルの高いテーマかもしれません。
ここではクライアントが喜んでくれるであろう、印象に残るオシャレなヘッダーの例を紹介しますので、是非参考にしてみてください。
アイキャッチを組み込んだオシャレなヘッダー
アイキャッチとは見ている人の注意を引くためのものを指す言葉です。ヘッダーのアイキャッチの手法としてよく使われる3種類を紹介します。
- インパクトによるアイキャッチ
- 色によるアイキャッチ
- アイコンやロゴによるアイキャッチ
最もアイキャッチとして強いのはインパクトのあるデザインですが、派手なヘッダーをオシャレに仕上げることはとても難易度が高いため、デザイナーとしての経験が短い人にはオススメできません。そこでデザイナーになりたての人の参考になる、色やアイコン、ロゴによるアイキャッチを得意としているのがGoogleです。Googleのヘッダーはとてもシンプルですが、サイト訪問者の印象に残るヘッダーの良い例です。飾るものをできるだけ少なくし、シンプルなアイキャッチだけで主張するのが最近の流行にもなっています。
デザイン by bearbrick
デザイン by don-armagadon
デザイン by KR Designs
ターゲットを意識して派手すぎないヘッダーを
ヘッダーでターゲットになる人に注目してもらうことばかりを考えると、主張ばかりが強いヘッダーになりがちです。ヘッダーはあくまでも看板なので、そのサイトが何のサイトなのかを知ってもらうためにあります。最小限の装飾でサイト訪問者の心を掴むことができればよいのです。
派手なデザインのヘッダーは印象に残りやすく、わかりやすいことが多いため、デザイナーとしては採用したくなるのですが、サイト訪問者は何度もサイトを訪れるうちに、次第に派手なデザインを「うるさい」と感じてしまうでしょう。また、派手なヘッダーはサイト全体のイメージを崩してしまう可能性もあります。サイト全体のバランスを崩さない程度に、一番伝えたい内容だけを強調するようにしましょう。
デザイン by Janneke
デザイン by ogorinac
デザイン by Janneke
Webサイトとの調和がとれたデザイン
どれだけオシャレなヘッダーを作ってもwebサイト全体のデザインに合っていなければ、クライアントに差し戻される可能性が高くなります。ヘッダーのデザインをするときは、配置するサイト全体を確認して、ページに馴染むデザインになるように心がけましょう。 サイト全体がフラットデザインで作られているのにヘッダーがリッチデザインになっている場合や、暖色系のサイトに寒色系のヘッダーを組み合わるなどでデザインを行うと、サイト全体がちぐはぐな印象になってしまいます。
- サイトのカラーに近い色、近いトーンの色を使う
- サイトのコンセプトをしっかり聞き出して作成する
上記の2点を意識してヘッダーのデザインを行いましょう。自分が作りたいデザインのヘッダーを作るのではなく、サイト全体にどのようにフィットさせるかを考えてデザインしてください。
デザイン by milajones
デザイン by MercClass
デザイン by Slaviana
インパクトのある見出しを有効活用
ヘッダーにキャッチコピーのような見出しを使用することで、サイト訪問者の興味をより引き立てることができます。本屋に並ぶ本の多くには、思わず手にとってしまいたくなるような帯がついていますよね。あの帯だけで本の売上が10倍変わることもあるそうです。ヘッダーの見出しは本の帯のようなものだと考えてください。
例えば、「美味しい珈琲屋」という見出しはデザインによっては映えますが、インパクトが弱いためサイト訪問者の心に響かないでしょう。そこで、「創業20年 愛され続ける珈琲屋」と言葉を変えるだけでもイメージが大きく変わります。さらにイメージに合ったフォントに変更すればさらに効果は高まります。
ヘッダーを配置するサイトの強みやメリット、特徴からキーワードをいくつも選び出し、特に強調したいものを組み合わせてサイト訪問者の心をつかむ見出しを作りましょう。
デザイン by KR Designs
デザイン by fortunefaded
デザイン by Kristopher P.
印象に残るオシャレなヘッダーデザインは、サイトの特徴をしっかりと表現しつつも、サイト全体にうまく溶け込みます。見た目の奇抜さや装飾を出来るかぎり省きながらも、アイキャッチやキャッチコピーを効果的に使うことで、サイト訪問者の印象に残るデザインに仕上げることが可能です。ぜひ、この記事を参考に、ヘッダーデザインにチャレンジしてみてください。
