デザイナーがAIだけでサービスを作ってみた話

Transcript

1. デザイナーがAIだけでサービスを 作ってみた話 黒葛原 道（つづらはら・とおる） Purr ひなたい LT 会 #2 2026-09-11
2. 黒葛原 道（つづらはら・とおる） Purr Webデザインを軸に、ディレクションやプランニング、撮影 などを手がける。ECサイト『quote』の立ち上げ、運営を通 して、実際に「売る」ことを経験してるのが強み。 著書『ネットショップ初心者でも売れる商品写真の基礎知識 とつくり方』（玄光社） Adobe Community Expert Adobe Japan Prerelease Advisor Figma Community Leader @armytoru
3. 趣味は… 写真 Photoshop 物理学 AI
4. デザイナーがAIだけでサービスを作ってみた話 何を作った？
5. イベントプラットフォームサービス https://illmo.jp
6. Contents 1 なぜ作ったの？ 2 数字で見るillmo 3 どう作った？ 4 こだわった点 5 まとめ
7. 1 なぜ作ったの？ 欲しかったから
8. 1 なぜ作ったの？ 自分のコミュニティ用にConnpass的なものが欲しかった 既存サービスへの不満（機能・デザイン・手数料） AIで本当にサービス一式が作れるのか、試したかった
9. 2 数字で見るillmo 7/12 8/24 8/28 着手（設計ドキュメントの初コミット） 一般公開（43日目） 有料イベント開放（Stripe Connect） 466 48,000 行 24 本 コミット TypeScript / 230 ファイル DB マイグレーション 4,300 行 第 151 版 0行 設計ドキュメント（Markdown） タスク台帳 人間が書いたコード
10. 3 どう作った？ Claude（Fable）をオーケストレーターにし、 実装はCodex（Sol, Luna） Claude Code（Fable）= 指揮とレビュー Codex（GPT-5.6）= 実装 タスク切り出し・難易度判定・レビュー・台帳更新 通常は luna（max）/ 高難度は sol（Max）へ自動エスカレーション 発注者（私・デザイナー）は要件・判断・受け入れ確認をする
11. 3 どう作った？ アプリ 実行基盤 DB 認証 メール 決済 開発 技術スタック Next.js（App Router）+ TypeScript / Tailwind / TipTap / dnd-kit Cloudflare Workers（OpenNext）/ Cron Triggers + Queues / R2 + Images / Hyperdrive PostgreSQL（Neon）+ Drizzle Better Auth（Google / GitHub / マジックリンク） Resend + React Email（送信）/ Cloudflare Email Routing（受信） Stripe Connect（Direct charge・当日現金との混在可） Claude Code（Fable）+ Codex CLI / GitHub Actions で staging 自動・本番は手動
12. 3 どう作った？ 私がやったこと（？） 「やらないことリスト」でスコープを守った AIに余白を与えると勝手に作る。 何を作らないかは、人間しか決められない。 いきなり作らせず、要望は台帳に積んで寝かせる。着手順は私が決める。 普段のワイヤーフレームと仕様メモが、そのままAIへの最良の指示になった。
13. 4 こだわった点 とにかく自分のペインポイントを潰す
14. 4 こだわった点 装飾等に極力html/cssを使わないように 用意されたフィールドである程度完結させる とにかく楽に 手数料を安くする
15. まとめ 欲しかったものは自分で作れる時代 コードは0行。書いたのは設計書と判断 AIは1体より組織。書くAIと見るAIを分ける 「やらない」を決めるのが人間の仕事
16. イベントプラットフォームサービス https://illmo.jp 参加者としては、今日から使えます。 イベント作成はいまは招待制。 使ってみたい主催者の方は、声をかけてください。 ありがとうございました