初心者向けGit入門：Web制作現場での役割と操作イメージ
みなと
フロントエンドクリップ
Claude Codeは実務で使える？CLAUDE.md × Figma MCPでLPを実装してみた【検証編】
みなと
前回の準備編では、Claude CodeのインストールからFigma MCPサーバーとの連携設定まで解説しました。今回の検証編では、実際にCLAUDE.mdとSKILL.mdを活用して、FigmaのデザインカンプからLPをコーディングし、その精度や実用性を検証します。
今回確かめたいのは、次の3点です。
- CLAUDE.mdで与えたルールが出力に正しく反映されるか
- Figma MCPはデザインをどれほど正確に読み取れるか
- 実務でそのまま使えるレベルのコードが出力されるか
使用するFigmaカンプは、実際の業務を想定したシンプルなランディングページのデザインです。下記がそのデザインカンプです。
Contents
CLAUDE.mdとは何か
CLAUDE.mdとは、Claude Codeがプロジェクトのコーディングルールを理解するための設定ファイルです。マークダウン形式（.md）で記述し、プロジェクトのルートディレクトリに置くだけで、Claude Codeが起動時に自動的に読み込みます。
CLAUDE.mdがないと何が起きるか、というと出力がブレます。たとえばCSSの命名規則はプロジェクトによってBEM、SMACSS、FLOCSSなどさまざまです。ルールを明示しなければ、Claude Codeはその都度「それらしい」コードを生成しますが、既存コードとスタイルが合わなかったり、プロジェクトのルールから外れたコードが出力される原因になります。
CLAUDE.mdを書くときのポイント
CLAUDE.mdは「作るだけ」では効果が出にくく、何を書くか・どう書くかが重要です。まずは以下のポイントを意識するところから始めてみてください。
- 短く・高密度に書く（目安200行以内）
長すぎると重要なルールが埋もれ、無視されやすくなります。重複や曖昧な表現は削り、本当に必要なルールだけを残しましょう。 - 「毎回言っていること」を書く
プロンプトのたびに伝えているルールをCLAUDE.mdに固定化します。プロジェクト全体を通じて常に守るべきルールだけを対象にしましょう。 - 抽象ではなく具体で書く
「簡潔に」ではなく「3行以内」、「適切に」ではなく「〜は禁止」など、解釈の余地をなくす書き方が効果的です。
ここで紹介したポイント以外にも、活用できるコツはたくさんあります。より詳しく知りたい方は公式ドキュメントも参考にしてみてください。
CLAUDE.md 全文
今回作成したCLAUDE.mdの全文は以下のとおりです。
# CLAUDE.md
このファイルはClaude Codeがプロジェクトのコーディングルールを理解するための設定ファイルです。
新しいページやセクションを追加する際は、必ずこのルールに従ってください。
---
## プロジェクト概要
- 静的HTML/CSSによるWebページ
---
## ディレクトリ構成
```
{project}/
├── index.html
├── css/index.css
└── images/
```
---
## HTML構造ルール
### ページ全体のラッパー
ページ固有のすべての要素は、プロジェクト名のクラスを持つ `<div>` でラップする。
※ 以降の例に登場する `.myproject` はプレースホルダです。実装時は案件固有のラッパークラス名に置き換えること。
```html
<div class="myproject">
<!-- すべてのコンテンツ -->
</div>
```
### 画像
- `width` / `height` 属性を必ず記述する
- `alt` は必ず記述する。内容が判断できない場合は空（`alt=""`）にする
- SP/PC切り替えが必要な場合は `<picture>` タグを使用する
**pictureタグの例**
```html
<picture>
<source srcset="/{project}/images/xxx_sp.webp" media="(max-width: 767px)">
<img src="/{project}/images/xxx.webp" alt="" width="000" height="000">
</picture>
```
### 改行制御
```html
<br class="only-sp"> <!-- SPのみ改行 -->
<br class="only-pc"> <!-- PCのみ改行 -->
```
多用は避け、最小限に留めること。以下のCSSを必ず定義すること。
```css
@media (min-width: 768px) {
.myproject br.only-sp { display: none; }
}
@media (max-width: 767px) {
.myproject br.only-pc { display: none; }
}
```
---
## CSS命名規則
### BEM風の命名構造
```
.{ブロック}__{エレメント}
```
- ブロックはページ内の独立したセクション単位で定義する（例：about, service, news など）
- エレメントの区切りは `__`（アンダースコア2つ）
- Modifierは使用しない
### CSSのスコープ【重要】
ページ固有のスタイルは、原則として `.myproject` 配下にスコープすること。
ただし、`@keyframes` や全体共通CSS、JS制御用の状態クラスはこの限りではない。
```css
/* NG: スコープなし */
.about { ... }
/* OK */
.myproject .about { ... }
```
### CSSの記述順序
1. 共通スタイル（PC・SP共通）
2. PCスタイル（`@media (min-width: 768px)`）
3. SPスタイル（`@media (max-width: 767px)`）
### リセットCSS
CSSファイルの先頭に以下のリセットCSSを必ず含めること。
```css
* {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
body {
-webkit-text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
```
---
## レスポンシブ対応
### ブレークポイント
| 対象 | メディアクエリ |
|------|--------------|
| PC（768px以上） | `@media (min-width: 768px)` |
| SP（767px以下） | `@media (max-width: 767px)` |
### コンテンツ幅【重要】
中央揃えのレイアウトは、左右の余白を `padding` のみで表現してレイアウト幅を決めてはいけない。
レイアウトの横幅は必ず `max-width` + `margin: 0 auto` で制御すること。
`padding` 自体の使用は禁止しない。
```css
/* OK */
.myproject .xxx {
max-width: 1286px;
margin: 0 auto;
padding: 0 40px;
}
/* NG: paddingだけで幅を表現しない */
.myproject .xxx {
padding: 0 200px;
}
```
PC時の最小幅は `.myproject` に対して指定する：`min-width: 1240px`
---
## 画像ファイルの命名規則
```
{種別}_{セクション名}_{連番}[_sp].{拡張子}
```
| プレフィックス | 用途 |
|--------------|------|
| `bg_` | 背景画像 |
| `pic_` | コンテンツ画像 |
| `icon_` | アイコン |
| `logo_` | ロゴ |
- SP用画像は末尾に `_sp` を付ける（例：`bg_kv01_sp.webp`）
- 形式は基本的に `.webp`、アイコン類は `.svg`
実は今回のCLAUDE.mdも、既存プロジェクトのコードをClaudeに分析させて作成しました。ゼロから書くより、AIと対話しながら作る方が断然早いです！
SKILL.mdとは何か
Claude Codeには「スキル」という仕組みがあります。特定のタスクの手順をマークダウンファイルとして定義しておくことで、Claude Codeがその手順に従って作業を進めてくれる機能です。
SKILL.mdは、そのスキルを定義するファイルです。CLAUDE.mdがプロジェクト全体のルールを定義するのに対して、SKILL.mdは「FigmaカンプからLPをコーディングする」といった特定タスクの進め方を定義します。
SKILL.mdは複数作成することが想定されており、タスクごとに別ファイルで管理します。格納先は以下のような構成が推奨です。
{project}/
└── .claude/
└── skills/
├── figma-lp-coding/
│ └── SKILL.md
├── image-export/
│ └── SKILL.md
└── component-coding/
└── SKILL.mdSKILL.mdを使うメリットは、複雑なタスクをステップに分割してClaude Codeに渡せることです。手順を与えないと、Claude Codeは自己判断で作業を進め、確認なしに先へ進んだり、重要なステップを省略したりすることがあります。
YAMLフロントマターについて
SKILL.mdの冒頭にはYAMLフロントマター（--- で囲まれた部分）を記述します。
---
name: figma-lp-coding
description: Figmaカンプ（URL指定）から静的LPをHTML/CSSで新規実装するための手順。〜
---name | スラッシュコマンド名になります。/figma-lp-coding で直接呼び出せます |
|---|---|
description | Claude Codeがスキルを自動的に使用するかどうかの判断に使われます |
スキルはClaude Codeが文脈から自動的に判断して使用するほか、/figma-lp-coding のように直接呼び出すこともできます。
/figma-lp-coding がSKILL.mdで定義したスキルSKILL.mdを書くときのポイント
- タスクをステップに分割して書く
「〜する」という単位で手順を細かく区切ることで、Claude Codeが迷わず順番に実行してくれます - CLAUDE.mdと役割を分ける
常に守るルールはCLAUDE.md、特定タスクの手順はSKILL.mdと住み分けることで、両ファイルをシンプルに保てます
詳しくは公式ドキュメントも参考にしてみてください。
SKILL.md 全文
今回作成したSKILL.mdの全文は以下のとおりです。
---
name: figma-lp-coding
description: Figmaカンプ（URL指定）から静的LPをHTML/CSSで新規実装するための手順。CLAUDE.mdの構造・命名・レスポンシブルールに従って、index.htmlとcss/index.cssを作成するときに使用する。
---
# 概要
この手順は、Figmaカンプをもとに静的なLP（1ページ）を新規コーディングするためのものです。
必ず CLAUDE.md のルールに従って実装すること。
---
# 作業手順
## STEP 1：Figmaカンプの構造を把握する
Figma URLから以下を確認する。
- セクション構成と表示順
- PC / SP 両デザインの差分
- 各セクションのレイアウト構造
- 使用されているフォントサイズ・余白・カラー
不明な構造はスクリーンショットで補完して理解する。
---
## STEP 2：セクション構成を整理する
実装前に、ページ全体をセクション単位で分解する。
- セクションごとにブロック名を決める（例：kv / about / service / contact）
- 再利用できる構造（カード・リストなど）を把握する
- PC/SPで構造が変わる箇所を明確にする
この時点でHTMLの大枠構造をイメージしておく。
---
## STEP 3：ファイルを作成する
CLAUDE.mdのディレクトリ構成に従い、以下を作成する。
- `{project}/index.html`
- `{project}/css/index.css`
---
## STEP 4：HTMLを実装する
CLAUDE.mdのHTMLルールに従って実装する。
- `.myproject` ラッパーで全体を囲む
- セクション単位でブロックを分ける
- BEM風クラスで命名する
- 画像には `width / height / alt` を必ず付与する
- 必要に応じて `<picture>` を使用する
レスポンシブは**原則1つのHTMLで対応すること**。
PC/SPでHTMLを分ける実装は禁止とする。
ただし、構造上どうしても困難な場合は、実装前にユーザーに確認すること。
---
## STEP 5：CSSを実装する
CLAUDE.mdのCSSルールに従って実装する。
- `.myproject` 配下にスコープする
- 記述順は「共通 → PC → SP」とする
- `max-width + margin: 0 auto` でレイアウト幅を制御する
---
## STEP 6：最終確認
以下を必ずチェックする。
- セクション構成と順序がFigmaと一致しているか
- PC / SP のレイアウトがカンプ通りか
- 余白・フォントサイズ・配置が大きくズレていないか
- CLAUDE.mdの命名規則・CSS設計に従っているか
- 独自ルールや新しい設計を勝手に追加していないか
- PC/SPでHTMLを二重実装していないか
問題があった場合は修正して再チェックする
---
# 注意事項
- 実装は必ず CLAUDE.md を最優先とする
- 判断に迷う場合は、見た目よりもルールの整合性を優先する
- 画像ファイル名は以下の命名規則に従うこと
`{種別}_{セクション名}_{連番}[_sp].{拡張子}`
- 画像が未納品の場合はパスのみ記述し、width・height・altはFigmaの値を入れておく
実際にやってみた
プロンプトを投げる
準備が整ったところで、実際にClaude Codeを起動してプロンプトを投げます。SKILL.mdを参照させ、FigmaカンプのURLと格納先ディレクトリなど必要な情報を渡すだけです。
SKILL.mdの手順に従って、以下のFigmaカンプをコーディングしてください。
- Figmaカンプ：{FigmaカンプのURL}
- 格納先ディレクトリ：lp-demo/
- ラッパークラス名：lp-demo（CLAUDE.mdの「myproject」はすべて「lp-demo」に読み替えること）
- コンテンツ幅：基本は max-width: 1100px + padding: 0 40px。ただしエリアによって幅が異なるため、Figmaカンプの値を優先すること
- 画像：ファイルは未納品のため、パスのみ記述すること。width・heightはFigmaカンプの値を使用し、altは内容から判断して記述することCLAUDE.mdはプロジェクトルートに置いてあれば自動で読み込まれるため、プロンプトに明示する必要はありません。
Figma MCPがデザインを読み取る
プロンプトを送信すると、Claude CodeはまずFigma MCPを通じてデザインの読み取りを開始します。Figma MCPが取得するのは画像ではなく、レイアウト情報（位置・サイズ・カラー・フォントなど）を含む構造化データです。
このデータをもとにセクションの構成・テキストスタイル・余白などを把握すると、続いてディレクトリの作成に進みます。
HTML/CSSが出力される
ディレクトリの作成が完了すると、HTMLとCSSが自動生成されていきます。
CLAUDE.mdのルールが読み込まれているため、BEM風の命名規則やメディアクエリの書き方、コンテンツ幅の制御など、定義したルールが適用されたコードが出力されます。CSSの先頭にはCLAUDE.mdで定義したリセットCSSも正しく含まれています。
CLAUDE.mdのルールを自律的にチェックする
HTMLとCSSの生成が完了すると、最終確認が始まります。ここで注目すべき動きがありました。Claude CodeがCLAUDE.mdを自分で読み返し、「Modifierは使用しない」というルールに反して出力してしまった content__item--reverse クラスを自律的に :nth-child(even) へ修正し始めたのです。
指示していないのに自分でルール違反に気づいて直してくれるのは、CLAUDE.mdの効果を実感できる瞬間ですね！
すべての作業が完了すると、作成ファイルの一覧・セクションごとのPC/SP実装内容・CLAUDE.mdルール準拠の確認項目がまとめて表示されます。
出力結果の検証
実際にブラウザで表示を確認し、Figmaのデザインカンプと比較しながら検証した結果をまとめます。
FigmaデザインとブラウザのBefore/After比較
生成されたHTMLをブラウザで確認し、Figmaのデザインカンプと比較してみます。なお、デモLP用の画像は別途Figmaで書き出して手動で反映しています。
多少の差異はありますが、全体的な再現度は高く、実務でも十分通用するレベルの出力でした。
良かった点
- CLAUDE.mdのルールがほぼ完璧に反映
BEM風命名規則・lp-demoルートスコープ・コンテンツ幅のmax-width制御・メディアクエリの書き方など、定義したルールがほぼ完璧に出力に反映されていました。前のセクションで紹介したModifierルールの自律修正もその一例です。 - コンテンツエリアの再現度が特に高い
画像とテキストが交互に配置されるコンテンツエリアはかなりの再現度でした。フォントサイズ・余白・カラーもほぼ正確に再現されています。 - 修正指示にも対応してくれる
下記の問題点に対して修正指示を出したところ、的確に対応してくれました。ただし具体的な指示を出すことが重要です。
気になった点
- SP画面で横スクロールが発生
SP表示の関連記事エリアで横幅が画面幅を超えてしまい、横スクロールが発生しました。
修正指示のやり取り
SP画面の横スクロール問題に対して、以下のような修正指示を出しました。
スマホで関連記事エリア（.related）について、
横幅が広くて横スクロールが出てしまっています。
原因を確認し、解消してください。
Claude Codeは原因を正しく特定してくれました（.related__card の width: 100% に対して padding が box-sizing: content-box で加算されている）。ただし、修正内容（align-items: stretch）は的外れだったため、以下のように原因と正しい修正内容を指定して再指示しました。
先ほどの修正は原因の特定は合っていましたが、修正内容が違います。
原因は .related__card の width: 100% に対して padding が box-sizing: content-box
で加算されているためです。
.related__card に box-sizing: border-box を追加して解消してください。
2回目の指示で無事解消されました。原因の特定はClaude Code自身がやってくれるので、修正内容を具体的に指示すれば的確に対応してくれます。
正直、今回の横スクロールの修正は自分で直した方が早かったです（笑）。ただ、原因の特定が難しい不具合や、影響範囲が広い修正の場合は、Claude Codeとのやり取りで解決した方が効率的な場面もあると思います。
実務での使いどころ
今回の検証を踏まえて、Web制作の観点からClaude Code × Figma MCPが実務で活きる場面と、注意が必要な場面を整理します。
向いている場面
- しがらみや制約の少ない小〜中規模サイトの新規制作
既存の制約が少なく、CLAUDE.mdでルールを自由に定義できる環境が最も効果を発揮します。 - LPコーディング
今回のような1ページ完結のLPは、セクション構成が明確でFigma MCPとの相性が良いです。 - コーディングの初稿作成
「まず動くものを出す」初稿作成に使い、細かい調整は手動で行うワークフローが現実的です。
注意が必要な場面
- しがらみのある既存サイトや制約の多いWebサイト
独自の命名規則やCSS設計が複雑に絡み合った既存サイトや、WordPressなどのCMSと連動したサイトなど、既存コードとの整合性が求められる場面では、まだコード生成をそのまま使うのは難しいと感じました。 - 細かい微調整
全体の精度は高いですが、細かい調整は手動で行う必要があります。また、修正指示が1回で通らないこともあるため、原因を特定した上で具体的に指示することが重要です。
効率化について
今回はCLAUDE.mdとSKILL.mdの準備・調整に時間がかかったため、トータルで大きな時間短縮になったとは言えません。ただし、出力物への信頼度が上がり、慣れてくれば短縮できると思います。また、今回のデモはシンプルなLPだったため差が出にくかったですが、ページ数が多いサイトや、1ページあたりのボリュームが大きいWebページほど効率化の恩恵が大きくなる期待があります。
前回のCursor検証との比較
以前、当ブログで「Figma MCPサーバーのHTML/CSS生成は実務で使える？【検証編】」という記事でFigma MCP × Cursorの検証をしましたが、そのときはそこまでの可能性を感じませんでした。しかし今回のClaude Code × Figma MCPは、大いに期待が持てる結果となりました。
まとめ
今回の検証結果をまとめます。Claude Code × Figma MCPは、Web制作のコーディング効率化において大きな可能性を感じた組み合わせでした。
- CLAUDE.mdでプロジェクトのルールを定義しておくことで、命名規則・コンテンツ幅・メディアクエリなどがほぼ完璧に反映されたコードが出力される
- Figma MCPはデザインの構造を高精度で読み取り、レイアウト・余白・フォントサイズなどを正確に反映したコードを生成する
- 修正指示には基本的に対応してくれるが、1回で通らないこともある。原因を特定した上で具体的に指示することが重要
- 一夜にして劇的な効率化とは言えないが、しがらみの少ない新規制作やLPコーディングでは、使い方次第でコーディング作業を大きく効率化できる
- CLAUDE.mdやSKILL.mdは一度作ったら終わりではなく、使い続けながら自分用に磨いていくことで、より精度が上がっていく
CLAUDE.mdとSKILL.mdの準備に最初は時間がかかりますが、一度整えれば繰り返し使えます。今後のプロジェクトでぜひ取り入れてみてください。
準備編はこちら
あわせて読みたい
Claude Code【準備編】インストール・初期設定からFigma MCP連携まで
押していただけると励みになります！
ABOUT ME
東京のWeb制作会社で15年以上働いている現役フロントエンドエンジニアです。これまで、いろんなプロジェクトに関わりながら、フロントエンド開発やWebデザインに取り組んできました。このブログでは、今までの経験を活かして、Web制作に役立つ情報やノウハウをシェアしていきたいと思います。初心者の方から、現場で働く方まで、誰でも参考にできる内容をお届けしますので、ぜひ覗いてみてください。
