🎪

地域・趣味イベント掲示板

告知から参加申込まで、自分だけのイベント広場を作ろう

Webアプリ・サイト 中級 ⏱ 目安 3〜5日

どんなもの?

誰でもイベントを投稿・閲覧・申込できるコミュニティ掲示板。開催日時・場所・定員・参加費をカード形式で一覧表示し、参加ボタンを押すと申込者リストに追加される。AIが投稿文を自動で整形・タグ付けしてくれるため、告知文を書くのが苦手な主催者でも見栄えのいいイベントページをすぐ作れる。主催者ダッシュボードで参加者管理・リマインドメール送信まで完結するため、外部ツールをいくつも使い分ける手間がなくなる。

こんな人におすすめ

地域活動・趣味サークル・勉強会主催者で集客を自力でやりたい人

🎯 完成すると手に入るもの

イベントの作成・公開・参加申込・参加者管理がワンサイトで完結するWebアプリ。自分のサークルや地域活動専用URLを持て、申込者への自動リマインドも動く状態で手に入る。そのまま知人のイベント運営代行サービスとして提供することも可能。

おすすめの技術スタック

v0でイベントカード・申込フォームのUIを素早くプロトタイプし、Vercelでそのまま公開。Supabaseでイベントデータと参加者リストをリアルタイム管理、n8nでリマインドメールやSlack通知を自動化する構成にすることで、バックエンドコードをほぼ書かずに動くサービスが完成する。

費用の目安

✓ 完全無料で始められます

完全無料で作って公開できます。使用する各サービスの無料枠は、個人利用や小規模には十分です。

項目費用補足
v0無料枠あり
Vercel無料枠あり
Supabase無料枠あり
n8n無料(自己ホスト)/有料クラウド
GitHub無料

必要なアカウント

開発を始める前に、下のサービスの無料アカウントを用意しておきましょう。

v0 必須 無料枠あり

指示するとWebの画面(UI)を生成してくれるツール。

登録ページを開く →
Vercel 必須 無料枠あり

作ったアプリをインターネットに公開する場所。

登録ページを開く →
Supabase 必須 無料枠あり

データの保存とログイン機能をまとめて提供。アプリの裏側を担います。

登録ページを開く →
n8n 必須 無料(自己ホスト)/有料クラウド

コードなしで自動化ワークフローを組めるツール。

登録ページを開く →
GitHub 必須 無料

コードを保存し、公開先へ自動連携するための土台。開発の必需品です。

登録ページを開く →

必要なAPIキー・設定

APIキーとは、外部のサービスを自分のアプリから使うための「合鍵」です。下記を取得・設定します。

Supabase URL と APIキー 取得先: Supabaseプロジェクトの設定画面 アプリからデータベースに接続するための情報。プロジェクト作成時に自動発行されます。

作り方: まずこのプロンプトをClaudeに送る

細かい手順を覚える必要はありません。下のプロンプトをコピーして、Claude(やCursorのAIチャット)にそのまま貼り付けてください。 あとはClaudeが1ステップずつ伴走してくれます。詰まったら、エラー文や状況をそのまま伝えれば解決に導いてくれます。

📋 最初に送るプロンプト
あなたはプログラミング初心者の私に、地域・趣味イベント掲示板の作り方を最初から最後まで伴走してくれるメンターです。以下の前提と要望をふまえて、私が迷わないように「一度に1ステップずつ」教えてください。 【私の状況】 - プログラミングはほぼ未経験です。専門用語は都度かんたんに説明してください。 - パソコンはWindows(またはMac)を使っています。※実際のOSに置き換えて伝えてください - AIエディタ「Cursor」をインストール済みです。 - 必要な無料アカウント(このページに記載のもの)は作成済みです。 【作りたいもの】 - イベントを一覧表示するトップページ(カード形式・カテゴリフィルタ付き)を作りたい - 主催者がログインしてイベントを投稿・編集・削除できる管理画面が欲しい - 参加ボタンを押すと定員チェック後に申込者リストへ自動登録されるようにしたい - AIが入力したイベント概要を読みやすい告知文に整形してくれる機能を付けたい - 申込者に開催前日に自動でリマインドメールが届く仕組みを作りたい - 主催者ダッシュボードで参加者の名前・連絡先をCSVでダウンロードできるようにしたい 【進め方のお願い】 1. まず全体像(何をどの順でやるか)を、専門用語なしで箇条書きで教えてください。 2. そのあと、最初のステップだけを具体的に指示してください。私が「できた」と言ったら次へ進んでください。 3. 各ステップでは、私が実行するコマンドや操作を省略せずに書き、それが「何のための作業か」も一言添えてください。 4. エラーが出たら私がその文面を貼るので、原因と対処をやさしく説明してください。 5. データベースやログインを扱う場合は、セキュリティ(他人にデータが見えない設定)も忘れずに教えてください。 6. 途中で必要なファイルの中身は、コピーして貼れる完全な形で提示してください。 まずは【1】の全体像から教えてください。

※ 【私の状況】の部分(OSや、まだ登録していないアカウント)は、あなたの環境に合わせて書き換えてから送ると精度が上がります。

つまずきやすいポイント

収益化のヒント

有料イベント掲載プランをVercelの有料ティアで安定運用しつつ、Stripeで掲載料を回収する構成に拡張できる

関連する作りたいもの

← 他の「作りたいもの」を見る