より効果的で魅力的なヘッダをデザインする方法

ヘッダはウェブサイトやブログに訪れるユーザーが最初に目にするであろう大切な存在です。
ヘッダの可能性をフルに活用する非常に効果的なデザインにする際、アイデアとなる3つのスタイルを紹介します。

サイトのキャプチャ

How To Design A More Effective Website Header

下記は各ポイントを意訳したものです。

1. シンプルなヘッダ

ヘッダをシンプルにしておくことで、ユーザーにあまりにも多い情報で圧倒させないようにすることができます。シンプルなヘッダで大切なことは、ぱっと見でサイトの雰囲気を伝えることです。

明確

サイトのキャプチャ

Sailthru

明確なヘッダはユーザーの印象を方向付けるために非常に有用です。Sailthruではグラフィックでビジネスのアイデアをユーザーに伝えています。そのデザインは非常にミニマルで、一つのビジュアルエレメントと大きいテキストは、下の小さな文字のパラグラフにユーザーの視線を導き、注意を引きつけます。ユーザーの多くはこのメッセージを受け取るでしょう。

信頼

サイトのキャプチャ

Wood&Faulk

シンプルなヘッダは信頼を伝えます。Wood&Faulkでは二つの短いスローガンでロゴにフォーカスを合わせており、ヘッダは極めて少ないエレメントで構成されています。その名前と二行のテキストだけでアイデンティティを作り、高品質なプロダクトのユーザーを納得させるデザインです。

意図

サイトのキャプチャ

NTT Securty

ヘッダにメッセージを載せて、あなたのビジネスを紹介することもできます。NTT Securtyではロゴの周りにクライアントのデータに関連したアイコンを配置し、視覚的にメッセージを伝えています。さらに多くの情報を得られるよう、ビジネスアイデアの説明をした短いテキストも横に添えられています。

2. アートを加えたヘッダ

シンプルなヘッダデザインのようなプレーンなインフォメーションだけでなく、アートを加えて魅力的にすることもできます。

注目

サイトのキャプチャ

3D Polystren

アートを加えたヘッダデザインはユーザーの注意を引きつけます。数多くのサイトを見るユーザーには見た目でのインパクトも非常に重要です。3D Polystrenではタイトルを3Dにし、その文字の周りに立ったり、登ろうとしている小さな人々が非常に印象的なイラストをヘッダに配置しています。イラスト自身は特定のメッセージはありません、しかしこのサイトが何を提供するのか非常に興味を覚えます。

魅力

サイトのキャプチャ

Webdesignser Depot

美しくて魅力的なデザインはユーザーの興味をそそります。わたし達は美しいものを見ることを好み、美しいものを作る人々に積極的な態度を持っています。ウェブサイトも同様です。Webdesignser Depotのヘッダは非常にクリエイティブで、美しく魅力的です。わたしは彼らのコンテンツを読む前でさえ、ヘッダを見ただけで彼らを好きになりました。

プロフェッショナル

サイトのキャプチャ

Quazar Web Design

ヘッダのデザインにあなたのスキルを示すために使うこともできます。Quazar Web Designでは非常に美しいデザインのヘッダを備えています。非常に細かいアニメーションと繊細で魅力的なデザインは彼らのプロフェッショナルさを伝えています。

3. インタラクティブなヘッダ

ウェブの新しい技術はウェブサイトに広範囲なインタラクションを提供することができます。インタラクションを通じて、ユーザーは受け身なだけでなく、積極的なアクティブなユーザーになります。これは単にあなたのサイトで豊かなユーザエクスペリエンスを提供するというだけでなく、ユーザーとコンタクトをとり、ユーザーとよりよい関係を築くものとなるでしょう。

導入

サイトのキャプチャ

Açoriano Orienta

インタラクティブなエレメントはユーザーに非常に魅力的になり得ます。Açoriano Orientalではページをスクロールすると、飛行機が雲の間を飛ぶパララックスのエフェクトを使っています。ヘッダはページに統合化されており、魅力的な導入となっています。

楽しく

サイトのキャプチャ

Get Cirulis

インタラクティブなヘッダはユーザーに楽しみを与えます。Get Cirulisではとても面白いエフェクトで、ユーザーを驚かせます。ヘッダの文字はスクロールとともに、互いに離れ、これはユーザーが予期しないものでしょう。何が起きるのか楽しみながら、サイトの特徴を伝えています。

パーソナリティ

サイトのキャプチャ

Lytro

インタラクティブなエレメントを使い、ウェブサイトをユーザーごとに楽しませることもできます。Lytroではヘッダの画像をクリックするとその画像のフォーカスを変更でき、ユーザーにLytroのエフェクトを体験できるようにしています。

おわりに

ヘッダをシンプルにし、ユーザーの注目をガイドしたり、サイトの意図や信頼を伝えることができます。またアートなエレメントを加え、ユーザーの興味をそそり、注意を引きつけたり、プロフェッショナルに見えるようにすることもできます。あるいは、インタラクティブなエレメントを加え、面白くて魅力的にすることもできます。

ヘッダのデザインには数多くの方法があり、異なるエフェクト、あるいは同じエフェクトでも異なる方法でリードすることができます。
あなたのサイトの本質と目的を確認し、ヘッダのデザインを作成してください。

top of page

©2017 coliss