Webアプリ・SaaS・MVP開発

Webアプリ・MVPプロジェクトに含まれるもの#

ご依頼内容に合わせて進め方を組み立てます。提案書には、以下の成果物のうち何が含まれるか、誰が必要な素材を用意するか、それぞれをどのように検収するかを明記します。

• 初期バージョンの範囲:中核ワークフロー、ロール、後回しにするもの
• 空の状態、読み込み中、エラー時の表示まで設計した主要画面
• データモデル、サーバー側のアクセスルール、それを破ろうとするテスト
• アカウント、ロール、チームへの招待
• 検証済みのプロバイダーからのコールバックで確認する決済・サブスクリプション
• 管理画面、プロダクト分析イベント、エラー監視
• デプロイ、ドキュメント、リポジトリとアカウントの引き渡し

Webアプリ、ウェブサイト、プロダクトデザイン、どこから始めるべき?#

顧客やスタッフがサインインして、購入、予約、提出、承認、管理といった作業をプロダクト内で完結させる必要がある場合は、こちらが適しています。サービスを説明して販売するためのサイトが必要なら、Web開発のほうが向いています。ワークフローがまだ固まっていない場合は、プロダクトデザインから始め、主要画面をユーザーとテストしてから開発に進みましょう。

初期バージョンの開発の進め方#

最初に要件整理のフェーズを設けます。ユーザーとロール、初期バージョンで完結させる1つのワークフロー、各ステップで生まれるデータ、そして決済、連携、権限など費用に影響する判断事項を整理します。成果物は、文書化した範囲、クリック操作できる主要画面、後回しにする項目を明記したリリース計画です。

その後、お客様も使えるステージング環境で、短いサイクルで開発を進めます。最初のマイルストーンは、残りの画面を作り込む前に、実際のサインインと実際のデータルールを備えた中核ワークフローを最初から最後まで通して動かす、薄い一本の縦断的な実装です。公開時には、本番環境の監視、ロールバック手順の用意、そしてリポジトリ、ホスティング、データベース、決済、分析の各アカウントをお客様名義で引き渡します。

MVPの初期バージョンに含めるべきものは?#

初期バージョンに必要なのは、実際のユーザーが1つのワークフローを完了するために必要なすべてであり、まだ到達していない規模でしか意味を持たないものは含めません。具体的には次の5つです。ワークフローに必要なロールを備えたアカウント、中核となるワークフロー自体、開発者に頼らずチームがレコードを確認・修正できる管理画面、初日から課金するビジネスモデルの場合の決済、そしてユーザーがどこで離脱するかを示す分析イベントです。

手作業で対応できるもの、後から導入できるものは後回しにします。たとえばネイティブモバイルアプリ、大企業向けのシングルサインオン、設定可能な権限マトリクス、2つ目の連携、アプリ内チャット、誰も求めていないレポートなどです。後回しにした項目も範囲書に1行ずつ記載し、データモデルに余地を残します。

多くのプロダクトは、よくあるモジュールの組み合わせでできています。その中で特に注意したいのが、予約・スケジュール管理と、現在は問い合わせを手作業で管理している小規模事業者向けのリード管理パイプラインの2つです。どちらも単純に見えますが、タイムゾーン、ステータス、担当者の扱いといった判断が潜んでおり、紙の上で決めておくほうが低コストです。

Dardoはどの技術スタックを使い、どんなときに別の選択をするのか?#

標準構成は、全体をTypeScriptで統一するものです。サーバーレンダリングのページとインタラクティブなアイランドにはAstro、ホスティングとAPIにはCloudflare Workers、データにはCloudflare D1またはPostgres、分析と実験にはPostHogを使います。SuperameはAstroで動いており、ランキングはNeon Postgresに保存されています。1つの言語と1つのデプロイ先にまとめることで、小さなプロダクトでも運用と引き渡しがシンプルになります。

プロダクトの要件によっては、別の選択をします。一日中開いたままになる情報量の多いインターフェースなら、Shiimainのプロトタイプのように、クライアントサイドのReactアプリケーションが適している場合があります。長時間実行されるジョブ、重いデータ処理、すでに別のフレームワークで開発している社内チームがいる場合も、答えは変わります。公開後に御社の開発者がコードを引き継ぐなら、多くの場合は開発者の使い慣れたスタックを優先します。

最初にテストするのはアクセス制御です。OWASP Top 10:2025ではBroken Access Controlが引き続き1位で、テストされたすべてのアプリケーションに何らかの形で存在していたと報告されています。Dardoでは、すべてのリクエストでサーバー側で権限を適用し、デフォルトで拒否し、各クエリをサインイン中のユーザーの組織に限定し、他の顧客のレコードを読み取ろうとする自動テストを書きます。

Webアプリの決済はどのように設計すべきですか?#

決済の確認を行うのは決済代行会社からのサーバー通知であり、チェックアウトから戻ってきたブラウザではありません。Dardoの公開実績にある、プロジェクトの公開ランキングサイト Superame がその一例です。購入者は Dodo Payments のホスト型チェックアウトで支払うため、カード情報がアプリに届くことはありません。その後、決済代行会社が署名付きのコールバックを送信し、サーバーが署名を検証して決済内容を確認したうえで、クレジットを付与します。

返金やチャージバックも同じ流れで処理します。決済代行会社からの各イベントは1回だけ適用されるため、コールバックが二重に届いたり、遅れたり、順序が前後したりしても、クレジットが二重に加算・減算されることはありません。Superame は利用者数や売上の数字を公開していません。ここで示しているのは決済ロジックの作り方の実例であり、販売実績ではありません。

• リダイレクトの前に購入者がタブを閉じても、コールバックが届いた時点でクレジットは付与されます。
• 再送されたコールバックや偽造されたコールバックは拒否されます。
• 返金やチャージバックでは、元の決済で付与された分だけが正確に取り消されます。
• プランの上限は、画面上で非表示にするだけでなく、サーバー側でも確認します。
• テスト用キーと本番用キーは別々のシークレットとして管理し、リポジトリには保存しません。

お客様が自社ドメインで利用できるように#

B2B SaaSのお客様からは、portal.theircompany.com のような自社のアドレスでプロダクトを使いたいという要望がよくあります。Cloudflare for SaaS では、カスタムホスト名でこれに対応できます。Free、Pro、Business プランには100件が含まれ、追加のホスト名は1件あたり$0.10、上限は50,000件です。ワイルドカードのカスタムホスト名は Enterprise 限定です。

お客様には、貴社のターゲットを指す CNAME レコードを追加してもらいます。ルートドメインで必要になる、A レコードでそのターゲットを指す方法は、デフォルトではサポートされていません。またエイペックスのプロキシは Enterprise のアドオンのため、ほとんどのお客様にはサブドメインの利用をおすすめします。証明書の検証は、HTTP、TXT、メールのいずれか、または Delegated DCV で行います。Delegated DCV は、一度設定すれば Cloudflare が自動更新できるようになるレコードです。証明書は Let's Encrypt、Google Trust Services、SSL.com のいずれかが発行します。

その周辺のプロダクト設計も同じくらい重要です。ドメインを接続できるのは有料プランのみとし、オンボーディング画面で追加すべきレコードをそのまま表示し、検証ステータスでは保留中や失敗の状態をわかりやすい言葉で説明し、お客様が DNS を変更したために証明書を更新できなくなった場合は、監視からチームにアラートを送ります。他のホスティングでは上限が異なります。Vercel は Hobby でプロジェクトあたり50ドメイン、Pro と Enterprise では無制限で、ソフトリミットはそれぞれ100,000と1,000,000です。Netlify は1サイトあたりのドメインエイリアスを50件以内にすることを推奨しています。

ご依頼前のご質問#

ブログより#

• SaaS向けカスタムドメイン:Cloudflare for SaaSでお客様に独自ドメインを使ってもらう方法

  Cloudflare for SaaSで、お客様の独自ドメインをSaaSに向ける方法を解説。検証の仕組み、2026年10月時点の料金、つまずきやすいポイントをまとめました。