あなたのeコマースビジネスのための絵に描いたような完璧な製品ページを作成する方法

公開: 2021-08-15

商品ページのデザインは、ストアで最も重要で複雑なページの1つです。潜在的な顧客があなたの製品ページにたどり着くかもしれないすべての状況を考慮してください：

検索エンジンから直接
あなたの店を閲覧した後
ターゲット広告をクリックした後

販売の最終ステップの1つとして、商品ページは次のようにする必要があります。

簡単に見つけられるように最適化され、
あなたの顧客に自信を植え付けるのに十分な情報、そして
優れたオンラインショッピング体験を提供するようにうまく設計されています

人々があなたの製品ページを見つける可能性を高め、彼らがそこに着いたらコンバージョン率を上げるためにあなたができることの範囲があります。物事を分解するために、完璧な製品ページを作成するための5部構成のガイドを作成しました。

パート1：優れた製品ページデザインのコンポーネントを理解する

製品ページの各側面を最適化する方法の詳細に入る前に、優れた製品ページの設計例を見て、各コンポーネントがどのように適合し、なぜそれらが重要であるかを理解しましょう。

ユニクロオーストラリアには、ユーザーを念頭に置いてデザインされた商品ページの優れた例があります。これは、主要なコンポーネントが強調表示された、典型的な製品ページの1つのスクリーンショットです。

ユニクロの商品ページのデザイン例

すぐに、ページの90％以上が、顧客が閲覧している製品に関するより多くの情報を顧客に提供することに専念しており、折り目の上のスペースがほとんど無駄になっていないことに気付くでしょう。各セクションをさらに細かく分類するには：

製品のタイトルと概要は簡単に見つけることができます。新しい都市を訪れるときに建物や看板が参照ポイントとして機能するのと同じように、優れたタイトルは顧客が新しいサイトをナビゲートするのに役立ちます。
製品をさまざまな角度から、モデルとともに、そして間近で紹介する画像のギャラリー。
商品画像は正面中央です。白い背景の鮮明な写真は、最高の光の中で製品を紹介しています。画像は顧客が探しているものなので、画像を目立たせるにはお金がかかります。
それが何であるか、そのデザインの背後にある考え、そしてそれが購入者の問題をどのように解決するかを説明する製品のユニークで詳細な説明。
あなたの製品とブランドへの信頼を築くのに役立つ誠実なカスタマーレビュー。
顧客は自分が欲しいものを知っていますが、それを見つける方法を知らないかもしれません。最近閲覧した商品や関連商品を表示すると、選択肢をすばやく絞り込むことができ、好みの商品を紹介する機会が得られます。
1ページに多数のオプションとバリエーションがあるため、顧客は複数の製品をナビゲートする必要がありません。
お客様がオプションの選択を終えた直後に、「カートに追加」ボタンがお客様を待っています。
コミットする準備ができていませんか？配送や返品に関するポリシーなどの追加情報へのリンクは、長引く質問への回答に役立ちます。

他の店舗がどのように商品ページをデザインしているかを見ると、いつも役に立ちます。必ずしも同じ業界内の店舗を見る必要はありません。他の業界で人気のあるWebサイトが行っている、顧客が気に入っているが競合他社には利用されていない戦略を検討することを検討してください。

最も成功している製品ページには、これらの同じコンポーネントのバリエーションがあります。

明確でユニークな説明
素晴らしい製品写真
購入者の信頼を植え付けるためのレビュー
カスタマイズオプション
「カートに追加」ボタンをクリアします
追加の配送または購入情報

パート2：製品コピーでこれらの質問に答える

優れたコピーは、製品ページにとって非常に重要です。顧客だけでなく、SEOにも。メーカーまたは一般的な製品情報を使用することは、製品が検索ランキングで競争力がないことを確認する確実な方法です。

優れた製品ページのコピーを作成するには、いくつかの質問に答えることができます。

それは何ですか？

製品コピーで最初に対処する必要があるのは、製品が正確に何であるかです。顧客が特定の製品を探している場合、これは彼らが最初に答えたいことです。

新製品の場合、彼らはそれが正確に何であるか、そしてなぜ彼らが興味を持つべきなのかを知りたがっています。

どのように問題を解決しますか？

あなたの製品はどのような問題を解決し、どのように解決しますか？これはあなたがあなたの顧客のために答える必要がある基本的な質問です。

おそらくそれはあなたを暖かく保つセーターのようなユーティリティ機能と同じくらい簡単です。その場合、製品のソリューションを可能にするのに役立った材料または製造プロセスを含めてください。

あるいは、問題はニーズの階層の少し下にあり、製品はあなたがよりスタイリッシュに見えるのを助けるだけかもしれません。製品の背後にあるどのようなストーリーまたはプロセスが、所有することを望ましいものにしますか？

あなたは問題があり、あなたの製品がそれをどのように解決できるかを確立しました。さて、なぜ彼らは競合製品よりもあなたの製品を選ぶべきなのでしょうか？セーターを最も暖かくするために、どのような追加の手順を実行しましたか？他の誰も使っていない、どんな材料を使っていますか？これがあなたの製品が特別である理由を紹介するあなたの機会です。

他のメーカーの商品を販売している場合でも、時間をかけてこの商品が優れている理由を理解していることは、時間をかけて調査したことを示しています。

それは何からできていますか？

追加する最後の詳細は、製品のメタデータと見なされる可能性のあるものです。あなたの製品に含まれる材料や成分に関する情報を提供することは、オンライン買い物客が自分で製品を感じることができないことを補うのに役立ちます。

材料などの簡単な情報と、その手入れ方法や使用目的などの基本的な手順は、顧客が製品を視覚化し、検索エンジンにより大きなコンテキストを提供するのに役立ちます。

パート3：優れた商品画像を作成する

あなたの製品の写真は、多くの場合、顧客がページで最初に見るものであり、彼らは即座にあなたの製品をネガティブまたはポジティブな光で当てることができます。しかし、第一印象は別として、製品の写真は、テキストだけで可能な場合よりもはるかに多くの詳細を伝えるのに役立ち、製品の販売に役立ちます。製品の写真撮影がうまく行われると、カスタマーサービスと返品に費やされるリソースの数を減らすことさえできます。

優れた商品画像を作成するには、次のことを行う必要があります。

良い写真から始める

きちんとした機器なしで撮影された照明が不十分な写真は、顧客にとって危険信号となる可能性があります。まともな写真を撮るのに時間をかけないと、編集に関しては実際にはもっと時間がかかる可能性があります。

しかし…素晴らしい小さな写真のセットアップを取得するために多くのお金を費やす必要はありません。 DIY製品写真のより良いレモネードスタンドガイドには、予算を問わず、DIY製品写真を始める方法が記載されています。

DIY製品写真のセットアップの基本的な要件は次のとおりです。

高品質のカメラまたはスマートフォン：製品の写真撮影にデジタル一眼レフカメラは必ずしも必要ではありません。スマートフォンは、十分に高い解像度と、光と絞りの状態を調整するための適切な数の設定を備えた写真を生成します。
一貫した光源：照明は、製品の最も重要な機能を照らし、影を隠すのに役立つはずです。自然光は、人工照明ほど高価でも扱いにくいものでもないため、始めるのに理想的です。ただし、両側から光源を均等に分散させるには、フィルライトまたはミラーを使用する必要もあります。
白い背景：白い背景は光を均一に偏向させるのに役立つため、コントラストを修正するために必要な作業が少なくて済みます。また、後でマジックワンドまたはペンツールを使用して写真を編集するのがはるかに簡単になります。始めるには、ロール紙または十分に白いシートを使用できます。
安定した表面：写真を均等に撮影します。
クリップ：背景や照明を所定の位置に保持します。
三脚：カメラを構えます。三脚を用意する必要はありませんが、さまざまな製品の一貫した写真をすばやく撮ることができます。一人で写真を撮る場合は、作業が簡単になり、ポストプロダクションの時間を節約できます。

複数の画像を使用する

1つの製品ショットを使用するだけでは十分ではありません。お客様は、さまざまな角度や視点から製品を見たいと考えています。商品の写真は、商品の最も重要な側面をどの説明よりもはるかによく見せることができるため、顧客の質問に答えるために必要な数の写真を追加することが重要です。

写真が異なれば、購入プロセスのさまざまな段階でさまざまなレベルの重要性を持つこともあります。

新しい顧客が最初にあなたの製品を発見したとき、彼らはその製品を使用している他の人々の画像を見たいと思うかもしれません。これは、タイルのように、製品自体がその利点はもちろんのこと、それが何をするのかを説明するのに十分ではない製品にとって特に重要です。そのため、会社は製品写真を使用して、それを使用する方法と理由を説明しています。

TileMate製品ページのコレクション例

しかし、実際の製品ページを掘り下げると、製品自体に焦点を当てたより詳細な写真が見つかります。ユーザーが製品ページにアクセスすると、製品が問題をどのように解決するかを発見し、それがどれだけうまく解決するかを学ぶことに興味を持っています。

TileMate製品ページのデザイン例

写真を編集する

写真を入手したら、小売店で使用できるようにするために必要なことがいくつかあります。最も明白なタスクは、背景を削除することです。白い画面を使用すると、Adobe CreativeCloudマジックワンドまたはペンツールを使用してこれを行うことができます。時間の節約になります。

その後、コントラストや照明の設定を調整して、画像の品質を向上させたり、自然光の変化を補正したりすることができます。ただし、画像の状態を一定に保つようにしてください。いかなる種類のフィルターも追加することはお勧めしません。

写真編集ソフトウェアにアクセスできない場合は、基本的な写真編集を行うために必要なすべてのツールを備えたPixlrなどのオンラインツールを使用できます。 Pixcのようなサービスは、編集されていない画像を取り込み、専門的に編集された製品写真を返すことで、画像編集のニーズに対応することもできます。

画像を最適化する

最後のステップは、写真が速度とSEOの両方に最適化されていることを確認することです。

画像サイズが適切であることを確認してください。 Shopifyでは、商品の画像を70kb未満に保つことをお勧めします。これは、画像を保存するファイル形式のタイプを知ることで実現できます。経験則として：

GIFは、アイコンやサムネイルに適した低品質の画像です。また、アニメーションもサポートしていますが、ファイルサイズと品質が低いため、大きな画像には適していません。
SVGはベクター形式です。つまり、XMLを使用して画像のコンテンツをテキスト形式で記述します。アイコンと基本的な画像をほぼ瞬時に非常に小さいファイルサイズでロードしますが、通常の画像は複雑すぎてこの形式で使用できません。
PNG画像は、より少ない圧縮をサポートするより高速なファイルであり、元の画質を維持することを意味します。また、グレースケールと透明度もサポートしていますが、ファイルサイズは一般的にeコマースの目的には大きすぎます。
JPGは、圧縮の程度を変更できる圧縮方法を指します。通常、JPG画像は、品質を大幅に低下させることなく、ファイルサイズを最大10分の1に縮小できます。これにより、高品質でファイルサイズの小さい製品画像を作成するのに理想的です。

また、適切なファイル名で画像に名前を付け、画像とコンテンツを正確に説明するタイトルとaltタグを使用していることを確認してください。 Altタグを使用して注目すべきキーワードを含めることができますが、その主な目的はアクセシビリティを支援することです。

ボーナス： Web用の画像の最適化に関するより良いレモネードスタンドの記事をチェックしてください：画像の最適化についてもっと学びたい初心者のためのステップバイステップの実用ガイド。

パート4：製品の写真の一貫性を保つ

優れたeコマースストアでは、個々の商品ページや類似商品のコレクションで同じように機能する商品写真を使用しています。一貫性のある画像を使用すると、商品の検索と比較が簡単になり、ブランドの一貫性とプロ意識を高めることもできます。

製品の写真の一貫性を保つための最良の方法は次のとおりです。

白い背景にあなたの製品を写真に撮る

優れた製品写真を一貫して作成する最も簡単な方法の1つは、白い背景を利用することです。以前の写真投稿では、独自の写真設定を作成してプロ級の製品写真を撮る方法の概要を説明しました。

白い背景に写真を置くと、次のことが可能になります。

すべての製品で一貫性を保つ
製品の特定の側面を強化する
将来的に写真を簡単に編集し、
白い背景が必要なGoogleショッピングやAmazonなどのマーケットプレイスで商品を販売します。

同じ寸法またはアスペクト比を使用する

コレクションページでは、さまざまなサイズの画像ほど目立つものはありません。 CSSを使用して最小の高さと幅を具体的に設定しない限り、コレクションページはごちゃごちゃになります。ユーザーは、クリックする場所を解読するために貴重な買い物時間を費やす必要があります。

単純な製品コレクションページも検討してください。左側のマルチサイズの商品と比較して、右側の正方形の商品を閲覧して比較するのはどれくらい簡単ですか？

商品画像コレクションページデザイン

どちらが良く見えますか？

画像を二乗するアプリやプラグインが利用可能ですが、最善のアプローチは、商品の画像が常に特定のサイズで保存されるようにすることです。

最長の辺が1000pxから1600pxのサイズの画像を作成することは問題ありませんが、すべての画像を正方形に保つようにする必要もあります。正方形の画像は、画像が水平でも垂直でも見栄えがよく、店舗全体で画像の一貫性を保ちます。

製品テンプレートを利用する

プロ並みのeコマースストアを実現するには、商品画像全体に一貫性を持たせる必要があります。これは、寸法が同じであるだけでなく、画像内で同様のスタイルと一貫した配置を持つ写真を持つことを意味します。

成功しているeコマースストアを見ると、それらの画像はそれ自体で際立っているだけでなく、すべてカメラから同じ距離に配置されているため、コレクション内にうまく収まっていることがわかります。

これで、テンプレートの上に画像を配置できます。ガイドは、画像が水平方向と垂直方向の両方の中央に配置されていることを知るためのリファレンスを提供します。また、製品がすべて一貫した規模で配置されていることを確認するのにも役立ちます。

Photoshopで製品画像テンプレートを作成する

ファイルを通常のPhotoshopドキュメント（.PSD）として保存するだけで、ガイドがあなたを待っています。あなたが作成したガイドは、編集された製品の写真をすばやくアップロードし、それらがあなたのウェブサイト全体で一貫して見栄えがすることを保証することを可能にします。

注：製品写真から小さな傷を取り除くためのステップバイステップのウォークスルー、ポストプロダクションでの製品の色の変更、写真での製品の鮮明さの向上など、製品写真を次のレベルに引き上げるためのより役立つPhotoshopチュートリアルについては、 Eコマース用のPhotoshopチュートリアル：製品写真の改善に関する記事をご覧ください。

パート5：製品の写真を次のレベルに引き上げましょう！

あなたが素晴らしい製品写真と優れた製品説明を持っているなら、あなたは高コンバージョンの製品ページのための素質を持っています。ただし、商品の写真を改善して、可能な限り最高のページを確保するためにできる最後のことがいくつかあります。

画像をスピードアップ

画像はページの読み込み時間に大きな影響を与える可能性があります。製品ページの読み込みが遅い場合、訪問者は、読み込みを待って訪問する数が少なくなるのを待ってイライラするでしょう。実際、読み込みに3秒以上かかると、訪問者の40％がWebサイトを放棄します。そのため、商品ページはすばやく読み込み、簡単に閲覧できる必要があります。これを実現するために画像を最適化する方法はいくつかあります。

1つは、画像の代わりにページの背景にCSSを使用することです。同様に、CSSを使用して、画像とボタン要素の周囲に境界線を作成する必要があります。

プラグインまたは画像ギャラリーをロードする外部ライブラリも、ページの全体的なロード時間を遅くする可能性があるため、ページの重要な要素については避ける必要があります。

また、Google PageSpeed Insightsを介してページを実行し、モバイルサイトとデスクトップサイトの両方を高速化する方法を特定することもできます。 Google PageSpeedは、圧縮できる画像、画像を最適化する方法、および圧縮することで節約できるスペースの量を示します。

Googleページスピードインサイト

ブラウザに組み込まれている開発ツールは、ページがファイルをロードする方法と、どのファイルに時間がかかるかを特定することもできます。

Google Chromeでこれを行うには：

ファイルの「タイプ」で並べ替えて読み込みに最も時間がかかっている画像を確認したり、「サイズ」で最大のファイルを表示したり、「時間」で並べ替えて時間を確認したり、「ステータス」で並べ替えてファイルができなかったかどうかを確認したりできます。ロードされました。

また、パート3のヒントを使用して、画像の速度とSEOが最適化されていることを確認してください。

ページをモバイル向けに最適化

製品ページがさまざまなモバイルデバイスでどのように表示されるかを確認するために時間を費やすことが重要です。 Hotjarなどのツールを使用すると、ユーザーがページをどのように操作しているかのヒートマップを作成できます。また、Google Analyticsをインストールしている場合は、モバイルとデスクトップのコンバージョン率を比較して、モバイルショッピングエクスペリエンスが最適かどうかを判断できます。

モバイル向けに製品ページを最適化

Google Analyticsは、コンバージョン率と購入経路に関する有用なeコマースデータの山を提供できますが、複数のデバイスでWebサイトがどのように表示されるかを体験する最も簡単な方法は、自分で体験することです。 Chromeデバイスツールバー（FirefoxまたはSafariを使用している場合はレスポンシブデザインモード）を使用すると、どのデバイスでも製品ページがどのように表示されるかを確認できます。

モバイル製品ページに関するいくつかの考慮事項：

画像を前面中央に配置します。ユーザーが必要なときに追加情報を利用できるようにする必要がありますが、画像の邪魔にならないようにする必要があります。
画像のサイズが縮小され、サードパーティのプラグインが多すぎないことを確認して、サイトを高速化します。読み込み時間は、モバイルネットワークを介して読み込む顧客にとって特に重要です。
顧客が常に検索バー、メインメニュー、カートにアクセスできるように、固定メニューバーの使用を検討してください。

顧客はモバイルデバイスでコンテンツを閲覧したり読んだりする時間が少なくなるため、画像はモバイルの買い物客にとって特に重要な役割を果たします。最高のモバイルショッピング体験を提供できるように、画像を目立たせてすばやく読み込むようにしてください。

SEOを忘れないでください

製品ページは、SEOの観点からは十分に活用されていないリソースのように思われることがよくあります。あなたの製品ページはあなたにあなたの店が検索リストでより高くランク付けするのを助けることができるあなたの最も価値がありそしてユニークなコンテンツのいくつかを特集する機会をあなたに与えます。多くの場合、製品ページはまさに顧客が見たいものです。

商品ページのSEOを強化するには：

商品の概要を明確に示し、顧客が検索する用語と一致する独自の商品説明を作成します。
画像を説明するALTタグ、適切なタイトルタグ、および関連するファイル名を含めることにより、画像メタデータを最適化します。
商品ページに動画を追加することを検討してください。ページに動画を追加することがSEOに役立つかどうかは議論の余地がありますが、動画は商品のコンテキストを向上させ、コンバージョンを向上させるのに役立ちます。

ズーム用に画像を最適化

ほとんどのeコマースサイトでは、画像にカーソルを合わせて商品を「ズームイン」できることに気づきましたか？これは、ほとんど第二の性質である機能になっています。クリックまたはホバーすると、より大きなバージョンの製品が表示されると予想されます。

ズーム用に製品画像を最適化する

この機能を持つことは重要な目的を果たします。これにより、顧客は製品の品質を詳細に確認できます。また、顧客が製品を物理的に感じたり見たりすることができないときに、顧客の購入に自信を植え付けるのにも役立ちます。ステッチの品質や色合いによって、競合他社よりもお客様が製品を選択する際に違いが生じる場合があります。

では、ズーム機能が機能していることをどのように確認しますか？秘訣は、正しい画像サイズの使い方を知っていることです。

ほとんどのeコマースWebサイトには、さまざまな「テンプレート」があります。これらのテンプレートは、そのテンプレートサイズに一致するように画像のサイズを変更します。たとえば、次のようになります。

50px x50pxのサムネイルテンプレート
100px x100pxのコレクション画像テンプレート
150px x150pxの関連画像テンプレート
500px x500pxのメインの写真テンプレート

ズーム機能は通常、画像を元のサイズで表示することで機能します。したがって、1000px x 1000pxで保存した画像がある場合、メインの写真テンプレート（500px x 500px）にカーソルを合わせると、その2倍のサイズで表示されます。

つまり、ズーム機能を機能させるには、画像のサイズがメインの写真テンプレートよりも大きいことを確認する必要があります。

結論

これらの5つの章では、製品ページを作成する際に十分に考慮する必要がある最も重要な領域を幅広くカバーすることができました。これらのガイドラインに従えば、顧客に優れたショッピング体験を提供し、高いコンバージョン率を享受できる製品ページが表示されます。ガイドができたので、外に出て、eコマースストアの売り上げを伸ばす優れた商品ページを作成するのはあなた次第です。