【個人開発】VALORANTでマッチした相手のレビューをするサービスを爆速で作った

# はじめに

はじめまして！

私は普段エンジニアとして仕事をしながら、趣味で個人開発者をしています。私にとってプログラミングはただの道具でしかなく、プロダクトを形にするための**手段の一つ**でした。このように思う人は私以外にも多くいると思い、今回はそんな皆さまのために、AIを活用して**webサービスを6時間でリリース**した話を書こうと思います！

# 今回作ったもの

![](https://storage.googleapis.com/zenn-user-upload/37e1de1703e9-20241027.png)


自分は趣味で VALORANT というゲームをやるのですが、このゲームのプレイヤーのマナーがとにかく酷い事が多く、自分が出会った害を為すプレイヤーを共有して被害者を増やさない仕組みを作りたいと思い、今回「**Reviewant**」という名前でβ版としてリリースをしました！

https://x.com/valoer_reviews/status/1850294971825582311

## 実際の画面

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925653/d2f3a53f-6619-e070-85d9-037bbfa572df.png)

https://www.reviewant.games/ からアクセス可能です！
現在βテスト中で不具合が多いですが、もし報告事項などございましたらお手数ですがご報告いただけますと幸いです。

![](https://storage.googleapis.com/zenn-user-upload/7e9777491e6b-20241023.png)
トップページには実際にレビューされた**プレイヤーとレビューの一覧**が表示されています。

![](https://storage.googleapis.com/zenn-user-upload/e0addd3f4eb0-20241023.png)
こちらはレビュー投稿画面で、RIOT IDとタグを入力して**特定の人をレビュー**することができます。対象プレイヤーがまだレビューを書かれていなければレビューと共にプレイヤーが新規に登録され、すでにレビューされているプレイヤーの場合はレビューのみ追加される実装となっています。また、ユーザーは自分のユーザー名か匿名か選択した上で投稿することも可能です。

![](https://storage.googleapis.com/zenn-user-upload/ba3242361945-20241023.png)
また、それぞれのプレイヤーごとの**レビュー一覧**の画面も作成しました。ユーザーごとにレビューの平均評価も表示するようになっています。

![](https://storage.googleapis.com/zenn-user-upload/d6358cc93aba-20241023.png)
こちらはログイン画面で、Supabase を利用して実装されています。

![](https://storage.googleapis.com/zenn-user-upload/d141c1c136b8-20241023.png)
こちらはサインアップ画面で、メールアドレス / ユーザー名 / パスワードで登録が可能です。

## コンセプト

X にも投稿していますが、以下のようなコンセプトで実装しています。

![](https://storage.googleapis.com/zenn-user-upload/1a3b212b2309-20241023.png)

![](https://storage.googleapis.com/zenn-user-upload/e606f00f5ddc-20241023.png)

![](https://storage.googleapis.com/zenn-user-upload/c5d57fb6f9f9-20241023.png)

# AIで爆速リリース

AIの登場により、開発スピードはこれまでの常識を大きく超えました。かつては数週間、数カ月かかったプロダクトのリリースも、**数時間で実現**できるようになっています。この変化の背景には、AIによる自動化と迅速な開発フローの普及があり、個人開発でも企業に匹敵するスピードで成果を出すことが可能になりました。

## 個人開発のAI革命に乗り遅れるな

「AIを使えば、アイデアを即プロダクトにできる時代が来ています」。しかし、今もなお **「自分でコードを書くこと」にこだわっている人は多い** のではないでしょうか。もちろん、プログラミングの基礎は大切ですが、個人開発における勝負のスピードは圧倒的に変化しました。AIを使いこなさないと、あっという間に開発の波に置いていかれてしまいます。

もう「勉強が足りないから手が出せない」と言っている暇はありません。AIは学習が必要な高度な技術ではなく、すぐに使い始められるツールです。必要なのは「完璧なプロジェクトを目指す」ことではなく、「**まず作って公開する**」というスピード感と行動力です。

これからの個人開発者にとって、AIはもはや特別な存在ではなく、電卓やIDEのような当たり前の道具です。この革命的な変化に素早く対応し、**プロダクトをどんどんリリースする人が勝者**となる時代がやってきています。あなたはその波に乗れていますか？それとも、まだ準備ができていませんか？

AIによって、**コードを書くだけの価値は急速に薄れています**。これから求められるのは、AIと協力し、短期間で価値を生むプロダクトを作り上げる力です。さあ、もう迷う時間はありません。今すぐAIを使って、あなたのアイデアを世に送り出しましょう。

## まだ自分でコード書いてるの？

「まさか、まだ一行ずつコードを書いているのですか？」
もしそうなら、その作業はもう時代遅れかもしれません。AIが進化した今、自分の手でコードを書くことがメインの作業である必要はなくなりました。もちろん、プログラミング自体が無価値になったわけではありません。しかし、**AIを活用することで劇的に効率化できる時代**に、ひたすらコードを書き続けるのは、タイムマシンに乗って石器時代に戻るようなものです。

今もまだ「コードを書くことが楽しい」「自分の手で作りたい」という気持ちは理解できます。ですが、そのこだわりが原因で機会損失していませんか？ 大事なのは、**いかに早くアウトプットを出し、ユーザーの反応を得て、改善を重ねるか**です。手動でコードを書くことが全体のプロセスを遅らせるなら、そこに価値はありません。

# サービス構成

## 使ったサービス

- GPT-4o
- Next.js
- Tailwind
- Supabase
- Vercel

## 全体構成図や画面遷移図 

構成はなるべくシンプルに、バックエンドに時間を掛けないよう Supabase と Vercel を活用しました。

![](https://storage.googleapis.com/zenn-user-upload/78ce3e60247f-20241023.png)

![](https://storage.googleapis.com/zenn-user-upload/70f5e80dad67-20241023.png)

# ChatGPTとの対話

AIとの対話は、これまでの開発手法にない新しい体験を提供します。単なるツールとして使うだけでなく、**パートナーとして対話しながら開発を進める**ことが鍵です。ChatGPTのような生成AIは、質問への回答だけでなく、アイデアの整理や設計の補助まで幅広くサポートしてくれます。

## 対話のイメージ

以下は実際の ChatGPT との会話のスクリーンショットです。一部抜粋とはなっておりますが、だいたいこのような形でやり取りをしていました。

![](https://storage.googleapis.com/zenn-user-upload/d58b45fbbbcc-20241023.png)

![](https://storage.googleapis.com/zenn-user-upload/87f00c5a7808-20241023.png)

![](https://storage.googleapis.com/zenn-user-upload/5b19eff5f36b-20241023.png)

![](https://storage.googleapis.com/zenn-user-upload/5ef87129d073-20241023.png)

![](https://storage.googleapis.com/zenn-user-upload/2dc1929da308-20241023.png)

## プロンプトの例

以下にて、自分から入力したプロンプトをすべて置いておきますので、もしなにかの参考になればと思います。(AIの回答や自分が貼り付けたソースコードは流石に記載しきれないので割愛しています)

https://docs.google.com/document/d/1La_8OEPqNZa8W8lPvSCvS1Ui7lRFzgBql4-PocvrUHs/edit?usp=sharing

## AIの気持ちを考える

「AIはただのプログラムだから、気持ちなんてない」と思いがちですが、AIとの対話がうまくいくかどうかは、こちらの伝え方次第です。人とのコミュニケーションと同様に、AIにも **「適切な指示」や「思いやりある対話」** が求められます。曖昧な指示や指図的なプロンプトだと、AIから期待通りの回答が返ってこないことが多くあります。例えば、以下のようなケースでは結果が大きく変わります。

```
悪い例：
「ログイン画面を作って」
良い例：
「ユーザーがメールアドレスとパスワードでログインできる画面を作ってください。未入力項目がある場合はエラーを表示し、再入力を促してください。」
```

丁寧で具体的な指示を出すことが、AIから質の高いアウトプットを引き出すポイントです。気持ちを持つ相手だと思って対応することで、あなた自身の指示の質が自然と上がります。

また、AIは完璧ではなく、時に不十分な回答や誤解を生むこともあります。そんなときはイライラするのではなく、「何が必要なのかをもう一度伝える」姿勢が大切です。気持ちの面では **「一緒にものを作っている」という意識** で接することで、AIとの連携も円滑になります。さらに、AIが出してくるアイデアや提案には、時に新しい発見が含まれています。これを「自分の方が正しい」と決めつけるのではなく、AIの提案を学びの機会と捉えることが、成長につながります。**良いチームメイトと協力するように、AIを対等なパートナーとして尊重**しましょう。

AIは感情を持たなくても、**コミュニケーションは双方向で文脈を理解**します。あなたがAIにどう接するかで、AIから返ってくるものも変わります。「AIの気持ちを考える」という意識を持てば、プロジェクトがスムーズに進み、より創造的で満足のいく成果が得られるでしょう。

## AIを使った爆速リリースのコツ

AIを活用することで、プロダクトの開発・リリースまでの時間を飛躍的に短縮できます。ただし、AIを使いこなすためには、いくつかのコツを押さえておくことが重要です。ここでは、AIを使った「爆速リリース」を成功させるためのポイントをご紹介します。

### 1. 目的を明確にする

AIに何をさせたいのか、ゴールを具体的に伝えられなければ、正しい結果は得られません。
「なんとなく作りたい」ではなく、機能要件やプロダクトの**最終イメージをしっかり固めましょう**。

### 2. プロンプト力が命

AIのアウトプットは入力に依存します。適切なプロンプトを使うことで、求める成果が早く、的確に得られます。
**具体的な指示や例を盛り込む**ことで、無駄な試行錯誤を省きましょう。プロンプトを磨くことは、これからのエンジニアリングにおいて重要なスキルです。

### 3. とりあえず出す勇気

AIはスピードの強みがありますが、完璧を目指すといつまでも公開できません。「ベータ版でもいいから一度出してみる」姿勢が成功の鍵です。
**小さく早くリリース**し、ユーザーの反応を得ながら改善することが、結果的に高品質なプロダクトを生み出します。

### 4. 手作業はAIに任せる

UIの実装、ドキュメントの生成、API接続の設定など、繰り返し作業はすべてAIにやらせましょう。自分の時間をもっと**クリエイティブな仕事に割く**ことで、プロジェクト全体が効率化されます。

### 5. 自動化を徹底する

開発からデプロイまでのプロセスは、可能な限り自動化します。
例えば、ChatGPTでコード生成 → GitHubにプッシュ → CI/CDで自動デプロイのように一連の流れを組み上げれば、ミスのないスムーズなリリースが可能になります。

AIを活用することで、もはや **「作る時間」ではなく「リリースする速度」** が競争力の鍵となっています。AIの力をうまく引き出し、素早く市場にプロダクトを投入することが成功への近道です。今日からあなたも、AIを使った爆速リリースを始めましょう。行動の速さこそが、これからのエンジニアの価値です。

# まとめ

今回は ChatGPT を使った開発ではありましたが、最近だと v0 や bolt.new、Cursor エディタなんかもありますので、本記事のやり方よりも更に効率よくプロダクトが実装出来るようになっているのではないかと思います。

また、これはあくまで個人開発者目線として記載をしたもので、ビジネスの場面での商用アプリケーションや基幹システムの開発などは視野には入れておりませんので、ご了承下さい。ただ、本記事に書いた内容を通して**AIとの共存イメージ**が出来て、少しでもあなたの能力のブーストにAIを活用出来ましたら私としては本望でございます。

もしよろしければ今回作ったものについて、アカウントのフォローと固定ポストの拡散のほどお願いいたします！🙌

https://x.com/valoer_reviews/status/1850294971825582311

それでは、良いAIライフを！