こんにちは。エンジニアの石塚です！
みなさんはAIを活用していますか？ChatGPT、Gemini、NotebookLMなど日常的に使用するツールとなっていますよね。僕自身もコーディングエディタのCursorやClaude Codeを業務に導入しています。以前は時間がかかっていたマークアップや複雑なJavaScriptの実装も、2025年以降AIコーディングを取り入れてから、制作のスピードがかなりアップしました。
コーダー経験者なら分かっていただける方多いと思いますが、マークアップ作業は実際に取り組んでみると相当な工数が必要であることに気付きます。HTMLやCSSを記述するだけでなく、classの命名規則を検討したり、HTML構造の最適化を考慮したり…タイピング速度に優れたエンジニアであっても、ブラウザの挙動に合わせてdivの構造やCSS設計といった細かな調整を何度も繰り返すことになります。単純作業であるにもかかわらず、予想以上の時間を費やしてしまうことが多いですよね。
そこで今回、Claude CodeとFigma MCPを使ってこの工程を効率化できないか試してみることにしました！
Claude Code + Figma MCPとは
Claude Codeとは、Anthropic社が提供するターミナルベースのAIコーディングツールです。自然言語で指示を出すだけで、コードの生成・編集・実行までを自動で行ってくれます。コーディング向けのChatGPTという理解で良いと思います。
Figma MCPは、Claude CodeとFigmaを連携させる仕組みです。MCPとは「Model Context Protocol」の略で、AIがFigmaのデザインデータを直接読み取れるようになります。つまり、Figmaのデザインを見せながら「これをコーディングして」と指示するだけで、AIがデザインを解釈してHTMLやCSSを生成してくれます。
バイブコーディングとは、細かいコードを手打ちするのではなく、AIに意図や雰囲気（vibe）を伝えてコードを生成させる開発スタイルのこと。Claude Code + Figma MCPの組み合わせは、まさにこのバイブコーディングに最適な環境です。
※常に画面はエディタ+AIツール+デザインツールでいっぱいです…w
エンジニア勉強会開催！
早速Gear8内でClaude CodeとFigma MCPを活用したバイブコーディングの勉強会を企画しました。Zoomで接続しながら各自のPCで実装を進めるハンズオン形式です。
勉強会の流れ
1.Claude Codeの設定、FigmaとMCP接続
2.まずは予備知識なしで1セクション分バイブコーディング
3.初回出力のフィードバック
4.バイブコーディングのコツを共有
5.改めてバイブコーディング
6.完成度の共有・感想まとめ
まずは何も考えずにバイブコーディングを試してもらい、その後コツを共有してから再度挑戦する流れにしました。1回目と2回目で出力の精度がどう変わるかを体感してもらうのが狙いです。
バイブコーディングの精度を上げる2つのコツ
何度かClaude Codeのバイブコーディングをやってみて、Figmaデータをより忠実に精度良く出力させるためには2つのコツがあることに気づきました。
①Figmaフレームの命名規則を整える
フレームの命名が日本語や適当だと、AIがデザインの構造を正しく理解できず、出力の精度が下がってしまいます。命名規則は諸説ありますが、今回はCSS設計のFLOCSSに合わせてリネームしました。
変更例：他の制作では下記のようにリネームしています。
セクション1→p-section01ヘッダー→l-headerボタン青→c-button--primary
FLOCSSに限らず、BEMなど自分のプロジェクトで採用しているCSS設計に合わせて命名を統一しておくと、出力されるコードもその規則に沿ったものになりやすいです。
②.mdファイルを用意してレギュレーションを確保する
プロジェクトのルートに.mdファイル（README.mdなど）を作成し、コーディングルールを記載しておくことで精度が格段に上がります。
記載しておくと良い内容：
- 使用するCSS設計（FLOCSS、BEMなど）
- ブレイクポイントの定義（例：sp: 767px以下、pc: 768px以上）
- 命名規則のルール(キャメルケースやスネークケース)
- ディレクトリ構成
Claude CodeはこのREADME.mdファイルを読み込んでコーディングの参考にしてくれるため、毎回プロンプトで指示しなくても一貫性のあるコードを出力してくれるようになります。
コーダーみんなの感想
コーダー歴14年目🐺
手間ひまばかりかかる部分を短縮でき、アニメーションなど他のことに時間を使えるのが嬉しい。
コーダー歴3年目🐨
0%から80%くらいまで作ってくれるので、制作がサクサク進むのが嬉しいです！バイブコーディング中に他のこともできるので、マルチタスクができて効率がよかった！
コーダー歴6ヶ月目🐱
バイブコーディングの習得にハードルを感じていましたが、皆でやってみて他の人の生成結果も見れたことで、AIの特性も把握できたのがよかったです！
インターンシップ🐣
めちゃめちゃ便利だなと思った反面、理解力が試されるなと思いましたー。来年には使いこなせるようになります。
参加したコーダー全員に感想を聞きましたが、経験年数に関わらず「効率が上がった」という声が多かった一方で、「AIが出力したコードを理解する力が必要」という意見も。便利さと学習のバランスが大事だと改めて感じました。
まとめ
以上、Claude Code×Figma MCPを使ったバイブコーディングの紹介でした。僕がGear8に入社した頃は、コーディングでつまずいたときはGoogle検索で調べる、もしくは先輩コーダーに助けてもらうしかなかったですが、AIを活用することによって悩んで数時間・数日経ってしまうことはほぼ無くなりました。
今後もAIコーディングの良い部分をキャッチアップして社内勉強会をおこない、質の高い制作ができるように試していきたいと思います！勉強会第2回目の様子はまたJournalで報告したいと思います！
