ユーザーがウェブサイトについて意見を述べるのにわずか50ミリ秒かかります。
これをコンテキストに入れると、平均的な人間の瞬きには約100〜400ミリ秒かかります。瞬く間にウェブサイトを判断すると言っても過言ではありません。
印象を与える時間がほとんどない場合は、デザインを正しくすることが重要です。
モダンデザインの見落とされがちな要素の1つは、ヒーローのイメージです。
ヒーロー画像は折り畳み領域の上を支配しますが、ユーザーエクスペリエンスやコンバージョン率への影響を考慮せずに、急いで選択されることがよくあります。
この記事では、適切な種類のヒーロー画像を選択して注目を集め、ユーザーを変換し、デザインを補完する方法を紹介します。
ヒーロー画像の再考
ウィキペディアが言うように、ヒーローの画像は…
「…大きなバナー画像。ウェブページの前面と中央に目立つように配置されています。主人公の画像は、多くの場合、訪問者がサイトで最初に目にするビジュアルであり、その目的は、サイトの最も重要なコンテンツの概要を示すことです。」
従来のウェブサイトの構造を分解すると、画面の前半（つまり、折り畳み領域の上）が主人公の画像になります。
ヒーロー-画像-折り
この領域（フォールドの上）は、エンゲージメントとコンバージョンにとって重要です。結局のところ、訪問者がサイトにアクセスしたときに最初に目にするのはそれです。
NNGroupのある調査によると、ユーザーは注意の約80.3％をフォールドより上に集中させています。彼らは主に残りのコンテンツをスクロールしてから、フッターの近くで再び元気になります。
視聴時間ヒーローフォールド
同時に、ユーザーはサイトのデザインに基づいてサイトの信頼性と品質を判断します。
実際、ある調査では、参加者がWebサイトを信用していない理由の94％がデザインに関連していました。
ニール・パテルとの協議
私の代理店があなたのウェブサイトへの大量のトラフィックをどのように促進できるかをご覧ください
SEO-大量のSEOトラフィックのロックを解除します。実際の結果をご覧ください。
コンテンツマーケティング-私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。
有料メディア-明確なROIを備えた効果的な有料戦略。
電話を予約する
これには、ヒーロー画像の使用方法を完全に再考する必要があります。ページに視覚的なセンスを加える画像を選択する代わりに、ユーザーを引き付け、説得し、感動させる画像を選択します。
ヒーロー画像が折り目の上の領域を支配しているため、見栄えが良いだけでなく、コンバージョンの目標を押し上げるものを選択することが重要です。
以下では、7種類のヒーロー画像と、サイトに適したものを選択する方法を紹介します。
7種類のヒーロー画像
数多くのウェブサイトを閲覧した後、私はヒーロー画像を7つのカテゴリに大まかに分類しました。
言うまでもなく、他に勝るカテゴリーはありません。選択するヒーロー画像のタイプは、ビジネスの種類に基づいて決定されます（以下を参照）。
さまざまなタイプのヒーロー画像をA/Bテストして、どれが視聴者に最適かを確認することをお勧めします。
1.製品ヒーロー画像
この画像タイプは、商品を際立たせます。これらの画像は、家具、ガジェット、電話などの従来の製品に最適です。
Appleは完璧な例です。デザインはAppleの最大の強みであるため、すべてのランディングページでその製品デザインを強調するようにしています。
これは、持続可能な浄水器を作るSOMAの別の例です。主人公の画像は、商品をアピールするだけでなく、SOMAのブランドカラーも使用しています。
soma-pitcher-hero-image
2.コンテキストヒーロー画像
この画像タイプは、商品の外観だけでなく、実際の設定でどのように機能するかなど、商品のコンテキストを示しています。
コンテキストヒーロー画像は、理解しにくい製品に最適です。 「見せて、言わないで」と考えてください。長い説明を書く代わりに、画像を使用して製品の機能を示すことができます。
ジューンオーブンは良い例です：
6月-オーブン-ヒーロー-画像
ビデオの静止ショットは、製品がa）オーブンであり、b）さまざまな調理モードがあることを示しています。
実際のビデオでは、誰かが温度を低から中に調整し、オーブンがどのように機能するかを正確に示しています。
3.感情に焦点を当てたヒーロー画像
このカテゴリの画像は、ユーザーに感じてもらいたい感情を増幅することに焦点を当てています。これは、製品/サービスの効果を強調する必要がある非物理的な製品またはサービスに最適です。
たとえば、Honorは、親に在宅ケアの専門家を提供します。彼らのヒーローのイメージは、年上の女性と名誉の専門家の1人との間の愛と思いやりを示しています。
名誉ヒーロー画像
サービスとして、Honorはあなたにあなたの両親が愛され世話をされることを感じてほしいと思っています。この写真は、その正確な感情を示すのに素晴らしい仕事をしています。
4.創設者に焦点を当てたヒーロー画像
このヒーロー画像は、会社の創設者を注目の的にしています。これらは通常、ビジネスが創設者と密接に関連しているサイトで見つかります。
たとえば、BacklinkoのBrian Deanは、自分の画像をヒーロー画像として使用しています。
backlinko-hero-image
明らかに、創設者の焦点
ed imageの用途は、いくつかのニッチなビジネス以外では非常に限られています。 BacklinkoとRamitSethiでは機能しますが、Microsoftや新しい生産性アプリでは機能しません。
5.「舞台裏」のヒーロー画像
このタイプは、製品の「製造」を示します。職人技のタッチを持っている職人の製品で最もよく働きます。設計工程や製造工程を表示できます。
たとえば、Shoes of Preyは、さまざまな靴のアイデアとデザインプロセスを含む、創設者の「インスピレーションノート」を示しています。
獲物の靴のヒーロー画像
6.「アクションショット」ヒーロー画像
このヒーロー画像は、劇的な画像でユーザーの注意を引くことに焦点を当てています。他のタイプと比較して特に説得力はありませんが、ブランドをノイズから分離するのに役立ちます。
たとえば、LSProductionsは、ホームページビデオでショーリールのショットを使用しています。彼らが何をしているのか正確に言うことはできませんが、画像はあなたの興味を引くのに十分素晴らしいです。
ls-productions-hero-image
7.メリット重視のヒーロー画像
このヒーロー画像は、製品の仕組みではなく、製品のメリットに焦点を当てています。感情を増幅するヒーローの画像にいくぶん似ていますが、それがどのように感じさせるかではなく、製品の直接的なメリットに焦点を当てている点が異なります。
たとえば、LuxuryHairには、「長くて太い髪」という利点の横に、長くて太い髪のモデルのヒーロー画像があります。
贅沢な髪のヒーローの画像
他にも多くのヒーロー画像タイプ（前/後、無地の背景、アニメーション画像など）がありますが、ほとんどの場合、上記の7つで十分です。
難しいのは、適切なヒーロー画像を選択することです。
その方法を以下に示します。
適切なヒーロー画像の選択
ヒーロー画像は2つのことを同時に行う必要があります。
注意を引く（そして見栄えがする）
商品を自慢したり、作成しようとしている感情を増幅したりする
両方を実行できる画像を見つけることは、見た目よりも困難です。
ヒーロー画像を選択する際に留意すべきいくつかのことを見てみましょう。
1.明快さを強調する
ヒーロー画像の全体的なアイデアは、訪問者にあなたのヒーロー画像が何であるか、そしてそれが伝えたいアイデアをすぐに知らせることです。
つまり、商品のショットを使用している場合、画像は商品にのみ焦点を合わせる必要があります（画面スペースの半分を創設者が支配することはできません）。
コピー（見出し）に共鳴する画像を選択することもお勧めします。画像にコピーを増幅させることができれば、あなたは金になります。
たとえば、産業用ソリューションプロバイダーであるAcmeは、将来を見据えたタグラインに一致する楽観的なヒーローイメージを持っています。
acme-hero-image
これはあなたが努力する必要がある種類の接続です。
ArtofSculptingの別の例を次に示します。
彫刻の英雄-英雄のイメージ
ここのコピーは画像に直接接続されていない可能性がありますが、それでもメッセージは共鳴します。
2.色を効果的に使用する
あなたのブランドはあなたが使う色に基づいて判断されます。
さまざまな個々の色に対する消費者の反応を分類する試みはすでに数え切れないほどあります。
過去の経験に基づいて、私たち全員が異なる色を好むと言っても過言ではありません。あなたがあなたの聴衆の誰もが愛するであろうあなたが実行できる唯一の色はありません。
たとえば、ジョー・ハロックの「色の割り当て」に関する研究によれば、男性と女性の色の好みには明らかな違いがあります。
性別による色の好み
何らかの理由で、青は男性と女性の両方の間で明確な勝者として浮上しています（つまり、青はヒーロー画像にとって安全な色です）。
ヒーロー画像の色を使用して、画像にキャラクターを追加したり、特定の感情にアピールしたりできます。
たとえば、赤は「情熱的な」色と呼ばれることがよくあります。案の定、コカ・コーラはすべてのヒーロー画像でそれを使用しています（これはたまたまそのブランドカラーでもあります）：
コカ・コーラレッドヒーロー画像
複数の色で遊んだり、対照的な色を使用してヒーローの画像をポップにしてみてください。
Spotifyが最初に見つけたのは良い例です。鮮やかな色を使用して、他の方法では鈍いアーティストの写真を目立たせます。
spotify-found-them-first-hero-image
ここでの目的、つまり、人々にCTAをクリックしてもらうことを忘れないでください。対照的な色は、CTAを目立たせるのに最適です。
たとえば、ReminderMediaのヒーロー画像とCTAの色のコントラストを見てください。 「無料サンプルを入手」と「サインアップ」が目立ち、注目を集めています。
リマインダー-メディア-ヒーロー-画像
3.顔の力に注意してください
人間の顔の力を過小評価しないでください。人々はすぐに彼らに関係します。また、それらを使用して、訪問者を価値提案に導くこともできます。
研究によると、人間は他の人間の視線に自然に従うことがわかっています。あなたはあなたのCTAを直接見ている誰かの写真を使うことによってあなたの利点にこれを使うことができます。
たとえば、Renovatorはモデルの下向きの視線を使用して、目を「下にスクロール」CTAに誘導します。
the-renovator-hero-image
4.一貫性を確保する
あなたの会社がスカイダイビング機器を扱っている場合、人のスキューバダイビングのヒーロー画像を掲載するのは理にかなっていますか？
それはただマック
あなたのヒーローのイメージをあなたのウェブサイトの残りの部分に関連付けるのは意味があります。画像は、ブランドの価値観と原則を反映している必要があります。
同時に、ページの上部と下部の画像に一貫性があるはずです。
たとえば、Zendeskはヒーローの画像を使用して、潜水技術者と宇宙飛行士が出会うモチーフを紹介します。このモチーフをページ全体で繰り返し、ブランドストーリーを語ります。
彼らのホームページには、スキューバダイバー（アクアノート）と宇宙飛行士（目的地で遠く離れている2人）の画像が表示されています。 1つは海の深さに潜り、もう1つは広大な宇宙を探索します。
zendesk-関係
彼らは彼らのタグライン「ビジネスは関係でできている」を指摘していて、あなたに（視覚的に）考えてもらいたいのです。あなたの職業がどれほど離れていても、彼らのソフトウェアはギャップを埋めるのに役立ちます。
後者をさらに強調するために、ページの下部に両方が一緒にコーヒーを飲んでいる画像を示しています。
zendesk-beautiful-relationship
5.テキストを使用して、ヒーロー画像をより説得力のあるものにします
ヒーロー画像に必ずしもテキストが必要なわけではありません。優れたテキストを使用すると、読者はそれ自体でさらにスクロールするようになりますが、害を及ぼすことはありません。
正しく行われると、テキストはブランドメッセージを大幅に増幅することができます。
たとえば、Airbnbのホームページでは、別の都市で初めて他の人と会う人々のビデオを見ることができます。
コピーには「LiveThere」と書かれています。ビデオが示すように、彼らはあなたがただ街を訪れることを望んでいません。彼らはあなたにそこに住んで地元のライフスタイルを体験してもらいたいのです。
airbnb-live-there-cover-image
ヒーロー画像を選択するときにしてはいけないこと
すべきことのリストがある場合、すべきでないことのリストがあるのは公正なことです。
間違ったことをしない方が、正しいことをするよりも有益な場合がよくあります。絶対に避けなければならないことがいくつかあります。
1.スライダーを使用する
デザイナー（というよりはクライアント）はスライダーを絶対に気に入っていますが、使いやすさの観点からは、絶えず動く画像の気が散る性質のために何度も批判されてきました。
ノートルダム大学が行った調査によると、5つのうち最初のヒーロー画像はすべてのクリックの84％を受け取りました。残りの4つの画像は、この時点で気が散るフィラーです。
ヒーロー画像では、急速に変化するショットの束を見るのではなく、メッセージを増幅する単一の画像をユーザーに見てもらうことに焦点を当てる必要があります。
本当に複数のヒーロー画像をホームページに配置したい場合は、回避策があります。それはSlackの方法です。
Slackホームページを開くたびに、異なるヒーロー画像が表示されます。画像は3回目の試行後に繰り返され始めます。このようにして、スライダーを使用せずに3つのヒーロー画像を使用できるようになります。
これがSlackの3つのヒーロー画像です。メッセージは同じままで、スライダーがないことに注意してください。画像は、サイトを再度開いたときにのみ変更されます。
たるみ回転画像
2.視覚的に圧倒的なアニメーションを使用する
アニメーションは一般的に画像を圧倒します。また、システムリソースを大量に消費し、ユーザーエクスペリエンスに実質的な影響を与えることなく、ページサイズを増やします。
これは、GIF/ビデオとJQueryアニメーションにも同様に当てはまります。アニメーションがメッセージを増幅しない限り、ヒーロー画像からメッセージを削除することを検討してください。
たとえば、DomainTools（Whois.sc）には、カーソルとともに移動する背景アニメーションがあります。ページの使いやすさを向上させることも、サイトのメッセージやメリットを増幅することもありません。
domain-tools-hero-image
アニメーションを使用する必要がある場合は、Instapaperの例に従ってください。シンプルなアニメーションは、デバイス間でテキストを表示することにより、コピーで圧倒されることなく、Instapaperが何をするかを正確にユーザーに伝えます。
instapaper-hero-image
3.人口統計調査なしで（または代替案を提供して）ビデオを使用する
折り目の上のビデオ背景を使用すると、注意を引くのに役立ちますが、考慮する必要がある3つのことがあります。
ユーザーは、バックグラウンドビデオを自動的に再生するのに十分な速度で接続できますか？
ユーザーは年配であるため、バックグラウンドビデオの自動再生によって混乱する可能性がありますか？
ユーザーは、バックグラウンドビデオをサポートできないデバイスまたは場所からサイトにアクセスしていますか？
バックグラウンドビデオを使用する必要がある場合は、代替手段を提供するようにしてください。
ホームページのバックグラウンドでビデオを使用しているAirbnbを例として見てみましょう。モバイルでは、ビデオのサムネイルが表示され、再生するオプションが提供されます。
airbnb-live-there-video-homepage
これにより、ユーザーに制御を戻すことができます。一部のユーザーがモバイル接続を使用している場合、または接続が不十分な場所にいる場合は、ビデオを視聴するかスキップするかを選択できます。
ヒーロー画像はどこにありますか？
あなたのビジネスに合ったヒーロー画像を見つけるための無数のリソースがあります。
画像に費やす予算がある場合は、その費用を支払うことをお勧めします。それらは高品質であるだけでなく、有料であるため、Web上でそれらを使用している人はあまりいません。
ヒーロー画像を見つける方法は次のとおりです。
無料のリソース
スプラッシュを解除
ストックフォトへの死
細工Pixabay
ストックス
グラフィックバーガー
有料リソース
クリエイティブマーケット
500pxプライム
Stocksy
シャッターストック
自分で作る
あなたはどのようにeに驚かれることでしょう
スマートフォンの台頭により、最近は高品質な写真を撮ることができます。高価でも複雑でもありません。
CreativeLiveまたはUdemyから基本的な写真のクラスを受講することから始めることができます。
それらをまとめる
いくつかの画像ができたので、それらを組み合わせたり、「ヒーロー画像」の雰囲気を追加するために変更したりするのに役立つツールがあります。
Canva（フリーミアム）
Pixlr（無料）
Adobe Photoshop（$ 9.99 /月）
PicMonkey（無料）
Pixelmator（29.99ドルの定時料金）
重要なポイント
ヒーローの画像は視覚的に印象的ですが、それだけではありません。正しく行われた場合、それらはあなたのビジネスの価値提案を補完し、あなたのブランドメッセージの明確さを高めます。
適切な種類のヒーロー画像を使用することで、ユーザーをよりよく説得し、ブランドの認知度を高め、ストーリーテリングで視聴者を動かすことができます。
どのヒーロー画像が視聴者に最適かを確認するには、分割テストを続ける必要があります。また、頻繁に変更して、リピーターがホームページを最新の状態に保つこともお勧めします。
スーツを着た人が手を振ったり、コンピューターの前で笑ったりしている写真から離れてください。
このように：
ジェネリック-ストックフォト
著者について：Puranjayは、コンテンツに焦点を当てた成長ハッキングエージェンシーであるGrowthPubを運営しています。彼はまた、GrowthSimpleでのマーケティングについてブログを書き、最近、成長ハックのメガリストをまとめました。余暇には、ギターを弾いたり、電子音楽を学んだりしています。