オンラインストア用の美しい（そして説得力のある）ヒーロー画像を作成する方法

公開: 2015-01-06

ほとんどのオンラインストアとテーマテンプレートには、ホームページに目立つように表示される大きな注目の画像または一連の画像という共通の主要なコンポーネントが1つあります。

これらの画像は、ヒーロー、バナー、またはカルーセル画像と呼ばれることがよくあります。あなたがそれらを何と呼んでも、それらは同じであり、オンラインビジネスにとって非常に重要な役割を果たします。

この投稿では、ヒーロー画像の重要性を確認し、それらを使用するためのいくつかのベストプラクティスを紹介し、オンラインストア用の美しく説得力のあるヒーロー画像を作成するのに役立ついくつかの素晴らしいツールとグラフィックリソースを提供します。

それを掘り下げましょう。

無料の読書リスト：オンラインストアのデザインのヒント

オンラインストアの外観は、売上に大きな影響を与える可能性があります。インパクトのある記事の無料の厳選されたリストで、あなたの内なるデザイナーを解き放ちましょう。

場所、場所、場所。

ヒーロー画像は、サイト全体で最もよく見られるページであるホームページの不動産スペースの大部分を占めています。これはオンラインの世界で最も重要な不動産であり、正しく使用すればヒーロー画像がビジネスにとって非常に貴重な資産になる可能性があることを意味します。

これらの大きな画像はいたるところにあります。Shopifyテーマストアで最も人気のあるテーマのいくつかを見てください。大多数は、著名なヒーロー画像を備えています。

ヒーロー画像の目的

この貴重な不動産は、ビジネスや目標に応じて、いくつかの目的に使用できます。以下のヒーロー画像を使用するための最も一般的なアプローチのいくつかを見てみましょう。

1.ブランドを構築し、ストーリーを伝えるために

ホームページのヒーロー画像スペースの潜在的な用途の1つは、ブランドの構築を支援することです。この方法はあなたのビジネスに特に効果的であり、製品には素晴らしいストーリーがあります。この方法であなたの主要な不動産を使用することはあなたのブランドストーリーについてあなたの訪問者を教育する重要な情報を特色にすることを含みます。

2.顧客の質問に答えるため

もう1つの一般的なアプローチは、よくある質問への回答を紹介することです。これは、最も一般的な反対意見に答えたり、訪問者が持つ可能性のある時間に敏感な質問に対処したりするためのものである可能性があります。例：「米国への送料無料」。

3.バリュープロポジションを強調する

おそらく、このスペースの最も重要な用途は、ブランドの価値提案を説明することかもしれません。あなたの価値提案はあなたの顧客にあなたの製品が彼らに提供する価値を正確に説明します。訪問者の大多数がアクセスするホームページで、顧客にバリュープロポジションを伝えるのに最適な場所です。

4.発表する

このキースペースの最も顕著な用途の1つは、セールのようなアナウンスを特集することです。ホームページのヒーロー画像は、最も多くの訪問者に届くため、販売通知に最適な場所です。

5.製品または製品ラインを紹介する

最後に、ヒーロー画像のもう1つの一般的な使用法は、製品または特定の製品ラインを紹介することです。これは、新製品を発売して最も注目を集めたい場合や、利益率が最も高い製品や清算しようとしている製品を紹介する場合に最適です。

このスペースで何をするかに関わらず、優れたヒーローイメージに含めるべきことがいくつかあります。ヒーロー画像の最も重要な要素を見てみましょう。

ヒーロー画像には何を含める必要がありますか？

優れたヒーロー画像を作成するには、3つの要素があります。これらの各要素を慎重に組み合わせることで、説得力のあるヒーローイメージを作成し、コンバージョンの目標に沿って、訪問者に希望するアクションを実行させることができます。

以下の3つの重要な要素を見てみましょう。

目を引く画像-人間の目は大きくて大胆で明るい画像が大好きです。そのため、優れた製品写真が非常に重要です。主人公のイメージも同じです。ヒーロー画像には、高解像度で目を引くグラフィック、画像、写真が含まれている必要があります。ほとんどすべてのテーマに推奨される画像解像度がリストされているため、ヒーロー画像を作成するサイズを正確に把握できます。
キャッチーなコピー-あなたのコピーはあなたがあなたのメッセージを伝えるために使う言葉です。画像の性質とメッセージを伝えるために必要な時間のために、テキストは非常に簡潔で要領を得たものに保つ必要があります。
強力な召喚状-最後に、すべてのヒーロー画像には、目立つ召喚状が含まれている必要があります。読者に実行してほしいアクションを伝えるテキストまたはボタン。例としては、今すぐ購入、ストーリーを読む、詳細を確認するなどがあります。

ヒーロー画像を回転させる必要がありますか？

多くのテーマやサイトには、数秒ごとに複数の画像を回転させる回転するヒーロー画像が含まれていることに気付くでしょう。この機能は、優れたデザインを表示するための大きくてゴージャスな不動産を備えているため、通常はデザイナーに愛されていますが、ユーザビリティの専門家は、常に動いている画像の気が散る性質のために、しばらくの間眉をひそめています。ビューアのコントロール。

最初の画像を超えて回転するヒーロー画像がクリックされることはほとんどないことを示すいくつかのテストが行われました。 ConversionXLはこれについて話している素晴らしい投稿を出しました、そして彼らの推薦は回転するバナーをすべて一緒に捨てることでした。

この投稿は、ノートルダム大学による1つの研究を参照しており、5つの画像のうち最初の画像がすべてのクリックの84％を獲得したことを示しています。

一般的なコンセンサスは、回転時に複数のヒーロー画像を表示するのではなく、1つの画像に焦点を合わせる必要があるというものです。ただし、画像の回転はビジネスに適している場合があり、計画を立てることで、画像が非常にうまく機能する場合があります。

ストアで回転するヒーロー画像を使用する場合は、次のことを考慮してください。

すべてのヒーロー画像で一貫したスタイルを使用します。
コンテンツをシンプルにして、読者がすぐに理解できるようにします。
ウェブサイトの読み込み時間が遅くならないように、画像のファイルサイズはできるだけ小さくしてください。
スライドの数を最小限に抑え、本当に重要なものだけを取り上げます。
読者にとってナビゲーションを明確かつ制御可能にします。

オンラインストアのヒーロー画像を作成する方法

おそらく、新しい、デザインに精通していない、または技術に精通した店の所有者にとっての最大のハードルは、定期的に美しい新しいヒーロー画像を作成することです。しかし、近年、技術に精通していない起業家でもこのプロセスを容易にするさまざまなツールが登場しています。

画像の入手先：

あなたのウェブサイトのヒーロー画像の画像を見つけるためにオンラインに行く場所は無数にあります。ただし、他のものより優れているものもあります。検索を支援するために、次の画像を見つけるための最良の情報源をいくつかリストしました。

無料、ロイヤリティフリーの画像リソース

Burst by Shopify-（無料）これは、起業家向けのまったく新しい写真プラットフォームです。マーケティングキャンペーンやソーシャルメディアに最適な高解像度の製品写真やライフスタイル画像を見つけることができます。毎週何百枚もの新しい写真が追加されているので、ニッチがまだ追加されていないかどうかを頻繁に確認してください。

The Stocks-（無料）Stocksは、トップリソースからの最高のロイヤリティフリーのストック写真をすべて1つのクリーンでナビゲートしやすいWebサイトにまとめています。すべてが検索可能であるとは限らないため、ブランドに最適なものを見つけるために、すべてのリソースを検索するために時間を費やす必要がある場合があります。

死からストックフォト（無料）これらの無料の画像は電子メールでのみ利用可能です。これらの写真は月に1回メールで送信されるため、将来使用できる独自の画像のコレクションを作成するための良い方法です。

あなたのPixabay-（無料）400,000以上の無料の写真、ベクター、アートイラスト。

グラフィックバーガー-（無料）写真や画像を無料で商用利用できる優れたリソース。

PicJumbo-（無料）PicJumboは、高品質の無料ストックフォトを提供するための非常に優れたリソースです。豊富な品揃えとすべての分類により、優れた画像を簡単に見つけることができます。

morgueFile-（無料）morgueFileは長い間存在しており、すべて検索可能な何千もの無料のストック写真があります。

有料画像リソース

ヒーロー画像の予算が少ない場合は、高品質の画像や写真を入手するためのより高額なリソースを検討してください。これらは有料であるため、ウェブ上でそれらを使用する人が少なくなり、ヒーロー画像がよりユニークになります。

クリエイティブマーケット-（有料）画像とグラフィックスの最高のマーケットプレイスの1つ。ここでは品質基準が高く、価格もリーズナブルです。

500px Prime-（有料）世界中の写真家からのハイエンドで美しくユニークな写真のための信じられないほどのリソース。

ドルフォトクラブ-（有料）画像1枚あたりたったの$ 1で、プレミアム写真の豊富な品揃え。

Stocksy-（有料）厳選された写真家からの厳選された画像のもう1つの優れたリソース。画像の範囲は、小さい画像の場合は$ 10、中サイズの画像の場合は$ 25、大きい画像の場合は$50です。

もちろん、ストックフォトは常にそれだけです、ストックフォト。時間に余裕があり、予算が少し多い場合は、AmosBrandのような独自のヒーロー画像写真を撮影することを検討してください。

自分の写真を撮るのは、費用がかかる、または複雑である必要はありません。あなたはあなたがスマートフォンから得ることができる写真の品質に驚かれることでしょう。開始するには、写真の基本を理解するために、写真に関するCreativeLiveの無料オンラインクラスの1つをチェックしてください。

また、スマートフォンで素晴らしい写真を撮るガイドを確認することも検討してください。この投稿のヒントの多くは、ホームページの美しいヒーロー画像を撮るためにも使用できます。

ヒーロー画像をまとめる方法：

Adobe Photoshop（$ 9.99 /月）は、グラフィックデザインのアーティストや写真家の間で選ばれるプログラムですが、かなり高額で、学習曲線も大きくなっています。良いニュースは、はるかにユーザーフレンドリーで無料の選択肢がいくつかあることです。

Pixlr-（Webベース、無料）無料のWebベースでダウンロード可能な画像エディタ。画像編集にある程度精通している場合は、Pixlrを簡単かつ直感的に理解できることがわかります。残念ながら、画像編集の経験がない場合でも、Pixlrの操作が少し難しい場合があります。 Webベースのエディタから始めてみてください。

Pixelmator-（OSX App $ 29.99）Pixelmatorは、OS X用の機能豊富で強力な画像エディタで、わずか29.99ドルの費用がかかります。

Canva-（Webベース、フリーミアム）Canvaは、かなり新しいWebベースの画像エディターアプリであり、単純な画像編集を超えています。彼らの目標は、誰にとってもデザインをシンプルにすることです。このアプリを使用すると、作成する画像サイズを簡単に選択でき、ストックフォト（無料および有料）やフォントなどのデザイン要素が組み込まれています。

PicMonkey（Webベース、無料）PicMonkeyは、シンプルで直感的なインターフェイスの背後にその力を隠しています。 PicMonkeyは無料ですが、少額の月額料金で多くの追加料金を提供するプレミアムバージョンがあります。

結論

ホームページにヒーロー画像の理由、目的、使用法があります。これらの画像を頻繁に変更することで、リピーターに新鮮な気分を味わえ、活気を保ち、コンバージョンの目標に最も沿った行動を取るよう訪問者を促します。

素晴らしいヒーロー画像をまとめるための素晴らしいリソースを逃した場合は、コメントで教えてください。