--- title: "Webアプリ・SaaS・MVP開発サービス — Dardo" description: "Webアプリ、SaaS、MVPの開発。アカウントと権限管理、サーバー側で検証する決済、管理画面、顧客ドメイン対応まで、最初のバージョンに絞って設計します。" url: "https://dardo.studio/ja/services/web-app-development/" language: "ja" translations: {"en":"https://dardo.studio/en/services/web-app-development/","es":"https://dardo.studio/es/servicios/desarrollo-de-software-a-medida/","fr":"https://dardo.studio/fr/services/developpement-application-web/","de":"https://dardo.studio/de/leistungen/webapp-entwicklung/","it":"https://dardo.studio/it/servizi/sviluppo-web-app/","pt":"https://dardo.studio/pt/servicos/desenvolvimento-de-aplicativos-web/","nl":"https://dardo.studio/nl/diensten/web-app-ontwikkeling/","sv":"https://dardo.studio/sv/tjanster/webbapputveckling/","pl":"https://dardo.studio/pl/uslugi/tworzenie-aplikacji-webowych/","uk":"https://dardo.studio/uk/services/web-app-development/","ru":"https://dardo.studio/ru/services/web-app-development/","ar":"https://dardo.studio/ar/services/web-app-development/","hi":"https://dardo.studio/hi/services/web-app-development/","th":"https://dardo.studio/th/services/web-app-development/","ko":"https://dardo.studio/ko/services/web-app-development/","zh-Hans":"https://dardo.studio/zh-Hans/services/web-app-development/","zh-Hant":"https://dardo.studio/zh-Hant/services/web-app-development/"} updated: "2026-10-08" --- # Webアプリ・SaaS・MVP開発 Dardoは、マーケティング用のウェブサイトではなく、顧客がサインインし、支払いをし、頼りにするソフトウェアを必要とする起業家や企業のために、Webアプリ、SaaS、MVPを開発します。まず中核となる1つのワークフローを軸に初期バージョンの範囲を定め、アカウント、権限、決済、管理画面、分析機能を備えた形で、設計・開発・テスト・公開まで行います。コードとアカウントはお客様の所有となります。 執筆: Dardo編集チーム · 更新日: 2026年10月8日 · 2 分で読めます [WhatsAppでメッセージを送る](https://wa.me/573163373216?text=Dardo%20%E3%81%95%E3%82%93%E3%80%81%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF%E3%80%82%E6%AC%A1%E3%81%AE%E4%BB%B6%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E6%8F%90%E6%A1%88%E3%82%92%E3%81%8A%E9%A1%98%E3%81%84%E3%81%97%E3%81%9F%E3%81%84%E3%81%A7%E3%81%99%3A%20Web%E3%82%A2%E3%83%97%E3%83%AA%E3%83%BBSaaS%E3%83%BBMVP%E9%96%8B%E7%99%BA) ## Webアプリ・MVPプロジェクトに含まれるもの ご依頼内容に合わせて進め方を組み立てます。提案書には、以下の成果物のうち何が含まれるか、誰が必要な素材を用意するか、それぞれをどのように検収するかを明記します。 - 初期バージョンの範囲:中核ワークフロー、ロール、後回しにするもの - 空の状態、読み込み中、エラー時の表示まで設計した主要画面 - データモデル、サーバー側のアクセスルール、それを破ろうとするテスト - アカウント、ロール、チームへの招待 - 検証済みのプロバイダーからのコールバックで確認する決済・サブスクリプション - 管理画面、プロダクト分析イベント、エラー監視 - デプロイ、ドキュメント、リポジトリとアカウントの引き渡し ## Webアプリ、ウェブサイト、プロダクトデザイン、どこから始めるべき? 顧客やスタッフがサインインして、購入、予約、提出、承認、管理といった作業をプロダクト内で完結させる必要がある場合は、こちらが適しています。サービスを説明して販売するためのサイトが必要なら、Web開発のほうが向いています。ワークフローがまだ固まっていない場合は、プロダクトデザインから始め、主要画面をユーザーとテストしてから開発に進みましょう。 ## 初期バージョンの開発の進め方 最初に要件整理のフェーズを設けます。ユーザーとロール、初期バージョンで完結させる1つのワークフロー、各ステップで生まれるデータ、そして決済、連携、権限など費用に影響する判断事項を整理します。成果物は、文書化した範囲、クリック操作できる主要画面、後回しにする項目を明記したリリース計画です。 その後、お客様も使えるステージング環境で、短いサイクルで開発を進めます。最初のマイルストーンは、残りの画面を作り込む前に、実際のサインインと実際のデータルールを備えた中核ワークフローを最初から最後まで通して動かす、薄い一本の縦断的な実装です。公開時には、本番環境の監視、ロールバック手順の用意、そしてリポジトリ、ホスティング、データベース、決済、分析の各アカウントをお客様名義で引き渡します。 ## MVPの初期バージョンに含めるべきものは? 初期バージョンに必要なのは、実際のユーザーが1つのワークフローを完了するために必要なすべてであり、まだ到達していない規模でしか意味を持たないものは含めません。具体的には次の5つです。ワークフローに必要なロールを備えたアカウント、中核となるワークフロー自体、開発者に頼らずチームがレコードを確認・修正できる管理画面、初日から課金するビジネスモデルの場合の決済、そしてユーザーがどこで離脱するかを示す分析イベントです。 手作業で対応できるもの、後から導入できるものは後回しにします。たとえばネイティブモバイルアプリ、大企業向けのシングルサインオン、設定可能な権限マトリクス、2つ目の連携、アプリ内チャット、誰も求めていないレポートなどです。後回しにした項目も範囲書に1行ずつ記載し、データモデルに余地を残します。 多くのプロダクトは、よくあるモジュールの組み合わせでできています。その中で特に注意したいのが、予約・スケジュール管理と、現在は問い合わせを手作業で管理している小規模事業者向けのリード管理パイプラインの2つです。どちらも単純に見えますが、タイムゾーン、ステータス、担当者の扱いといった判断が潜んでおり、紙の上で決めておくほうが低コストです。 __MVPの初期バージョンに含めるべきものは?__ | モジュール | 必要なもの | 開発前に決めること | | ----------------- | --------------------------------------------------- | -------------------------------- | | アカウントとロール | サインアップ、サインイン、アカウント復旧、すべてのサーバーリクエストでのロール確認 | どのロールを設けるか、1人が複数の組織に所属できるか? | | チームへの招待 | 有効期限付きの招待リンク、席数の管理、オーナー権限の移譲、削除と同時にアクセスを取り消す仕組み | 誰が招待できるか、削除されたメンバーのレコードはどうなるか? | | 課金とプラン | ホスト型チェックアウトまたはサブスクリプション、検証済みコールバック、サーバー側で適用するプランの上限 | 各プランに何が含まれるか、支払いが失敗した場合どうなるか? | | 予約・スケジュール管理 | 空き状況のルール、タイムゾーン、バッファ時間、二重予約の防止、リマインダー、日程変更 | 誰が空き状況を設定するか、顧客が支払う間は枠を確保しておくか? | | 問い合わせ・リード管理パイプライン | スパム対策済みのフォーム、新規から成約または失注までのステータス、担当者の割り当て、流入元、同意の記録 | チームが実際に使うステータスはどれか、リードは次にどこへ進むか? | | 管理画面とレポート | 検索、レコード履歴、手動での修正、エクスポート | チームが毎週確認する数値は何か、誰がレコードを編集できるか? | | 独自ドメイン | ホスト名の登録、DNS検証、証明書のステータス、プランの確認 | どのプランにドメインが含まれるか、ホスト側にどんな制限があるか? | | 監査ログ | 誰がいつ何を変更したかを追記専用で残す記録 | 顧客や監査人が追跡できる必要のある操作はどれか? | | 通知 | メールとアプリ内メッセージ、テンプレート、配信ログ、ユーザー設定 | どのイベントで誰に通知するか、オフにできるものはどれか? | ## 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件以内にすることを推奨しています。 ## ご依頼前のご質問 **Webアプリ・MVPの費用は何で決まりますか?** 費用は、ロールの数、中核となるワークフローの複雑さ、決済、外部連携、移行が必要な既存データの量によって決まります。画面数よりも、権限と状態のほうが影響します。5つのロールと承認ステップがある1画面は、閲覧専用の5画面よりも作業が多くなります。機能ごとの単価ではなく、スコーピングのフェーズの後に、書面のスコープに基づいて見積もります。 **最初のバージョンを作るのにどのくらいかかりますか?** ワークフローがどれだけ固まっているか、意思決定やコンテンツがどれだけ早く揃うか、決済代行会社やクライアント側のIT部門などの第三者によるアクセス承認が必要かどうかによって変わります。提案書では、中核となるワークフローの動く一部分から始まるマイルストーンを設定します。正式リリースの日程は、その部分をご承認いただいた時点で確定します。 **Dardoは既存のコードベースを引き継げますか?** はい、監査を行ったうえで対応します。リポジトリ、依存関係、データモデル、アクセス確認、デプロイ、各アカウントの管理者を確認し、そのまま使えるもの、先に修正すべきもの、修理と作り直しのどちらが適切かをご報告します。コードを読む前に、残すか置き換えるかをお約束することはありません。 **iOSやAndroidのネイティブアプリは作っていますか?** いいえ。Dardoが手がけるのはWebで、ホーム画面のアイコンから開けるインストール可能なWebアプリも含みます。ブラウザでは使えない端末機能に依存する場合、アプリストアでの配信が必要な場合、オフラインでの利用が多い場合は、ネイティブアプリのほうが適しています。その際はそうお伝えします。WebアプリとそのAPIを、ネイティブ開発チームのバックエンドとして使うこともできます。 **コードやアカウントの所有者は誰になりますか?** お客様です。リポジトリ、ホスティング、データベース、ドメイン、決済代行会社、アナリティクスのアカウントは、お客様の名義で作成するか、引き渡し時に移管します。移管できないライセンス付きの依存関係がある場合は、提案書に記載します。Dardoが保持するのは、サポートのためにお客様が許可したアクセス権のみです。 **こちらで用意するものはありますか?** スコープに関する質問に数日以内に回答できる意思決定者、プロダクトが連携するシステムへのアクセス、ワークフローで使うデータや書類の実例が必要です。決済代行会社は本番決済を有効にする前に事業者の審査を行うため、アカウントは早めに貴社名義で開設してください。 **公開後はどうなりますか?** ご提案には、実際のユーザーが利用し始めてからの不具合対応、監視、ちょっとした変更に対応するサポート期間を含めることができます。その後の追加開発は、月ごとの作業範囲として、または新規プロジェクトとして取り決めます。セキュリティアップデートと依存パッケージのアップグレードは任意ではないため、どちらの場合でも担当者を明確にしておく必要があります。 ## ブログより - [SaaS向けカスタムドメイン:Cloudflare for SaaSでお客様に独自ドメインを使ってもらう方法](https://dardo.studio/ja/blog/custom-domains-for-saas/) Cloudflare for SaaSで、お客様の独自ドメインをSaaSに向ける方法を解説。検証の仕組み、2026年10月時点の料金、つまずきやすいポイントをまとめました。 ## 出典・参考資料 このページの出典です。詳細は各発行元の原典をご覧ください。 - [OWASP Top 10:2025、A01 アクセス制御の不備](https://top10.owasp.org/2025/A01%5F2025-Broken%5FAccess%5FControl) · top10.owasp.org - [Cloudflare for SaaS:プランとカスタムホスト名の上限](https://developers.cloudflare.com/cloudflare-for-platforms/cloudflare-for-saas/plans/) · developers.cloudflare.com - [Cloudflare for SaaS:はじめに(CNAMEターゲットとAレコード)](https://developers.cloudflare.com/cloudflare-for-platforms/cloudflare-for-saas/start/getting-started/) · developers.cloudflare.com - [Cloudflare for SaaS:証明書の検証方法](https://developers.cloudflare.com/cloudflare-for-platforms/cloudflare-for-saas/security/certificate-management/issue-and-validate/validate-certificates/) · developers.cloudflare.com - [Cloudflare:認証局](https://developers.cloudflare.com/ssl/reference/certificate-authorities/) · developers.cloudflare.com - [Vercel:制限(プロジェクトあたりのドメイン数)](https://vercel.com/docs/limits) · vercel.com - [Netlify:ドメインエイリアスの追加](https://docs.netlify.com/manage/domains/configure-domains/add-a-domain-alias/) · docs.netlify.com [Dardo](https://dardo.studio/ja/) · [サービス](https://dardo.studio/ja/services/) · Webアプリ・SaaS開発 ## 関連する実績・事例 [![Dardoのプロジェクト、superame.lol のウェブサイト](https://dardo.studio/work/superame-1.webp?v=34a51b35f537) · 実践例 / 主な実績 · **superame.lol** · プロジェクトを見る](https://dardo.studio/ja/work/superame/) ## 最初のバージョンを計画しましょう お客様やスタッフが完了させる必要のあるワークフローと、それに関わる人を教えてください。スコープを決めるための質問をお返しします。すでに市販のツールで足りる場合は、率直にそうお伝えします。 [01 · **関連する実績を見る** · superame.lol](https://dardo.studio/ja/work/superame/) · [02 · **隣接する領域を比較する** · プロダクトデザイン](https://dardo.studio/ja/services/product-design/) · [03 · **ご要望を相談する** · ご希望の言語でスコープ付きの提案をご依頼いただけます](https://dardo.studio/ja/contact/?service=web-app-development) ## もっと見る - [![superame.lol — サイトのプレビュー](https://dardo.studio/_astro/01M4H711Q11QCMQDA10WE4A1K7_ZrTSRU.webp) · 事例紹介 · **superame.lol — Webデザイン事例**](https://dardo.studio/ja/work/superame/) - [サービス · **Webアプリ・SaaSのためのプロダクトデザインとUX/UIデザイン**](https://dardo.studio/ja/services/product-design/) - [サービス · **カスタム開発のクライアントポータル制作**](https://dardo.studio/ja/services/client-portal-development/) - [サービス · **データビジュアライゼーションのデザインとダッシュボードUI**](https://dardo.studio/ja/services/data-visualization/)