ガジェット通信 GetNews

見たことのないものを見に行こう

体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

ヒーローイメージで印象を大きく変える10のデザイン事例

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。

本記事は、UI/UXデザイナーのNick Babich氏によって投稿されました。

 

あなたのWebページを訪問したユーザーは、何らかの反応を示すでしょう。 ユーザーの反応は、肯定的であれ否定的であれ、大部分は彼らが何を見るかによって決定されます。 視覚はおそらく人間の最も優れた感覚であるため、ヒーローイメージは、ユーザーの関心を引く最も手っ取り早い方法の1つといえます。

大胆で、グラフィックを使用した、メッセージ性の強い画像は、ユーザーの関心を引きます。 ヒーローイメージすぐにユーザーを惹き込み、ミニマリストデザインのアプリやWebサイトにおいて完璧な中心的存在となるでしょう。

ヒーローイメージは単なる美しい画像以上の存在です。それは強力なコミュニケーションツールです。この記事では、ヒーローイメージの使用に関するヒントをいくつか紹介します。

 

1. Webサイトの内容と関連性を持たせる

ヒーローイメージは導入として考えてください。ヒーローイメージはユーザーに、Webサイトの他の部分に何を期待できるかを連想させるものです。ヒーローイメージの目的は、あなたのWebサイトが何であるか、また伝えたいアイデアは何であるかを、瞬時に訪問者に伝えます。

ヒーローイメージがWebサイトのコンテンツの意図を上手く伝えていない場合、ユーザーに役立つものにはなりません。かえって画面上の貴重なスペースを無駄に使い、ときには混乱の原因にさえなります。画像がブランドや製品に対する先入観に合わないと、ユーザーは混乱します。

悪い画像選択の代表的な例、誰もがこの画像(上記参照)が銀行ローンに関連することに気づくとは限りません。

画像選びは妥協してはいけません。あなたが創造しようとしているキャンペーン、テーマ、目的に合うものを選んでください。上記のLunet Eyewearのヒーローイメージを見てください。Webサイトのメッセージを明確に伝えています。画像のコンテンツはブランドを表しているのです。

 

製品の宣伝または販売のためにWebサイトを使用している場合、ヒーローイメージの利点を活かすことができるはずです。

製品のコンテクストに合うヒーローイメージを使用してください。そして、製品の外観だけでなく、実際の設定で製品がどのように機能するかを示しましょう。

製品を販売する最良の方法は、商品それ自身に販売させることです。ヒーローイメージは製品のメリットのデモを行うことができます。

デジタル製品やサービスについても同様です。互換性のあるデバイス上でのスクリーンショットのモックアップを作成し、あなたのアプリやサービスの使用感を人々に伝えましょう。

Slackは、ヒーローイメージとしてアプリのインターフェースを採用しています。

もちろん、ヒーローイメージのデザインと選択は難しいことです。そこで、Angie Schottmuller氏はヒーローイメージの判断基準として、7つのポイントで構成されるフレームワークを作成しました。
キーワードの関連性

画像はターゲットキーワードを視覚化できているでしょうか?
目的の明確さ

画像はWebサイトのメッセージを明確に伝えていますか?
デザインのサポート

画像は行動喚起(Call To Action)を促すためにページフローをシームレスにサポートしていますか?
信頼性

画像はあなたのブランドを信頼感のあるものとして表現していますか?
付加価値

画像は関連性を高めたり、ユーザーにとってのメリットを示していますか?
望みの感情

イメージは、あなたがユーザーに望むアクションを引き起こさせる感情を描写していますか?
主人公としての顧客

顧客は製品を購入したら主人公になれるということを描写していますか?

 

2. 画像を中心的存在にする

ヒーローイメージは、少ない情報を伝えるには完璧な環境です。 はっきりと目立つものがよいでしょう。 ユーザーはWebサイトに訪問する度に立ち止まって眺めることになるでしょう。

しかし、画像ですべてを伝える必要があるという意味ではありません。 むしろ画像は、関連性を持たせた方法で、メッセージを視覚的に強化することが必要なのです。

 

3. 感情的に説得力のある画像を選択する

デザインにも感情を組み込むべきです。 感情的な影響を与え、インスピレーションを生み出し、あなたがユーザーに望む感情を高めるような画像を選択するべきです。

結局のところ、人々が重要な意思決定をするときに、しばしば感情は理性を上回ります。 肯定的な感情を刺激することによって、ユーザーとのつながりを構築することができます。

1 2 3次のページ
TechAcademyマガジンの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。