多くのウェブサイトやオンラインストアでよく見かけるトップページに大きく表示されているメイン画像はヒーローイメージと呼ばれており、eコマースビジネスにとって非常に重要な役割を果たします。
この記事では、ヒーローイメージに必要な要素や使い方、魅力的なヒーロー画像を作る方法などを紹介します。ブランドの価値をアピールできるウェブサイトを作成したいと考えている方は、ぜひ参考にしてください。
ヒーローイメージとは
ヒーローイメージとは、ウェブページの最上部に表示される大きな画像のことです。一般的に、トップページのヘッダーやナビゲーションバーの真下に表示されます。画面全体を覆い尽くすほどのサイズで、ユーザーに強い第一印象を与えます。ランディングページと同様に、ブランドのメッセージやサービスの魅力を視覚的かつ直感的に伝える役割があり、インパクトのある魅力的なデザインのヒーローイメージはユーザーに行動を促す説得力をもち、コンバージョン率にも大きな影響を与えます。
魅力的なヒーローイメージの3つの要素
1. 目を引く画像
大きくて鮮やかで明るい画像に人は引きつけられる傾向にあるため、画像は高解像度であり、注意を引くものである必要があります。写真やイラストなど、ブランドイメージやウェブデザインに合うものを使用しましょう。
Shopifyのテーマには、ヒーローイメージ用の大きなセクションがあらかじめ用意されており、推奨される解像度も示されているため、ヒーローイメージのサイズを正確に把握できます。一部のテーマでは、ヒーロースライドショー、バナー動画、ページ内アニメーションの追加機能も含まれています。
自分で商品撮影する場合は、プロフェッショナルで高品質な画像を撮影したり、必要に応じて画像編集ソフトを利用して画像の最適化をするスキルが求められます。
時間を節約したい場合は、無料または有料のストックフォトの利用を検討するのも良いでしょう。また、時間や予算に余裕がある場合にはプロの写真家に依頼する方法もあります。
ロイヤリティフリーの無料ストックフォトサイト
無料のストックフォトやグラフィックを探す場合は、以下のサイトをおすすめします。
- Burst by Shopify（バーストバイショッピファイ）（英語のみ）：オンラインビジネス向けのストックフォトサイトで、ヒーローイメージに最適な高解像度の製品写真やライフスタイル画像を見つけることができる。Shopifyストアを持っている場合、テーマエディターから直接Burstの写真を追加可能。
- Pexels：ユーザーによってアップロードされた40万点以上の無料ストック画像を提供。
- Unsplash（アンスプラッシュ）：コミュニティの写真家から提供された250万以上の無料高解像度画像を提供。
- Pixabay：商業目的および非商業目的で使用できる画像を提供。一部の画像は商標、パブリシティ、またはプライバシー権によって保護されており、人物写真を利用する際は注意が必要。
- Stockvault：無料のストックフォトとウェブデザインレイアウト、ロゴテンプレートなどを幅広く提供。ページ最下部のドロップダウンメニューで日本語の選択が可能。
- Canva（キャンバ）：商業利用のための無料および有料のストックフォトを含むオールインワンのウェブサイトデザインツール。
有料のストックフォトサイト
より高品質な画像や写真が手に入る有料ストックフォトサイトは以下のとおりです。
- Shutterstock（シャッターストック）：世界中の写真家から提供された5億6,000万点以上の画像からヒーローイメージに最適な写真やイラストなどを選べる。
- Adobe Stock（アドビストック）：Adobeのデザインツールと連携でき、数億点の画像、動画、ベクターアート、ロゴテンプレートなどを提供。
- Getty Images（ゲッティイメージズ）：報道用にも写真を提供してきたストックフォトサービスの老舗で、現代写真から歴史的な写真まで幅広く提供。
- PIXTA（ピクスタ）：日本で誕生したストックフォトサービスのため、国内で撮影された人物や風景、日本になじみやすいイラストなどが豊富。
プロの写真家に依頼する
ストックフォトサイトで思いどおりの画像が見つからない場合は、プロのフォトグラファーに高品質な写真を撮影してもらうこともヒーローイメージを作り上げる一つの方法です。
- Shopifyグローバルコマースプラットフォーム：写真編集や製品写真など特定の分野に特化したフリーランスや代理店を探すことが可能。日本国内での写真やビデオの撮影、イラストなどのサービスに絞って検索できる。
- クラウドワークス：日本最大級のクラウドソーシングサイト。ヒーローイメージ用の写真やイラストが作成できる人を募集したり、直接気になるフォトグラファーなどのワーカーに依頼したりできる。
- Lancers（ランサーズ）：日本国内で人気のクラウドソーシングサイト。大手企業や官公庁なども利用するため信頼性は高い。依頼方法は4つに分かれているため、最適な方法を選べる。
- coconala（ココナラ）：日本最大級のスキルマーケット。募集中のスキルサービスの中から、気になるフォトグラファーやイラストレーターなどに直接依頼できる。
2. 魅力的なコピー
広告やマーケティングにおいて「コピー」とは、商品やサービスの魅力を文章やメッセージで表現することです。ユーザーがヒーローイメージを見る瞬間は数秒しかありません。そのため、顧客のニーズに的確かつ分かりやすく応えられるコピーライティングが重要です。
魅力的なコピーを書くための簡単なポイントを紹介します。
- 簡潔に伝える：ヒーローイメージのコピーは、短く要点を押さえたものにする。
- 読みにくいフォントは避ける：めずらしいフォントは読むのに時間がかかるため、馴染みのあるフォントにする。
- 顧客のトーンを利用する：馴染みのある言葉は受け入れやすくなるため、ターゲット顧客の間でよく利用されているフレーズなどを利用する。
- ユーザーにとっての利益に焦点を当てる：例えば、「24時間365日対応」だけではなく、「24時間365日いつでもすぐにサポートを受けられる安心感」といった、ユーザーにとっての価値を提供する。
- さまざまなコピーを試してみる：ヒーローイメージは言葉の選び方ひとつでユーザーの反応が大きく変わるため、A/Bテストが効果的。
- ありがちな表現は避ける：「今すぐ購入」「大幅割引」「満足保証」など、よくある広告のフレーズはユーザーに響きにくいため、オリジナリティのある表現が重要。
3. 適切なCTA（コール・トゥ・アクション）
ヒーローイメージには目立つCTA（行動喚起）が必要です。CTAは、ユーザーに取ってほしい行動を示すテキストで、一般的には行動につながるボタンも表示されます。例えば、「購入する」「サインアップ」「詳細を見る」などがあります。
CTAの指示は、できる限り簡潔で明確に、またユーザーにとって行動する必然性のある内容にする必要があります。また、背景や他のデザイン要素とはひと目で区別できるようになっていることも重要です。
効果的なヒーローイメージの使い方
ヒーローイメージの一般的な使用方法をいくつか紹介します。
1. ブランドを構築し、ストーリーを伝える
ヒーローイメージは、ブランドストーリーを伝えやすい場所です。ブランドの強み（USP）をストーリーで伝えることにより、ユーザーの記憶に残りやすく共感を生み出しやすくなるため、ブランド構築に効果的で競合他社との差別化にもつながります。
2. 顧客の質問に答える
よくある質問に対する回答をヒーローイメージに表示することも効果的です。顧客の解決したい問題や悩みに対して、ページの入り口で答えを示すことで安心感や信頼感を与えられます。特に急いで答えを求めているユーザーにとっては、ページの最上部に回答があることで、ストレスなくスムーズに次の行動につなげられます。
3. 価値提案を強調する
ブランドストーリーだけがUSPを伝える方法ではありません。ブランドが提供する価値や競合他社との違いを伝えることで、ユーザーの記憶に残るブランドを築くことができます。そのため、ページの最上部に表示されるヒーローイメージは、これ以上ない絶好のスペースといえるでしょう。
4. 発表を行う
ページの最上部は、セールやイベント、新製品の発売、その他の重要な発表を見てもらうための重要なスペースです。そのため、ヒーローイメージは多くの人に見てもらいたい発表をするときなどに最適です。
オンラインストアのためのヒーローイメージの作り方
1. 高品質な製品画像を使用する
魅力的な製品や実店舗の写真は、新規顧客を引きつける強力な武器となります。プロのストックフォトを使用する方法以外に、自社製品をしっかりアピールできる高品質な写真をフォトグラファーに撮影してもらうのも良いでしょう
2. オンラインデザインツールを使用してグラフィックを作成する
製品写真を加工したり、グラフィカルな要素を使用したりしてヒーローイメージを作成することもできます。Canva、Visme、Adobe Cloud（アドビクラウド）などのオンラインデザインツールを使って、目を引くグラフィックを作成しましょう。
3. 関連性のあるCTAを追加する
ヒーローイメージは、関連するCTAなしでは完結しません。画像やグラフィックにCTAのボタンを追加しましょう。ボタンは全体のデザインに合うようにし、目立たせながらも不自然に見えないようにしてください。
4. ヒーローイメージの一部として動画を使用する
ヒーローイメージは画像だけでなく、動画やGIFを取り入れることも可能です。動きのあるヒーローイメージはユーザーの注目を集めやすく、静止画では伝わりにくいブランドの雰囲気や商品の使い方などが伝えやすくなります。
5. スマホ表示に対応する
近年は多くのユーザーがスマホでウェブサイトを閲覧するため、ヒーローイメージもスマホ対応が必須です。単に画像を縮小するだけでなく、テキストの読みやすさ、CTAボタンのタップのしやすさ、画像の鮮明さなど、モバイルデバイス上でも魅力的に見えるように細部までこだわりましょう。
6. ヒーローイメージを定期的に更新する
ヒーローイメージは一度作成して終わりではありません。現在の画像が気に入っていても、定期的に更新することで、リピーターに新製品や新しいサービスを効率的にアピールできます。
複数のCTAを提示したい場合は、複数のヒーローイメージをスライドショーのように表示できる「ヒーローイメージスライダー」を導入するのも一つの方法です。
まとめ
ヒーローイメージは、ブランドやサービスの魅力を伝える重要な要素です。魅力的なグラフィックとコピーでユーザーの興味関心を惹きつけ、行動を促すCTAも盛り込むことがポイントになります。
画像を用意する際には、ストックフォトサイトを利用したり、プロのフォトグラファーにオリジナリティ溢れる写真を撮影してもらったりする方法があります。また、オンラインのデザインツールを利用して、グラフィックを作成するのも良いでしょう。動画やGIFは、静止画では伝えきれない情報や雰囲気を表現できます。
また、パソコンだけでなく、スマホでも快適に表示されるよう最適化することや、定期的に更新して新鮮さを保つことも忘れずに行いましょう。
ウェブサイトのヒーローイメージに関するFAQ
ウェブサイトにヒーローイメージを追加する方法は？
Shopifyのテーマを使用している場合は、テーマエディターでヒーローイメージを追加できます。Shopifyストアにログイン後、「オンラインストア→テーマ→カスタマイズ」で追加可能です。
最適なヒーローイメージのサイズは？
ヒーローイメージに最適なサイズは以下のとおりです。
- パソコン：1,600ピクセル×500ピクセル（ピクセル比16:9）
- タブレット：1,280ピクセル×500〜700ピクセル
- スマホ：800ピクセル×1,200ピクセル
ウェブサイトのヒーローイメージの目的は？
ヒーローイメージの一般的な目的は、ブランドやサービスの魅力や強みなどを伝えたり、セールや新製品の発表をしたりすることです。
ヒーローイメージに含むべき要素は？
ウェブサイトのヒーローイメージには、注目を集める存在感がある画像とともに、簡潔で魅力的なコピー、強力なCTAを含むべきです。
文：Momo Hidaka
