Advertisement

imgheader_top

 

[fancy_box]この記事は、海外デザインブログOneXtraPixelで公開されたエントリー「25 Trendy Websites with Header Images」を抄訳しています。Thanks again, @onextrapixel![/fancy_box]

 

多くのデザイナーがプロジェクトに使える新しい機能はないかと探しています。今回は2014年Webデザイントレンドにもなっている「ヘッダーイメージ」についてまとめています。

 

ヘッダーはどんなWebサイトにとっても重要なエリアで、よりユーザーに興味を持ってもらうために、デザインにもこだわる必要があります。またこのセクションは、ユーザーが求めている情報と合っているかのか、瞬時に判断させることも可能です。

 

 

ヘッダーデザインの種類について

 

イメージを用いたヘッダーデザインは、幅広い使い方が考えられますが、大きく分けて以下の5つとなります。

 

 

スタイル1 ヘッダーイメージ

 

イメージ写真を用いたヘッダーデザインはシンプルですが、効果的なテクニックです。特にヘッダーは、ユーザーがまず最初に見る部分でもあり、この要素を変更することで、ユーザーエクスペリエンスに劇的な変化をもたらせます。何気ない一枚の写真があれば、十分素敵な第一印象をつくりあげることができます。

 

 

スタイル2 テキスト付ヘッダーイメージ

 

ヘッダー部分で利用するイメージ素材は、商品やWebサイトの情報や詳細などを表示した、背景としても有効的です。短い文章に、訴求力の高いCall-to-Actionボタンをレイアウトすることも良いでしょう。

 

 

スタイル3 イメージスライダー

 

ヘッダーデザインをイメージスライダーとして活用することは、特にファッション系Webサイトやオンラインストア、飲食やフード系デザインとの相性がパーフェクトです。扱っている商品のミニコレクションや、ユーザーがサイトに長居したくなるコンテンツを表示するとよいでしょう。

 

 

スタイル4 固定イメージ

 

固定イメージはトップページだけでなく、さまざまなコンテンツで利用されています。プロフェッショナルで、より学術的な内容を配置するのに良い特長のひとつです。

 

 

スタイル5 ランダム型イメージ

 

特に決まりはなく、たとえばページを読み込むたびにイメージ画像が切り替わるなどの仕掛けも、ユーザー・エクスペリエンスを向上させるポイントです。

 

 

 

参考にしたいヘッダーイメージを使ったWebサイトまとめ

 

Lush Fresh Handmade Cosmetic

モノクロイメージを採用したこちらのサイトは、巨大なヘッダーイメージを使っています。刺激的で効果的なアプローチテクニック。

lush-fresh-handmade-cosmetics

 

 

 

Creation Baumann

イメージスライダーを利用した参考サイトのひとつ。一緒に文字テキストも表示しています。

creation-baumann’s-digital-showroom

 

 

 

Evolution Fresh

こちらのサイトもイメージスライダーが実装されており、各イメージ写真をホバーすると、ズームエフェクトが採用されています。

evolution-fresh

 

 

 

Melyssa Robert Interior Design

 

インテリアデザインを扱う会社で、素敵なイメージスライダーはまるでギャラリーのようです。アーティスト向けポートフォリオサイトなどにいかがでしょう。

melyssa-robert-interior-design

 

 

 

Bauer Distillery

採用されているオーガニックで、商品との相性もよいイメージ写真が魅力的です。

bauer-distillery

 

 

 

Zubrovka Film Commission

ナビゲーションメニューの上に常に配置されているタイプのヘッダーイメージ。

zubrovka-film-commision

 

 

 

Kouros Exclusive Hotels

イメージスライダーをグリーティングカードのような使い方をしている、高級感たっぷりなリゾートホテルのWebサイト。

kouros-exclusive-hotel

 

 

 

Marine Transportatio

フルスクリーンイメージ写真を利用したサンプル例で、ロゴやナビメニューなども画像の上に配置しています。

marine-transportation-website-template

 

 

 

Jannah Hotel

こちらのヒーローエリアは、ホテルの外観や客室などをたのしむことができる、ギャラリースライダーとして活用しています。

jannah-hotel

 

 

 

Jano Garcia Design

トップページで有効的にイメージ写真を活用している参考例。ポートフォリオサイトなどに向いています。

jano-garcia-design

 

 

 

Rowing Dock

フロントページで採用されている、巨大なイメージスライダーはキャッチーで、ユーザーを驚かせます。

rowing-dock

 

 

 

Coqtail

プロジェクトに関わっているチームメンバーをならべています。

coqtail

 

 

 

Queensland Ballet

アート性の高いイメージ写真は、そのまま配置しても十分見栄えよく仕上がります。

queensland-ballet

 

 

 

Private Getaways Luxury Rentals

デザイントレンドをおさえた、ミニマルスタイルで表現されたイメージスライダー。

private-gateway-luxury-rentals

 

 

 

Koskela

ナビゲーションメニュー上部に配置された巨大イメージ写真は、よりWebサイトのブランドイメージを伝えることに成功しています。

koskela

 

 

 

Rebecca Mincoff

イメージスライダーを採用したクリエイティブなファッション系Webサイトで、完成度の高いイメージ素材は、サイト全体をより洗練された印象につくりあげます。

rebecca-mincoff-fashion-designer

 

 

 

Shakira Official Website

世界的に有名な歌姫の公式サイトで、美貌を生かしたヘッダーイメージは、モノクロデザインでよりスタイリッシュに演出されています。

shakira-ofiicial-website

 

 

 

さいごに、、

 

よりクリエイティブなアイデアを形にしやすい、ヘッダーにイメージ写真を利用したデザインは、プロジェクトに応じてぜひ使ってみたいテクニックです。サンプル例を参考に、幅広いデザイン制作に活用してみてはいかがでしょう。

 

 

参照元リンク : 25 Trendy Websites with Header Images – OneXtraPixel.com