新規事業の構想段階では、「アイデアが机上の空論や社内での議論で停滞し、具体的な検証が進まない」という問題によくぶつかります。
「もしかしたら、AIと対話しながら開発を行うバイブコーディングを用いることで、非エンジニアでも具体的な検証を進められるのではないか？」
そんな発想から、Sun*は社内向けのワークショップを企画しました。
Sun*は「誰もが価値創造に夢中になれる世界」の実現をビジョンとしてクライアントの事業支援を行っており、特に新規事業支援において多くの実績があります。
これまでも、一定の事業アイデアに至ればすぐにプロトタイピングを行い、市場や顧客へ当てながら検証・評価することを推奨してきましたが、AIによってさらにそのスピードが上がってきています。
職種を問わずAIを使いこなし、自らの手でプロトタイプを生み出すことができたらどうなるのか。Sun*が取り組むAI活用のリアルを、このイベントレポートを通してお伝えします！
目次
「バイブコーディング」とは？
「バイブコーディング」とは、生成AIに自分の「バイブス（ノリや意図）」を伝えて形にする、直感的な開発体験のことです。プログラミング言語の構文を完璧に覚える必要がないため、コーディング経験の無い非エンジニアでも直感的にアプリやコードを開発することができます。
ワークショップを企画した意図
座学を最小限にし、実際に手を動かす実践形式をコンセプトに取り入れました。
「デモとして見せることができ、サービスイメージもざっくり伝わり、かつ”動くもの”を自ら作成する」ことがゴールです。
Sun*には、メンバーがアイデアを自社新規事業として形にする新規事業起案プログラム「Spark」が存在します。今回のワークショップは、そのSparkに参加している人や、将来参加を希望しているメンバーが主なターゲット。ビジネスデザイナー、デザイナー、プロジェクトマネージャーなど、開発経験がないメンバーが多く参加しました。
講師を務めたのは、2020年にSun*へ入社したエンジニアメンバーの白鳥 雄大。フロントエンド開発を中心に経験を積み、生成AIを用いたプロトタイプ開発に従事しているほか、サービスデザインにおけるTech側の役割も担っています。
アイデアを形にする、ワークショップの3ステップ
ワークショップは、ツールの特性と難易度に応じて以下3つのステップで構成されました。
Step1：Chat GPT Canvasを用いたUI生成
Step2：vercel v0を用いたデプロイを含むUIの開発（フロントエンド実装）
Step3：Cursorを用いたプロトタイプの開発（バックエンドを含む）
それぞれ出されたお題に対して演習を行い、「どのようにAIとやり取りし、ブラッシュアップしていくのか」という実践を体験しました。
講師からの「どのツールでも『指示を出してAIに作らせる』という基本は同じ。自分にあったレベルのツールを見つけてほしい」というアドバイスを皮切りに、各自で取り組みを開始しました。
実際のステップと、アウトプットも見てみましょう。
Step1：Chat GPT Canvasを用いたUI生成
まずはChatGPTを使って、簡単なユーザーインターフェース（UI）を作ります。お題は「お菓子のくじ引きアプリ」。目に見えるプロダクトがすぐに出来上がる体験からスタートします。
「景品のお菓子を決めるくじ引きアプリを作ってください。シャッフルされる5つの袋のうち一つを選択すると、選んだお菓子が表示されます。」
プロンプトを入力すると、AIが即座にReact（TypeScript）ベースのコードを生成。
▲自然な日本語の指示から、AIがコード生成を開始
わずか16秒後には、プレビューボタンから動作するアプリケーションが確認できます。
▲指示通りの機能を持ったアプリが、本当に動いている
講師からは、エラーが出た際の対処法や、UIのクオリティを上げるテクニック（参考画像を貼り付けるなど）も紹介されました。
お題に対するアウトプットがこちら↓
Step2：vercel v0を用いた、デプロイを含むUIの開発（フロントエンド実装）
次のステップでは、UIデザインとコード生成を行う「vercel v0（バーセル ブイゼロ）」をAIツールとして使用しました。
作成したUIに動きを加え、アプリとしての機能を具体化させていきます。
▲左のチャット欄で指示を出すと、中央のプレビュー画面がリアルタイムで更新されていく
Step3：Cursorを用いたプロトタイプの開発（バックエンドを含む）
最後に、Cursorを用いてさらに複雑な機能を実装していきます。Cursorは、2.0へのアップデートでエージェントモードが追加されました。講師の白鳥によると、これによって、コードが読めない非エンジニアでも、チャットでの指示を通じて開発を進めやすくなったそうです。
ローカル環境での実行やバックエンドの仕組みにも触れ、より本格的な開発フローを体験していきます。
▲依頼文を入力すると、次々とコードが生成されていく
▲ローカルでアウトプットを確認しながら修正
↓出来上がったアプリの例
Step3まで来るとさすがに難しいようで、戸惑う参加者の姿も見られました。
参加者の声：マインドセットに変化があった
3ステップのワークショップを通して、参加者からは以下のような感想がありました。
実践を通しての発見があり、有意義に感じた人も多かったようです。
- 作りたかった物のUIを作成できた
- Codexなどまだ触ったことのなかったツールを試すことができた。
- バイブコーディングをやったことがあったものの、ツールが違うことでの気づきが多かった。
- GPT、v0、Cursorで開発の仕方を比較するのがとてもわかりやすかった。
- 事後勉強会にて初心者の同期に教える機会が生まれ、再度理解を深めることができ、非常に有意義な時間を過ごさせていただきました。
その後、ワークショップ中に困難を感じた参加者からの発信で、お互いに教えあうイベントが自然発生。
有志で集まって復習する会が行われ、Step3で追いつけなかったメンバーも、無事にCursorを使ったバイブコーディングができたそうです！
復習会では、Cursorを使った料理のレシピサイトのUIが作成されました↓
AIによって、もっと価値創造に夢中になれる世界へ
Sun*の社内にはこのような柔軟な学びの場があり、ボトムアップでの勉強会や交流会が活発に行われています。クライアント支援に限らず、AIでプロトタイピングを行うなどして、新規事業起案プログラム「Spark」から事業を立ち上げる機会もあります。
代表の小林は、「AIによってTechnologyが民主化されることで、Sun*がビジョンとする『価値創造に夢中になる世界』に、より近づくことができる」と語っています。
様々な角度から新規事業に向き合いたい方、AIをもっと使って仕事がしたい方、周囲から刺激を受けながら新しいことにチャレンジしていきたい方など、私たちと一緒に働いてみませんか？
Sun*に興味を持っていただいた方は、ぜひ一度採用情報もご覧ください。
Sun*の採用サイトはこちら
https://sun-asterisk.com/recruitment
Sparkについて
Sun*で2024年12月より開始した新規事業起案プログラム。詳しくはぜひこちらもご覧下さい。
バイブコーディングワークショップ 企画スタッフ
松永 成美 プロジェクトマネージャー （担当：イベント企画・運営）
白鳥 雄大 エンジニア （担当：講師）