2023 年のコンバージョン中心の e コマース設計例 5 つ

公開: 2023-10-13

5G インターネット、ペースの速いオンラインショッピング、買い物客にとっての選択肢が無数にある時代において、e コマース Web サイトが良い第一印象を与えるのにかかる時間は 50 ミリ秒以内です。ビジネスの有意義な成長を保証するコンバージョン中心の設計要素に焦点を当てることは避けられません。

コンバージョン中心のデザインは、単一の目標を念頭に置いてエクスペリエンスを作成することに重点を置いています。説得力のあるデザインと心理的トリガーをコンバージョン手法として使用し、訪問者に特定のアクションを強制します。

では、デザインを利用して訪問者を説得してコンバージョン目標を達成するにはどうすればよいでしょうか? 訪問者の注意を対象のインタラクション領域に集中させるために、さまざまなデザイン面を使用できます。心理的な援助も参加を増やすのに役立ちます。ここでは、シームレスな方法でその仕事を行っている e コマースブランドをいくつか紹介します。

1.不和

Discord は、オンラインストリーミングおよびゲーム業界と協力してキュレーションされた、ユニークなオーディオおよびメッセージングアプリケーションです。これにより、ユーザーは世界中の誰とでもつながるためのチャネルを作成できます。このアプリは短期間で大きな人気を博し、Z 世代とゲーマーコミュニティにとって欠かせない存在になりました。これは、Web サイトとアプリケーションの両方における素晴らしいデザインと完璧なユーザーエクスペリエンスに起因するものと簡単に考えられます。

ホームページは、ターゲットユーザーの興味をそそり、試してみるよう促すことができる適切な箇所をすべて紹介しています。プレミアム (Nitro) バージョンやサービスによって提供される安全性などのプラットフォームの機能を強調するシンプルなナビゲーションバーがあります。ページには、アプリの価値提案を伝える鮮明なコピーがあり、戦略的に配置された対照的な行動喚起 (CTA) が魅力的です。

デザインは、多くの空白スペースを備えた洗練されたもので、読み込み時間も短く、応答性も高く、直感的なナビゲーションを備えているため、最高の Web サイトデザインの 1 つとなっています。視覚的には、この Web サイトは、家の面白いイラストやランディングページによってすぐに訪問者の興味を引きます。

2.至福

Bliss は、パステルカラーの e コマースデザインを備えた素晴らしい e コマースサイトです。ウェブサイトは目の上の綿菓子です。このスキンケア会社は、主要な購入者グループに視覚的にアピールするために、ミレニアルピンク、ベビーブルー、Z 世代のイエローの 3 つの主要な色を使用しています。

ウェブサイトを含むブリスのマーケティングとブランディングには遊び心があふれています。ウェブサイトをひと目見るだけで、見る人は幸せな気持ちに満たされます。 eコマース商品の写真撮影も得意です。大きな写真、美しい色、使いやすいボタンはすべて、視覚的に魅力的でよく整理された Web サイトに貢献します。

同社は、マスクや洗顔料など、さまざまなスキンケア製品を製造、販売しています。マイクロコピーは、ブランドのユニークで親しみやすい姿勢をさらに強化します。ボタンのコンテンツ、セクションの見出し、フォームの説明は、友達とスキンケアルーチンについて話し合っているような気分になれる方法で書かれています。

これに加えて、Web サイトにはユーザーが作成したコンテンツが表示されますが、これはより本物らしく、視聴者の 90% に好まれています。訪問者は実際に製品を使用している人を見ることができ、すぐに信頼できる関係が心の中に構築されます。

3. たるみ

Slack もコンバージョン中心の Web サイト設計の好例です。このページは、焦点を絞り、リードを誘導して一度に 1 つの目標を達成しようとします。これは、ユーザーがアプリのダウンロード、ニュースレターの購読、e コマースビジネスのソーシャルメディアページのフォローなど、複数の種類の行動喚起に混乱したり圧倒されたりすることがないため、驚くべき効果を発揮します。このようなデザインは、多くの場合、コンバージョンを向上させるのではなく、直帰率の増加につながります。

Slack のデザインチームは、教科書的でありながらエレガントに実装された構造でブラウニーポイントを獲得しました。彼らはホームページの Z パターンレイアウトに従い、ユーザーが意識的または無意識的に目に付きやすい場所に CTA を戦略的に配置します。

これは、コピーは少ないが、より多くのヒーロー画像、ビデオ、またはイラストを含む e コマース Web サイトを作成する場合に最適です。開発者が通常従うこのパターンの本質は、左揃えと右揃えのコンテンツブロックを交互に配置することで、ページを魅力的な方法で構造化するのに役立つということです。このようなパターンにより、訪問者がページを下にスクロールするときに自然な流れが生まれます。

Slack はデスクトップでもモバイルデバイスでも同様に応答します。流動グリッドを利用して、2 列のデスクトップレイアウトを 1 列のスマートフォンスタイルに変換します。同時に、スペースを節約し、ページが長くなりすぎないように、カルーセルを使用してグラフィックを表示します。データの各ブロックは、Slack がユーザーに提供できるメリットを示しています。 Slack の Web サイトは、そのシンプルさにより効果的な Web デザインの素晴らしい例です。

4. ホームデポ

ほとんどの人は、次の DIY プロジェクトで利用できる便利なツール、ハードウェア、材料をすべて見るために、実際に実店舗に行くことを想像します。 Home Depot の Web サイトの際立った強みは、この体験をオンラインで発信できることです。 Home Depot は、顧客に関する深い洞察をウェブサイト上で見事な方法で具体化しています。

画像イラストや色彩などのビジュアルは、訪問者が最初に目に入るものです。 Home Depot は、ホームページとランディングページに関連性のある画像を使用して、ツールが動作している様子を示す画像を用意することで、この側面をうまく実現しています。これは、ターゲットユーザーにとって願望を反映する鏡のような役割を果たし、顧客が達成を望んでいる感情状態を反映します。また、タイムリーなプロモーションを表示するバナーは、訪問者に緊迫感を与えます。

検索バーは上部にあり、必要なものをすぐに見つけたい人が利用できます。最上位のサブカテゴリメニューを使用すると、より正確な製品カテゴリにすばやくアクセスできます。訪問者が下にスクロールするにつれて、テキストの密度が増加します。これにより、ページが整然とした、有益な外観になります。

他の多くの e コマースサイトのように製品カテゴリごとに検索するのではなく、店舗で行うのと同じように、家の部屋やプロジェクトごとに検索できます。ホーム・デポは、他の多くの電子商取引大手と同様に、自社の優位性を中和するために、高度な注文処理テクノロジーによる迅速な無料配送に大きく依存しています。

5. カラーポップ

ColourPop の Web サイトでは、ほとんどの Web サイトと同様に、検索パターンが右上隅に配置されています。万能虫眼鏡アイコンをクリックすると、巨大な検索バーが表示され、「ご要望をお聞かせください」という巧妙なマイクロコピーが表示されます。このパターンは、必ずしもやり取りが楽しいとは限らない一般的なデザインパターンに、ブランド独自のセンスを加えます。

ColorPop の Web サイトのフォームはシンプルでわかりやすいです。入力フィールドはスキャン可能で、適切にラベルが付けられています。余分な視覚的なスタイルや気が散る情報はありません。さらに、黒い「入力」ボタンは白い背景に対して目立つため、見落としにくいです。

製品グリッドには明確かつ一定の視覚的な階層があり、ColourPop Web サイトで最も重要なパターンの 1 つとなっています。主な焦点は製品の写真であり、次に行動喚起ボタンとテキストベースの製品情報が続きます。画像は目を引く (あえて魔法のように言う) だけでなく、テキストが構造的かつ明確に編成されているため、このパターンは非常に効果的なソリューションとなっています。買い物客の 85% は、購入を決定する際に製品情報と写真が非常に重要であると考えているため、その部門は ColourPop に有利に働いています。

まとめ

この本に掲載されている、より良いランディングページを作成するためのヒントやコツはすべて、これらのアイデアに基づいています。これらを次のマーケティング活動に活用すれば、ページの表示や感じ方の違いにすぐに気づくでしょう。カラーホイールを机の上に置いているデザイナーの友人も驚かれるでしょう。

焦点とフレームワークを作成する
一貫性を維持する
ブランドの注目を集めるメリットを紹介する
摩擦の量を減らします。

しかし、これらの原則に基づいて創造性を発揮し、新しいコンセプトをテストする方法はまだたくさんあります。では、デザインが実際にコンバージョンを増やすために機能しているかどうかをどのように判断するのでしょうか? それが物事が面白くなり始めるときです。なぜなら、万人受けする完璧なデザインなど存在しないからです。ウェブサイトにターゲットユーザーを惹きつける要素がすべて揃うまで、実験とテストを繰り返す必要があります。