先日、「AIを説得せよ」というGPTアプリをリリースしました🎉🎉
※7/21までの限定公開です。よかったら遊んでみてください！
※ありがたいことにたくさんアクセスいただいており、GPTの予算をオーバーしそうなので、早めに閉じるかも…
プロンプトを考えること以外（企画、Web開発、デザイン、クリエイティブ作成など）はほぼ自分一人でやってみました。
リリース作業など含め、全工程の工数は12時間。
クイックな開発の舞台裏を公開します！
ネタ作り、プロンプト作成
- 会社のSlackで、社長が「ChatGPTを説得するゲームを作ってみた」と投稿
- 「これ、Webアプリでできたら面白いね」という話になり、カジュアルに作ってみることに
- プロンプトは社長に考えてもらいつつ、他は全部自分で開発することにした
MVP開発（1.5時間）
- とりあえず「botと話せること」という最低限の要件でのリリースを目指す
- Webフレームワーク: Next.jsで開発。API Routesを使うことで簡単にバックエンドも作れる
- UIライブラリ: 使い慣れたAnt DesignとTailwind CSS
- GPT周り: openaiを使う
- バリデーション: Zodでリクエストとレスポンスを検証。型安全な開発
- セキュリティ: 悪意あるユーザー対策も簡単にしておく。rate limitなど（詳細は省略）
- 本番環境: Next.jsアプリだしVercelを使ってみる。リポジトリ選択するだけで本番環境構築は終わり。楽。
最低限のMVP実装がここまでで完了👏👏
社内からFBをもらう
社内向けにβリリースして、感想を集めます。
概ね楽しんでもらえたものの、以下のFBをもらいました。
- 回答が返ってくるまでの読み込みが長い
- 説得できたかどうか判断しづらい
- ただ会話するだけなので、ゲーム感が薄い
もともと「低工数で作ってリリースする！」というコンセプトでしたが、
せっかくなので可能な範囲でFBに対応してリリースすることにします。
Server-Sent Eventsに対応する（2時間）
本家ChatGPTでリアルタイムで回答が表示される体験は、Server-Sent Eventsという技術を使ったものになります。詳しくはこちら。
SSEを使って、回答のUXを上げてみましょう。
Next.jsでの実装の場合、先人の知恵をコピペするだけでだいたい動きました。感謝。
…が、どうやらVercelへリリースする場合、SSEの実装が上手く動かないようです。
Edge Functionを使うと上手くいくという記事も見かけましたが、手元で軽く動作検証したところ、上手くいきませんでした。
今回は特にVercelにこだわる必要性もありません。
普通にWebサーバーを立てることにして、慣れ親しんだRenderにリリースします。Renderはやっぱり最高。
SSEという初めての技術を使ったり、Vercelでどうにか頑張ろうとして時間を食ってしまいました。
まあ初めての技術を使うときはこれくらい時間がかかるのは仕方ないと割り切ります。
訴求用画像を作る（1時間）
今回のアプリは、リリース後にTwitterで宣伝する予定です。
簡単なもので良いので、リリース用の画像があるとグッとそれらしくなります。また、ここでアプリの世界観を固めておくと、この後UIデザインをするのも捗ります。
ということで、簡単なキャッチ画像を作ってみましょう。
- ムードボードの作成
- Pinterestで「挑戦状 バナー」とかで検索するなどして、イメージに近い既存画像を集め、デザインの方向性を固める。
- 今回は実際にボードの作成はしていないのですが、真面目にデザインをするときは実際に作ったりします
- メイン画像を画像素材から探す
- Adobe StockやShutterstockがおすすめ
- メインの一枚絵でクオリティが高いやつを配置すれば、それだけでなんとなく良いデザインになる
- 訴求テキストを考える
- というか全体の企画を詰める
-
AI ChallengeAIを説得せよなどのコンセプトを固める - 「Amazonギフト券プレゼント！」とかあった方が、よりイベント感が出て良いので予算もらう
- Figmaで適当に組み合わせて終わり
- 高度なデザインスキルはデザイナーさんのものだけど、組み合わせて配置するくらいの力はエンジニアも持っておくと便利
- ノンデザイナーズ・デザインブックを読んでおけばOK
作成したキャッチ画像
デザインレビューを受ける
優しきデザイナーさんがサクッとレビューしてくれて、最終的に以下に仕上げていただきました。
より洗練された印象になりました。感謝………！
UIデザイン（2時間）
UIデザインもまともにしてみます。
そんなに気合をいれるつもりもないのですが、最低限として以下を行います。
- チャット部分をよく見るデザインにする
- 入力フォームにシャドウを効かせてオシャレに
- シンプルすぎるのを避けるためにヘッダーをつけてロゴを配置
- レスポンシブ対応。スマホ対応
この辺は慣れてる人なら瞬殺だと思います。
自分はフロントエンド開発が苦手なのと、toCアプリの開発に慣れてないので少し時間がかかりました。
仕上げ(5時間)
ここまでで基本機能はできているのですが、ここから細かい機能の仕上げを行なっていきます。
今回の開発工数の半分近くがここに割かれています。やはり細かいブラッシュアップに時間がかかりますね。
ユーザー名入力とイントロダクション(1時間)
ユーザー名入力は必須ではないのですが、ゲームらしさをだすためできれば入力してもらうことにします。
ついでにゲームのルールを説明するモーダルを初期表示することにします。
ここをどんなUIにするか迷って、少し時間がかかりました。
成否判定とターン制限(1.5時間)
現状だとゲーム感が弱いので、以下の仕様をいれます。
- 発言は10回までにする。10回すぎたらゲームオーバー
- AIが説得されたら、ゲームクリア画像を出す
急にロジックが増えてまともなゲームっぽくなってきました。粛々と実装します。
ゲームオーバー、ゲームクリアに関しても、単にテキストを表示するだけでなく、素材を使うとグッとそれっぽくなります。
今回はゲームの雰囲気に合わせて、アイソメトリック画像を中心に選びました。
Googleフォーム作成(30分)
正解した人向けにAmazonギフト券を送りたいんだけど、メールアドレスの収集どうしようか…？
と少し迷って、素直にGoogleフォームを表示することにしました。
ついでに感想を聞く項目もつけておきます。
自動スクロール、スマホ対応、微調整（1時間）
AIからのリプライに合わせて、自動でスクロールさせます。これをやらないと、画面外にテキストが生成されてしまいます。
また、スマホでバーチャルキーボードが出てきた時の表示が微妙なのを改善しようとしましたが断念。
完成
ということで、合計12時間で完成！
なかなかいい感じになったのではないでしょうか。
反省
- VercelがAI Chatbotのテンプレートを用意しているのに開発完了してから気づいた…。これ使えばもっと楽できたか
- プロンプトを仕上げるのが難しすぎる（長くなるので、この話はまた別で…）
- 企画にもっと時間を割きたかったな…と思うところ多数
おわりに
今回のミニゲームは半分お遊びですが、実はSALESCOREではメインのプロダクト開発でもLLMの利用が始まっています。
LLMを使ったサービス開発に興味のある開発者さん、お気軽にお声がけください！
Discussion