こんにちは、札幌のスペシャルティコーヒー店「Salvador Coffee」の店主です。
今回は、私が初めてAIコーディングを使って世に出した作品について書きたいと思います。
当時ChatGPTとの壁打ちで要件定義からコード生成まで行い、Googleサイトを使って爆速でリリースした「コーヒー診断アプリ」です。
簡単な作りですが、PMFバッチリで、今も第一線で大活躍しているアプリです。
☕ 作ったもの
5個の質問ですぐわかる！あなたが本当に好きなコーヒー診断！
https://sites.google.com/view/salvacoffeeshindan
コンセプト
「お店でお客さんに接客する時と同じフローをWebで再現する」
🚀 プロジェクト概要
初めてのお店でコーヒー豆を選ぶとき、「種類が多すぎて何を選べばいいかわからない」という経験はありませんか？
店頭であれば、スタッフがお客様の好みをヒアリングして最適な豆を提案できますが、ECサイトではそれが難しいので、初回購入のハードルが高いことが長年課題でした。
そこで、「初回購入のハードルを圧倒的に下げる」 ことを目的に、まるで店員さんと会話しているような感覚で、自分に合ったコーヒーが見つかる診断アプリを開発しました。
しかも、たった5秒で診断が終わり、結果も正確という圧倒的UXです。
今回の診断アプリで最もこだわったのは、「とにかく診断完了までスピードが早いこと」 です。
一般的な診断コンテンツによくある「アカウント登録」「かっこいいUI」「性別」や「年代」といった要素は、ユーザーにとっては時間的なリソースを奪われるだけで、初回購入のハードルを下げることに貢献しません。とにかく早く、お得に、納得感を持たせる必要がありました。
その結果、わずか5秒で診断が終わるという、圧倒的なUXを実現することができました。
🛠️ システムの解説
システム自体は非常にシンプルです。 ユーザーは最大4〜5個の質問に答えていくだけ。裏側では回答に応じて分岐ロジックが走り、最終的に5つのタイプから最適なものを判定します。
診断ロジック（要件定義より抜粋）
実際のお店での接客トークをフローチャートに落とし込みました。
好みの濃さ（濃いめ or さっぱりめ）
基準のすり合わせ（スタバは濃いと思う？）
好みの傾向（シングルオリジン or ブレンド）
酸味の是非
これらを組み合わせることで、「コーヒーらしさを求めるタイプ」や「フルーティなコーヒーが好きなタイプ」など、ユーザーの好みを分類しています。
クーポンコードのコピー機能
診断結果ページには、ユーザーがすぐに購入できるようにクーポンコードをコピーするボタンを設置しました。 これもChatGPTに「ボタンを押したらクリップボードにコピーしたい」と伝えて生成してもらったコードです。
javascript
// クーポンコードをクリップボードにコピーする処理
navigator.clipboard.writeText("クーポンコード").then(() => {
alert("クーポンコードをコピーしました！");
});
こういった細かいUXも、自然言語でお願いするだけで実装できました。
💻 技術スタックと実装環境
このアプリを作った当時、実は私はGithubもエディタ（VS Codeなど）も知らず、触ったことがない状態でした。 そんな私がどうやってこのアプリを作ったのか？
技術スタック
HTML / CSS / JavaScript (Vanilla JS)
フレームワークなし、ライブラリなしのピュアな構成です。
styleタグもscriptタグも、全て1つのHTMLファイルにまとめて記述しています（シングルファイル）。
開発環境・ツール
ChatGPT: 要件定義の壁打ちから、実際のコード生成までフル活用。
「お店の接客フローを再現したい」という要望を伝え、ロジックを一緒に整理しました。
Claude: 要件定義をもとにコーディングしてもらいました。当時、ポン出しで出てくるページのデザインがChatGPTよりも優れていました。
Google Sites: ホスティング環境として利用。
「埋め込みコード」機能を使って、ChatGPTが書いたHTMLコードをペーストしただけです。
サーバー契約もドメイン設定も不要で、公開まで最短で進められました。
実装の裏話
今回、要件定義では「性別・年代」が設定されていましたが、ChatGPTと対話する中で「ユーザーにとって本当に必要な質問は何か？」を深掘りして削ぎ落とすことにしました。
プログラミングの知識がなくても、「どんな体験をユーザーに届けたいか」 という熱量と、AIという強力なパートナーがいれば、ここまで形にできることを実感し、AIコーディングの凄さに感動した瞬間でした。
📢 実際に診断してみませんか？
ここまで読んでいただきありがとうございます！
もしよろしければ、実際に診断を試してみてください。
本当に、びっくりするほど一瞬で終わります。
そして診断結果は針に糸を通すごとく正確です。
☕ コーヒー診断を試してみよう！
https://sites.google.com/view/salvacoffeeshindan
あなたにぴったりのコーヒーが見つかるかもしれません！
もし診断結果が気に入ったら、ぜひシェアしてもらえると嬉しいです。
🚀 お決まりですが、、、
今回の実装が、どの程度のインプレッションを生むのか？
もっと色々マーケティングとしてやれることはないのか？
運用しながら、答えを見つけていければなと思います。
特に今はShopifyのUCPはゲームチェンジャーとなる爆弾です。自社ECとAIの横連携を実装していくことは、我々事業者にとって必須事項となっていくでしょう。
さて、、、
現在わたしは札幌でコーヒーショップを8年ほど経営しています。
趣味でAIコーディングによる個人開発を行っていますが、今後はどこかで実務経験を積んでフリーランスエンジニアとして、兼業ではありますが活躍したいと考えています。
店を持っているため、未経験SESとしてフルコミットで現場に入ることができず、「実務経験」というニワトリタマゴな問題に、ぶち当たっているところです。
現在のステータス: 独学でPython/TypeScript/React/Pixi.jsなど開発中。
探している環境:
モダンな技術スタック（TypeScript/React/Next.js/Goなど）に触れられる
未経験者のAIコーディング活用に理解がある
兼業・副業からでも実務経験を積める
もし、「一緒に働いてみないか？」と興味を持っていただける企業様やチームがいらっしゃれば、ぜひお声がけいただけると嬉しいです！
ここまで読んでいただきありがとうございました！
記事にいいねをいただけると励みになります！☕️