【Claude】ClaudeでLPを爆速作成!GemShareのランディングページを公開しました

概要
AIを活用した個人開発を進める中で、「まずは需要を検証しよう」と考え、Gemini Gemsを共有できるサービス GemShare のLP(ランディングページ)を作成しました。
公開したLPはこちらです。
今回は、実際にClaudeへどのようなプロンプトを渡し、LPを作成したのかを紹介します。
なぜLPから作ったのか
アプリを作るには時間がかかります。
しかし、作ってから
「誰も使わなかった」
となるのは避けたいと思いました。
そこで今回は、
- LPを公開
- ウェイティングリストを設置
- SNSで集客
- 需要を検証
という流れで進めることにしました。
作ろうとしているサービス
サービス名は GemShare です。
コンセプトは
Gemを投稿・共有できるサービス
Google Geminiの Gems を、
- 投稿
- 検索
- お気に入り
- コピー
- 評価
できるコミュニティを目指しています。
Claudeに要件定義をそのまま渡した
まずはChatGPTでサービスの要件定義を作成しました。
内容は、
- コンセプト
- MVP
- 投稿機能
- ランキング
- コメント
- AIレビュー
- 技術構成
- 収益化
などです。
例えばMVPでは、
- Gem投稿
- 一覧表示
- 詳細画面
- コピー機能
- 検索
- カテゴリ
- タグ
- お気に入り
を実装予定です。
Claudeへのプロンプト
Claudeにはかなりシンプルにお願いしました。
プロンプト
開発するアプリのLPを作成したい 画像と要件定義を元にLPを作成して
サービス概要
サービス名
GemShare
コンセプト
「世界中のGemを見つけて、共有して、コピーできるサービス」
ユーザーは
Gemのプロンプト
使い方
活用例
を投稿できる。
他のユーザーは
検索
保存
お気に入り
コピー
できる。
MVP(最初のリリース)
必須機能
① Gem投稿
入力
タイトル
説明
カテゴリ
Gemプロンプト
使い方
画像(任意)
投稿
↓
一覧へ表示
② 一覧表示
カード形式
SEO記事を書くGem
★★★★☆
コピー数 523
お気に入り 120
カテゴリ
③ 詳細画面
タイトル
説明
プロンプト
使用例
コピーする
お気に入り
コメント
④ コピー機能
コピー
押すだけ
navigator.clipboard.writeText()
⑤ 検索
検索
SEO
動画
プログラミング
英語
マーケティング
⑥ カテゴリ
開発
ライティング
画像生成
勉強
仕事
YouTube
SNS
営業
マーケティング
翻訳
⑦ タグ
#Gemini
#SEO
#ブログ
#Python
#React
#Claude
⑧ お気に入り
保存
⑨ コピー数
人気ランキング
コピー数
今日
今週
今月
ログイン
Googleログインのみ
Google OAuth
投稿データ
title
description
prompt
category
tags
thumbnail
created_at
updated_at
user_id
コメント
いいGemでした!
仕事で使っています!
ありがとうございます!
評価
★★★★★
トップページ
人気Gem
新着Gem
ランキング
カテゴリー
検索
ランキング
コピー数
お気に入り数
評価
閲覧数
通知
お気に入りされた
コメントされた
ランキング入り
ユーザーページ
プロフィール
投稿一覧
お気に入り一覧
フォロワー
管理画面
管理者のみ
投稿削除
通報確認
ユーザー停止
カテゴリ追加
データベース
users
id
name
icon
email
prompts
id
title
description
prompt
category_id
user_id
views
copies
likes
categories
id
name
tags
id
name
prompt_tags
prompt_id
tag_id
likes
user_id
prompt_id
comments
id
user_id
prompt_id
body
技術構成
Frontend
React
Next.js
TailwindCSS
Backend
Supabase
認証
Google OAuth
Storage
Supabase Storage
将来的な機能
AIレビュー
投稿したGemに対して
改善点
読みやすさ
長さ
不足点
をAIが採点。
AI検索
検索
ブログを書くGem
↓
意味検索
SEOライター
記事生成
ブログ自動化
AIおすすめ
あなたにおすすめ
最近使ったGemから推薦
ワンクリックインポート
Gemプロンプトをコピー
↓
Geminiへ貼り付け
収益化
MVPでは広告を入れず、まずはユーザー獲得を優先するのがおすすめです。利用者が増えてから以下のような収益化を検討できます。
方法 内容
プレミアム会員 非公開コレクション、ブックマーク上限拡大、高度な検索
スポンサー掲載 AIツールや学習サービスの掲載枠
アフィリエイト AI関連サービスや書籍の紹介
API提供 他サービスから人気Gemを取得できるAPI
企業アカウント チーム向け共有・管理機能
要件定義はかなり長かったのですが、Claudeはそのまま理解してLPを生成してくれました。
生成されたLP

Claudeが作成したLPには、
- Hero
- Features
- Screenshots
- Future Features
- CTA
などが含まれていました。
Apple風のデザインで、
- 余白
- アニメーション
- グラデーション
も取り入れられていて、かなり完成度が高かったです。
Vercelへ公開
LPが完成したら、そのままVercelへデプロイしました。
公開URLはこちらです。
デプロイは数分で完了しました。
次にやったこと
LPを公開した後は、
ウェイティングリスト
Tallyを使って、
- メールアドレス
- β版参加
のフォームを埋め込みました。
アクセス解析
現在は
- Vercel Analytics
- Microsoft Clarity
を導入し、
- 何人来たか
- どこで離脱したか
- どれくらい登録されたか
を確認できるようにしています。
今後の予定
まずは需要検証を進めます。
目標は
- LP訪問者 1,000人
- ウェイティングリスト登録 100人
です。
十分な反応が得られたら、
MVPの開発を開始する予定です。
技術構成は
- Next.js
- TailwindCSS
- Supabase
- Google OAuth
を予定しています。
まとめ
今回は、作る前に需要を検証する ことを目的に、GemShareのLPを公開しました。
AIを活用することで、
- 要件定義
- LPデザイン
- コーディング
までを短時間で進めることができました。
今後は実際にユーザーの反応を見ながら、GemShareを開発していきます。
もしGemini Gemsを使っていて、
- 良いGemを探すのが大変
- 自分のGemを共有したい
- 他の人のGemを参考にしたい
という方は、ぜひLPをご覧いただき、フィードバックをいただけるとうれしいです。