第2章：Figma ✕ Cursor 標準ルール

モダン制作では、「Figma をいかに AI が解釈しやすい形で作り、Cursor に最短でコード化させるか」 が開発スピードを左右します。

Figma プロジェクト（フォルダ）構造

散らかりを防ぐため、チーム内に以下のフォルダ構成が用意されています。

00_Design System：全案件で使い回す共通ボタンやカラーパレット
01_Templates：ワイヤーフレームや LP の雛形ファイル
02_Clients：クライアント別の案件ファイル置き場
03_Internal：社内練習用スペース

ファイル命名規則

ファイル一覧を見ただけで「どのクライアントの、何の案件か」が分かるように統一します。

[クライアント名] 案件名 (用途/種別)

案件タイプ	ファイル名の具体例
企業・大学サイト	`[組織名] 2026年度学部改組LP` / `[組織名] コーポレートサイトリニューアル`
キャンペーン LP	`[ブランド名] 新商品発売記念LP`
社内共通	`[Design System] Tailwind-Tokens & UI-Kit`

ファイル内の Pages 標準構成

1つの Figma ファイル内は、左サイドバーの Pages を以下の並び順・命名で統一します。

Pages
├── 📌 Cover / Overview       # 表紙・案件概要・ステータス
├── 🎨 Tokens & Components    # カラーパレット・フォント・UIパーツ（ボタン等）
├── 📱 Designs (Desktop/SP)    # ★ 実装対象の確定デザイン（Cursor連携用）
├── 💡 Wireframe / UX         # 企画段階のワイヤー・構成案
└── 🗑️ Sandbox / Archive       # ボツ案・作業途中のパーツ置き場

Cover / Overview（表紙）

ファイル一覧で一目で状況が分かるよう、大きなフレームで 「案件名・担当者・GitHub リポジトリ URL・現在のステータス」 を記載します。

ステータス例：🟡 Wireframing / 🔵 In Design / 🟢 Ready for Dev / ⚪ Live (Done)

Tokens & Components

カラー（Tailwind の primary 等と一致させる）、タイポグラフィ、共通ボタンなどをまとめます。

Designs（本番デザイン）

Cursor でコーディングする際は、このページの URL（またはフレームの URL）のみを渡します。

ボツ案や実験中のフレームをここに残さないことで、AI の誤認を防ぎます。

Sandbox / Archive

検討中のアイデアや古いデザインはすべてここへ移動させ、本番ページを常にクリーンに保ちます。

フレームとレイヤーの命名ルール（Cursor 連携特化）

Cursor や MCP が Figma から Tailwind / Astro コードを自動生成する際、レイヤー名がそのまま HTML タグやクラス名、コンポーネント名に反映されます。

[ページ全体のフレーム] ──► `Page / Home`（横幅: Desktop 1440px / SP 390px）
    ├── 📦 `Header`
    ├── 📦 `Hero`
    ├── 📦 `AboutSection`
    │     ├── 📄 `SectionTitle`
    │     └── 📦 `FeatureCardList`
    │           ├── 🧩 `FeatureCard`
    │           ├── 🧩 `FeatureCard`
    │           └── 🧩 `FeatureCard`
    ├── 📦 `NewsSection`
    └── 📦 `Footer`

厳守すべきコーディング連携ルール

フレーム名に英語のコンポーネント名をつける
- NG: Frame 4829, Group 12, 長方形 1
- OK: HeroSection, NewsCard, PrimaryButton, ContactForm
Auto Layout（オートレイアウト）を 100% 適用
- 余白（Padding）や要素間の間隔（Gap）が Tailwind のクラス（p-6, gap-4 等）に直結します。
SP（スマホ）と PC を並べて配置
- 同一画面内に Desktop (1440px) と Mobile (390px) を左右に並べておくことで、Cursor に両方の URL / フレームを見せてレスポンシブコード（md:flex など）を一発で書かせることができます。

Figma の制作ルール

Cursor が Figma からコードを生成する際、構造が破綻しないための絶対ルールです。

Auto Layout（オートレイアウト）の徹底
- Absolute（絶対配置）の多用を禁止し、Flexbox に直結する Auto Layout でレイアウトを組む。
レイヤー命名を意味のある英語にする
- Frame 1234 や Group 5 は NG。Header, Hero, ServiceCard, PrimaryButton など HTML タグやコンポーネント名が推測できる命名にする。
変数（Figma Variables）の定義
- カラーコード（primary, secondary, text-dark）やスペーシング（gap-4, p-8）を変数化しておく。これにより Tailwind CSS のクラスに 1 対 1 で自動変換されます。

Cursor（Composer Agent）活用ルール

プロジェクトのルート（一番上の階層）に .cursorrules ファイルを配置し、Cursor がチームの標準ルールから外れたコード（例：勝手に React を入れようとする、CSS Modules を使う等）を書かないように強制します。

リポジトリに配置する `.cursorrules`（標準テンプレート）

プロジェクト開始時にリポジトリ直下に以下のファイルを作成します。

# プロジェクト開発規約 (Astro + Tailwind CSS + microCMS)

## 技術スタック
- Framework: Astro (最新バージョン)
- Styling: Tailwind CSS
- Data Fetching: microcms-js-sdk
- Hosting: Cloudflare Pages

## コーディング原則
1. Astro Islandsアーキテクチャを意識し、基本は `.astro` ファイルのみで完結させること（原則として不要なJavaScriptをブラウザに送らない）。
2. 動的なUI（モーダル、ハンバーガーメニュー等）が必要な場合、まずは軽量なvanilla TypeScriptまたは `<script>` タグで実装し、巨大なUIフレームワークを追加しないこと。
3. スタイリングはTailwind CSSのクラスのみを使用し、独自の`<style>`タグによるCSSは原則禁止とする。
4. レスポンシブ対応はモバイルファーストで記述すること（例: `text-base md:text-lg`）。
5. 画像は静的アセットには `astro:assets` の `<Image />` を使用し、width/height/altを必ず明記すること。
6. 型安全性を重視し、TypeScriptの `any` 型の使用は禁止。microCMSのレスポンスには必ず型定義を作成すること。