ECサイト/システム開発のPoC・プロトタイプ・モックアップ開発について

EC開発の検証は、目的を決めて画面を試作し、必要に応じてPoCや市場テストを行ったうえで、本開発に進むかを判断する順に進めます。

この記事は、検証の手法と仮説、判断基準、費用と期間を整理したものです。失敗の回避と外注の考え方も扱います。対象は、新規EC責任者、既存ECのCVR改善・リプレイス担当者、投資判断者です。

▼全体ガイドの記事
・ECサイト/システム開発の完全ガイド

EC開発におけるPoC・プロトタイプ・モックアップの違いと使い分け

モックアップ、プロトタイプ、PoCの検証対象を3つのパネルで示した図解。
画面の見た目から技術・事業の実現性へ、確認範囲が広がります。

PoC・プロトタイプ・モックアップは、いずれも本開発の前に小さく試す工程です。ただし、検証する対象と成果物はそれぞれ異なります。

ECでは、モールか自社ECかという出店形態や、ASP/SaaS・オープンソース・パッケージ・フルスクラッチといった構築手法によって、費用・期間・保守が変わります。そのため、着手前に何をどこまで確かめるかを決めておく必要があります。

正しく使い分けることが、限られた予算で検証の効果を高める第一歩になります。まずは3つの言葉の違いを、ECの具体例で見ていきます。

モックアップ・プロトタイプ・PoCの違いと定義

モックアップ(Mockup)は、見た目を確認するための静的な画面イメージです。トップや商品一覧、商品詳細の情報設計を関係者で合意するときに使います。

商品詳細では、価格・在庫・カート投入ボタンの配置などを確認します。なお、モックアップ自体は動作しません。

プロトタイプ(Prototype)は、操作感を確かめる試作品です。商品一覧から詳細、カート、決済入力までをクリックして体験でき、コードを書かずに購買導線がストレスなく進むかを検証できる点が強みです。

PoC(Proof of Concept=概念実証)は、技術的・事業的に実現可能かを限定範囲で確かめます。画面では確かめにくい不確実性を、動くものを作って検証します。

  • モックアップ:見た目と画面構成の確認
  • プロトタイプ:画面遷移と操作感の確認
  • PoC:技術・事業の実現可能性の確認

PoCでは、レコメンドによるクロスセルや、決済代行や在庫・基幹連携APIとの接続、セール時の負荷を試せます。モールと自社ECの売れ方も対象になります。

検証の深さは、モックアップ、プロトタイプ、PoCの順に高まります。各段階では、目的を先に明確にしておきます。

典型的な進め方は、Figmaなどで商品詳細やカートの画面を固め、クリック可能な試作品で導線を確かめる形です。そのうえで、確かめにくい連携や負荷をPoCで試します。

目的が曖昧だと作り込みが続き、本開発並みのコストと期間がかかる「ミニ本開発」になりかねません。

出店形態と構築手法の選択も検証対象です。どの販売経路で勝負するかを決め、対象を絞ることが検証成功の前提になります。

出店形態・構築手法別の使い分けと期間・費用の目安

ECサイトは、出店形態と構築手法によって、検証フェーズの必要性や深さが変わります。モール出店は、集客力と決済の仕組みがあり、初期無料〜10万円程度で販売を始められます。一方で、デザインの自由度は低く、手数料が利益率を圧迫します。

モールでは顧客データが自社資産になりにくいという制約もあります。Amazon・楽天・Yahoo!ショッピングがその例です。

自社ECは、独自ドメインで自由に設計でき、ブランドを確立しやすい形態です。さらに、顧客データを蓄積し、CRMやファンマーケティングに活用できます。

ただし、立ち上げ当初は集客力がゼロで、SEO・SNS・広告に時間とコストがかかります。実務では、モールで売上を作りながら、自社ECでブランドと顧客資産を育てる併用も行われます。

出店形態の判断は検証の最初の論点です。構築手法によって、初期費用と立ち上げ期間は大きく変わります。

  • カートASP/SaaS:初期0〜数十万円、月額0〜数万円、即日〜2か月
  • オープンソース:初期50万〜300万円、1〜数か月
  • パッケージ:初期300万〜3,000万円、3か月〜1年
  • フルスクラッチ:初期数千万〜数億円、6か月〜2年以上

ShopifyやmakeshopなどのASP/SaaSは、サービス側がサーバを保守するため、ノーコードで素早く市場に出し、反応を確かめやすい方法です。EC-CUBEなどがオープンソース、ecbeingなどがパッケージの例です。規模が上がるほど、投資と期間も大きくなります。

モックアップは、画面構成の合意を目的とし、成果物は静的な画面です。期間は数日〜2週間、費用は数万円〜数十万円ほどが目安です。

プロトタイプは、購買導線と体験を確かめるためのもので、クリックできる試作品を2〜4週間で作ります。費用は数十万〜100万円台が目安です。

PoCは、技術・事業の実現可能性を検証するもので、限定機能の実証システムとレポートを作ります。費用は100万〜600万円程度が目安です。

期間の望ましい目安は、小規模MVPが1〜2か月、中規模が2〜4か月です。また、標準機能で足りる小〜中規模ECでは、カートASPやモールで販売する方法が、安価で確度の高い検証になることもあります。

ポイント

どの段階で止めるかは、確かめたい不確実性が何かで決まります。画面の合意なのか、技術の実現性なのかを先に決めると、費用の見当をつけやすくなります。

ECで検証すべき仮説とプロトタイピング手法

ECの検証仮説として、購買導線・CVR、決済UX、検索・レコメンド、性能・負荷、出店形態を放射状に配置した図解。
販売の流れから出店形態まで、確認する論点を見渡せます。

EC開発の検証では、何の仮説を確かめるかを具体的に定めることが最も大切です。出店形態から決済、検索、性能まで、どれか一つでも崩れると売上に直結します。そこで、画面をやみくもに作らず、事業リスクの大きな仮説から選びます。

検証方法は、最小コストで仮説を確かめられるかどうかで費用対効果が変わります。まずは、EC全般の代表的な仮説と、素早く検証するプロトタイピング手法を見ていきます。

ECで検証すべき仮説(CVR・決済UX・検索/レコメンド・負荷・モールvs自社EC)

ECで確かめたい代表的な仮説は、売上に直結する5つの領域に分けて考えられます。

  • 購買導線・CVR:離脱箇所と購入率の確認
  • 決済UX:必要な決済手段と操作性の確認
  • 検索・レコメンド:商品への到達と関連商品の購入率
  • 性能・負荷:アクセス集中時の動作の確認
  • 出店形態:モールと自社ECの売れ方の比較

購買導線では、トップから商品詳細、カート、決済完了までの流れと離脱箇所を見ます。カゴ落ちは売上ロスの主因で、フォームの項目数、送料表示のタイミング、ゲスト購入の可否がCVRを左右します。

決済手段は、ターゲット顧客の需要に合わせて選びます。候補は、クレジットカード・コンビニ・後払い・各種ペイなどです。さらに、入力から決済完了まで直感的に操作できるかも確かめます。

カートが決済代行に未対応だと、別途の開発費と期間がかかりやすくなります。そのため、PoCで早めに連携を試し、リスクを減らします。

商品検索では、品数が多くても、目的の商品にたどり着けるかを確かめます。レコメンドによるクロスセルやアップセルも、検証の対象です。検索ヒット率やレコメンド経由の購入率は、品揃えが多いECほど売上への影響が大きくなります。

負荷試験では、セールやテレビ露出でアクセスが平常時の数倍〜数十倍になったときに、サイトや決済が滞らないかを確かめます。繁忙期のリリースでサイトが落ちると、機会損失につながります。また、データ移行に不備があると、文字化けや在庫の重複も起こり得ます。

出店形態では、モールは集客力があって早く売れる一方、手数料が利益を削り、顧客データも残りにくい形態です。自社ECは立ち上げに時間がかかりますが、ブランドと顧客資産を積み上げられます。

モールに少量出品し、自社ストアにも同じ商品を並べます。流入経路、CVR、客単価を比べ、さらにリピート率と手数料控除後の利益率も確かめます。その比較は、どの販売経路を主軸にするかを決める材料になります。

5つの仮説のうち、自社のビジネスで最もリスクの大きいものから優先して検証します。これが検証投資の基本です。

Figmaモックとノーコード(Shopify等)による素早い市場テスト

購買導線やデザインの仮説は、FigmaやAdobe XDなどのデザインツールで安価に検証できます。

  • 画面試作:FigmaやAdobe XDでコードなしに画面遷移を再現
  • 操作テスト:Figmaでボタン遷移を試し、迷いや離脱を観察
  • 市場テスト:ノーコード/SaaS型カートで実際の購買データを取得

デザイナー、エンジニア、事業担当が同じ画面を見れば、開発前に認識のずれを直せます。さらに、Figmaで導線とデザインを先に固めると、本開発での手戻りを防げます。特にパッケージやフルスクラッチでは後戻りのコストが大きいため、この進め方が有効です。

Shopifyやmakeshopでは、商品表示・カート・決済に絞れば、数週間〜1か月でストアを立ち上げられます。少額の広告で流入数・CVR・カゴ落ち率・客単価を取得でき、実際の市場反応で仮説を確かめられる点が、モックアップやプロトタイプとの違いです。

モールに少量出品し、ノーコードの自社ストアにも同じ商品を並べれば、売れ方を比べられます。まずは、初期0〜数十万円・月額数万円で始め、手応えに応じて構築手法を広げます。

決済手数料(3〜5%)や販売手数料が利益を圧迫し始める月商になったら、移行を検討します。最初から重厚なシステムを作り込まず、小さく販売して反応を見るのが有効です。

AIコーディング(v0/Lovable/Bolt.new)とBaaSによる高速化

SaaSの標準機能で試せない独自導線やレコメンドUIは、AIコーディングとBaaS(Backend as a Service)で試作できます。

  • AIコーディング:自然言語からUIを作り、試作を速める
  • BaaS:APIサーバーを自作せず、データや認証を用意する
  • 決済API:試作品にカード決済フローを組み込む

v0、Lovable、Bolt.newは、商品一覧・詳細・カート・フォームなどを自然言語から生成し、プロトタイプやMVPの画面実装を速めます。これにより、フロントエンドやUIデザインの費用を抑え、従来200万〜500万円のMVPを50万〜150万円にできます。削減幅は、おおむね50〜75%とされています。

また、フルスクラッチを検討する場合でも、独自UIの売上効果を安価に確かめてから本開発へ進めます。SupabaseやFirebaseなら、商品データの保存・取得や会員認証を用意できます。維持費は月額3,000円〜1万円程度です。

Stripeなどの決済APIをつなげば、カード決済を含む試作品を短期間で組めます。フリーランス相場は、連携が15〜30万円、会員機能が5万〜10万円、商品一覧表示が10万〜20万円が目安です。

本番と同じ構成は作らず、目的に応じてモックデータ、スタブAPI、BaaSを使い分けます。AIで生成したUIは、あくまで検証用として扱います。

本番化する際は、専門家がセキュリティ、決済、在庫連携を作り直す前提です。そのため、検証の段階で作り込みすぎないことが大切です。

ポイント

仮説の優先順位は、崩れたときの売上への影響の大きさで決めると判断がぶれにくくなります。画面を広げすぎないことも、検証費用を抑えるうえで欠かせません。

Go/No-Go判断基準と費用・期間の目安

Go/No-Go判断の定量基準として、タスク完了率70%以上、エラー発生率5%以下、ROI年率20%以上、ペイバック期間18か月以下を4枚のカードに示した図解。
指標ごとに達成ラインを定めると、結果を同じ基準で確認できます。

PoCやプロトタイプの後には、本開発へ進むか撤退するかを決める基準を事前に設計しておく必要があります。判断が曖昧だと、大きな失敗につながります。

ECにはCVRや客単価などの数値指標があります。そのうえで、判断基準は定量と定性の両面で設け、費用と期間の目安も把握しておきます。

定量・定性の二層判断基準と撤退基準

定量基準は、数値で判断できるように設計します。ユーザビリティと事業性を測る指標には、次のようなものがあります。

  • タスク完了率:商品検索から決済完了まで70%以上
  • エラー発生率:操作中に5%以下
  • ROI:投資対効果が年率20%以上
  • ペイバック期間:投資回収期間が18か月以下
  • EC指標:CVR、カゴ落ち率、客単価、リピート率など

EC指標は、事前に決めた目標値と照らし合わせます。モールと自社ECの手数料控除後の貢献利益も、主軸を決める材料になります。

基準はPoCの開始前に定め、満たせばGo、満たさなければNo-Goとします。結果を見てから基準を解釈し直すと、検証の意味が失われてしまいます。

定性基準では、数値では捉えにくい状態を言葉にします。たとえば、離脱の原因や本番運用の見通し、利用者の満足度を確認します。

  • 離脱原因:離脱率が高いページの傾向と原因が整理されている
  • 運用方針:決済セキュリティや運用の判断材料が揃っている
  • 満足度:NPSや5段階評価が一定水準に達している
  • 実現性:選んだ構築手法で独自要件を実現できる見通しがある

数値を満たしても現場が納得しないことがあります。逆に、未達でも原因と改善策が明確なこともあるため、定量と定性を合わせて判断します。

撤退基準も、事前に稟議書や計画書へ明記します。そうすれば、結果が思わしくないときの感情的な判断や先送りを防ぎ、損失を抑えられます。PoCは、合否を出すだけでなく、次の意思決定に必要な材料を揃える取り組みです。

費用・期間の目安とAIコーディングによる圧縮

EC検証の費用と期間は範囲によって変わり、小規模MVPと中規模検証には、おおよその目安があります。

  • 小規模WebアプリMVP:1〜2か月、100万〜300万円
  • 中規模検証:決済本格連携や検索・レコメンドを含み、2〜4か月、300万〜600万円
  • 会員・ログイン機能:外注相場は5万〜10万円
  • 商品一覧表示:外注相場は10万〜20万円
  • Stripeなどの決済連携:外注相場は15万〜30万円

外部連携や性能・セキュリティ要件を作り込むと、費用は変動します。それでも、本開発より小さい投資で判断材料を得られます。

本開発は、パッケージで300万〜3,000万円、フルスクラッチで数千万〜数億円です。一方で、モールや既存ASPの市場テストで済めば、月額数万円と広告費だけでデータを得られ、検証費を圧縮できます。

AIコーディングツール(v0/Lovable/Bolt.new)とBaaS(Firebase/Supabase)を使うと、検証費用を抑えられます。たとえば、フロントエンドの約70%をAIで作り、残り30%の決済・セキュリティ・連携を専門家へ外注する方法があります。

AIを使えば、従来200万〜500万円規模のMVPを50万〜150万円にでき、50〜75%削減できるとされています。BaaSの月額維持費は、3,000円〜1万円程度です。

検証の予算は、本開発の判断材料を得るための最小限に留めます。本開発の予算と不確実性が大きいほど、検証への投資価値は高まります。本開発が数千万円規模なら、その10分の1以下を検証に投じて、本当に作るべきか、どの形態・手法にするかを見極めるのは合理的です。

ポイント

検証費用が妥当かは、本開発の見込み額と比べて判断します。本開発の10分の1以下に収まるかが、一つの目安になります。

よくある失敗(PoC死)と回避策・検証フェーズの進め方

検証フェーズには、「PoC死」「PoC疲れ」と呼ばれる失敗があります。検証に投資しても本番化につながらなければ、その投資は実を結びません。

ECでは、範囲が膨らんでミニ本開発になったり、成功基準が曖昧で長引いたり、運用設計の後回しで本番化が否決されたりする失敗が起こります。こうした失敗を避けるための回避策、検証全体の進め方、外注先の選び方を見ていきます。

検証範囲の肥大化・成功基準の不在・運用後回し

検証範囲を広げると、フルスペック化してコストと期間が膨らみます。たとえば、会員ランク・クーポン・ポイント・定期購入を加えた結果、ミニ本開発になる例があります。仮説の検証に必要な機能は、MoSCoW法(Must/Should/Could/Won’tで優先順位を分類する手法)で絞ります。

  • Must:商品表示と決済(カート投入から購入完了まで)
  • 後続で検証:レコメンド、クーポン、会員ランクなど

多くの場合、Mustはコア導線に絞れます。そのうえで、ほかの機能を段階的に検証します。

PoCの目的は、仮説を検証することにあります。成功と撤退の基準が曖昧だと、検証が終わらなくなることがあります。「CVRが良ければ進める」とだけ決めると、結果を都合よく解釈したり判断を先送りしたりして、PoCが終わらなくなります。

開始前に、CVR◯%以上、タスク完了率70%以上、エラー率5%以下などの定量指標と撤退基準を計画書に明記します。いつまでに、どの数値がどの水準なら継続・撤退するかも決めておきます。

関係者で、継続判断の材料を揃えるという目的を合意しておく必要があります。特に広告を使う市場テストでは、長期化すると広告費が膨らむため、この合意が欠かせません。

3つ目の失敗は、運用やガバナンスの確認を後回しにすることです。画面と購買導線だけを確かめ、必要な運用要件を検証しないままだと、後から本番移行が否決されることがあります。

本番移行に向けては、データの準備と決済セキュリティ・権限の検討が必要です。加えて、在庫・基幹連携と運用コストも検討します。

論点には、クレジットカード情報の非保持化、PCI DSS、不正注文対策があります。さらに、監査ログや在庫データの文字コード・桁数も検討が必要です。本番化する場合の対応方針と概算費用は、PoCの範囲に最初から薄く含めておきます。

リプレイスでは、商品や顧客データの形式がそろわず、文字化けや重複が起きがちです。そのため、テスト移行を複数回行い、差分を確かめます。

段階的な検証の流れと進め方

検証は、課題を明確にすることから始め、段階を追って本開発の判断へ進みます。

  1. 仮説・課題を明確にする
  2. 出店形態・構築手法の方針を決める
  3. モックアップで画面構成を合意する
  4. プロトタイプで購買導線を検証する
  5. 必要に応じてPoCや実環境の市場テストを行う
  6. 本開発へ進むか判断する

出発点では、出店先をモールか自社ECかのどちらにするか、CVR改善と新カテゴリの需要のどちらを狙うかを、具体的に考えます。繁忙期の負荷にどう備えるかも、最初に確かめておきます。

モックアップやプロトタイプは、比較的低コストで短期間に進められます。商品詳細やカートの認識のずれを早く直せば、後の手戻りを防げます。

決済・在庫・基幹連携や性能・負荷に不確実性があれば、その部分に絞ってPoCを行います。レコメンドや出店形態ごとの売れ方が不確かな場合も、同様にPoCで試します。

標準機能で足りる場合は、モールやShopifyなどで販売する市場テストが、確度の高い検証になることもあります。各段階では、次へ進むか引き返すかを判断し、必要な段階だけを選びます。たとえば、デザインと導線の合意が課題なら、プロトタイプまでで十分です。

フルスクラッチで基幹連携や独自レコメンドを含む大規模ECでは、リスクの高い連携や負荷から重点的にPoCを行います。最初から全機能や重厚な手法を作り込まず、まずはSaaSやモールで標準機能を試します。独自要件が明確になってから、オープンソース、パッケージ、フルスクラッチへ移る進め方です。

段階的に進めることで、投資の無駄と本番化リスクを減らせます。

外注先選定とコスト配分の考え方

検証の目的を理解し、最小限の作り込みで仮説を確かめられるパートナーを選びます。

  • 中立性と技術知見:出店形態や構築手法を中立に助言できる
  • 契約・見積もり:Must/Want、成功・撤退基準、5年程度のTCOを明記
  • 予算配分:実装費を抑え、決済・連携・負荷・セキュリティを検証

購買導線から決済・在庫連携、本番化を見据えたセキュリティ・運用まで扱える開発会社が望ましいです。画面を作るだけのベンダーや、特定の構築手法やパッケージだけを提案する会社だと、検証が形骸化するおそれがあります。

データ移行や連携先の追加にかかる隠れ費用も見積もります。TCO(総保有コスト)は、5年程度で捉えます。

AIコーディングやノーコードを使えるパートナーなら、検証費用を50〜75%圧縮できる可能性があります。AIコーディングツールやBaaSで画面実装費・UIデザイン費を抑え、浮いた予算は決済・連携・負荷・セキュリティの検証に回します。

予算は本開発の判断材料を得る最小限に留めます。検証に費用をかけすぎて、ミニ本開発になるのは本末転倒です。

検証の最大の価値は、数十万〜数百万円の投資で、不要な数千万円の開発や自社EC構築、繁忙期の停止損失を避けられることです。さらに、EC開発全体の成功確率も高められます。

ポイント

検証が本番化につながるかは、運用やガバナンスを範囲に含めたかで決まります。範囲が広がりすぎたら、Must機能に戻して考え直すことが立て直しの近道です。

まとめ

モックアップは見た目、プロトタイプは操作感、PoCは技術・事業の実現可能性を検証します。仮説と判断基準のほか、費用、失敗の回避、外注についても見てきました。

安価な市場テストを使えば、モールか自社ECか、構築手法かといった上流の選択も確かめられます。こうした判断は、EC全般で見落とされがちです。

代表的な仮説は、CVR・カゴ落ち、決済UX、検索・レコメンド、負荷、モールと自社ECの比較です。事業リスクの大きいものから順に検証します。

Figmaやノーコードで市場を試し、AIコーディングやBaaSも使えば、検証の費用と期間を抑えられます。検証費用は、MVPで100万〜300万円、中規模で300万〜600万円が目安です。AI活用では50万〜150万円まで圧縮できる場合があります。

本開発に進むかは、定量と定性の二層で判断します。定量基準には、タスク完了率70%以上とエラー率5%以下があります。ROIは年率20%以上、回収期間は18か月以下といった指標もあります。

CVR目標や手数料控除後の利益に加え、定性面では、離脱原因、運用・セキュリティ方針、独自要件の実現性を確認します。

撤退ラインも、開始前に決めておきます。また、Must機能に絞ったうえで、運用・ガバナンスも検証範囲に含めます。

まずはSaaSやモールで試し、独自要件が明確になってから構築手法を広げる進め方があります。ECに詳しい開発会社と、進め方を検討します。

▼全体ガイドの記事
・ECサイト/システム開発の完全ガイド

会社紹介

株式会社riplaでは、お客様の事業・ユーザー・業務に最適化したオーダーメイド型システムを、構想策定・要件定義から開発・改善まで一気通貫で支援。事業会社でIT・DXを経験したプロフェッショナルによる高い要件定義力・システム設計力を活かし、事業成果の最大化に伴走します。

また、当社独自の開発テンプレート「Boxシリーズ」による標準機能の高速開発と、AI駆動開発の独自フレームワーク「GoDD」による独自機能のAI実装を組み合わせることで、低コスト・短期間で開発を実現いたします。

もし、システム開発やプロダクト開発に関するご要望がございましたら、お気軽にお問い合わせください。

・サービス概要資料のURLはこちら >>>
・お問合せページのURLはこちら >>>
・お役立ち資料のURLはこちら >>>

執筆者プロフィール
張田谷凌央
張田谷凌央

株式会社ripla 代表取締役CEOとして、システムパッケージ活用、システム開発、データ分析、生成AI活用、SaaS開発、アプリ開発、EC構築など、幅広い領域で企業のDX推進と事業成長を支援している。事業会社でIT・DXを経験したプロフェッショナルが集う株式会社riplaにおいて、お客様の事業・ユーザー・業務に最適化したオーダーメイド型システムを構想策定・要件定義から開発・改善まで一気通貫で支援し、単なるシステム納品にとどまらず、クライアントと同じ目線で事業成果の最大化に向けた伴走支援を行う。早稲田大学卒業後、ラクスル株式会社、LINEヤフー株式会社にて事業開発やDX推進などに従事した後、株式会社riplaを創業。