ECサイトにおけるデザイン思考とは？顧客体験を改善する実践手順を徹底解説

ECサイトの改善では、売上、購入率、離脱率、広告費用などの数値が重視されます。しかし、数値だけを確認しても、顧客がなぜ商品を購入しなかったのか、どの情報に不安を感じたのか、どの操作で迷ったのかまでは分かりません。数値の変化だけを追い続けると、ボタンの色や表示位置など、表面的な修正に偏る可能性があります。

ECサイトにおけるデザイン思考とは、企業側が売りたい商品や追加したい機能から考えるのではなく、顧客の行動、目的、感情、利用環境から課題を発見し、解決策を試しながら改善する方法です。商品を探す場面から、比較、購入、配送、返品、再購入までをひとつの顧客体験として捉えます。

本記事では、ECサイトでデザイン思考を実践する方法を、顧客調査、課題定義、発想、試作品制作、利用者検証、商品検索、商品詳細、購入手続き、購入後の支援まで体系的に解説します。これからECサイトを立ち上げる担当者だけでなく、既存サイトの購入率や継続率を改善したい企業にも役立つ内容です。

1. ECサイトにおけるデザイン思考とは

ECサイトにおけるデザイン思考とは、顧客の行動や感情を理解し、顧客自身も明確に説明できていない問題を発見して、解決策を小さく試す進め方です。画面の見た目を美しくするだけではなく、商品を知ってから購入後に満足するまでの体験全体を対象にします。

ここでは、ECサイトでデザイン思考を活用する際に理解しておきたい考え方を整理します。

1.1 顧客の目的からサイトを設計する

ECサイトを運営する企業は、売上や購入数を中心に考えがちです。しかし、顧客の目的は商品を購入することそのものではなく、商品を使って生活上や業務上の問題を解決することにあります。

たとえば、収納用品を探す顧客の目的は、箱を購入することではなく、散らかった部屋を整理して快適に暮らすことです。顧客の最終目的を理解すると、商品分類、説明文、使用例、提案内容をより役立つ形に変更できます。

1.2 顧客の発言と行動の違いに注目する

顧客はアンケートで「価格が高かったから購入しなかった」と答えていても、実際には送料が最後まで分からず不安だった可能性があります。発言だけを基に判断すると、本当の問題を見落とします。

デザイン思考では、顧客の発言に加えて、閲覧したページ、迷った場所、比較した商品、戻る操作、入力の中断などを観察します。発言と行動を組み合わせることで、より正確に課題を捉えられます。

1.3 完成前に小さく試す

ECサイトの大規模な改修には、設計、開発、確認、公開に多くの時間と費用が必要です。完成後に顧客の期待と合っていないと分かると、大きな手戻りが発生します。

デザイン思考では、紙に描いた画面や簡単な試作品を使い、開発前に顧客の反応を確認します。早い段階で問題を発見することで、不要な機能開発や大規模な修正を減らせます。

1.4 部門を越えて顧客体験を考える

顧客がECサイトで経験する問題は、制作担当者だけでは解決できません。商品情報、在庫、価格、配送、決済、問い合わせ、返品など、複数部門の業務が関係します。

デザイン思考では、販売、物流、顧客対応、商品企画、開発などの担当者が同じ顧客体験を確認します。部門ごとの都合ではなく、顧客が目的を達成できるかを共通の判断基準にします。

1.5 継続的な改善を前提にする

顧客の期待、利用端末、競合サービス、決済方法は変化し続けます。一度改善したECサイトでも、時間が経過すると新しい問題が生まれます。

デザイン思考は、一度の改修で完成を目指す方法ではありません。調査、課題定義、試作、検証、改善を繰り返し、顧客の変化に合わせて体験を更新します。

2. ECサイトでデザイン思考が必要な理由

EC市場では、商品数、価格、配送速度だけで差別化することが難しくなっています。顧客は商品そのものだけでなく、探しやすさ、比較のしやすさ、説明の分かりやすさ、購入後の安心まで含めてサイトを評価します。

ここでは、ECサイトでデザイン思考が必要とされる理由を詳しく解説します。

2.1 商品だけでは差別化しにくい

多くのECサイトでは、同じ商品や似た機能の商品が販売されています。価格差が小さい場合、顧客は使いやすさや信頼感を基準に購入先を選びます。

商品情報を簡単に比較できる、送料が分かりやすい、返品条件が明確であるといった体験が、購入判断に影響します。顧客体験を設計することが、商品以外の重要な競争力になります。

2.2 顧客の不安が購入を妨げる

ECサイトでは、顧客が商品を直接手に取れません。大きさ、質感、色、使用感が分からないため、対面販売よりも多くの不安が生まれます。

顧客が必要とする情報を適切な場所で提供できなければ、商品に興味があっても購入を諦めます。デザイン思考によって不安が生まれる場面を観察し、必要な支援を設計できます。

2.3 わずかな操作負担が離脱につながる

実店舗では、分からないことがあれば店員に質問できます。しかし、ECサイトでは、顧客が画面上の情報だけで次の行動を判断しなければなりません。

入力項目が多い、ボタンの意味が分かりにくい、前の画面へ戻れないといった小さな負担でも、離脱につながります。顧客の行動を観察することで、運営者が気付きにくい障害を発見できます。

2.4 数値だけでは原因を判断できない

商品詳細ページの離脱率が高くても、原因が価格、写真、説明、在庫、送料のどれにあるかは数値だけでは分かりません。間違った原因を想定すると、効果のない修正を続けることになります。

行動データと顧客への聞き取りを組み合わせることで、数値の背景を理解できます。問題の場所と理由を分けて確認することが重要です。

2.5 顧客との関係が購入後も続く

ECサイトの顧客体験は、注文完了画面で終わりません。注文確認、配送状況、受け取り、使用開始、返品、問い合わせ、再購入まで続きます。

購入後の体験が悪ければ、一度売上が発生しても顧客は戻りません。長期的な関係を考えるうえでも、顧客体験全体を対象にするデザイン思考が必要です。

3. ECサイトの顧客体験を構成する要素

ECサイトの顧客体験は、ひとつの画面や機能だけで決まりません。広告、検索結果、商品一覧、商品詳細、決済、配送通知など、複数の接点がひとつの印象をつくります。

ここでは、ECサイトの顧客体験を構成する主要な要素を確認します。

3.1 商品を知るまでの体験

顧客は検索結果、広告、口コミ、動画、知人の紹介などを通じて商品を知ります。最初に目にする情報が、商品や企業に対する期待を形成します。

広告で伝えた価格や条件と、サイト上の表示が異なると不信感が生まれます。外部の情報からECサイトへ移動した後も、説明や表現が一貫していることが重要です。

3.2 商品を探す体験

顧客が目的の商品を見つけるまでには、分類、検索、絞り込み、並び替え、関連商品の表示などが関係します。商品数が多いほど、探しやすさが重要になります。

検索結果が多すぎる、分類名が分かりにくい、条件を組み合わせられないといった問題は、顧客の負担を増やします。目的の商品へ短時間で近づける設計が必要です。

3.3 商品を理解して比較する体験

商品詳細ページでは、画像、価格、特徴、仕様、在庫、配送、利用者の評価などを確認します。顧客は複数の商品を比較し、自分に合うものを判断します。

必要な情報が商品ごとに異なる位置に表示されると、比較が難しくなります。重要な項目を共通の形式で提示し、違いを理解しやすくする必要があります。

3.4 購入手続きを行う体験

商品をカートへ入れた後、顧客は数量確認、配送先入力、配送方法選択、決済、最終確認を行います。この段階での問題は、直接的な売上機会の損失につながります。

最後まで送料が表示されない、会員登録を強制される、入力エラーの理由が分からないといった問題は、購入直前の顧客を離脱させます。安心して完了できる流れが重要です。

3.5 購入後の体験

注文後には、確認メール、配送通知、商品の受け取り、使用方法、問い合わせ、返品などの体験があります。購入前に期待していた内容と実際の商品が一致するかも評価されます。

購入後の不安を減らし、問題が起きたときに簡単に支援を受けられる設計が必要です。良い購入後体験は、再購入や他者への推奨につながります。

4. 顧客を理解するための調査方法

デザイン思考では、担当者の経験や思い込みではなく、実際の顧客情報を基に改善します。顧客調査は、何を作るかを決める前に、何が問題なのかを理解するために行います。

ここでは、ECサイトで利用できる代表的な顧客調査方法を解説します。

4.1 顧客への聞き取り

顧客への聞き取りでは、欲しい機能を直接質問するのではなく、最近商品を購入した経験を具体的に聞きます。どのように商品を知り、何を比較し、どこで迷ったかを確認します。

「なぜそうしたのか」「そのとき何を心配したのか」と掘り下げることで、行動の背景を理解できます。抽象的な感想よりも、実際の出来事を中心に質問することが重要です。

4.2 操作の観察

顧客にECサイトを利用してもらい、商品を探して購入するまでの行動を観察します。どこを見て、どの言葉を理解できず、どこで操作を止めたかを記録します。

顧客が問題なく使えたと回答していても、実際には何度も戻ったり、長時間迷ったりしている場合があります。発言だけでは分からない負担を発見できる方法です。

4.3 問い合わせ内容の分析

顧客から寄せられる質問には、サイト上で不足している情報が表れます。同じ質問が繰り返されている場合、顧客の理解力ではなく、情報設計に問題がある可能性があります。

問い合わせ件数だけでなく、質問が発生したページ、購入前後のどちらで発生したか、解決までの時間も確認します。質問を減らすことではなく、顧客が自力で判断できる状態を目指します。

4.4 行動記録の分析

閲覧ページ、検索語、絞り込み条件、カート追加、入力エラー、離脱場所などを確認すると、顧客がつまずいている可能性のある場所を発見できます。

ただし、行動記録だけでは理由を判断できません。問題の場所を数値で見つけ、聞き取りや観察によって原因を確認する組み合わせが有効です。

4.5 購入しなかった顧客の調査

購入者だけを調査すると、サイトを利用できた人の意見に偏ります。商品を探して途中で諦めた人や、他社で購入した人の体験も重要です。

購入しなかった理由を確認すると、価格以外にも、送料、支払い方法、納期、情報不足、信頼性などの問題が見つかります。離脱者の行動を理解することで、大きな改善機会を発見できます。

5. 対象顧客を具体化する方法

ECサイトでは、すべての顧客をひとつの利用者像として扱うと、誰にも十分に役立たない体験になる可能性があります。購入目的や経験によって、必要な情報や支援は異なります。

ここでは、改善対象となる顧客を具体化する方法を説明します。

5.1 年齢や性別だけで分けない

年齢や性別は顧客を理解する参考になりますが、それだけでは行動や目的を説明できません。同じ年代でも、商品知識や購入理由は大きく異なります。

商品を初めて購入する人、買い替える人、贈り物を探す人など、利用状況を基準に分けることが重要です。実際の行動に関係する条件を重視します。

5.2 購入目的を整理する

顧客が自分用に購入するのか、家族用なのか、業務用なのかによって、重視する情報は変わります。自分用では好みが重視され、贈り物では包装や到着日が重要になる場合があります。

目的を整理すると、同じ商品でも異なる説明や案内が必要だと分かります。顧客が置かれている状況に合った導線を設計できます。

5.3 商品知識の違いを確認する

初めて購入する顧客は、専門用語や仕様の違いを理解できない場合があります。一方、経験者は詳細な条件を指定して短時間で商品を探したいと考えます。

初心者向けの案内と、経験者向けの絞り込みを両立させることが重要です。ひとつの情報量をすべての顧客へ強制しない設計が求められます。

5.4 利用環境を把握する

顧客が自宅の大型画面で比較するのか、移動中に携帯端末で購入するのかによって、必要な体験は異なります。通信環境や操作できる時間も影響します。

短時間で購入する顧客には、情報を簡潔に提示し、入力を減らす必要があります。複数日にわたって比較する顧客には、保存や履歴機能が役立ちます。

5.5 実際の調査結果から人物像を作る

対象顧客の人物像は、担当者の想像だけで作るものではありません。聞き取り、行動記録、問い合わせ内容などを基に、共通する目的や課題を整理します。

名前や顔写真だけを設定しても、改善には役立ちません。目的、行動、障害、判断基準、必要な情報を具体的に記載することが重要です。

6. 顧客体験マップを作成する方法

顧客体験マップは、顧客が目的を達成するまでの行動、接点、感情、問題を時系列で整理したものです。ECサイト内部の画面だけでなく、広告、配送、問い合わせなども含めて確認できます。

ここでは、ECサイト向けの顧客体験マップを作成する手順を解説します。

6.1 対象となる行動範囲を決める

最初に、どの顧客のどの体験を整理するか決めます。商品を知ってから購入するまで、注文から受け取りまでなど、開始点と終了点を明確にします。

範囲が広すぎると内容が抽象的になります。改善したい事業課題と関係する体験を中心に、必要な範囲へ絞ります。

6.2 顧客の行動を時系列で並べる

顧客が検索する、商品一覧を見る、詳細を確認する、比較する、カートへ入れるなど、実際の行動を順番に並べます。

企業の業務手順ではなく、顧客が行うことを記載します。顧客が別のサイトを見たり、家族へ相談したりする行動も含めます。

6.3 接点を整理する

各行動で顧客が触れる広告、検索結果、商品ページ、電子メール、配送通知などを記載します。担当部門も合わせて整理すると、改善時の責任範囲が分かります。

企業が直接管理していない口コミや比較サイトも、顧客の判断に影響します。顧客の視点から接点を幅広く捉えることが重要です。

6.4 感情の変化を記録する

期待、安心、不安、混乱、満足など、各段階で顧客が感じることを整理します。感情が大きく低下する場所は、重要な改善候補です。

感情を担当者の想像だけで記載しないよう注意します。顧客への聞き取りや操作観察から得た情報を基にします。

6.5 課題と改善機会を整理する

顧客が目的を達成するうえでの障害を記載し、改善後にどのような状態を目指すかを考えます。解決策をすぐにひとつへ固定しないことが重要です。

問題の大きさ、発生頻度、事業への影響を比較し、優先順位を決めます。顧客体験マップを作ること自体ではなく、改善行動へつなげることが目的です。

7. ECサイトの課題を定義する方法

調査で集めた情報を改善へつなげるには、問題を明確に定義する必要があります。離脱率や売上低下は結果であり、顧客が困っている原因そのものではありません。

ここでは、デザイン思考に基づいて課題を定義する方法を解説します。

7.1 数値を課題そのものにしない

「購入率が低い」「離脱率が高い」という表現だけでは、何を改善すべきか判断できません。数値は問題が存在する可能性を示す情報です。

顧客がどの状況で、何を理解できず、どの行動を完了できないのかを具体化します。顧客の体験として課題を表現する必要があります。

7.2 症状と原因を分ける

カート離脱が多いという症状には、送料、会員登録、入力エラー、決済方法など複数の原因が考えられます。ひとつの原因を想定して修正すると、効果が出ない可能性があります。

行動記録で問題の場所を特定し、顧客調査で理由を確認します。原因が確認できるまで、解決策を決めつけないことが重要です。

7.3 顧客の目的を含めて表現する

「商品比較機能を追加する」という表現は解決策であり、課題ではありません。「顧客が商品の違いを理解できず、自分に合う商品を選べない」と表現します。

顧客の目的と障害を含めると、比較機能以外の解決策も検討できます。説明方法や分類、相談支援など、発想の幅が広がります。

7.4 優先順位を付ける

すべての課題を同時に改善することは難しいため、顧客への影響、発生頻度、売上への影響、改善可能性を確認します。

購入できない、誤った商品を選ぶ、個人情報に不安を感じるといった重大な問題は優先度が高くなります。細かな見た目の問題より、目的達成を妨げる問題を優先します。

7.5 改善後の状態を定義する

課題を整理するときは、問題だけでなく、改善後に顧客がどのような状態になるべきかを決めます。「初めての顧客が商品の違いを理解し、自信を持って選べる」といった形です。

改善後の状態が明確であれば、試作品や検証の判断基準を設定できます。関係者の認識もそろえやすくなります。

8. 顧客価値につながる改善案を生み出す方法

課題を定義した後は、すぐにひとつの案へ決めず、複数の解決方法を考えます。最初に思い付いた案は、既存の仕組みや担当者の経験に影響されている可能性があります。

ここでは、ECサイトの改善案を幅広く考える方法を説明します。

8.1 顧客の目的から発想する

「検索機能を改善する」ではなく、「顧客が短時間で自分に合う商品へ到達する」という目的から考えます。

目的を固定し、手段を柔軟にすると、質問形式の案内、用途別分類、購入履歴からの提案など、複数の方法が生まれます。

8.2 個人で考える時間を設ける

最初から全員で話し合うと、役職者や発言力の強い人の案に偏ります。参加者が個別に案を考え、後から共有する方法が有効です。

商品担当、物流担当、顧客対応担当では、見えている問題が異なります。個人作業によって、それぞれの専門性を生かせます。

8.3 異なる業界を参考にする

競合ECサイトだけを参考にすると、似た画面や機能になりやすくなります。顧客が感じている問題を抽象化し、他業界の解決方法を探します。

複雑な選択を支援したい場合は、旅行予約、保険、教育サービスなども参考になります。業界ではなく、顧客の行動や感情を基準に事例を探します。

8.4 制約を一度外して考える

発想段階から費用や開発期間を強く意識すると、小さな修正案しか出ません。最初は理想的な体験を考え、その後に実現方法を調整します。

実現が難しい案でも、一部分だけなら短期間で試せる場合があります。理想案を分解し、検証可能な形に変えることが重要です。

8.5 顧客価値と実現性で選ぶ

複数の案を出した後は、顧客への価値、実現可能性、事業効果、検証しやすさを比較します。

実装しやすさだけで決めると、顧客への影響が小さい案に偏ります。価値が高い案を、どのように小さく試せるかを考えます。

9. ECサイトの情報設計を改善する方法

情報設計とは、顧客が必要な情報を見つけ、内容を理解し、次の行動を判断できるように整理することです。商品数や説明が増えるほど、情報の構造が重要になります。

ここでは、ECサイトの情報設計をデザイン思考で改善する方法を解説します。

9.1 顧客が使う言葉で分類する

社内の商品分類や管理番号は、顧客にとって分かりにくい場合があります。顧客がどのような言葉で商品を探しているかを調査します。

用途、利用場面、悩みなど、顧客が理解しやすい分類を検討します。企業内部の都合ではなく、顧客の判断方法に合わせます。

9.2 情報の優先順位を決める

すべての情報を同じ強さで表示すると、顧客は重要な内容を見つけられません。購入判断に必要な情報を優先して表示します。

価格、在庫、配送日、返品条件など、商品によって重要度は異なります。顧客調査を基に順序を決める必要があります。

9.3 見出しで内容を理解しやすくする

長い商品説明を文章だけで表示すると、顧客は必要な部分を探しにくくなります。特徴、仕様、使用方法、注意点などを見出しで分けます。

見出しだけを読んでも、ページ全体の内容が分かるようにします。顧客が自分に必要な情報へすぐ移動できる構成が重要です。

9.4 次の行動を明確にする

商品ページを見た後に、比較、保存、カート追加、問い合わせのどれが可能なのかを分かりやすく示します。

複数のボタンを同じ強さで表示すると、顧客が迷います。ページごとに中心となる行動を決め、補助的な行動と区別します。

9.5 不要な情報を減らす

情報を追加し続けると、重要な内容が埋もれます。利用されていない説明や、購入判断に関係しない表示を確認します。

情報を削除する場合は、担当者の感覚だけで決めず、顧客が何を確認しているかを調査します。必要な情報を残しながら、理解の負担を減らします。

コード例：商品情報を見出しごとに表示する

<article class="商品情報">
 <h1>軽量折りたたみ傘</h1>

 <section>
   <h2>商品の特徴</h2>
   <p>約180グラムで、持ち運びやすい折りたたみ傘です。</p>
 </section>

 <section>
   <h2>大きさと重さ</h2>
   <dl>
     <dt>使用時の直径</dt>
     <dd>約98センチメートル</dd>

     <dt>収納時の長さ</dt>
     <dd>約24センチメートル</dd>

     <dt>重さ</dt>
     <dd>約180グラム</dd>
   </dl>
 </section>

 <section>
   <h2>配送予定</h2>
   <p>本日注文した場合、最短で翌日に発送します。</p>
 </section>

 <button type="button">カートに追加する</button>
</article>
 

この例では、商品情報を特徴、大きさ、配送予定に分けて表示しています。実際のページでは、顧客が購入判断で重視する項目を調査し、表示順序を調整します。

10. 商品一覧ページを改善する方法

商品一覧ページは、顧客が候補を見つけ、比較対象を絞り込む場所です。表示する商品数が多いだけでは、顧客が目的の商品へ到達できるとは限りません。

ここでは、商品一覧ページを改善する具体的な方法を解説します。

10.1 一覧で必要な情報を見せる

商品名と画像だけでは、顧客が詳細ページを開くべきか判断できない場合があります。価格、特徴、在庫、評価など、比較に必要な情報を表示します。

情報を増やしすぎると一覧性が低下するため、顧客が最初に確認する項目を優先します。商品種類によって表示内容を変えることも有効です。

10.2 商品画像の条件を統一する

画像の大きさ、背景、撮影角度が商品ごとに異なると、比較しにくくなります。主要画像の条件を統一します。

商品の特徴を理解するために複数角度が必要な場合は、一覧では代表画像を表示し、詳細ページで追加画像を確認できるようにします。

10.3 並び替えの意味を明確にする

おすすめ順、人気順、新着順などの基準が分からないと、顧客は結果を信頼できません。どのような基準で並んでいるかを分かりやすくします。

顧客が価格、評価、配送日など、自分の判断基準で並び替えられることも重要です。初期表示だけを企業側の都合で固定しないようにします。

10.4 比較候補を保存できるようにする

複数の商品を検討する顧客は、詳細ページと一覧ページを何度も行き来します。候補を保存したり、比較一覧へ追加したりできると負担が減ります。

保存機能を利用するために会員登録を強制すると、別の負担が生まれます。検討段階では簡単に使える方法を検討します。

10.5 該当商品が少ない場合も支援する

絞り込み結果がゼロ件の場合、顧客は次に何を変更すればよいか分かりません。条件を削除する案内や、近い条件の商品を提示します。

単に「商品がありません」と表示するのではなく、別の選択肢へ進めるよう支援します。顧客の目的を完全に中断させないことが重要です。

11. 検索と絞り込みを改善する方法

商品検索は、購入目的が明確な顧客にとって重要な機能です。検索語と商品情報が一致しないと、在庫があっても商品を見つけてもらえません。

ここでは、検索と絞り込みを利用者中心に改善する方法を説明します。

11.1 顧客の検索語を分析する

顧客が入力する言葉は、企業が商品情報で使用する正式名称と異なる場合があります。略称、用途、悩み、色の表現などを確認します。

検索結果がゼロになる言葉を分析し、言い換えや関連語を登録します。顧客の言葉と商品情報を結び付けることが重要です。

11.2 入力間違いを支援する

文字の入力間違いや表記の違いで結果が表示されないと、顧客は商品がないと判断します。近い言葉を提案し、修正候補を示します。

自動的に結果を変更する場合は、どの言葉として検索したかを表示します。顧客が検索結果を理解できる状態を保ちます。

11.3 絞り込み項目を顧客基準で選ぶ

内部管理の属性をそのまま表示しても、顧客が意味を理解できない場合があります。用途、大きさ、価格、配送日など、顧客が購入時に使う条件を優先します。

商品の専門知識が必要な条件には、説明や選択例を追加します。顧客が自分に必要な条件を判断できるよう支援します。

11.4 選択中の条件を見えるようにする

複数の条件を選んだ後、何が適用されているか分からないと、結果を調整できません。選択中の条件を一覧で表示します。

条件をひとつずつ解除できるようにし、最初からやり直す負担を減らします。結果件数の変化も早い段階で確認できると便利です。

11.5 検索結果がない場合の行動を用意する

検索結果がない場合は、表記変更、条件解除、関連分類などの選択肢を提示します。問い合わせや入荷通知へ進める方法も考えられます。

ゼロ件ページも重要な顧客接点です。何も表示しないのではなく、顧客の目的に近い次の行動を設計します。

12. 商品詳細ページを改善する方法

商品詳細ページは、顧客が購入するかどうかを判断する中心的な場所です。情報を増やすだけではなく、顧客が必要な順序で理解できるように設計する必要があります。

ここでは、商品詳細ページの主要な改善ポイントを解説します。

12.1 商品の価値を最初に伝える

商品名や仕様だけでは、顧客が自分に必要な商品か判断できません。どのような人の、どのような問題を解決する商品なのかを最初に伝えます。

宣伝表現だけでなく、具体的な利用場面を示すことが重要です。顧客が自分の生活や業務で使う様子を想像できるようにします。

12.2 写真で不確実性を減らす

ECサイトでは商品を直接確認できないため、写真が重要です。正面だけでなく、側面、裏面、使用中、大きさが分かる写真を用意します。

写真を増やすだけではなく、それぞれが顧客のどの疑問を解決するかを考えます。色や質感が実物と大きく異ならないように注意します。

12.3 仕様を分かりやすく説明する

専門的な仕様は、経験者には役立ちますが、初心者には意味が分からない場合があります。数値だけでなく、利用上どのような違いがあるかを説明します。

「容量20リットル」と表示するだけでなく、何がどれほど入るかを例示すると理解しやすくなります。専門情報と日常的な説明を組み合わせます。

12.4 配送と返品条件を早く示す

配送日や返品条件を購入直前まで表示しないと、顧客は不安を抱えたまま検討します。商品詳細ページで確認できるようにします。

地域や数量によって条件が異なる場合は、顧客が自分の条件を入力して確認できる仕組みが有効です。重要な条件を隠さないことが信頼につながります。

12.5 利用者の評価を判断材料にする

利用者の評価は、企業の説明だけでは分からない使用感を伝えます。高評価だけでなく、低評価も含めて確認できることが信頼につながります。

評価の件数、購入時期、使用目的なども表示すると、顧客が自分との近さを判断できます。不自然な評価表示は逆に不信感を生むため注意が必要です。

13. カート画面を改善する方法

カート画面は、顧客が選んだ商品と最終的な条件を確認する場所です。購入を促すことだけでなく、間違いや不安を減らすことが重要です。

ここでは、カート画面を改善するポイントを説明します。

13.1 商品内容を確認しやすくする

商品名、画像、色、大きさ、数量などを明確に表示します。似た商品を複数購入する場合でも、違いが分かるようにします。

詳細ページへ戻らなくても主要な条件を確認できることが重要です。選択内容を間違えている場合は、カート内で修正できるようにします。

13.2 数量変更と削除を簡単にする

数量変更や削除の方法が分かりにくいと、顧客は購入手続きを中断します。操作後は金額がすぐ更新されるようにします。

誤って削除した場合に元へ戻せる仕組みも有効です。操作への不安を減らすことで、顧客が安心して内容を調整できます。

13.3 送料を早く表示する

送料が購入直前まで分からないと、顧客は想定外の金額に驚きます。可能な範囲でカート段階に表示します。

配送先が必要な場合は、郵便番号など最小限の情報で確認できるようにします。最終金額の透明性が重要です。

13.4 購入時期を急がせすぎない

在庫数や割引終了時間を利用して過度に急がせると、短期的な購入は増えても信頼を失う可能性があります。

実際の在庫や期限を正確に伝え、誤解を招く表現を避けます。顧客が納得して購入できる体験を優先します。

13.5 不要な追加提案を減らす

関連商品や追加サービスの提案は有効ですが、購入手続きを妨げるほど多く表示すると逆効果です。

顧客が選んだ商品と本当に関係する提案に絞ります。断っても何度も表示される設計は避けます。

14. 購入手続きを改善する方法

購入手続きは、顧客が住所、配送、決済などの情報を入力する重要な段階です。わずかな分かりにくさが、購入直前の離脱につながります。

ここでは、購入手続きの負担を減らす方法を解説します。

14.1 入力項目を最小限にする

配送や決済に必要のない情報まで入力させると、顧客の負担が増えます。各項目が本当に必要か確認します。

販売促進に使いたい情報は、購入後に任意で尋ねる方法もあります。購入完了を妨げないことが重要です。

14.2 会員登録を強制しない

初めて利用する顧客に会員登録を強制すると、購入を諦める可能性があります。登録なしで購入できる方法を検討します。

購入後に、履歴確認や次回入力の省略といった利点を説明して登録を提案すると、顧客が自分で選択できます。

14.3 入力エラーを具体的に伝える

「入力内容が正しくありません」という表示だけでは、顧客は何を直せばよいか分かりません。問題の場所と修正方法を示します。

送信後にまとめてエラーを表示するだけでなく、入力中に確認できる方法も有効です。ただし、操作を妨げるほど頻繁に警告しないようにします。

14.4 進行状況を見せる

購入手続きが何段階あるか分からないと、顧客はいつ終わるのか不安になります。配送、決済、確認などの進行状況を示します。

段階を増やしすぎると負担が大きく見えるため、必要な手続きだけに整理します。前の段階へ戻っても入力内容が失われないようにします。

14.5 最終確認を分かりやすくする

注文確定前に、商品、数量、配送先、支払い方法、合計金額を確認できるようにします。

変更が必要な場合は、該当項目へ戻りやすくします。確定後に何が起こるかも明確に伝えることが重要です。

コード例：入力エラーを項目ごとに表示する

<form id="購入フォーム" novalidate>
 <label for="氏名">氏名</label>
 <input id="氏名" name="氏名" required>
 <p id="氏名エラー" aria-live="polite"></p>

 <label for="メール">メールアドレス</label>
 <input id="メール" name="メール" type="email" required>
 <p id="メールエラー" aria-live="polite"></p>

 <button type="submit">注文内容を確認する</button>
</form>

<script>
const 購入フォーム = document.getElementById("購入フォーム");

購入フォーム.addEventListener("submit", function (操作) {
 操作.preventDefault();

 const 氏名 = document.getElementById("氏名");
 const メール = document.getElementById("メール");

 document.getElementById("氏名エラー").textContent = "";
 document.getElementById("メールエラー").textContent = "";

 let 入力済み = true;

 if (!氏名.value.trim()) {
   document.getElementById("氏名エラー").textContent =
     "氏名を入力してください。";
   入力済み = false;
 }

 if (!メール.validity.valid) {
   document.getElementById("メールエラー").textContent =
     "正しい形式のメールアドレスを入力してください。";
   入力済み = false;
 }

 if (入力済み) {
   alert("注文内容の確認画面へ進みます。");
 }
});
</script>
 

この例では、入力に問題がある項目の近くへ具体的な修正内容を表示します。実際の購入処理では、画面上の確認だけでなく、送信先でも安全に入力内容を確認する必要があります。

15. 携帯端末での購入体験を改善する方法

ECサイトへの訪問や購入は、携帯端末から行われることが多くあります。小さな画面、片手操作、移動中の通信など、パソコンとは異なる条件を考慮する必要があります。

ここでは、携帯端末向けの顧客体験を改善する方法を解説します。

15.1 重要な情報を上部へ配置する

携帯端末では一度に表示できる情報が限られます。商品名、価格、主要画像、配送予定など、判断に必要な情報を早く確認できるようにします。

すべてを上部へ詰め込むのではなく、優先順位を付けます。詳細情報は見出しや展開表示で整理します。

15.2 操作領域を十分に確保する

ボタンや選択肢が小さいと、誤操作が増えます。指で押しやすい大きさと間隔を確保します。

リンク同士が近すぎる場合も問題です。実際の端末で片手操作を確認し、机上の画面確認だけで判断しないようにします。

15.3 入力を減らす

携帯端末で長い住所やカード情報を入力することは大きな負担です。自動入力や住所候補を活用し、操作回数を減らします。

入力形式を必要以上に厳しくすると、エラーが増えます。顧客が自然に入力できる方法を検討します。

15.4 読み込み時間を短くする

画像や動画が多い商品ページは、通信環境によって表示に時間がかかります。表示が遅いと、内容を見る前に離脱される可能性があります。

必要な画像を適切な大きさで配信し、最初に必要な内容を優先して表示します。見た目だけでなく、待ち時間も顧客体験の一部です。

15.5 途中から再開できるようにする

移動中の利用では、操作を中断することがあります。カートや入力途中の内容が失われると、最初からやり直す必要があります。

安全に保存できる範囲で状態を保持し、後から続けられるようにします。複数の端末を利用する顧客にも配慮します。

16. 信頼と安心を高める方法

ECサイトでは、顧客が企業や販売者を直接見ることができません。個人情報、支払い、商品の品質、返品などに対する不安を減らす必要があります。

ここでは、顧客の信頼を高めるための設計方法を解説します。

16.1 運営者情報を明確にする

誰がサイトを運営し、問題が起きた場合にどこへ連絡できるのかを分かりやすく示します。

会社名や住所を掲載するだけでなく、問い合わせ方法、受付時間、対応方針も確認できるようにします。

16.2 価格条件を透明にする

商品価格以外に、送料、手数料、追加費用が発生する場合は早い段階で示します。

購入直前に予想外の費用が追加されると、離脱だけでなく企業への不信につながります。顧客が総額を予測できる設計が重要です。

16.3 返品と交換の条件を分かりやすくする

返品できる期間、対象条件、送料負担、手続き方法を具体的に説明します。

複雑な文章だけでなく、顧客が自分の場合に返品できるか判断できる形式にします。購入後に条件が見つからない状態は避けます。

16.4 安全な決済を説明する

決済方法や情報の扱いについて、顧客が理解できる言葉で説明します。技術的な名称だけでは安心につながらない場合があります。

安全性を示す表示を過度に並べるのではなく、必要な場所で簡潔に伝えます。不自然な表現は逆に不安を生むことがあります。

16.5 問題発生時の対応を示す

配送遅延、破損、誤配送などが発生した場合の連絡方法を明確にします。

問題を完全になくすことは難しくても、対応方法が分かれば顧客の不安を減らせます。迅速で誠実な対応は信頼回復につながります。

17. 誰もが利用しやすいECサイトを設計する方法

ECサイトには、異なる年齢、身体条件、利用環境の顧客が訪れます。一部の顧客だけを想定すると、必要な情報や操作へ到達できない人が生まれます。

ここでは、多様な顧客が利用しやすいサイトを設計する方法を説明します。

17.1 文字を読みやすくする

文字が小さい、行間が狭い、背景との違いが弱い場合、内容を読むことが難しくなります。

見た目の印象だけで決めず、異なる画面や明るさで確認します。重要な説明ほど読みやすさを優先します。

17.2 色だけで意味を伝えない

在庫、エラー、選択状態などを色だけで区別すると、違いを認識できない顧客がいます。

文字、記号、形も組み合わせて意味を伝えます。色が表示されない状態でも理解できるか確認します。

17.3 画像に説明を付ける

商品画像が表示されない場合や、読み上げ機能を利用する顧客のために、画像の内容を文章で説明します。

装飾画像には不要な説明を付けず、購入判断に必要な商品画像へ適切な説明を設定します。

17.4 キーボードでも操作できるようにする

指示装置を使わずに操作する顧客もいます。検索、絞り込み、カート追加、購入までをキーボードで操作できるか確認します。

現在選択している場所が視覚的に分かることも重要です。操作の順序が不自然にならないようにします。

17.5 分かりやすい文章を使う

専門用語や社内用語は、顧客の理解を妨げます。短く具体的な文章を使用します。

利用条件や返品説明では、正確さを保ちながら、顧客が自分の行動を判断できるようにします。複雑な内容は段階的に説明します。

18. 試作品と利用者検証を行う方法

改善案を実装する前に、試作品を利用者へ見せることで、大きな問題を早期に発見できます。完成度の高いシステムを作る必要はありません。

ここでは、ECサイト改善で試作品と利用者検証を活用する方法を解説します。

18.1 検証する仮説を決める

試作品を作る前に、何を確認したいのかを明確にします。商品を見つけられるか、送料を理解できるか、購入手続きを完了できるかなどを決めます。

複数の目的を詰め込みすぎると、結果を判断できません。重要な仮説に絞ります。

18.2 必要な画面だけを作る

検証に利用しない管理画面や裏側の処理は作る必要がありません。顧客が体験する部分だけを用意します。

商品一覧から詳細、カートまでを確認するなら、その流れに必要な画面へ集中します。短期間で作成し、早く反応を得ることが重要です。

18.3 本物に近い情報を使う

意味のない文章や仮の価格では、顧客が現実的な判断をできません。実際に近い商品名、画像、価格、配送条件を使います。

ただし、完成品と誤解されないように説明します。顧客の判断に必要な部分だけ本物らしくします。

18.4 操作を教えず観察する

検証担当者が正しい操作を教えると、実際の利用時に起こる問題を発見できません。

「次に何をしますか」「何を探していますか」と尋ね、顧客の考えを確認します。迷いを失敗として責めない環境をつくります。

18.5 共通する問題を整理する

ひとりだけの反応で全体を判断せず、複数の利用者に共通する行動を探します。

同じ場所で迷う、同じ情報を見落とす、同じ言葉を誤解する場合は、設計上の問題である可能性が高くなります。

コード例：簡易的な商品選択試作品

<div id="商品選択">
 <h1>利用目的を選んでください</h1>

 <button class="目的ボタン" data-purpose="通勤">
   通勤で毎日使いたい
 </button>

 <button class="目的ボタン" data-purpose="旅行">
   旅行へ持っていきたい
 </button>

 <section id="提案結果" hidden>
   <h2>おすすめ商品</h2>
   <p id="提案文章"></p>
   <button type="button">商品詳細を見る</button>
 </section>
</div>

<script>
const 提案内容 = {
 通勤: "軽量で毎日持ち運びやすい商品がおすすめです。",
 旅行: "収納しやすく耐久性の高い商品がおすすめです。"
};

document.querySelectorAll(".目的ボタン").forEach(function (ボタン) {
 ボタン.addEventListener("click", function () {
   const 選択目的 = ボタン.dataset.purpose;

   document.getElementById("提案文章").textContent =
     提案内容[選択目的];

   document.getElementById("提案結果").hidden = false;
 });
});
</script>
 

この例では、顧客の利用目的に応じて商品提案を変更します。検証では、質問の意味を理解できるか、提案理由に納得できるか、次の行動へ進めるかを確認します。

19. 改善効果を測定する方法

デザイン思考による改善は、公開して終わりではありません。顧客の行動や事業成果がどのように変化したかを確認する必要があります。

ここでは、ECサイト改善で確認すべき代表的な指標を解説します。

19.1 購入完了率を確認する

訪問者や購入手続き開始者のうち、どれほど注文を完了したかを確認します。

全体だけでなく、端末、顧客区分、流入経路などに分けて確認します。特定の条件でだけ問題が発生している可能性があります。

19.2 カート離脱率を確認する

カートへ商品を追加した顧客のうち、購入を完了しなかった割合を確認します。

数値だけで原因を断定せず、離脱した段階、送料表示、入力エラーなどを合わせて確認します。

19.3 商品検索の成功状況を確認する

検索結果がゼロになった割合、検索後に商品詳細へ進んだ割合、購入につながった検索語を確認します。

検索語を分析すると、顧客がどのような目的や表現で商品を探しているかも理解できます。

19.4 再購入率を確認する

一度購入した顧客が再び利用した割合は、購入後を含む体験の評価を示します。

再購入が少ない場合、商品自体だけでなく、配送、問い合わせ、返品、再注文のしやすさも確認します。

19.5 顧客の声と数値を組み合わせる

購入率が上がっても、顧客の不安や問い合わせが増えている場合があります。数値だけでは体験全体を評価できません。

アンケート、聞き取り、問い合わせ記録を組み合わせます。成果と新しい問題の両方を確認することが重要です。

コード例：ECサイトの主要指標を計算する

訪問者数 = 15000
商品詳細閲覧者数 = 7200
カート追加者数 = 2100
購入完了者数 = 1260
再購入者数 = 340

商品到達率 = 商品詳細閲覧者数 / 訪問者数 * 100
カート追加率 = カート追加者数 / 商品詳細閲覧者数 * 100
購入完了率 = 購入完了者数 / カート追加者数 * 100
再購入率 = 再購入者数 / 購入完了者数 * 100

print(f"商品到達率: {商品到達率:.1f}%")
print(f"カート追加率: {カート追加率:.1f}%")
print(f"購入完了率: {購入完了率:.1f}%")
print(f"再購入率: {再購入率:.1f}%")
 

この例では、顧客が商品を見つけ、カートへ追加し、購入し、再購入するまでの主要な割合を計算しています。実際には、新規顧客と既存顧客、携帯端末とパソコンなどに分けて確認します。

20. デザイン思考をEC運営へ定着させる方法

デザイン思考は、特定の担当者が一度実施するだけでは定着しません。顧客調査、意思決定、開発、運用、評価の中へ組み込む必要があります。

最後に、デザイン思考を継続的なECサイト改善へつなげる方法を解説します。

20.1 小さな課題から始める

最初からECサイト全体を作り直そうとすると、調整範囲が広くなります。検索結果、商品比較、送料表示など、範囲を限定して始めます。

小さな改善で調査と検証の流れを経験すると、社内で進め方を共有しやすくなります。成果を確認しながら対象範囲を広げます。

20.2 顧客情報を部門間で共有する

商品担当者、制作担当者、物流担当者、顧客対応担当者が別々に情報を持っていると、顧客体験全体を理解できません。

問い合わせ内容、行動記録、検証結果を共有できる仕組みを整えます。保存するだけでなく、定期的に確認する場を設けます。

20.3 改善案を実装前に検証する

会議で承認された案でも、顧客が理解できるとは限りません。開発へ進む前に簡単な試作品を作り、対象顧客へ確認します。

小さな検証を通常の工程へ組み込むことで、大きな手戻りを減らせます。すべての改善を同じ規模で検証する必要はありません。

20.4 失敗から得た学びを残す

利用者検証で反応が悪かった案も、価値のある情報です。なぜ失敗したかを記録し、次の改善へ生かします。

失敗を担当者の責任として扱うと、問題が共有されなくなります。仮説を早く修正できたことを成果として評価します。

20.5 顧客中心の判断基準を持つ

売上や開発費用だけで判断すると、短期的な施策に偏る可能性があります。顧客の目的達成、安心、継続利用も判断基準に含めます。

顧客価値と事業成果は対立するものではありません。顧客が迷わず安心して購入できる体験をつくることが、長期的な売上と信頼につながります。

おわりに

ECサイトにおけるデザイン思考は、企業が売りたい商品や追加したい機能から考えるのではなく、顧客の目的、行動、感情から課題を発見する方法です。顧客が商品を知り、探し、比較し、購入し、受け取るまでの体験をひとつの流れとして捉えます。

実践では、顧客への聞き取り、操作観察、行動記録、問い合わせ分析を通じて問題を理解します。その後、課題を具体的に定義し、複数の改善案を考え、試作品を使って顧客の反応を確認します。完成後に問題を発見するのではなく、開発前に小さく試すことが重要です。

ECサイトの改善は、商品詳細ページや購入ボタンだけを修正すれば終わるものではありません。検索、比較、送料、決済、配送、返品、再購入までを継続的に見直す必要があります。顧客から学び続ける仕組みを運営へ組み込むことで、購入率だけでなく、顧客満足度、継続率、企業への信頼を高められます。