【保存版】ECサイトの売れるUXデザイン20選！すぐ使える具体例を制作のプロが特別公開

ECサイトの売上を左右するのは、見た目の美しさよりも“買いやすさ”です。

「商品を選びやすいレイアウト」「使いやすい入力フォーム」「迷わずに決済完了できるカート」など、買い物体験を高めるユーザーエクスペリエンス・デザイン（UXデザイン）を作り込むことが、ECサイトの売上を伸ばすポイントになります。

本稿では、futureshopの制作パートナーであり、累計約500サイトのデザイン制作を手がけてきた NUSEEK株式会社（旧 株式会社ソレプロ）の市川社長が、現場で培った知見をもとに売れるUXデザインの方法論と具体例を解説します。

紹介するUXデザインの具体例は、futureshop commerce creatorをカスタマイズすることですべて実装できますし、もちろんfutureshop以外のECサイトにも参考になる内容です。

自社ECサイトの売上を伸ばす即効薬として、ぜひご活用ください。

NUSEEK株式会社（旧 株式会社ソレプロ）は、ECサイト制作および運営支援を専門とする企業です。滋賀・神戸・東京に拠点を構え、顧客の“一歩先”を見据えた伴走型支援を強みとしています。マーケティング視点を活かした課題解決力と柔軟な対応力で、多くのEC事業者の成長に寄与してきました。

「顧客の挑戦を共に進む伴走者」として、成果の創出に取り組んでいます。“知性と探求心”を信条に、常に本質を見極める姿勢を大切にし、お客さまと共に未来を切り拓くパートナーとして、価値を提供しています。

 

ECサイトで押さえておくべきUXデザインの方法論

ECサイトの売上を伸ばすには、UXデザインをどのように設計する必要があるのでしょうか。

市川さんは「人気店のデザインを真似しただけでは売れない」と指摘し、「販売戦略やブランドの世界観、お客さまに届けたいメッセージなどをしっかり考えて、それをデザインに落とし込む必要がある」と強調しました。

続いて市川さんは「ギャレットの5段階モデル」と呼ばれるUXデザインのフレームワークに言及。UXデザインを考える際は、デザインの土台となる戦略や要件、構造、骨格を決めてからビジュアルデザインを設計する必要があると説明しました。

ECサイトのビジュアルデザインを考える際は、デザインの土台となる「戦略」「要件」「構造」「骨格」を決めてから、UXデザインを設計します（市川さん）

 

UXデザインを意識した動線設計の具体例

ECサイトのUXデザインを設計する際の重要な視点として、市川さんは次の4点を挙げました。

ECサイトを訪れるユーザーが感じる不自由さを徹底的に解消し、目的地までストレスなく誘導することを意識してください（市川さん）

デザインを通じて、ECサイトを訪れるユーザーの体験を設計することが重要です。ユーザーに対して、どのような体験を提供すれば、スムーズに買い物を楽しんでいただけるのか。そのことを十分に検討し、デザインに落とし込みます（市川さん）

そして、買い物の途中での離脱を防ぐ動線設計の具体例として、次の5つを紹介しました。

１．商品のグループ分け

「サイズ」「色」「機能」「素材」「利用シーン」「ブランド」など、適切な条件で商品をグループ分けします。お客さまが絞り込み検索で商品を見つけやすくなるほか、店舗側もレコメンドなどのマーケティング施策を行いやすくなります。

２．ページの目的を明確化

カテゴリページ・商品ページ・ブランド紹介ページ・ブログなど、ページごとの目的を明確にした上で、ページごとに必要なコンテンツと動線を設計します。ECサイトを訪れるユーザーが感じる不自由さ・不安・疑問などを解消するのがポイントです。

３．ページの入口と出口を設計

ユーザーがページを訪れる目的から逆算し、ページごとの入り口と出口を設計します。例えば、メールマガジンの登録画面では登録が完了するまで余計なコンテンツを表示せず、ページからの離脱を防止。一方、登録が完了したらページ内にオススメ商品を表示して買い物を促します。

４．過不足のない情報量

ページ内に表示する情報は、多すぎても少なすぎてもユーザー体験が低下するため、お客さまが知りたいことを精査し、必要な情報を過不足なく掲載します。

５．ページ全体を俯瞰で見渡す

バナーや写真、テキストなどの良し悪しは、コンテンツ単位で評価するのではなく、ページ全体を俯瞰でチェックすることも大切です。リンクの遷移先を含め、買い物動線のすべてを顧客視点でチェックします。

 

売上アップに効くUXデザインの具体例20選

ここからは、自社ECサイトの売上アップにつながるUXデザインの具体例20個を紹介します。NUSEEK株式会社が制作現場で培った、すぐに使えるノウハウです。施策の一覧表は、ECサイトのUXデザインを改善する際のチェックリストとしてもご活用ください。

なお、ECプラットフォーム「futureshop」のcommerce creatorならノーコードで実装可能なものが多数あります。HTMLやCSS、JavaScriptのコーディングが必要なものもありますが、自社で実装することが難しい店舗さまはfutureshop制作パートナー制度をご活用いただくことも可能です。制作パートナー制度をご希望の店舗さまは「パートナー 一覧」のページをご覧ください。

 

 

商品ページ

（1）カラー検索にサムネイル連動

色で商品を絞り込む「カラー検索」の検索結果ページに、該当する色のサムネイルを表示します。検索した色とサムネイルに統一感があると、お客さまは違和感なくスムーズに商品を選べます。カラーバリエーションが多いアパレルや雑貨、家具などで特に効果的です。

（2）アンケート型の商品検索

SKUが多いECサイトでは、直感的な操作で楽しみながら商品を探せる仕組みを取り入れるとUX向上につながります。例えば、質問に答えていくと自分に合った商品が見つかるアンケート型の商品検索などがあります。

（3）タグ検索で絞り込み

ECサイトにタグ検索を実装すると、ユーザーの回遊率アップが期待できます。

具体的な方法としては、商品の特徴を表すキーワードや、ホットワードなどを商品にタグ付けし、タグごとに商品をグルーピング。タグ付けされたキーワードやホットワードのアイコンを商品ページに表示し、アイコンをタップすると商品一覧が表示されるようにします。

（4）ページ内に動画を固定表示

商品ページに動画を固定表示し、自動再生されるようにすると、写真や文章だけでは伝えきれない商品の魅力を発信することができます。商品の使い方やメンテナンスの方法、アレンジレシピといったハウツー動画も効果的です。

（5）カートボタンの明瞭な文言

カートボタンのテキストは、意味が明確で、読みやすい文章にするとクリック率が向上します。例えば、ゲストユーザー向けと会員向けの2つのカートボタンが並んでいる場合、ゲストユーザー向けには「はじめて購入・ゲスト購入の方 レジへ進む」と記載し、会員向けは「会員登録がお済みの方 レジへ進む」と記載するなど、どのボタンを押せば良いか一目で分かるようにすることが大切です。

（6）モーダルでスッキリ表示

カートボタンの周りに情報が多い場合、モーダルウィンドウを活用するとスッキリして見やすい商品ページになります。例えば、商品のカラーやサイズ、ラッピング、熨斗（のし）などを選択する場合は、選択項目をモーダル表示にするとカートまでの距離を短縮することができます。

（7）カートボタンを固定表示

商品ページの画面下部にカートボタンを固定表示し、スクロール中にどこからでも商品をカートに投入できるようにすると、コンバージョン率アップにつながります。特に、情報量が多い縦長の商品ページで効果的です。

（8）SKU別のカートボタン

色やサイズのバリエーションが多く、在庫切れが起こりやすい商材は、SKUごとにカートボタンを設置すると在庫切れが一目で分かり、ユーザーのストレスを軽減できます（スライド左側の画像）。カートボタンに再入荷通知ボタンを設定するのも販売促進に効果的です。

 

購入フロー（カート投入以降）

（9）カート画面で商品レコメンド

カート画面にレコメンド機能を実装し、カートに入っている商品の関連商品を表示すると、商品との“思わぬ出会い”をユーザーに提供することができます。買い物を楽しんでいただくことを通じて、アップセルが期待できる施策です。

（10）離脱させない入力フォーム

会員登録フォームは、入力欄を適切な大きさに調整したり、生年月日のプルダウンの初期設定をターゲット層の年齢に合わせたりするなど、ユーザー目線で使いやすさを追求することが離脱を防ぐポイントです。

（11）決済手順をイラストで表示

決済完了までの手順をイラストなどで表示し、進捗状況を可視化すると、決済途中の離脱（カゴ落ち）の防止が期待できます。注文完了までの手順をオリジナルアイコンで表示するなど、お店やブランドの世界観を表現する場としても活用できます。

（12）送料無料ラインの商品提案

送料無料ラインに達するまでの残りの金額をカート画面に分かりやすく表示した上で、低単価の商品をレコメンドし、カート画面から遷移せずに追加商品をカート投入できるようにすると、客単価アップにつながります。

（13）注文完了画面に誘導バナー

注文完了ページ（サンクスページ）に特集ページやアンケートフォーム、SNSアカウントなどへの誘導バナーを貼ると、買い物直後で熱量が高いお客さまを各種コンテンツに誘導できます。

 

コンテンツ

（14）ログイン状態でコンテンツが変化

お客さまのログイン状態に合わせてECサイトのコンテンツを変えると、顧客ニーズに合った接客が実現します。例えば、ゲストユーザーには「新規会員登録で500ポイントプレゼント」という特典バナーを表示し、会員にはお得な定期コースを案内するといった方法です。

（15）ブログや特集への動線設計

ブログや特集ページ、ハウツー動画といった購買促進につながるコンテンツは、ユーザーに見てもらうための動線設計が重要になります。トップページやカテゴリページなど、アクセス数が多いページの上部に誘導バナーを貼ると効果的です。

（16）コーディネートにリンク設定

コーディネート画像から購入ページにワンタップで遷移できるように、リンク付きのアイコンやサムネイルを分かりやすい場所に設置すると、ユーザーがスムーズに買い物を進められるようになります。

（17）UGCで賑わいを演出

SNS上の口コミ（UGC）やECサイトで集めたレビューを、ECサイトのトップページやカテゴリページなどに掲載すると、多くのファンから支持されているショップであることが伝わり、新規顧客に安心感を与えることができます。

（18）ミニブログでファン化を促進

店舗スタッフさんが書いたミニブログなどへの誘導バナーを、既存客（ログインユーザー）に限定して表示するなど、コアなお客さまに絞ったコンテンツマーケティングを行うとファン化を促進することができます。

（19）404ページにコンテンツ表示

404（Not Found）ページには、検索窓やオススメ商品、特集バナーなどを表示し、サイトからの離脱を防ぐことが重要です。エンプティカートも同様に「商品一覧に戻る」ボタンや「お買い物をお楽しみください」といったメッセージを表示します。

（20）マイページからの回遊導線

マイページは、アンケートフォームやレビュー投稿フォームなど、お客さまに使って欲しい機能や閲覧してもらいたいページへの動線を設置すると、エンゲージメント強化につながります。

 

futureshop制作パートナーがUXデザインをサポート

今回のオンラインセミナーでは、NUSEEK株式会社が現場で培ったUXデザインのノウハウを特別に公開していただきました。紹介したUXデザインの具体例は、ECサイト構築プラットフォーム「futureshop」のcommerce creatorであればカスタマイズを通じてすべて実装することができます。一部はノーコードで実現可能です。HTMLやCSS、JavaScriptなどのコーディングが必要なデザインは、ご自身で実装することが難しい店舗さまにはfutureshop制作パートナー制度をご案内しています。

futureshop制作パートナー制度では、セミナーに登壇したNUSEEK株式会社など、経験豊富な制作会社にECサイトの構築・デザイン制作・リニューアルなどを依頼することが可能です。ご希望の店舗さまは下記ページの問い合わせフォームから、お気軽にご相談ください。

futureshop制作パートナー制度の詳細は、こちらのページをご覧ください