AIでメンバーシップサイトを作る方法

プロンプトを書く前に、そのサイトに何が本当に必要かを決めましょう。

メンバーシップサイトやコースサイトなら、まずは基本項目を洗い出します。

• 公開ページ: ホーム、料金、会社情報、お問い合わせ
• 会員ページ: ダッシュボード、コースライブラリ、レッスンページ、アカウント
• 主な操作: 登録、サインイン、アクセス購入、レッスン閲覧、進捗確認
• コンテンツ種別: コース、モジュール、レッスン、ダウンロード、推薦文、FAQ
• ユーザー権限: ビジター、会員、管理者

あわせて、何を公開し、何をゲートするかも決めておきます。

例:

• 有料コミュニティなら、公開ランディングページ、料金、チェックアウト、会員ダッシュボード、プロフィールページが必要かもしれません。
• オンラインコースサイトなら、販売ページ、コース一覧、レッスンページ、サインイン、シンプルな進捗UIが必要かもしれません。
• 無料の会員ライブラリなら、決済は不要で、サインインと保護コンテンツだけで足りるかもしれません。

最初の版は小さく保ちましょう。良いランディングページ1つ、料金ページ1つ、ダッシュボード1つ、レッスンページ1つがあれば、まずは十分に検証できます。

Moremadeでは、サイトを自然な言葉で説明すると、AIエージェントがソースコードを書いてくれます。Webサイトの場合は、実際のReactとTailwindのコードになります。その後、ライブプレビューで確認しながら、チャットで変更を続けられます。

最初のプロンプトでは、次の点を具体的に伝えるとよいです。

• サイトの種類
• ほしいページ
• デザインの雰囲気
• 主要なユーザーフロー
• 1版目では仮置きでよい要素

以下のようなプロンプトが出発点として十分です。

Studio NotesというオンラインコースメンバーシップのWebサイトを作成してください。余白を広めに取り、シンプルなタイポグラフィを使った、クリーンでモダンなレイアウトにしてください。公開用のホームページ、料金ページ、サインインページ、会員ダッシュボード、コースライブラリ、レッスンページを作成してください。ホームページでは提供内容を説明し、明確な行動喚起を含めてください。ダッシュボードには受講中のコースと最近のレッスンを表示してください。ライブラリには進捗ラベル付きのコースカードを表示してください。レッスンページには動画エリア、レッスン要約、ダウンロード可能な資料セクション、前後のナビゲーションを含めてください。モバイル対応にしてください。

これだけで、細部を指定しすぎずに使える最初のたたき台が作れます。

最初のビルドが終わったら、初めて訪れたユーザーのつもりでライブプレビューを確認しましょう。

チェックするポイント:

• ホームページで提供内容がすぐに伝わるか
• 主な行動喚起が分かりやすいか
• 会員ページが公開ページときちんと区別されているか
• ナビゲーションが分かりやすいか
• レッスンページが見た目だけでなく、実際の学習に役立つか

その後は、小さなステップで調整します。全体を書き直すより、短く的を絞ったプロンプトのほうがうまくいきます。

使いやすい追加入力の例:

• "料金ページをもっとシンプルにしてください。プランカードは3つだけにし、コースアクセスとダウンロードの比較行を追加して、主要ボタンをもっと目立たせてください。"
• "会員ダッシュボードを再設計して、再訪ユーザー向けにしてください。『学習を続ける』を最初に置き、その次に最近のレッスン、最後にすべてのコースを表示してください。各コースカードの進捗表示を分かりやすくしてください。"
• "モバイルで読みやすいようにレッスンページを改善してください。左右の余白を減らし、レッスン要約の行間を広げ、小さな画面では前へ／次へボタンをコンテンツ領域の下に固定してください。"

Moremadeにはビジュアルインスペクターもあるので、要素を直接選んで、よりピンポイントに変更できます。必要ならコードビューで生成コードを確認しながら反復することもできます。

すべてのメンバーシップサイトが、最初から全部必要なわけではありません。

保護コンテンツ、会員アカウント、保存された進捗が必要なときはサインインを使います。アクセスが購入に依存するなら決済を使います。コースのアイデアを検証している段階なら、完全な会員エリアを作る前に、公開の販売ページとチェックアウトから始めることもできます。

ユーザーアカウントとゲート付きコンテンツには、MoremadeのSupabase内蔵コネクタが使えます。これで次のものを扱えます。

• データベース
• サインイン
• ファイル保存

有料アクセスには、MoremadeのStripe内蔵コネクタを使って、設定した価格でチェックアウトを構築できます。

現実的な進め方は次のとおりです。

• まず公開サイトと会員画面を作る
• ユーザーにアカウントが必要ならSupabaseを追加する
• アクセス前に支払いが必要ならStripeを追加する
• プロジェクトが成長したら、あとで2つの流れをつなぐ

このあたりで使えるプロンプト例:

• "Supabaseを使ってサインインとサインアップの流れを追加してください。ダッシュボード、ライブラリ、レッスンページを保護し、サインアウト済みユーザーはサインインページに送ってください。"
• "Pro Memberという単一の会員プラン向けにStripeチェックアウトを追加してください。料金ページからチェックアウトボタンへ進めるようにし、内容も表示してください。"
• "コースの記録とレッスンの記録をSupabaseに保存し、それをコースライブラリとレッスンページのレイアウトに読み込んでください。"

会員向けのダウンロード、レッスンファイル、保護されたPDFがあるなら、Supabaseのファイル保存先を最初から想定しておくとよいです。

メンバーシップサイトは、想像以上にスマホで使われます。レッスンはメールから開かれ、ユーザーは移動中に進捗を確認し、チェックアウトの使いづらさは小さい画面で最も目立ちます。

重要なページをすべてモバイルで確認してください。

• ホームページ
• 料金ページ
• サインインページ
• ダッシュボード
• コースライブラリ
• レッスンページ

次のような実務上の問題を探します。

• ボタン同士が近すぎる
• カードが高くなりすぎる
• 表や比較行がはみ出す
• 動画やメディア領域が画面を占有しすぎる
• レッスン本文が読みにくい
• スティッキーナビがコンテンツを隠す

そのうえで、直接的な修正を依頼します。

例:

• "モバイルでは、料金比較を各プランカードの下にシンプルな機能リストとして並べてください。"
• "小さな画面ではダッシュボードカードの密度を下げ、各コースにつき1つの明確な主ボタンだけを表示してください。"
• "デスクトップではレッスンページのコンテンツ幅を狭くし、モバイルでは全幅にしてください。"

この工程が重要なのは、最初に生成された版では、構造は正しくても小さい画面の細部がまだ不十分なことが多いからです。

最初の版が使える状態になったら、公開しましょう。

Moremadeでは、無料の yourname.moremade.ai サブドメインへワンクリックで公開できます。内部レビュー、下書き共有、初回ローンチのテストにはこれで十分です。

有料プランなら、カスタムドメインを接続できます。ドメインはMoremade内で購入することも可能です。

おすすめの公開フローは次のとおりです。

• まず無料サブドメインに公開する
• 自分で主要なユーザージャーニーをひと通り確認する
• サインイン、チェックアウト、保護ページを使うならそこも確認する
• 数人のテスターに下書きを共有する
• 主要な流れが安定したらカスタムドメインを接続する

ソースコードはいつでもZIPでエクスポートでき、GitHubにもプッシュできるので、プロジェクトをずっと1か所に閉じ込めておく必要はありません。

初期の問題の多くは、最初から盛り込みすぎるか、ユーザーフローを飛ばしてしまうことから起こります。

よくある失敗:

• "コースプラットフォームを作って" のように、ページや操作がない曖昧な最初のプロンプトを書く
• 実際に何に課金するのかを決める前に決済を追加する
• 1版目でユーザー権限を増やしすぎる
• 主な行動喚起がデザインの細部に埋もれてしまう
• 保護ページのログアウト状態の体験を忘れる
• ダッシュボードを、学習を続ける場所ではなく一般的な管理画面として扱う
• レッスンページとチェックアウトのモバイル確認を省略する

よりよい進め方は、まず1つのエンドツーエンドの流れを動かすことです。

• 訪問者がホームページに到達する
• 訪問者が料金や提供内容を見る
• 訪問者が登録またはチェックアウトする
• 会員がダッシュボードに進む
• 会員がレッスンを開く

この経路が明確に機能していれば、その時点でサイトはすでに役立ちます。残りは、後のプロンプトとバージョン履歴で改善していけます。