Figma x Claudeでフルでコーディングしてみた

自分ではメインで手を動かさず、ClaudeにHTMLコーディングをほぼ任せました。
地味にFigma MCPを初めて使ったので、いい感じの進め方ないかなーって試行錯誤した記録を残しておきます。

今回はReactとかじゃなく、HTML（Nunjucksを用いたtwig）を作成しています。

コーディングルール等はルールで定義します。CLAUDE.mdにばーっと全部書いてからルールにわけてって頼むと、いい感じに分けてくれます。（読んでくれるとは言ってない）

今回は、

• アーキテクチャ
• CSSルール
  • レスポンシブのブレークポイント
  • 命名規則
    • 今回はBEM指定だったので、サンプルも載せる
  • フォントまわりの指定
    • ベースサイズと同じものは指定しない
    • line-heightは近似値は指定しない
  • マージンやパディングのルール
    • line-heightを考慮して余白設定すること
    • 共通のマージンは定義されているCSS変数を使うこと
• HTMLルール
  • アクセシビリティのWCAG 2.1 レベルAに準拠すること
  • twigのインクルードはヘッダーフッターのみとすること（コーディング規約上のルール）
  • 画像はloading="lazy"を指定し、width や height も指定しておくこと
  • 画像はWebPを使用し、フォールバック対応をすること

などなどを盛り込みました。（読んでくれるとは言ってない）
これらは最初から作り込んでいたわけではなく、コーディングを進めながら「これ何回も指摘してるな」とか「ルールにしておいた方がいいな」と思ったことを、都度残しながら仕上げています。

相変わらず読まれないCLAUDE.md

ちょこちょこルールを無視されるのは健在………。プランを立てられた段階で置いておいたルールが守られてないな、と思ったら指摘して精度をあげています。
この辺はサブエージェント作って、構築終わった後にチェックさせる方が心理的にイライラしなくていいかも。

構築する範囲は「自分で一気に構築する範囲」

Figma MCPでページヘッダー部分をまとめて指定して依頼してみると、粒度が大きすぎたのか精度が50％くらいのものが出ました。
Reactと同様にコンポーネント単位では依頼しているものの、レイアウトがちょっと複雑になってくるとさらに分けた方がよさそうでした。
私が一度に構築する範囲で実装するを意識して、ときにはスマホレイアウトだけやって、あとからPC向けの調整をする、といったように粒度をちょっと落とす工夫をしました。

Figmaのデータ整理も大事

オートレイアウトを使って調整するのも大事な様子。ただグループにしただけだと、特に文字の配置がおかしなことになっていました。
今まで自分で余白数値とったりするから別にいっか、ってそんなに気にしていませんでしたが、AIに実装させるならしっかりFigmaの機能を活用しないと精度の悪いものしか出てこなくてイライラ！！！なんてことになりそう。

私は最近の機能まで追えてないので、もっとFigma自体の使い込みをしていこうと思っています。

リキッドレイアウトの実現がとても楽だった

マージンやパディングは最近可能な限りclampで指定していますが、自分で書いていた頃はMin-Max-Value Interpolation を使いながら地道に書いていました。
それがスラッシュコマンドで自動化できるのは超感動ですね………！今回作ったスラッシュコマンドはこちら。

# clamp 計算コマンド

SP値とPC値から `clamp()` の計算結果を出力します。

## 使用方法

/clamp [SP値] [PC値]

引数は `px` 付きでも数値のみでも可。

## 計算仕様

- **ビューポート範囲**: 390px（min）〜 1080px（max）
- **出力**: rem単位の `clamp()` 関数

## 計算式

clamp(min-size, preferred-value, max-size)

preferred-value = a + b
  b = (max-size - min-size) ÷ (1080 - 390) × 100vw
  a = min-size - (max-size - min-size) ÷ (1080 - 390) × 390

## 計算手順

ユーザーから `$args` として SP値とPC値を受け取ったら、以下を計算して出力:

1. SP値を `min-size`（px）、PC値を `max-size`（px）とする
2. `b = (max-size - min-size) ÷ 690 × 100` → vw係数
3. `a = min-size - (max-size - min-size) ÷ 690 × 390` → px値 → remに変換（÷16）
4. 各値をremに変換:
   - min-size(rem) = min-size ÷ 16
   - max-size(rem) = max-size ÷ 16
5. 結果を `clamp(min-size(rem), a(rem) + b(vw), max-size(rem))` の形式で出力

## 計算例

### 例1: フォントサイズ 20px → 22px

入力: `/clamp 20 22`

計算:

b = (22 - 20) ÷ 690 × 100 = 0.29vw
a = 20 - 2 ÷ 690 × 390 = 18.87px = 1.179rem
min = 20 ÷ 16 = 1.25rem
max = 22 ÷ 16 = 1.375rem

出力:

clamp(1.25rem, 1.179rem + 0.29vw, 1.375rem)

### 例2: 余白 30px → 40px

入力: `/clamp 30 40`

計算:

b = (40 - 30) ÷ 690 × 100 = 1.449vw
a = 30 - 10 ÷ 690 × 390 = 24.35px = 1.522rem
min = 30 ÷ 16 = 1.875rem
max = 40 ÷ 16 = 2.5rem

出力:

clamp(1.875rem, 1.522rem + 1.449vw, 2.5rem)

## 注意事項

- 小数点は3桁まで（四捨五入）
- SP値 > PC値の場合も対応（縮小するclamp）

プロンプト自体もClaudeに「最小値は390pxで、最大値は1080px、ベースのフォントサイズは16px」という情報だけ与えて作ってもらいました。
他にもline-heightを考慮したマージン・パディングを作るスラッシュコマンドも作ってみたり、細かい面倒な作業をいかに楽にするかを考えました。

動的な挙動の実装

ホバーしたら透明度が変わるとか、色が変わるみたいな簡単なものは何も考えずにスッとできますが、ちょっと複雑な動きが入ってくると自分で書くのは時間がかかります。
Figma MCPでインタラクションも取れるのかな？と思っていたけど、どうやらダメな模様。自分で依頼を出すには言語化も難しい。
自分で組むしかないのか………？ってある種の覚悟をしたものの、ふと 動画からプロンプト作るってできないのか？ と思い立ち、やってみることに。

まずはMacの標準機能でホバーの動画を撮ります。撮った動画をClaudeのチャットに渡して、解析してもらいます。
渡したのはホバーアニメーションの動作を、Claude Codeに渡すプロンプトとして作ってというプロンプト。

そこから出されたプロンプトを見て、ちょっと荒いなって思ったら「フレームをもっと細かく見て」って指定するとよいです。最初に細かくフレーム見るように書いておくのもいいですね。

今回は2回目に出たプロンプトで大成功でした！！！動作する秒数なんかも正確だったのは意外でした。（さすがにそのあたりの調整は自分でやるか？と思っていたので）

まとめ

がっつり実装だけじゃなく、スラッシュコマンドや動的な挙動などの小さい実装まで満遍なく頼めてAIコーディングありがたい限り。
とは言え、自分でチューニングしないと逆に効率悪くなったりするなとも感じているので、Best Practices for Claude CodeやXに日々流れてくるやってみた系を取り入れながらブラッシュアップしていきたいなと思っています。