実装方法が浮かばない状態からのVibe Coding

実装方法が浮かばない状態からの Vibe Coding めぐろLT #29 Vibe Codingで作ったものをおしえてください © MOSH Inc.

山本 一将｜焚き火を愛するエンジニア MOSH株式会社 エンジニア 略歴 鉄道システム開発、SNSマーケティングツール「Beluga」シリーズ開発（ユニークビ ジョン株式会社）を経て、2025年よりMOSH株式会社に参画 実績 2015年 世界コンピュータ将棋選手権９位 2024年 LINE API Expert 認定 kyamamoto9120 趣味 ヤクルトスワローズ、将棋、キャンプ、DQウォーク、旅行、謎解きなど 今年のヤクルトはちょっと厳しいですね。。。 © MOSH Inc.

MOSHのミッション 一人の情熱が育まれ、だれかに伝播し、また新しい情熱が生まれる。 そんなふうに「情熱がめぐる」世界をつくることが私たちのミッションです。 © MOSH Inc.

MOSHのプロダクト MOSHは専門性を持った個人・クリエイター向けのサービス販売＆経営拡大プラットフォームです。 オールインワンプロダクトとしてクリエイターの事業拡大を支援します。 © MOSH Inc.

過去作ったもの © MOSH Inc.

１ファイル & Webコンソール限定な PaaS © MOSH Inc.

新人研修用の SQL オンラインジャッジシステム © MOSH Inc.

実装方法のイメージは 事前に出来ていた © MOSH Inc.

今回作ったもの © MOSH Inc.

SnapCrop - 画面キャプチャから切り抜きまでブラウザで完結 https://snapcrop.y-kaz.com/ © MOSH Inc.

• https://snapcrop.y-kaz.com/

どうやって作るんだ …?? © MOSH Inc.

開発プロセスと意識したこと © MOSH Inc.

❶ Gemini で要件定義 壁打ちは Gemini が一番優秀だと思ってます！ Deep Research で実現可能性を調査 → 仕様のブラッシュアップ という流れで仕様から実装方法まで明確に！ © MOSH Inc.

❷ 叩き台を Claude Opus4 で開発 いきなり Claude Code では開発しません。 まずはベースラインとして、 最低限の機能と操作性を持った単一の HTML を作成します。 © MOSH Inc.

❸ Claude Code で本格的に開発 ベースラインの HTML を git で管理して、 Claude Code で機能追加していきます。 常に動く状態を維持することを意識 して、 こまめにコミット します！ © MOSH Inc.

Vibe Coding で意識すること ❶ 開発前に仕様をちゃんと言語化し、ゴールを明確にすること ❷ 開発する順序はこちらが制御して、スムーズな進行を計画 ❸ インフラはこちらが準備をして、AI はコードに専念してもらう ❹ 欲しいと思うものを作って、自分自身も楽しむこと！ © MOSH Inc.

さいごに © MOSH Inc.

MOSH Tech Radio #10 が公開されました！ © MOSH Inc.

ありがとうございました！ 質問など、なんでもお答えします！ 懇親会や X でお声がけください〜 エンジニア採用もやってます 🔗 https://careers.mosh.jp/ © MOSH Inc.

• https://careers.mosh.jp/