はじめに
身近にAIを推奨している環境がなかったこともあり、キャッチアップが遅れていました。
今回は勉強のために簡単なポートフォリオサイトを題材にバイブコーディングしてみます。
デザインはFigmaで作成し、Figma MCPを利用してCodexに実装してもらいます。
事前に準備するもの
今回、自分で事前に準備しておいたものは下記です
- Figmaでのポートフォリオサイトデザイン
- PC、スマホ両方用意
- Codex課金（Plusプラン: 3,000円/月）
- Figma課金（プロフェッショナル Devシート: 2,500円/月）
- ChatGPT(Codex)のデスクトップアプリを使える状態にしておく
2026/9 現在の情報です。
早速やっていく
1. Codexに実装を依頼する
FigmaとCodexを連携する
Figmaを開き、下部メニューからDevModeを選択。
DevModeになったら、右サイドメニューのMCPからエージェントを追加。
私の場合、「+ Codexにインストールする」ボタンを押下しナビゲーションに従ってCodexとFigmaを行き来することですぐに連携できました！
Codexに指示を出す
Figmaで、Codexに作ってもらいたいデザインを選択し右クリック > 選択範囲へのリンクをコピーを押下し、URLをコピーします。
コピーできたらChatGPTのデスクトップアプリからCodexを開き、新しいチャットを開きます。
プロンプトで、以下を指示。
{Figmaからコピーしたリンク}
このデザインをfigmaから参照した上で、以下の条件を満たして実装してください。
# 技術構成
- React
- Tailwind CSS
# 実装ルール
1. コンポーネント分割をすること
- コンポーネントはセクション単位で分割する
- 再利用性のある要素は共通化する
- 過剰な細分化は避け、読みやすさを優先する
2. figmaをどこまで読み取るか
- レイアウト、余白、サイズ感、角丸や配置意図をできるだけ忠実に再現。
- ただし、実機に起こした際に不都合がある場合はその限りとしない
3. レスポンシブ対応
- スマホ、PC両方に対応する
- 横スクロールは発生させないようにする
- スマホのレイアウトは下記から参照する
- {Figmaからコピーしたリンク}
4. アクセシビリティ
- button, linkなどは意味に応じて適切なHTML要素を使用する
# 補足
- 不要なライブラリは追加しないでください
- 実装で迷うことがあったらすぐに質問してください
これは参考にさせていただいた記事に記載されていたプロンプトを、自分のケースに合わせて改変したものです。
2. 成果物を確認する
完了までにいくつか許可を求められることがあると思いますが、都度対応してください。
しばらく待つと実装が完了します。
ローカルでサーバ起動し、成果物をブラウザで確認します。
↓Codexによる実装（※キャプチャ控えておらず1回修正済み）
↓Figmaデザイン
おおお、早いしイメージ通りできてる！
細かいところを見るとヘッダーが抜けてたり、アイコンが小さかったり、そもそも違うアイコンに置換されていたり指示内容が漏れていたり...（※修正前の初版の話です）
細かい部分を修正してもらうため、確認→修正依頼→確認→修正依頼...と何度かラリーを繰り返します。
このとき、デザインの修正も絡んでくるとラリーが増えてしまって煩雑になるので注意です。
3. デプロイ
大体こんな感じになりました。画質ガビガビですが雰囲気が伝われば。
↓PC
↓スマホ
納得のいく形になったらデプロイ！世界へ公開します。
今回は公開することを目標とし、独自ドメインは取得せずにまずはVercelで公開してみます。
公開手順は割愛しますが、AIがサポートしてくれるので安心です。
4. 完成
別のデバイスでも確認し、閲覧できるか、レイアウト崩れがないか等を確認します。
問題なければポートフォリオ完成です！
参考にさせていただいた記事
最後に
今回実装〜公開までをAIに依頼してみましたが、作業スピードは一目瞭然ですね。
| ケース | 制作期間 |
|---|---|
| 調べながら自分で作成 | 1週間前後 |
| AIにイチから作ってもらう | 〜1日 |
デザインもAIにお願いしていたらもっと差は開くんですよね...すごい。
たった数時間で形になるので多少の虚しさは感じつつも、それ以上に可能性の広さに圧倒されました。
経験が浅い人や非エンジニアの方でも、AIに教えてもらいながら自分のやりたいことを実現できるので、とても頼もしいパートナーだなと感じました。
今までだと「こんなの作ってみたいけど実現方法が分からない...」と想像で止まってしまうことも多々ありましたが、
分からない部分を補いながら進められることで、技術的ハードルを感じずに行動へ移せるので挑戦の敷居が下がったように思います。
今回、プロンプトや元のデザインにも反省点があったためやりとりが多くなってしまった点は今後の課題です。
やるべきことを指示者側がきちんと把握できているか。作業者は変わっても、知識・経験等の部分は今後も人間が蓄えていく必要があるのだと思います。（むしろこの部分の吸収スピードが速くなっていくのかな）
そして、AIに実装してもらって終わりではなく、内容の理解を手放さないこと。これは今まで通り責任として常に意識しておく必要があると思います。