2023 年の e コマース Web サイト再設計のための包括的なガイド

eコマースウェブサイトを再設計するのは今年ですか？あなたがそれから数年が経過している場合、あなたは多くが変わったことを知る必要があります。

言うまでもなく、現代のeコマースサイトは最初にモバイル用に設計する必要があります。私が扱うほとんどのサイトでは、モバイルデバイスからトラフィックの70％以上を獲得しているからです。ただし、これは単なる出発点にすぎません。サイトをユーザーに変えて顧客にしたい場合、考慮すべき微妙な点がたくさんあります。

私は相談しました使いやすさ過去 XNUMX 年間にさまざまな e コマースサイトを対象として、最高のサイトが従う原則を考え出しました。あなたのサイトが今日のユーザーに最適な状態であることを確認するための XNUMX つの方法を紹介します。

eコマースサイトの再設計に投資するメリット

まず、Web サイトの再設計が場合によっては良いアイデアとなり得る理由を確立する価値があります。

ストアを再設計したり、新しい Web サイトを一から作成したりするのは、時間のかかるプロセスです。市場を調査し、協力する適切な専門家を見つけ、店舗のアップグレードをテストし、プロジェクトに適切な予算を見つける必要もあります。ただし、再設計の利点が欠点をはるかに上回る場合があります。正当な理由でサイトを再設計する場合 (これについてはすぐに説明します)、ストアを更新すると次のような効果が得られます。

顧客ロイヤルティの向上: 優れたデザインのストアは、サイトを新規顧客にとってより魅力的なものにするだけでなく、既存の顧客を維持する可能性も高めることができます。サイトが使いにくい、魅力的でない、または重要な機能が欠けている場合は、顧客の88％彼らはおそらくそれに戻ることを避けるだろうと言います。したがって、Web サイトの再設計に投資すると、顧客離れを減らし、ブランドロイヤルティを高めることができます。
ブランドを強化する: ウェブサイトはブランドアイデンティティの重要な部分です。それはあなたのイメージから、あなたの個性を顧客とどのように共有するか、さらには競合他社との差別化に至るまで、あらゆるものに直接影響します。 Web サイトを再設計することで、ブランドの中核となる価値と利点をターゲットユーザーにとって確実に際立たせることができます。さらに、すべてのチャネルにわたってブランドの一貫性を確保できます。
SEOの改善: サイトを再設計すると、SERP ランキングを向上させる新しい方法を実装する機会も得られます。技術的な SEO 手法とオンサイト SEO 手法を試して、すべての適切なキーワードに対してサイトがランク付けされていることを確認できます。サイトのユーザーエクスペリエンスを改善するだけでも、顧客がサイトに長く滞在できるようになり、直帰率が減り、Google から見たサイトの権威が向上します。
売上とコンバージョンの向上: ウェブサイトを更新することは、売上とコンバージョンの増加の可能性を高める素晴らしい方法です。魅力的なサイトはあなたのブランドの信頼性を高めるため、顧客があなたから購入する可能性が高くなります。さらに、サイトでのユーザーエクスペリエンスの向上に重点を置くと、顧客が製品を購入したり、会社とやり取りしたりすることが容易になります。

e コマースウェブサイトの再設計の時期が来た 5 つの兆候

e コマース Web サイトの再設計に投資すると、多くのメリットが得られることは明らかです。ただし、上で述べたように、タイミングを正しく把握することが重要です。サイトの再設計には時間と費用がかかるため、毎月行うべきではありません。そうしないと、キャッシュフローを使い果たすことになります。

さらに、サイトを頻繁に変更しすぎると、視聴者にとってさらに混乱を招く可能性があります。顧客は、店舗を訪れるたびに店内の操作方法を学び直すことを望んでいません。

では、どのくらいの頻度でストアを再設計する必要があるのでしょうか? その質問に対する答えは、選択した業界から、e コマースプラットフォームの機能更新の速さ、さらには顧客から得られるフィードバックまで、さまざまな要因によって決まります。

Web サイトの再設計が良いアイデアであることを示す明確な兆候をいくつか紹介します。

直帰率が上昇中

用語 "直帰率」とは、顧客がウェブサイトをクリックして、他には何もせずにすぐに「戻る」ボタンを押す頻度を指します。高い直帰率は、不適切な SEO 戦略からページの読み込みの遅さまで、さまざまな要因によって引き起こされる可能性があります。ただし、多くの場合、Web サイトのデザインを変更する必要があるという兆候である場合もあります。直帰率が 70% を超えている場合は、読み込み時間の遅さ、ユーザーエクスペリエンスの低下、または全体的なデザインの悪さが原因でユーザーがサイトを放棄しているかどうかを調査する価値があります。

重要な機能が欠けています

現在の e コマースストアは顧客の期待に応えていますか? Web サイトの再デザインは、売り上げを伸ばすためのターゲットを絞ったランディングページから、SEO のためのブログやニュースセクションまで、サイトに追加機能を追加する優れた方法です。また、サイトがすべてのプラットフォームやデバイスで適切に動作することを確認する機会でもあります。サイトがモバイルデバイスですぐに読み込まれない場合、または顧客が移動中に注文することが困難になる場合は、販売を逃す可能性があります。

売上も利益も落ち込んでいる

売上を逃すということに関して言えば、利益率が一貫して低下している場合、これは Web サイトを更新する時期が来たという別の兆候である可能性があります。顧客にコンバージョンを促すには、Web サイトの見栄えとパフォーマンスが優れている必要があります。顧客が CTA (行動喚起ボタン) を見つけられなかったり、カタログ内で適切な商品を見つけられなかったり、ストレスなくチェックアウトを利用できなかったりすると、収益が低下します。 Web サイトの再設計は、サイトが可能な限り最高の ROI を確実に生み出す良い方法となる可能性があります。

顧客からの苦情

今日の顧客は、オンラインエクスペリエンスについて気に入らない点があると、かなり声を上げます。顧客がストアにコメントを残すことを許可している場合、またはソーシャルメディアで顧客があなたについて言っていることに耳を傾けている場合、Web サイトのエクスペリエンスが劣悪であるという言及が頻繁にあることに気づくかもしれません。顧客がサイトのパフォーマンスや外観について常に不満を抱いている場合は、UX デザインまたは UI デザインの専門家を探す時期が来ている可能性があります。

あなたのブランドやビジネスは進化しています

最後に、ビジネスやブランドを更新する必要がある場合、Web サイトの再設計に投資することが合理的な場合もあります。ビジネスが進化する場合は、Web サイトに新しい機能を追加することを検討する必要があるかもしれません。再設計を使用して、新しい支払い方法でショッピングカートを更新したり、顧客にサブスクリプションやメンバーシップアカウントを提供したり、ストアに新しいアプリやウィジェットを追加したりできます。再デザインを使用して、すべてのチャネルでブランドの一貫性を確保することもできます。色、フォント、ロゴ、その他すべてのブランド資産は、顧客とのあらゆるタッチポイントで一貫している必要があります。

e コマースサイトを再設計する方法: 4 ステップ

e コマースストアの再設計をいつ検討すべき理由と時期がわかったので、成功するための計画を立てましょう。を更新するときに従う正確なプロセスは注目に値します。 eコマースのウェブサイトのデザイン全体的な目標からチーム内の社内専門家まで、さまざまな要因によって異なります。

オンラインストアの更新に必要な主な手順をいくつか紹介します。

ステップ 1: サイトを監査し、目標を設定する

ストアに大幅な変更を加える前に、何を絶対に変更する必要があるかを判断する価値があります。まず、ユーザビリティとパフォーマンスに関する実際の問題を正確に特定することから始めるのが最善です。顧客の視点から Web サイトを探索し、どのような問題が購入の妨げになる可能性があるかを自問してください。

チェックアウトプロセスから CTA ボタン、さらには商品ページのデザイン内の画像に至るまで、特にスムーズに動作しないものをすべて強調表示します。サイトの主な問題を見つけたら、再設計中に達成したい目標を設定します。

単に顧客にとってよりユーザーフレンドリーなエクスペリエンスを作成したいだけですか、それともサイトの外観と検索エンジンの最適化を同時に強化することで e コマースビジネスを強化したいですか? 目標を設定すると、どのような支援が必要かを判断するのに役立ちます。

ステップ 2: 予算を把握する

次に、e コマースストアの再設計には常にある程度の投資が必要ですが、地球に負担をかける必要はないということは注目に値します。予算は、店舗をどの程度変更する必要があるか、また支援のために何人の専門家を雇う必要があるかによって異なります。

次のような単純なストアビルダーを使用している場合、 Shopify またはワードプレス、自分でテンプレートを調整したり、大金をかけずに新しいテンプレートを購入したりできる場合があります。あるいは、e コマース Web サイトのデザインがもう少し複雑で、コーディングの専門知識が必要な場合は、Web サイト開発の専門家を雇って協力してもらう必要があるかもしれません。

予算を立てる際に考慮すべきその他の点は次のとおりです。

いずれの費用も plugins または、eコマースの再設計で使用するアドオン
ワイヤーフレーム、テーマ、テンプレート、その他のツールのコスト
ストアをオフラインにする必要がある場合のダウンタイムの管理コスト。

ステップ 3: 適切なサポートを見つける

比較的シンプルな Web サイトビルダーを使用している場合、または社内に Web デザインの専門家チームがいる場合は、外部のサポートにアクセスせずにストアに変更を加えることができる可能性があります。そうでない場合は、Web 再設計を確実に成功させるために専門家を雇うことを検討する必要があります。

代理店を雇うことも、Fiverr や Upwork などのサイトのフリーランサーと協力することも検討できます。 Web デザインのスペシャリスト、Web 開発者、またはその XNUMX つの組み合わせが必要かどうかを考えてください。 Web デザインの専門家がサイトの外観と使いやすさに取り組み、開発者がバックエンド機能を管理します。

ストアの運営に専門家を雇う一方で、検索エンジンの最適化やグラフィックデザインに関するボーナスヘルプを探すことも検討することをお勧めします。これらの専門家は、マーケティング戦略が確実に成果を上げるよう支援します。

ステップ 4: 戦略的に変更を実装する

高品質の新しい店舗を構築するために必要な専門家を見つけたら、ゆっくりと慎重に変更の実装を開始します。多くの場合、変更は一度に XNUMX つずつ行うのが最善です。これにより、e コマースの再設計プロセスの手順によってサイトの他の部分が損なわれないようにすることができます。

何か問題が発生した場合にストアを以前のバージョンにロールバックできるように、各段階で利用可能なサイトのバックアップがあることを確認してください。すべての変更を完了し、サイトを再度公開したら、戦略が成功したかどうかを判断するのに役立つ可能性のある指標に細心の注意を払ってください。

次のことに重点を置いていた場合、スマートフォンを使用してサイトにアクセスする新規顧客の数を確認してください。 responsive デザイン。サイトの可視性を高めたい場合は、Google Analytics を使用して SEO パフォーマンスを追跡し、コンバージョン率を常に監視してください。

広告ⓘ

e コマースサイトを再設計する方法: 重要なヒント

ホームページで長い動画を避ける

ホームページは感動するところです。多くのウェブサイトがハイエンドの写真にお金をかけていますが、ここでビデオを使用して製品を自慢したり、ブランドストーリーを伝えたりすることを検討してください。結局のところ、ビデオは今やどこにでもあり、特にソーシャルメディアではそうです。

ビデオを正しく使用すれば、ユーザーに刺激を与えるだけでなく、ユーザーに情報を提供するのに役立ちます。しかし、ビデオがどれほど派手であっても、ユーザーが再生をクリックする必要がある場合は、ほとんどの人はそれを無視します。私が見てきた多くのユーザーテストでは、これがランディングページの動画で最も一般的な動作です。

どうして？ユーザージャーニーのこの段階では、彼らの注意のスパンは短いです。ユーザーは、サイトを離れて立ち直ってバウンスする可能性が高く、未知のものを見るために時間を費やすことはありません。

最初はユーザーがすぐに動けるように、短くて無音の自動再生のループ動画にしましょう。こうすることで、ユーザーが深く関与しなくても情報を伝えることができます。長い動画は、ユーザーの興味が高まったときに、製品の機能などを説明するのに非常に役立ちます。

: Pryntのサイトでは、短い自動再生ビデオを使用して、実際の製品を紹介しています。音ですべてを見るオプションもあります。

ホームページに過剰なコンテンツを入れないでください

ユーザーをホームページに誘導するというハードマーケティングの仕事をしていて、あなたの店に説得力のある売り込みを作成した場合、次は何をしますか？あなたの会社についてあなたに彼らに話すことができる多くがあるので、今チャンスですか？

注意してください。ランディングページを長くすると、ユーザーがスイッチを切ったり混乱したりするリスクが高まります。ユーザーは快適にスクロールできますが、コンテンツが自分のタスクに直接関連していない場合はすぐに停止します。

デザインするときはいつでも、「XNUMX ページに XNUMX つの目的」というルールを守りましょう。このページの目的は、販売している商品を紹介し、ユーザーにそれらの商品を探してもらうことです。

最新のXNUMXつのブログ投稿、最新のツイート、Instagram画像の壁を本当に見る必要がありますか？ソーシャル投稿は、ユーザーをサイトに追加したばかりであり、クリックすると再び表示されなくなるため、特に役に立ちません。

ページに載せるものが多ければ多いほど、ユーザーに与える気晴らしあなたの主な行動とあなたが彼らにしてほしい重要なことから。モバイルユーザーはセッションが短く、タスクの達成に専念する傾向があります。余分なコンテンツはそれには役立ちません。

フィルターに簡単にアクセスできるようにする

多くの商品がある場合、フィルターは、ユーザーが必要なものを見つけやすくするために不可欠です。大多数の e コマースサイト (私が調査したサイトの約 90%) は、モバイルのオーバーレイにフィルターを備えています。これは、利用可能なスペースがあまりない場合には理にかなっていますが、ユーザーが実際にそれらを見る可能性が非常に低いことを意味します.

原則としてユーザーの95％がデフォルトを変更しないこれは、フィルターメニューを開いて特定のオプションを選択する場合にも当てはまります。これは、私が見た e コマースのユーザーテストでも実証されています。リストページで製品を見つけるのは、デスクトップでの e コマースのブラウジングエクスペリエンスが優れている領域の 1 つです。

ユーザーがフィルターをかけると、ユーザーは実際に必要な製品を見つける可能性が高くなります。モバイルでのあなたの課題は、スペースを節約する方法を見つけることです。 XNUMXつの方法は、オプションのボタンを備えたページに最も関連性の高いフィルターカテゴリを表示することです（下記のMacyを参照）。 XNUMXつをタップすると、そのフィルターが適用されたリストが読み込まれ、その時点で次に関連性の高いフィルターが表示されます。

: メイシーズのサイトはいくつかのフィルターオプションをボタンとしてページに取り入れています。バーバリーは、フィルターカテゴリをページに表示します。

少なくとも、フルフィルターメニューにアクセスするためのボタンが明確であることを確認してください。また、フィルターがいつ適用されるかを明確に示す必要があるため、ユーザーは限られた結果セットをいつ表示するかを知ることができます。

大きな画像用にリスティングを再設計する

ほとんどのeコマースリスティングページは、一度に多くの商品を画面に表示しようとします。その結果、製品画像はかなり小さい傾向があります（それがサムネイル画像として伝統的に知られている理由です）。

しかし、画像は、ユーザーがどの製品を選択するかについて決定を下すのに役立つ重要な部分です。多くの場合、それはどのテキストよりもはるかに多くのことを教えてくれます。衣類や家具などの製品は、ユーザーが提供するさまざまなものを主観的に区別することに依存しています。

モバイルでも大きな画像を使用できます。 Instagramなどのアプリは、ユーザーがどこにいても高品質を期待するようにしており、私はユーザーがこれを高く評価するのをよく見ました。彼らがサイトのどこにいるかは関係ありません。優れた写真は常に愛されています。

: Airbnbには、スクロールできる大きな画像があります（左）。 Zara（右）のリストには全画面幅の画像があります。

もちろん、いくつかの画像で何かをよりよく売れると思うなら、そうしてください。旅行サイトでは、リストのサムネイルに複数の写真があり、それらをスクロールするための微妙な矢印が付いています。多くの衣料品サイトでは、製品を単独で表示し、モデルが着用するオプションを提供しています。

製品オプションをボタンとして表示する

多くの製品は、色、サイズ、素材など、さまざまなバリエーションで入手できることに注意してください。製品の詳細ページは、ユーザーが最終的に選択する場所です。選択を簡単にするために、これらのオプションをドロップダウンメニューにダンプしないようにする必要があります。

彼らはする必要があります視覚的なボタンユーザーがすべてのオプションを確認できるようにするため、バリエーションが価格の変化を意味する場合はそれらを明確にする必要があります。バリアントが製品の外観（色など）を変更する場合、それを選択すると、メインの製品イメージが更新されます。これにより、何が注文されるかについてユーザーに疑いの余地はありません。

: John Lewis（左）には、視覚的なインジケーターが付いたボタンとして製品の色があります。 Nike（右）はすべてのサイズオプションを公開し、利用できないサイズを無効にします。

別の利点は、特定のボタンを無効にすることにより、ユーザーは在庫切れのバリエーションを一目で確認できることです。この場合も、オプションのドロップダウンリストをスクロールする手間が省けます。

サイズの選択に関しては、デフォルトのサイズを設定しないことをお勧めします。ユーザーがいる場合、必要なデフォルトではなくデフォルトを追加してしまう可能性があります。これにより、多くの返品や不満を抱く顧客を獲得することができます。

Facebookは、 Twitter、Pinterest、Instagram、LinkedIn、Snapchat。ユーザーはおそらくこれらのXNUMXつ以上でたむろしますソーシャルネットワーク。それで、あなたは彼らにあなたの製品詳細ページの共有ボタンを与えるべきですか？

多くのeコマースサイトは、人々がウェブ上で自分の商品を宣伝することを奨励することを期待して、これらの小さなアイコンをまだ表示しています。残念ながら、それらはほぼ間違いなく時間の無駄です。

誰もそれらをクリックしません。実際に0.2％の人がある調査によると。また、コードのスニペットのように見えるかもしれませんが、ページの速度を遅くする追加のものがたくさん付いています。

有償の「インフルエンサー」の台頭は、現代のユーザーがブランドのために何かを持たずに放送することをもはや望まないことを意味します。より多くの人々が友人や家族とプライベートに共有することをいとわないでしょう。電子メールまたはWhatsAppなどのインスタントメッセージングサービスを介した共有を可能にするリンクは、より適切に機能する可能性があります。

支払いウォレットを統合する

などの決済財布サービス PayPal、Apple PayとAndroid Payが増加しています。それらをeコマースの決済フローのオプションと見なすことがますます一般的になっています。実際、彼らは標準のチェックアウトを中止し、おそらくクレジットカードと現金の使用全部。

: Tamara Mellon（左）のバスケットとチェックアウトには、Apple Pay、PayPal、Amazon Payのオプションがあります。グッチは、「バッグに追加」の通知からPayPalにジャンプする機能を提供します。

パスワード、指紋、または顔スキャンを入力して、すぐにチェックアウトを完了することができることは、フォームに記入するよりもはるかに便利です。 eコマースがモバイルに支配されているため、手間のかかるフォーム入力を伴わない簡単な支払いを提供することが不可欠です。

非常に使いやすいので、より多くのユーザーがあなたと一緒にチェックアウトを完了することができます。ユーザーが以前にブランドについて聞いたことがない場合は、仲介者としてのウォレットを使用する方が安全だと感じる可能性が高いため、セキュリティ上の利点もあります。

私がチェックアウトフローで実行したユーザーテスト全体で、「PayPalを使用するオプションを非常に好む」、「セキュリティに非常に配慮しており、PayPalを使用してのみ支払います」などのコメントを定期的に聞きます。 PayPalは現在よく知られていますが、どちらを使用するかを決定するときは、サイトで最も人気のある国とデバイスで行ってください。

ユーザーに収集を許可する

eコマースWebサイトの数が増えているため、ユーザーは注文を配達するのではなく収集することができます。これは、頻繁に家にいないユーザーや、自分の職場に配達できないユーザーに適しています。このオプションを指定すると、あなたから購入できるユーザーの数が増えるだけです。

最も簡単な（そしてしばしば最良の）アプローチは、チェックアウトでの配達の代わりにコレクションを追加することです。ユーザーに現在地を入力してもらい、注文を受け取る場所のオプションを表示するよう依頼します。集荷場所の営業時間を示すことも重要です。このデータは、多くの場合、配送会社との統合から取得されます。