AIバイブコーディングへの取り組み。ディレクターがコードを書く時代へ

今回はディレクターチームが取り組んだ「AIバイブコーディング」についてご紹介します。「ディレクターが実装？」と思われるかもしれませんが、AIの登場によってその前提が変わりつつあります。

今回の取り組み概要

今回使用したのはAI機能を搭載したコードエディタ「Cursor」です。AIモデルには「Claude Opus 4.6」を使用しました。
対象はアクセス状況を可視化するWordPressプラグインの開発。AIと対話しながら実装を進めました。

ディレクターがプロトタイプを実装する

今回、ディレクターが担当したのは主にUI領域です。
単なる見た目の構築ではなく、ダミーデータを用いてプロトタイプとして全ての機能が実際に動くレベルまで作り込みました。

• 管理画面のUI設計・実装
• グラフ描画によるデータの可視化
• React Flowを用いた動的なサイトマップ描画
• 操作性を意識したインタラクション設計
  など

AIと対話しながらコードを書くという体験は、想像以上にスムーズに進みました。
手が止まるストレスはなく、ディレクターの意図が画面に反映されていく。そのような新しい開発体験でした。機能面で悩んだ際などにはエンジニアと相談出来る環境というのもやりやすいポイントでした。

開発フローの変化

UIの実装完了後、バックエンド開発をエンジニアへ引き継ぎました。
ここで従来と大きく違ったのは、仕様書やワイヤーフレームではなく、「動くプロトタイプそのもの」を共有したことです。
これにより、現場では大きなメリットが生まれました。

1. 認識ズレがほぼなくなった

言葉や静的な資料ではなく、挙動そのものが共有されるため、認識のズレがほとんど起きませんでした。

2. 設計の初速が上がった

エンジニアは、プロトタイプによって画面の状態、データの流れ、ユーザー操作を理解できるため、即座に設計に着手できました。

3. 議論の質が上がった

「抽象的な理想」ではなく「具体的な動くもの」を前に話せるため、より本質的な議論に時間を使えるようになりました。

実際にこのフローで進めてみると、エンジニアからも

「UIがすでに動いていて、データも入っているので、仕様がかなり分かりやすい」
「設計に落とし込むスピードが上がった」

などの声があがりました。

AIバイブコーディングで見えた「これからのディレクター像」

実際に手を動かしてみて感じたのは、ディレクターとエンジニアの関係性の変化です。
ディレクターがコードに触れることで、会話の解像度が上がり、分業ではなく共同開発という感覚が強まりました。

もちろん、複雑なビジネスロジックの設計や、セキュリティ・パフォーマンスの担保は、引き続きエンジニアが価値を発揮する領域です。
しかし、ディレクターが「仕様を書く人」から「プロダクトの形を素早く作れる人」へと進化することで、開発のスピードとクオリティはより高い水準へ到達できると感じました。

職種の枠を超えて、一緒にプロダクトを作りたい

私たちは今回の取り組みのように、職種の枠にとらわれず、一緒にプロダクトを作ることを楽しめる方と働きたいと考えています。下記のような方とは、きっと相性が良いと感じています。

• AIを駆使した新しい開発フローにワクワクする
• 企画から実装まで、一気通貫でプロダクトに関わりたい
• チームを跨いだ共同開発をしたい

AIの登場によって、職種の境界はどんどん曖昧になっています。
だからこそ私たちは、ディレクターも、デザイナーも、エンジニアも、一緒に作るチームでありたいと考えています。
興味がある方や一緒に働いてみたいという方、お気軽にご連絡ください。