INDEX
はじめに
Webサイトの量産案件で、同じようなレイアウトのページが10枚、20枚、30枚と並んでいるデザインカンプを見たことはないでしょうか。
コーディングそのものよりも、「このパーツ、何て名前にしよう……」と悩む時間がじわじわ積み上がっていくことがあります。
- section-top でいいのか、hero なのか
- このカードは card か item か box か
- 似たようなコンポーネントが3種類あるけど、どう区別するのか
命名に迷うたびに手が止まります。しかも量産案件では、同じ悩みを何度も繰り返しがちです。
さらに厄介なのが、迷った末に付けた名前をあとから見直しづらいことです。コーディングを進めるほど命名の変更コストは上がるため、最初の判断が重くなりがちです。
そんな地味なストレスを、Figma MCP × Claude の組み合わせでほぼゼロにできたので、その話をします。
Figma MCPとは？
Figma MCPは、ClaudeなどのAIツールとFigmaを直接つなぐ仕組みです。
従来は、デザインを確認するためにスクリーンショットを撮ってAIに貼り付ける必要がありました。しかしFigma MCPを使うと、ClaudeがFigmaのデータを直接読み込めるようになります。
テキスト情報、レイヤー構造、コンポーネントの階層まで取得できるため、「見た目から構造を推測してもらう」というより、構造そのものを渡すイメージです。
セットアップは、ClaudeのMCP設定画面からFigmaを接続するだけです。数分で使い始められます。
プロンプトの設計が肝だった
Figma MCPでFigmaとつながっただけでは、まだ半分です。
実際に使ってみると、どう聞くかによって出力の質がかなり変わることがわかりました。
最初は「コンポーネント名を考えて」とシンプルに投げていましたが、返ってくる命名がプロジェクトごとにバラバラで、自分の命名スタイルと合わないことも多かったです。
試行錯誤の結果、今は 役割・出力形式・命名規則の3点セット をプロンプトに含めるようにしています。
実際に使っているプロンプト
あなたはWebフロントエンドの設計に詳しいエンジニアです。
以下のデザイン情報を確認して、コンポーネントの一覧を作成してください。
【命名規則】
- BEM記法（Block__Element--Modifier）
- 英語、小文字ケバブケース
- 役割が一目でわかる名前にする
- 汎用コンポーネントと固有コンポーネントを区別する
【出力形式】
- コンポーネント名（クラス名）
- そのコンポーネントの役割（1行）
- 子要素がある場合はインデントで表示
[デザインデータ]
ポイントは「役割が一目でわかる名前」という指示です。
これを入れると、box01 のような意味が伝わりにくい命名ではなく、news-card や service-list__item のように、意図が伝わる名前が返ってきやすくなります。
実際の出力例
上記のプロンプトを使うと、次のような形で返ってきます。
【コンポーネント一覧】
.hero（トップビジュアルエリア）
└ .hero__title（メインキャッチコピー）
└ .hero__lead（サブテキスト）
└ .hero__cta（CTAボタンラッパー）
.news-card（お知らせ一覧の各アイテム）
└ .news-card__date（投稿日）
└ .news-card__category（カテゴリラベル）
└ .news-card__title（記事タイトル）
.section-header（各セクションの見出しブロック）
└ .section-header__label（英語サブラベル）
└ .section-header__title（日本語見出し）
└ .section-header__lead（リード文）
.btn（ボタン共通）
└ .btn--primary（塗りつぶしタイプ）
└ .btn--outline（枠線タイプ）
└ .btn--sm（小サイズModifier）
命名の根拠も一緒に説明してくれるため、「なぜこの名前にしたのか」がわかり、あとからレビューしやすいのも助かっています。
CLAUDE.mdでトークンを節約する
Figma MCPとClaudeを使い込んでいくうちに、もう一つ課題が出てきました。
毎回同じ命名規則をプロンプトに書くのが手間で、トークンも無駄に使ってしまうことです。
量産案件では、同じプロジェクトで何度もClaudeに聞くことになります。「BEM記法で」「英語で」「役割を添えて」など、毎回この説明をプロンプトに含めるのは非効率です。
そこで導入したのが、CLAUDE.md です。
CLAUDE.mdとは
CLAUDE.mdは、プロジェクト固有のルールをClaudeに伝えるためのファイルです。
プロジェクトルートに CLAUDE.md を置いておくと、Claudeがその内容を読み込み、プロジェクトの前提ルールとして認識してくれます。
毎回プロンプトに書いていた命名規則や出力ルールを、このファイルに一度書いておけばOKです。
実際のCLAUDE.md（抜粋）
# このプロジェクトのコーディングルール
## 命名規則
- BEM記法を使用する（Block__Element--Modifier）
- クラス名は英語・小文字ケバブケース
- 汎用コンポーネントはプレフィックスなし（例：.btn, .card）
- ページ固有のセクションは `p-` プレフィックスをつける（例：.p-top-hero）
- JSフック用クラスは `js-` プレフィックス
## コンポーネント出力のフォーマット
デザイン情報からコンポーネントを洗い出す際は以下の形式で出力すること：
- クラス名
- 役割の説明（1行）
- 子要素はインデントで表示
## 使用技術
- HTML / Scss / JavaScript（素のJS）
- Scssはネストを使用、BEMに合わせた構造にする
CLAUDE.md導入後の効果
CLAUDE.mdを置いてからは、プロンプトがかなりシンプルになりました。
Before（CLAUDE.mdなし）
あなたはWebフロントエンドの設計に詳しいエンジニアです。
以下のデザイン情報を確認して、BEM記法・英語・小文字ケバブケースで
コンポーネント一覧を作成してください。汎用は…（以下100文字以上続く）
[デザインデータ]
After（CLAUDE.mdあり）
このデザインのコンポーネントを洗い出してください。
[デザインデータ]
プロンプトが短くなるだけでなく、ルールの解釈ブレがなくなるのが大きいです。
「今回BEM記法の指示を忘れた」という事故もなくなりました。
ページ間の差分整理にも使える
量産案件でもう一つ地味に大変なのが、「このコンポーネント、別ページにも似たものがある。共通クラスを使っていいのか、別物として扱うべきか」という判断です。
これもClaudeに投げています。
TOPページとサービス詳細ページのデザイン情報を確認して、
共通で使えるコンポーネントと、ページ固有のコンポーネントに分類してください。
共通コンポーネントはCLAUDE.mdのルールに従って命名してください。
[TOPページのデザイン]
[サービス詳細ページのデザイン]
複数ページをまたいだ仕様の整合性をAIが整理してくれるため、「あのページだけクラスが違う」「ここだけスタイルが重複している」といった事故が減りました。
やってみてわかったこと
よかったこと
命名の迷いがほぼなくなった
「どう呼ぶか」をAIに提案させることで、自分はその命名が適切かどうかをレビューする側に回れます。
ゼロから考えるより、提案に対してYES/NOを出す方が圧倒的に速いです。
コーディング前に設計が固まる
コンポーネント一覧を事前に作っておくと、コーディングに入る前から全体像が見えた状態でスタートできます。
途中でクラス名を変えたくなる場面も減りました。
CLAUDE.mdで品質が安定する
プロジェクトの命名ルールをファイルに書いておくことで、聞き方が多少ざっくりしていても、一定のクオリティで返ってきます。
新しいページを追加するときも同じルールで命名されるため、統一感を保ちやすくなります。
チームへの共有がしやすい
AIが出したリストをそのままドキュメントに貼れるため、「このプロジェクトでのコンポーネント定義」として共有しやすくなりました。
気をつけること
AIの命名はあくまで提案
既存サイトのリニューアル案件では、過去のクラス名との兼ね合いをAIが把握できないことがあります。
その場合は、CLAUDE.mdに「既存クラス名の一覧」を追記しておくと、ある程度ケアできます。
インタラクション絡みの命名は要調整
ホバー、アクティブ、エラー状態など、デザインカンプだけでは読み取りにくい状態変化の命名は、コーディングしながら調整することが多いです。
Figma側のレイヤー構造が荒れていると精度が下がる
レイヤー名が「Rectangle 24」「Group 5」のような状態だと、Claudeも構造を正確に読み取りにくくなります。
デザイナーと連携してレイヤーを整理できると、さらに精度が上がります。
まとめ
Figma MCP × Claudeを使うことで、量産案件の最初の壁になりがちな「コンポーネントの洗い出しと命名」をほぼ自動化できました。
さらにCLAUDE.mdでルールを一元管理することで、毎回プロンプトに命名規則を書く手間がなくなり、トークンの節約にもつながっています。
コーディング自体は人間がやる仕事ですが、設計の言語化・整理はAIが得意な領域だとあらためて感じました。
「コンポーネント名を考える時間」が「コードを書く時間」に変わるだけで、案件の体感はかなり変わります。
量産案件が多い方は、ぜひ試してみてください。
使用ツール：Claude Code（claude.ai）、Figma MCP
