QUICKSTART

30 分で SaaS 販売開始

すでにデプロイ済みの SaaS があれば、HTML に 1 行貼る + シェアリンクを送るだけで月額販売を始められます。決済・解約・返金・領収書・消費税は myAI が全部代行、ライセンスキーの入力 UI と検証も myAI のウィジェットが担当します。

出品をはじめる →AI 実装依頼テンプレを見る

前提条件

すでにデプロイ済みの SaaS がある（URL でアクセスできる状態）
SaaS の HTML を 1 ヶ所編集できる（ChatGPT / Claude / Cursor などの AI に頼んでも OK）

検証ロジックを自前で書きたい上級者向けには、開発者ツールで 8 言語のサンプルコード生成にも対応。

myAI にアカウント登録

⏱ 1 分

メールアドレスを入力してサインアップ。確認メールのリンクをクリックすればログイン完了です。パスワードは任意。

法人化・個人事業主登録は不要です（myAI から業務委託料として受け取れます）。

SaaS の情報を入力して公開申請

⏱ 5 分

新規出品フォームで「🚀 月額 SaaS」を選び、以下を入力:

タイトル・説明・サムネ画像
SaaS 本体 URL（例: https://your-app.com）
サインアップ URL（買い手が初回登録するページ）
月額（例: ¥1,000）

下書き保存 → 商品一覧から「公開を申請」で運営審査へ。初回は 1〜2 日で承認、以降は即時公開。

SaaS にライセンスキー入力ゲートを設置

⏱ 3 分

★ このステップが、SaaS としての「設計」そのものです。 技術的には 1 行貼るだけですが、 どの機能から・いつから・誰までライセンスを必須にするか が出品者の腕の見せ所。よくある分け方を下にまとめました。

🎯 MYAI 連携の絶対要件

必須なのはたった 1 つ: /api/v1/license/verify を呼んで結果で利用可否を判定すること

それさえ満たせば、UI も配置も検証タイミングも完全に自由です。 myAI は連携手段を 4 つ用意していて、出品者がプロジェクトに合うものを選べます。

myAI への 4 統合パターン (好きなものを選んでください)

どれを使うかは出品者の自由。1 と 4 は今すぐ使えます。2 と 3 は近日対応予定。

✓ 今すぐ使える難易度 ★

1. Hosted URL ボタン (Return-to 連携付き)

自分の SaaS の HTML にリンクを 1 つ貼るだけ。買い手は myAI で決済 → 自動的に SaaS に戻る + ライセンスキーが自動入力される、までを URL 1 行で実現します (Lemon Squeezy 同等の体験)。

<a
  href="https://my-ai.community/p/<PRODUCT_ID>?return_to=https://your-saas.com/activate"
  target="_blank" rel="noopener noreferrer"
>
  myAI で月額契約する →
</a>

UX フロー:

買い手がボタンクリック → 新タブで myAI 商品ページ
「月額契約する」→ Stripe 決済 (myAI の Hosted Checkout)
決済成功 → myAI が return_to に #myai_key=... 付きで自動リダイレクト
SaaS 側は URL hash からキーを読取って自動 verify (widget.js が対応、自前実装でも 5 行で書ける)
買い手は SaaS に戻った瞬間に利用開始

向いてる人: 非エンジニア、とりあえず売る導線が欲しい、買い手の UX を最短にしたい

セキュリティ: return_to は出品時に登録した saas_url と同じオリジンの URL のみ許可 (Open Redirect 防止)。

✓ 今すぐ使える難易度 ★★

2. Overlay widget.js (ライセンス入力 UI 付)

ライセンスキー入力 UI と検証処理を 1 行 のスクリプトで提供。買い手が SaaS にアクセスするとオーバーレイが出てキー入力 → 検証 → 通過の体験を myAI 側で完結。

<script
  src="https://my-ai.community/widget.js"
  data-product-id="<PRODUCT_ID>"
></script>

向いてる人: 非エンジニア、ライセンス UI を自前で作りたくない、検証ロジックを myAI に任せたい (詳しい設定は「AI 実装依頼テンプレ」)

⏳ 近日対応難易度 ★★

3. Embedded iframe

myAI の商品 / 購入画面を自社サイトに iframe で埋込。訪問者を myAI に飛ばさず自社サイト内で購入導線を完結させたい場合用。

✓ 今すぐ使える難易度 ★★★

4. License Verify API + 自前 UI

ライセンスキー入力 UI は自社で実装、検証だけ myAI の API に委譲。完全カスタム制御が可能。NEO PM のような開発者向け。

const res = await fetch(
  'https://my-ai.community/api/v1/license/verify',
  {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ license_key }),
  }
)
const { active } = await res.json()
if (!active) return showPurchaseUI()

向いてる人: 開発者、自社デザインで統一感を出したい、サーバサイド検証でセキュリティを高めたい (詳細は ↓ 下の上級者セクション + docs/INTEGRATION_CONTRACT.md)

どれを選んでも myAI 側の動作確認フロー (/seller/products/<id>/verify) は対応します。

実装方法 1: widget.js (推奨 / コーディング最小)

上の必須要件 (API 呼出 + キー入力 UI + 判定) を 1 行で全部 やってくれる myAI 提供のスクリプト。HTML に貼るだけで完成。

<script
  src="https://my-ai.community/widget.js"
  data-product-id="<出品ページの id>"
></script>

この 1 行で以下が自動で動きます:

SaaS を開いた人にライセンスキー入力画面を表示
myAI の検証 API を叩いて正規購入者か確認
OK ならブラウザに記憶 (次回以降スキップ)
NG なら購入ページへ誘導

自前 UI でやりたい場合は実装方法 2 (下の上級者セクション) を参照。

よくあるライセンス区切り方

自分の SaaS の魅力が一番伝わる区切り方を選んでください。組合せも可。

🔒 全画面ロック

SaaS を開いた瞬間にゲート。 API ラッパー / 業務ツールなど、機能が一目で説明できる商品向け。

→ 配置パターン A

🏠 ランディング公開 + アプリロック

機能紹介・料金・スクショは見せて、ダッシュボードで初めてゲート。一般的な SaaS の「Login」体験。

→ 配置パターン B (推奨)

⚙️ 機能で区切る

基本機能は無料、「PDF 書き出し」「API 連携」など特定機能に到達したときだけゲート。フリーミアム型に最適。

→ 配置パターン C (機能単位ロック)

⏱ 期間で区切る

最初の 7 日は誰でも使える、それ以降はゲート。 localStorage に初回起動日を保存し、N 日後に widget をトリガー。

例: if (Date.now() - firstSeen > 7 * 86400e3) showGate()

📊 利用量で区切る

ローカルカウンタで「保存 10 回 / 検索 50 回」まで無料、超えたらゲート。自前で counter を管理。

例: 検索ボタンに onCount >= 50 ? showGate() : doSearch()

👥 メンバー人数で区切る

チーム / ワークスペースの招待人数で課金。1 つのライセンスを最大 N 名まで同時にアクティブ化、超過分は別ライセンス購入を案内。

例: buyer_external_id をシートカウンタに紐付け

⚙ ⏱ 📊 👥 のパターンは widget を「呼ばれたときだけ起動」するモードで実装します。下の AI 実装依頼テンプレでパターン C (機能単位) を選ぶと、該当する JS スニペットが出ます。

どこに貼るの? SaaS のすべてのページで読み込まれる HTML の <head> 内、または <body> の最後。Next.js / React / Vue でも同じで、ルートのレイアウトファイル (例: app/layout.tsx) に追加すれば OK。ただし上の「区切り方」で B 以降を選ぶなら、貼る場所も変わります。

AI に頼むなら: 下の「AI 実装依頼テンプレ」をコピペして ChatGPT / Claude / Cursor に貼り付けてください。

シェアリンクを SNS / メールで送る

⏱ 1 分

公開された商品ページ（例: https://my-ai.community/p/<id>）を X / LINE / メール / Discord 等で身近な人に送るだけ。

マーケットの一覧にも自動掲載されるので、myAI 経由で見つけてもらえます。「招待制」を選んだ場合は URL を知る人だけが購入できます。

購入 → キー発行 → SaaS でゲート通過まで自動

⏱ 自動

ここから先は全部自動です:

買い手はリンクを開いて「月額 ¥1,000 で契約する」をクリック
カード情報を入力 → 決済完了（myAI の Stripe で処理）
画面とメールにライセンスキーが届く
買い手はあなたの SaaS を開く
STEP 3 で設置したゲートにキーを入力 → 自動検証 → 利用開始

決済画面・領収書・解約・返金は全部 myAI が処理。買い手は myAI のアカウント作成不要（メアド入力のみ）。次回以降の訪問では、ブラウザにキーが記憶されているのでゲートはスキップされます。

ダッシュボードで売上を確認

⏱ 随時

ダッシュボードで MRR・契約数・解約数をリアルタイムで把握。月次で銀行口座に業務委託料として自動振込されます（売上の 90%）。

領収書 / 適格請求書は myAI が自動発行
消費税の処理・申告は myAI が代行
解約・返金は買い手が myAI ライブラリから自己操作
カード不正利用は Stripe Radar で自動検知

自前で全部やる場合との比較

作業	自前	myAI
Stripe アカウント審査	1〜3 週間	不要
決済画面の実装	数日	不要
月額課金の自動処理	1 週間	不要
解約 / 返金の処理	数日	不要
領収書 / インボイス発行	数日	自動
消費税の計算 / 申告	専門家依頼	myAI 代行
チャージバック対応	都度	myAI 引受
カスタマーサポート	永続	myAI 代行
合計時間	2〜3 ヶ月	30 分

よくある質問

Q. 手数料は?: A. 売上の 10% を myAI が手数料として控除、残り 90% を月次で銀行振込します。固定費・月額費はありません。
Q. 振込はいつ?: A. 毎月 15 日締め、月末までに前月分を振込みます。最低支払額 ¥1,000 を超えた月から開始。
Q. マーケットに公開したくない場合は?: A. 出品時に「招待制（マーケット非公開）」を選べば、URL を知る人だけが購入できます。クローズドな顧客向け SaaS にも対応。
Q. 解約された場合 SaaS 側はどう検知?: A. license verify API が active=false を返すようになります。SaaS 側はこれを受けて該当ユーザーのアクセスを停止するだけ。1 日 1 回程度の再検証を推奨。
Q. ライセンスキーが買い手に届かなかった場合?: A. 買い手は myAI ライブラリの「キーを再発行」で新しいキーを取得できます。出品者側の対応は不要。
Q. 返金トラブルが起きたら?: A. myAI が一次裁定します。説明と異なる商品の場合は myAI 判断で全額返金。手数料も同時に返却されるので、出品者・myAI 双方が損しない設計。

AI 実装依頼テンプレ

ChatGPT / Claude / Cursor にこのままコピペ

「どこに貼るかわからない」が一番のつまづきです。あなたの SaaS で使っている技術に合わせて、下のテンプレをそのまま AI に渡してください。 AI が編集すべきファイル名と差分まで提示してくれます。

⚠️ PRODUCT_ID は秘密の値ではありません

シェア URL /p/<id> でそのまま公開される値なので、コードに直書きで OK です。環境変数や .env に入れる必要はありません。AI に「直書きで」と指示しているテンプレを下に用意しています。

出品済みの SaaS 商品がまだないため、テンプレ内の ここに私の PRODUCT_ID を直接書く は実 ID に自動置換されません。先に SaaS を出品すると、ここに自動でプロダクトセレクタが表示されます。

まず「どこまで買い手に見せるか」を選ぶ

widget は <script> を貼った場所だけで動きます。置く場所を変えるだけで「即ゲート」「ランディングは公開」など買い手体験を切替できます。タブで該当パターンを選ぶと、そのパターン用の AI 実装テンプレが表示されます。

パターン	買い手が購入前に見えるもの	向いてる商品
A. 完全ロック	何も見えない (即ゲート)	API ラッパー / 機能が一目瞭然
B. 公開 + アプリロック ⭐	ランディング / 機能紹介 / 料金は見える	一般的な SaaS (推奨)
C. オンデマンドロック	UI 全部見える、操作 / 期間 / 利用量で初めてロック	フリーミアム / トライアル / 従量課金

ランディング・機能紹介・料金は公開、ログイン後の保護ルートだけゲート。買い手は購入前に商品を理解できる、最も一般的な SaaS パターン。

Next.js (App Router)

📝 この指示について

下記は myAI 公式 widget.js を使う「お手軽パス」の実装指示です。
コードベースを確認した上で、もしあなた (AI) の判断で別の設計
(自前 LicenseGate / カスタム検証 等) に切替える方が適切な場合は、
**変更前に依頼者に確認** してください。設計変更そのものは禁止しません。

---
私の Next.js (App Router) プロジェクトに myAI のライセンスゲートを組込んでください。**ランディング (/) は公開のまま** で、ログイン後に使うアプリ画面 (例: /app, /dashboard) でだけゲートを起動したい想定です。

ルート layout (app/layout.tsx) には貼らず、保護ルートグループのレイアウト (例: app/(app)/layout.tsx もしくは app/dashboard/layout.tsx) の中、コンテンツ末尾に next/script の <Script /> で以下を追加してください。strategy は "afterInteractive"。

<script src="https://my-ai.community/widget.js" data-product-id="ここに私の PRODUCT_ID を直接書く"></script>

このプロジェクトの構成を確認してから、最適な保護ルート layout に追加してください。該当 layout が存在しなければ app/(app)/layout.tsx を新規作成し、対象ページをグループ移動する案で提案してください。

PRODUCT_ID は秘密ではないので直書きで OK です。
変更したファイルの全文だけ教えてください。

---
🎯 設計判断で別実装に切替える場合の責任範囲

もし widget.js を使わない実装を選んだ場合、以下を **自分で実装+確認** する責任が生じます:

1. POST https://my-ai.community/api/v1/license/verify を仕様通り呼ぶ
   - リクエスト: { "license_key": "..." }
   - レスポンスの active=true/false でアクセス制御
2. ?myai_force_gate=1 URL パラメタを検出して LicenseGate を強制表示する
   (myAI の動作確認フロー /seller/products/<id>/verify と連携するため)
3. 上記が動くことを実機で確認する

これらは myAI が widget.js で代行している部分です。自前実装ならこれらを満たして
ください。詳しい契約は myAI の docs/INTEGRATION_CONTRACT.md 参照。

設計判断は依頼者 (出品者) が最終的に行います。AI 側で勝手に変更せず、
変更が必要な場合は理由を提示してから依頼者の承認を取ってください。

⚠️ 「ここに私の PRODUCT_ID を直接書く」を実際の PRODUCT_ID に置換してから AI に貼ってください。

React (Vite / CRA)

📝 この指示について

下記は myAI 公式 widget.js を使う「お手軽パス」の実装指示です。
コードベースを確認した上で、もしあなた (AI) の判断で別の設計
(自前 LicenseGate / カスタム検証 等) に切替える方が適切な場合は、
**変更前に依頼者に確認** してください。設計変更そのものは禁止しません。

---
私の React (Vite or CRA) SPA に myAI のライセンスゲートを組込んでください。**ランディング (/) は公開のまま** で、ログイン後の保護ルート (例: /app, /dashboard) でだけゲートを起動したい想定です。

App.tsx などのルーター定義を見て、保護したいルートのコンポーネント (例: <DashboardLayout>) の中で useEffect で widget script を 1 回だけ動的にロードする実装にしてください。

実装例:
useEffect(() => {
  if (document.querySelector('script[data-myai-widget]')) return
  const s = document.createElement('script')
  s.src = 'https://my-ai.community/widget.js'
  s.setAttribute('data-product-id', 'ここに私の PRODUCT_ID を直接書く')
  s.setAttribute('data-myai-widget', '')
  document.body.appendChild(s)
}, [])

PRODUCT_ID は直書きで OK。保護したいレイアウトコンポーネントが分からなければルーティング構造を確認の上、最適な箇所に提案してください。
変更したファイルの全文だけ教えてください。

---
🎯 設計判断で別実装に切替える場合の責任範囲

もし widget.js を使わない実装を選んだ場合、以下を **自分で実装+確認** する責任が生じます:

1. POST https://my-ai.community/api/v1/license/verify を仕様通り呼ぶ
   - リクエスト: { "license_key": "..." }
   - レスポンスの active=true/false でアクセス制御
2. ?myai_force_gate=1 URL パラメタを検出して LicenseGate を強制表示する
   (myAI の動作確認フロー /seller/products/<id>/verify と連携するため)
3. 上記が動くことを実機で確認する

これらは myAI が widget.js で代行している部分です。自前実装ならこれらを満たして
ください。詳しい契約は myAI の docs/INTEGRATION_CONTRACT.md 参照。

設計判断は依頼者 (出品者) が最終的に行います。AI 側で勝手に変更せず、
変更が必要な場合は理由を提示してから依頼者の承認を取ってください。

⚠️ 「ここに私の PRODUCT_ID を直接書く」を実際の PRODUCT_ID に置換してから AI に貼ってください。

素の HTML (静的サイト)

📝 この指示について

下記は myAI 公式 widget.js を使う「お手軽パス」の実装指示です。
コードベースを確認した上で、もしあなた (AI) の判断で別の設計
(自前 LicenseGate / カスタム検証 等) に切替える方が適切な場合は、
**変更前に依頼者に確認** してください。設計変更そのものは禁止しません。

---
私の静的サイトでは、ランディングページ (index.html) は誰でも見られるようにしたく、ログイン後の管理画面 (例: app.html, dashboard.html 等) でだけ myAI のライセンスゲートを起動したいです。

ランディング HTML には何も追加せず、保護したい HTML ファイルの <head> 末尾にだけ以下を追加してください。

<script src="https://my-ai.community/widget.js" data-product-id="ここに私の PRODUCT_ID を直接書く"></script>

どのファイルが「保護対象」か分からなければ、ファイル一覧から推定して提案してください。PRODUCT_ID は秘密ではないので直書きで OK です。

---
🎯 設計判断で別実装に切替える場合の責任範囲

もし widget.js を使わない実装を選んだ場合、以下を **自分で実装+確認** する責任が生じます:

1. POST https://my-ai.community/api/v1/license/verify を仕様通り呼ぶ
   - リクエスト: { "license_key": "..." }
   - レスポンスの active=true/false でアクセス制御
2. ?myai_force_gate=1 URL パラメタを検出して LicenseGate を強制表示する
   (myAI の動作確認フロー /seller/products/<id>/verify と連携するため)
3. 上記が動くことを実機で確認する

これらは myAI が widget.js で代行している部分です。自前実装ならこれらを満たして
ください。詳しい契約は myAI の docs/INTEGRATION_CONTRACT.md 参照。

設計判断は依頼者 (出品者) が最終的に行います。AI 側で勝手に変更せず、
変更が必要な場合は理由を提示してから依頼者の承認を取ってください。

⚠️ 「ここに私の PRODUCT_ID を直接書く」を実際の PRODUCT_ID に置換してから AI に貼ってください。

WordPress

📝 この指示について

下記は myAI 公式 widget.js を使う「お手軽パス」の実装指示です。
コードベースを確認した上で、もしあなた (AI) の判断で別の設計
(自前 LicenseGate / カスタム検証 等) に切替える方が適切な場合は、
**変更前に依頼者に確認** してください。設計変更そのものは禁止しません。

---
私の WordPress サイトでは、トップページや投稿は誰でも見られる状態のまま、特定のページ (例: 固定ページ slug が "dashboard" / "app" / "members") にアクセスされたときだけ myAI のライセンスゲートを起動したいです。

functions.php に wp_enqueue_scripts フックで、is_page(['dashboard', 'app', 'members']) など対象ページの条件付きで以下の script を enqueue するコードを書いてください。

<script src="https://my-ai.community/widget.js" data-product-id="ここに私の PRODUCT_ID を直接書く"></script>

PRODUCT_ID は PHP リテラルに直書きで OK、環境変数にする必要はありません。プラグインに頼らず最小コードでお願いします。条件に使う page slug は実際のサイト構成に合わせて確認の上提案してください。

---
🎯 設計判断で別実装に切替える場合の責任範囲

もし widget.js を使わない実装を選んだ場合、以下を **自分で実装+確認** する責任が生じます:

1. POST https://my-ai.community/api/v1/license/verify を仕様通り呼ぶ
   - リクエスト: { "license_key": "..." }
   - レスポンスの active=true/false でアクセス制御
2. ?myai_force_gate=1 URL パラメタを検出して LicenseGate を強制表示する
   (myAI の動作確認フロー /seller/products/<id>/verify と連携するため)
3. 上記が動くことを実機で確認する

これらは myAI が widget.js で代行している部分です。自前実装ならこれらを満たして
ください。詳しい契約は myAI の docs/INTEGRATION_CONTRACT.md 参照。

設計判断は依頼者 (出品者) が最終的に行います。AI 側で勝手に変更せず、
変更が必要な場合は理由を提示してから依頼者の承認を取ってください。

⚠️ 「ここに私の PRODUCT_ID を直接書く」を実際の PRODUCT_ID に置換してから AI に貼ってください。

PRODUCT_ID の場所: 商品一覧 → 該当商品の販売ページを開く → URL の /p/ 以降の文字列。 AI に貼る前に、テンプレ内の「ここに私の PRODUCT_ID を直接書く」を実値に置換しておくとさらに確実です。

（上級者向け）複数環境で PRODUCT_ID を切替えたい場合

staging では別商品を使いたい等の場合のみ、環境変数化を検討。 Next.js なら NEXT_PUBLIC_MYAI_PRODUCT_ID を .env.local / ホスティングの env に設定し、data-product-id={process.env.NEXT_PUBLIC_MYAI_PRODUCT_ID} で参照。ただし大半の出品者には不要なので、まずは直書きで始めるのが一番速いです。

実装方法 2: 自前 UI でカスタム実装 (上級者向け)

widget.js を一切使わず、自社の SaaS の UI / フローに完全統合する選択肢。myAI 連携で必須なのは、本ステップ冒頭で示した「検証 API を呼ぶこと」だけ なので、それさえ満たせば実装方法は完全自由です。

自前のログイン UI でライセンスキーを受取る
サーバサイドで /api/v1/license/verify を直叩き
結果を自社 DB に保存、UI 制御も完全に自社設計

メリット: ブランド統一感 / セキュリティ強化 (サーバ側検証) / 外部 JS 非依存。デメリット: 数十行の実装が必要。Next.js / Node / Python 等どの言語でも OK。

カスタム実装のサンプルコードは開発者ツール（/dev）で Next.js / Node / Python / Go / Cloudflare Workers / PHP / FastAPI / curl の 8 言語ぶん生成できます。

// 例: Next.js の Route Handler
const res = await fetch(
  'https://my-ai.community/api/v1/license/verify',
  {
    method: 'POST',
    body: JSON.stringify({ license_key }),
  }
)
const { active, buyer_external_id } = await res.json()
if (!active) return redirect('/purchase')

「myAI で購入」ボタンの URL

自前 UI に「myAI で月額契約」ボタンを置く場合は、必ずhttps://my-ai.community/p/<PRODUCT_ID>に直リンクしてください。/market 等の一覧ページに飛ばすと、買い手があなたの商品を探し直すフリクションが発生します。

// 例: React の購入ボタン
<a
  href={`https://my-ai.community/p/${PRODUCT_ID}`}
  target="_blank"
  rel="noopener noreferrer"
>
  myAI で月額契約する →
</a>

PRODUCT_ID は /seller/products の各商品 URL /p/<id> の id 部分。秘密値ではないので環境変数化不要、コードに直書きで OK。

さっそく出品をはじめる

無料登録後、4 ステップフォームで下書き作成 → 公開申請。審査通過後、すぐに販売開始できます。

無料ではじめる詳しい組込ガイド