さまざまなオンラインストアを見て回ると、すべてに共通している重要な要素がひとつあります。それは、トップページに大きく表示されたメイン画像（または複数の画像）です。
これらの画像は「ヒーローイメージ」、「バナー画像」、「カルーセル画像」などと呼ばれます。呼び方は何であれ、ウェブサイトのヒーローイメージはEコマースビジネスにとって非常に重要な役割を果たします。
この記事では、ヒーローイメージの重要性、使用する際のベストプラクティス、そしてオンラインストアの美しく説得力のあるヒーローイメージを作成するために役立つツールやグラフィックリソースを紹介します。
さあ、詳しく見ていきましょう。
ヒーローイメージとは？
ヒーローイメージとは、ウェブページの最上部に表示される大きな画像のことです。ヒーローイメージはウェブサイトのさまざまなページに表示されることがありますが、最も一般的にはトップページのヘッダーやナビゲーションバーの下に表示されます。
ヒーローイメージは、トップページの中で最も目立つスペースを占めます。ある意味、ランディングページと同じ機能を果たします。サイトのヒーローイメージはブランドの第一印象を形成するため、正しく使用すればビジネスにとって非常に貴重な資産となります。
良いウェブサイトのヒーローイメージに必要な要素
優れたヒーローイメージは、一般的に次の三つの要素を持っています。
- 目を引く画像
- 魅力的なコピー
- 強力なCTA（コール・トゥ・アクション）
これらの要素を上手に組み合わせることで、訪問者に行動を促す説得力のあるヒーローイメージを作成でき、コンバージョン率を向上させることができます。以下のヒーローイメージの例で、これらの要素がどのように機能するかを見ていきましょう。
1. 目を引く画像
人間の目は、大きくて鮮やかで明るい画像に引きつけられます。グラフィック、写真、イラストのどれを使用するかはブランドによりますが、重要なのは、画像が高解像度であり、注意を引くものであることです。
ヒーローイメージは、トップページで最も目立つ存在であるべきです。この点を考慮しながら、トップページデザインを検討してください。
すべてのShopifyのテーマには、ヒーローイメージ用の大きなセクションが含まれており、推奨される解像度も示されているので、ヒーローイメージのサイズを正確に把握できます。一部のテーマでは、ヒーロースライドショー、バナー動画、ページ内アニメーションの追加機能も含まれています。
ストックフォト画像リソース
自分で商品写真を撮る場合は、プロフェッショナルで高品質な画像を撮影する方法がわかるよう、十分に調べてください。時間を節約したい場合は、ストックフォトの利用を検討しても良いでしょう。
プロフェッショナルで高品質な画像を見つけるための場所はインターネット上にたくさんあります。次のリストは、画像を見つけるためにおすすめのソースです。
無料のロイヤリティフリー画像リソース
無料のストックフォトやグラフィックを探している場合は、以下のサイトをおすすめします。
- Burst by Shopify（英語のみ）: Burstは、起業家のために作られたストックフォトサイトです。Burstでは、マーケティングキャンペーンやソーシャルメディアに最適な高解像度の製品写真やライフスタイル画像を見つけることができます。Shopifyストアをお持ちの場合、テーマエディターから直接Burstの写真を追加できます。
- Pexels: Pexelsには、ユーザーによってアップロードされた数千の無料ストック画像があります。
- Unsplash: Unsplashは、コミュニティの写真家から提供された200万以上の無料高解像度画像を提供しています。
- Pixabay: Pixabayは、商業目的および非商業目的で使用できる画像を提供していますが、一部の画像は商標、パブリシティ、またはプライバシー権によって保護されていることに注意が必要です。
- Stockvault: Stockvaultでは、無料のストックフォトとウェブデザインレイアウト、ロゴテンプレートを提供しています。ページ最下部のドロップダウンメニューで日本語を選択できます。
- Canva: Canvaは、商業利用のための無料および有料のストックフォトを含むオールインワンのウェブサイトデザインツールです。
- Stocksnap（英語のみ）: Stocksnapは、商業プロジェクトと非商業プロジェクトで使用できるさまざまな無料ストックフォトを提供しています。
有料画像リソース
ヒーローイメージ用の予算がある場合は、より高品質な画像や写真が手に入る有料リソースをおすすめします。
- Shutterstock: Shutterstockは、世界中の写真家から提供された3億以上の画像を含む広範なライブラリを持っており、旅行写真に最適なリソースです。
- Adobe Stock: Adobeのデザインツールのスイートと連携するように設計されたAdobe Stockには、数千のストックフォト、ヒーローイメージデザインテンプレート、ストックビデオ、ベクターアート、イラストが含まれています。
- Getty Images: 価格は高めですが、Getty Imagesには購入可能な現代的および歴史的な写真の深いアーカイブがあります。
- iStock: iStockはGetty Imagesが所有しているため、利用可能な写真に重複が見られることがあります。しかし、iStockでは写真家が他のプラットフォームで写真を販売できるため、Gettyよりも広範で現代的なコレクションが見つかります。
- Dreamstime（英語のみ）: Dreamstimeは、さまざまなストックフォト、ビデオ、ベクター、イラストを提供しています。無料と有料のオプションがあり、異なるライセンスの選択肢があります。
フリーランスの写真家を雇う
ストックフォトでは思いどおりの画像が見つからない場合もあるでしょう。時間があり、予算にも少し余裕がある場合は、プロの写真家を雇って特定の製品の高品質な写真を撮影してもらうことを検討するのもおすすめです。
フリーランスの写真家を探すためのオプションをいくつか紹介します。
- Shopifyエキスパートを雇う（英語のみ）: Shopify Expertsを使用して、写真編集や製品写真など特定の分野に特化したフリーランスや代理店を探すことができます。業界経験に基づいてフリーランスを雇うこともできるため、たとえばフードフォトグラファーが必要な場合は、フードフォトグラファーだけを検索することもできます。
- Fiverr（英語のみ）: Fiverrでは、製品写真からウェブデザインまで、さまざまな専門のフリーランサーが揃っています。
- Freelancer（英語のみ）: Freelancerのデータベースには、写真やイラストなどのさまざまなクリエイティブ分野の専門家が含まれています。
- Upwork（英語のみ）: Upworkでは、起業家が仕事案件を投稿し、経験とスキルを持つフリーランサーとつながることができます。
- Guru（英語のみ）: Guruでは、ファッション写真、ストリート写真、風景写真など、さまざまな写真の専門知識を持つフリーランスの写真家が見つかります。
2. 魅力的なコピー
広告やマーケティングにおいて、「コピー」とはメディアの文章素材を指します。起業家にとって、コピーライティングは役立つスキルです。
ユーザーはヒーローイメージを一瞬見ただけで次に進むため、ユーザーの注意を引くためには数秒（多くても）しかありません。良いコピーは、顧客のニーズに対して分かりやすく応えるべきです。
魅力的なコピーを書くための簡単なヒントをいくつか紹介します。
- 簡潔に: 長文のコピーには適した場面がありますが、バナー画像には当てはまりません。バナーのコピーは、短く要点を押さえたものにしましょう。
- 読みづらいフォントを避ける: あまり使用されないフォントは、読むのに時間がかかります。追加の時間がわずかであっても、バナー画像のコピーは読むのに1秒でも長くかからないことが重要です。
- 顧客のトーンを模倣する: ユーザーは、自分にとって馴染みのある言葉をより受け入れやすくなります。ターゲットオーディエンスがソーシャルメディアで使用する言語を考慮し、それを参考にして書き方を決めましょう。
- 特徴ではなく利益に焦点を当てる: 「私たちのカスタマーサポートチームは24時間365日質問にお答えします」と言うのではなく、「24時間365日のカスタマーサポートで迅速に回答を得られます」と言いましょう。
- 異なるコピーを試すことを恐れない: ヒーローイメージは、A/Bテストの候補として最適です。異なる言葉の選択が訪問者のヒーローイメージデザインとのインタラクションを大きく変える可能性があります。
- マーケティングの流行語や常套句を避ける: ユーザーは「今すぐ購入」とか「大幅な割引」や「満足を保証」といった一般的な広告スローガンには目を通さなくなります。
3. 強力なCTA（コール・トゥ・アクション）
最後に、すべてのヒーローイメージには目立つCTAが必要です。CTAは、読者に取ってほしい行動を示すテキストで、通常はその行動を促すボタンが付随します。例としては「購入する」、「サインアップ」、「詳細をみる」などがあります。
CTAの書き方は、あなたがターゲットにしているマーケティングファネルのセグメントによって異なります。ファネルの上部にいるユーザーに対しては「詳細を見る」と促すことができ、ファネルの下部にいるユーザーには「購入する」といったより直接的なCTAが適しています。
ヒーローイメージの目的を理解する
ヒーローイメージの貴重なスペースは、ビジネスや目標に応じてさまざまな目的で使用できます。以下に、ヒーローイメージの一般的な使用方法をいくつか紹介します。
1. ブランドを構築し、ストーリーを語る
ウェブサイトのヒーローイメージの一つの潜在的な用途は、ブランドストーリーテリングです。ブランドストーリーテリングとは、ブランドのUSP（ユニークセリングプロポジション）を伝えるためにストーリーを使うことです。ストーリーは非常に効果的なブランド構築の手法であり、良いストーリーは記憶に残りやすくなります。
2. 顧客の質問に答える
別の一般的なアプローチは、よくある質問に対する回答をヒーローイメージに表示することです。顧客のペインポイントポイント（解決したい問題や悩み）に対処したり、訪問者が急いで答えを知りたがっている質問に答えたりするために、このスペースを使用することができます。
3. 価値提案を強調する
ブランドストーリーテリングだけがUSPを提示する方法ではありません。訪問者に競合他社との違いを理解してもらえると、あなたのブランドはより記憶に残ります。訪問者が最初に訪れるトップページで、顧客に価値提案を伝えるのにこれ以上の場所はありません。
4. 発表を行う
トップページのバナーは、セール、イベント、新製品の発売、その他の重要な発表を見てもらうための重要なスペースです。バナー画像は、ウェブサイトの訪問者の注意を最も引くため、多くの人に見てもらいたい発表には最適な候補です。
魅力的なヒーローイメージでウェブサイトを最適化する
ここまでで、トップページにおけるヒーローイメージの理由、目的、使用方法を紹介しました。これらの画像を頻繁に変更することで、リピーターに新鮮さを感じさせ、活気を保ち、訪問者をコンバージョン目標に沿った行動に促すことができます。
オンラインストアのためのヒーローイメージの作成方法
上手にデザインされた目を引くヒーローイメージを作成することで、新しいウェブサイト訪問者を引き付け、さらに多くの製品を探索してもらうことができます。オンラインストアのヒーローイメージを作成するためのステップバイステップガイドをご覧ください。
1. 高品質な製品画像を使用する
魅力的な製品や実店舗の写真で新しい顧客を引き付けましょう。プロのストックフォトを使用することもできますが、特定の製品の高品質な写真を撮影するためにフォトグラファーを雇うことができればさらに良いでしょう。
下の画像はオンライン植物店の素晴らしい例です。このサイトを訪れる人は植物に興味があるため、ヒーローイメージの美しい緑に引き寄せられることでしょう。
2. オンラインデザインツールを使用してグラフィックを作成する
製品写真を加工したり、グラフィカルな要素を使用したりしてヒーローイメージを作成することもできます。Canva、Visme、Adobe Cloudなどのオンラインデザインツールを使って、目を引くグラフィックを作成しましょう。
下の画像はその例です。Detour Coffeeは、自社製品のカットアウトを作成し、目を引く色や形のグラフィックに配置しています。
3. 最も関連性のあるCTAを追加する
ヒーローイメージは、関連するCTAなしでは完結しません。画像やグラフィックに特有のボタンを追加しましょう。
ボタンは全体のデザインに合うようにし、目立たせながらも不自然に見えないようにしてください。以下はその良い例です。
4. ヒーローイメージの一部として動画を使用する
注意を引くためのもう一つの素晴らしい方法は、ループする無音の動画やGIFをヒーローイメージとして作成することです。たとえば、Nomzのウェブサイトには、訪問者を引き込むいくつかの動画クリップが表示され、ページに留まる時間が長くなります。
5. ヒーローイメージを定期的に更新する
ヒーローイメージは一度作成すれば終わりではありません。現在の画像が気に入っていても、定期的に更新してリピーターに新しい製品や提供を紹介する必要があります。
複数のCTAを一度に共有できるヒーローイメージスライダーを作成することも検討してください。これは、下の例のように、今後のホリデーシーズンを宣伝しながら、他の製品ラインも宣伝したいときに良いアイデアです。
ウェブサイトのヒーローイメージに関するFAQ
ウェブサイトにヒーローイメージを追加する方法は？
Shopifyのテーマを使用している場合は、テーマエディターでヒーローイメージを追加できます。Shopifyストアにログインし、オンラインストア > テーマに移動し、現在のテーマの横にある「カスタマイズ」を選択してください。
ほとんどのテーマにはデフォルトでバナー用のスペースがありますが、追加する必要がある場合は、右側のメニューの一番下にある「セクションを追加」を選択し、ヒーローセクション要素を選択してください。この要素は、使用しているテーマによっては「ヒーローイメージ」、「バナー画像」、「スライドショー」とラベル付けされている場合があります。
また、ウェブサイトのヒーローイメージは、製品画像やインラインブログ画像のようにテーマ間で転送されないことに注意してください。ヒーローイメージは各テーマに直接追加する必要があり、現在のテーマに追加しない限り、ページに表示されません。
ウェブサイトのヒーローイメージに最適なサイズは？
最大20MBのPNGおよびJPEGファイルを追加できますが、ページの読み込み時間を確保するためにファイルサイズを小さく保つことをお勧めします。正確な画像サイズは使用しているテーマによって異なりますが、通常、ヒーローイメージはフルスクリーンで表示したときに鮮明な解像度を示すために少なくとも2,048pxの幅が必要です。
テーマはレスポンシブであるため、ウェブサイトが表示される画面サイズに応じてヒーローイメージのためのスペースが変わります。画像のフレームの周りにスペースを残して、カットオフされる可能性のある部分を考慮してください。
また、コピーやCTAを画像に直接入れることは避けてください。代わりに、テーマエディターを使用して、画像の前に浮かぶようにコピーとCTAボタンを重ねて、画像から独立して調整できるようにしてください。
ウェブサイトのヒーローイメージの目的は？
ウェブサイトのヒーローイメージはさまざまな目的に使用されますが、一般的には、できるだけ多くの訪問者に向けた発表に最適です。一般的な目的には、セールの発表、ブランドの価値を強調すること、新製品の発表が含まれます。
ヒーローイメージに含むべき要素は？
ウェブサイトのヒーローイメージには、大きく注意を引く画像とともに、簡潔で魅力的なコピー、強力なCTAを含むべきです。
