Shopify バナーサイズ: ベストプラクティスをまとめた完全ガイド

オンライン ショッピングをする人は視覚に敏感なので、見たものが気に入らないと購入を完了する可能性は低くなります。そのため、コンバージョンと収益を最大化したい場合は、 Shopify バナーのサイズが完璧である必要があります。わずかな位置ずれやサイズの違いが、売上が成功するかまったく売れないかの違いになることがあります。

Shopify の画像サイズは、販売者にとって危険な領域になる可能性があります。

最適な画像サイズを選択すると、どのデバイスでもストアが美しく表示されます。そうしないと、売上が落ちてしまいます。

この投稿では、Shopify バナーのサイズについて知っておくべきすべてのことを説明します。最後まで読めば、すべての画像を最適化し、これまでで最高のショッピング体験を提供できるようになります。

Shopify バナーのサイズが重要なのはなぜですか?

店に入って、どこを向いても棚に商品が散らばっているのを見つけたと想像してください。店内のレイアウトがわかりにくく、商品の陳列に一貫したスタイルや認識できる美学が欠けていると仮定します。

おそらく振り返ってドアから出て行くでしょう？

Shopify バナーのサイズが適切に最適化されていない場合、このようなことが起こります。ストアが雑然として、整理されておらず、プロフェッショナルでない印象を与える可能性があります。言い換えれば、まったく良くないということです。

また、画像のサイズが適切でないと、ストアの読み込み時間が遅くなることがあります。読み込みが遅いストアでは、コンバージョンが完全に失われる可能性があることは誰もが知っています。

現在、ストアの製品画像がメーカーから直接使用されているように見える場合、または粗い低解像度の写真が含まれている場合は、対策を講じる必要があります。

ユーザーエクスペリエンスの向上

UXの向上に役立ちます なぜなら、顧客は鮮明でズーム可能な写真のある製品を購入する傾向が、そうでない製品よりもずっと高いからです。

用途ごとに適切な画像サイズを使用すると、目が疲れにくくなり、画像全体を見るためにスクロールしたり拡大したりする必要がなくなるため、ユーザー エクスペリエンスが大幅に向上します。

ウェブ速度を上げる

読み込みに 3 秒以上かかると、訪問者の 53% がモバイル サイトを離れます (出典: thinkwithgoogle)。Shopify の製品画像に最適なサイズを使用すると、顧客は製品ページをすばやく読み込むことができます。その結果、売上も向上します。

ユーザーが画像サイズが大きい Web サイトにアクセスすると、サーバーがページを読み込むのに時間がかかります。画像サイズが小さいほど、デバイス間での読み込みが速くなる傾向があります。画像 SEO の用語では、これを「コンテンツフル ペイント」と呼びます。

ページの読み込み速度が悪い例を以下に示します。

これはサーバーの過剰な読み込み速度を示しています。最初の画像では 2.1 秒、最大の画像では 4.1 秒です。ページの読み込みに 6 秒以上かかると、ユーザーの半数がショッピング カートを放棄することを考えると、高い直帰率を防ぐためにページ速度を上げてください。 (出典: digital.com) 。

続きを読む: Shopify の速度最適化のために知っておくべき 7 つの実用的なヒント

ウェブサイトのランキングを高める

読み込み時間が遅いと UX に悪影響が及び、SEO にも影響が及びます。

ウェブサイトのランキングは、ウェブサイトの全体的な位置、またはユーザーが特定のフレーズを入力したときの検索結果の最初のページに対するウェブページの近さを指します。

画像の品質は Google のアルゴリズムによって考慮され、さまざまな指標に基づいて検索結果の最初のページに表示される画像が決定されます。

ご覧のとおり、UX は基礎となる要素です。最高レベルの UX を提供すれば、e コマース サイトが最前線に立つことになります。素晴らしい UX を提供しなければ、Web サイトに深刻なダメージを与えることになります。

したがって、原則として、Shopify バナーと製品画像には最適なサイズを使用するのが賢明です。顧客が満足すれば、また戻ってくるでしょう。

コンバージョン率の向上

ストアの画像を最適化すると、顧客はよりクリーンで快適なショッピング体験を楽しめるようになり、企業のコンバージョンと収益が向上します。

Shopifyバナーのサイズに関する推奨事項

最適なShopify画像バナーのサイズ

幅400～600×高さ1200

Shopify バナー画像はスライドショーに似ており、多くの場合テキストが重ねて表示されます。バナー画像はホームページの上部に表示され、新しい訪問者が最初に目にするものなので、重要なものにしてください。

スライドショーの画像と同様に、ここで高解像度の画像を使用することは必須です。また、背景を明るくしてテキストを目立たせることも重要です。背景のノイズが多いとコントラストが低下し、訪問者を混乱させます。

テーマごとにバナー画像の要件が異なるため、自分のストアに最適なものを確認してください。また、モバイル デバイス用の画像の高さを定義することも検討する必要があります。バナー画像の場合、デスクトップでは見栄えが良いものでも、モバイルでは見栄えが悪い場合があります。

Shopify ロゴ画像サイズ

高さ450×幅250

ロゴは、多くの販売者にとって最も混乱を招く Shopify 画像サイズの 1 つです。サイトの他の部分とまったく場違いに見えるロゴをアップロードしたことがあると思います。

公式の Shopify ロゴ画像サイズ推奨値は、高さ 450 x 幅 250 です。これは、画像が正確にその寸法である必要があることを意味するものではありません。ただし、多くのテーマのサイドバーは幅 250 ピクセルなので、最もすっきりとした外観にするには、ロゴをその数値以下にしてください。

正方形の画像 (アスペクト比 1:1) を使用することもできます。これは、サイトのほぼどこにでも見栄えがします。もう一度、最大寸法に注意してください。200 ピクセル x 200 ピクセルが安全です。

S hopify ヘッダーバナーサイズ

最適な Shopify ヘッダー バナーのサイズは通常、幅 1280 ～ 2500 x 高さ 720 ～ 900 です。

ヘッダー/ヒーロー画像と背景画像の主な違いは、ヒーロー画像は通常、高さが小さく、サイズが約半分であることです。この画像タイプは、ユーザーにスクロールを要求せずに画面にすぐに多くのテキストを表示する必要がある場合に最適です。

最良の結果を得るには、さまざまなデバイスで Shopify ヘッダー バナーのサイズをテストし、正しく表示され、意図した視覚的な魅力が維持されていることを確認します。

次に例を示します。

ご覧のとおり、 BLK & Bold は、固定比率の画像の高さを短くして、できるだけ幅を広くすることを選択しました。

Shopifyのスライドショーバナーのサイズ

Shopifyスライドショーの理想的なバナーサイズは通常、幅1200〜2000 x 高さ400〜600です。

ホームページのスライドショーは、多くのテーマにおいて訪問者が最初に目にするものです。そのため、画像のパラメータが正しいことを確認する必要があります。

スライドショーは画像から画像へと「スライド」するため、すべての画像のアスペクト比が同じであることを確認することをお勧めします。これにより、一貫性のあるプロフェッショナルな外観が保たれます。

画像の最適化: Shopify バナーに最適な画像フォーマットとサイズ

Shopify ストアに最適な画像サイズがわかったので、次に検討すべきことは、使用する画像形式です。

電子商取引の写真撮影で使用される最も一般的な画像形式をいくつか見てみましょう。

JPEG/JPEG形式

Shopify ストアで最も人気のある画像ファイル形式はおそらく JPG です。色の範囲が広く、ファイル サイズが小さいため、読み込みが速くなります。JPG の圧縮能力は、品質とサイズの間の優れた妥協点を提供します。このため、Shopify では小売業者に商品ページの画像に JPG を使用することを実際に推奨しています。

画像の最も一般的なファイル形式はこれです。

最小のファイルサイズで画像品質を維持するという点では、JPEG が優れています。Web サイトの軽量性と速度を維持する必要がある e コマース Web サイトにとって、これは素晴らしいニュースです。

JPEG は、優れた色域、高解像度、小さいファイル サイズを備えているため、製品写真に最適です。

JPEG は次のような場合によく使用されます。

• 製品
• バナーまたはスライドショー
• ブログ投稿とページ

PNG

PNG は、Shopify ストアで使用されているもう 1 つの非常に人気のある画像形式です。PNG を使用すると、全体的な画像品質を損なうことなく画像ファイルのサイズを縮小できるため、e コマース Web サイトに最適です。さらに、PNG は透明性をサポートしているため、ストアのデザインをより細かく制御できます。PNG の問題の 1 つは、ロスレス圧縮を使用するため、画像ファイルのサイズが非常に大きくなることが多いことです。

より新しい画像形式である PNG は、通常 JPEG よりもサイズが大きくなりますが、品質は優れています。

このロスレス形式は、画質を犠牲にすることなく圧縮できます。また、このため、JPEG ほど圧縮できません。

PNG は JPEG とは異なり、透明な背景を可能にするため、ロゴやアイコンに最適です。

PNG は次のような場合によく使用されます。

• ロゴ
• アイコン
• 縁取りとトリム

画像

出典: Pinterest

短いアニメーションや製品の説明には、Shopify ドロップシッピング ストアで非常に一般的な、世界的に認知されている GIF 画像形式が役立ちます。GIF 画像形式では 250 色程度しか使用できないため、画像はそれほど鮮やかにはなりません。ただし、他の画像形式と組み合わせると、非常に効果的になります。

動画用の従来のファイル形式である GIF を使用すると、ビジネスオーナーは店舗に動きを与えることができます。

GIF は、通常の画像や写真には適していませんが、アニメーションに適した唯一の形式です。PNG はアニメーションに適していますが、GIF ほど小さく圧縮することはできません。

ティフ

いくつかの Web 編集ツールは、便利な画像形式 TIFF をサポートしています。これは、デザイナーや小売業者にとって、マーケティング キャンペーン用の画像編集やカスタマイズが簡単であることを意味します。TIFF では高解像度が利用でき、1 つのファイルに複数の画像を保存できます。ただし、PNG と同様に、ロスレス圧縮のため、ファイル サイズは大きくなる傾向があります。

どの画像サイズを使用するか分からない場合は、常に JPG/Jpeg を選択するのが賢明です。すでに述べたように、JPG はファイル サイズと画像品質のバランスが取れた唯一の画像形式です。

ウェブP

Google は、より小さいファイルサイズで高品質の画像を配信するために、最新の画像形式の 1 つである WebP を開発しました。

Shopify は WebP 画像をサポートするブラウザに自動的に WebP 画像を提供するため、この形式を手動でアップロードする必要はありません。

Shopify 画像サイズ

Shopify ストアの見栄えを良くするには、適切な画像サイズを使用することが重要です。Shopify の画像サイズは、用途によって異なります。たとえば、背景画像は通常、ブログ投稿で使用する画像よりも大きくする必要があります。

Shopify が推奨するその他の画像サイズを 5 つ紹介します。

• ウェブサイトバナー: モバイル用 1200 x 400 ピクセル (360 x 120 ピクセル)
• ブログ画像: 1200 x 800 ピクセル (モバイルの場合は 360 x 240 ピクセル)
• サムネイル画像: 300 x 300 ピクセル (モバイルの場合は 90 x 90 ピクセル)
• ファビコン: 16 x 16 ピクセル
• 背景画像: 2560 x 1400 ピクセル (モバイルの場合は 360 x 640 ピクセル)

適切な画像サイズは、画像の伸縮やピクセル化を防ぎ、あらゆるデバイスでプロフェッショナルで視覚的に魅力的なプレゼンテーションを実現します。さらに、高解像度の画像を使用すると、ストアの全体的なユーザー エクスペリエンスが向上します。

Shopifyバナーを最適化するためのベストプラクティストップ5

詳細なガイドで、Shopify バナー サイズを最適化するためのベスト プラクティスのトップ 5 をご確認ください。

1. ファイルサイズに留意する

画像のファイル サイズを小さくすることは、ページ速度の遅さを解決する最も効果的な方法の 1 つです。最適なパフォーマンスを得るには、画像サイズを 70 KB 未満に抑えるのが良い目安です。

ありがたいことに、Shopify はすでに画像をある程度圧縮しています。ただし、 TinyPNGやCompress JPEGなどの無料ツールを使用して画像を圧縮することもできます。このようなツールを使用すると、圧縮の量を制御し、一度に多数のファイルを一括処理できます。

2. レスポンシブなShopifyモバイルバナーサイズを確保する

画像はすべてのデバイスで適切に表示される必要があります。モバイル ユーザー向けにストアを最適化する場合は、シームレスなブラウジング エクスペリエンスを確保するために、Shopify モバイル バナーのサイズに注意することが重要です。

買い物客のデバイスによって、画像のサイズとスケールが決まります。最良の結果を得るには、20 MB または 20 メガピクセルの制限に収まる最高品質の画像を 72 dpi でアップロードする必要があります。

推奨される Shopify モバイル バナーのサイズは通常、640 x 360 ピクセルから 750 x 1334 ピクセルの範囲で、小さい画面でも画像が鮮明に表示され、すばやく読み込まれるようになります。

3. すべての画像に一貫した編集を使用する

目は一貫性を好みます。ストアの画像を選択するときは、より洗練された外観にするために、常に一貫性を維持してください。たとえば、Shuppa がシンプルな製品写真とパレットの背景を組み合わせて、洗練されたブラウジング エクスペリエンスをどのように作成しているかをご覧ください。

もちろん、同等の写真を得るためにプロの写真撮影を計画することもできます。しかし、予算が限られている場合は、Canva や Photoshop などのデジタル ツールの助けを借りて、この一貫した視覚的なショッピング体験を実現できます。

4. A/Bテスト

最後に、画像のさまざまなバリエーションをテストして、どの画像が最も効果的かを確認する必要があります。次のようなものをテストできます。

• 各ページに商品画像はいくつありますか?
• 最も効果的な画像の種類
• 各製品コレクションページには写真がいくつありますか（10、20、100）？

ユーザーが画像とどのようにやり取りしているかを確認するには、hotjar などのヒート マッピング ツールを使用します。または、購入後の簡単なアンケートをサンキュー ページで使用して、好みの画像タイプに関する顧客のフィードバックを得る別の簡単な方法もあります。

5. 画像に名前を付ける

小売業者の大半は、デフォルトのカメラの名前を変更する手間を省いて、何百もの製品画像を急いで確認します。

しかし、SEO に興味のある人として、これは重大な間違いだと断言できます。画像名は、さまざまなキーワードに対する商品ページのランク付けに影響するのです。

検索エンジンは、ページ上のテキストをクロールするだけでなく、画像のファイル名も分析してページのコンテンツを判別します。

例として、この Allbirds 製品ページをご覧ください。

標準的なカメラファイル名（DCHIMAGE110.jpg）に従うのではなく、Allbirdsは各ファイルにわかりやすいタイトルを付けて名前を変更しました： 「TR3MJBK080_SHOE_ANGLE_GLOBAL_MENS_TREE_RUNNER_JET_BLACK_BLACK.avif」

これにより、Google がこのページを理解しやすくなり、「メンズ ツリーランナー」などの用語を探している潜在的な顧客にこのページを提示しやすくなります。

Shopifyのバナーサイズを完璧にする

Shopify バナーのサイズを最適化するのは難しい場合があります。1、2 時間で終わると予想していたタスクの 1 つが、結局ははるかに長い時間を必要とすることになります。

ただし、顧客のショッピング体験を向上させることが目標である場合は、売上とパフォーマンスのために画像を最適化するために時間をかける必要があります。

電子商取引では、顧客は商品を実際に手に取ることができないことを覚えておいてください。つまり、顧客の購入決定に影響を与える最も重要な要素の 1 つは、実際には画像であるということです。

多くの Shopify テーマにはバナーのサイズに関する特定の要件があるため、画像が適切であることを常に再確認してください。