デザインをJSONに変換し、再現性の高いAIコーディングを実現する方法

はじめに

https://medium.com/@GeekSociety/7758adcb7404?sk=d38868bd1dff12b688faf5496b1e74b7

AIを使ったコーディングについて調べていた時に、気になる記事を見つけました。
興味深いアプローチでしたので、実際に試してみました。

コーディングの自動化を目指して、日々AIと向き合っているフロントエンドエンジニアの参考になれば幸いです。✨

コーディングの進め方

ステップ1: キャプチャーを撮る

まずは参考にしたいデザインのスクリーンショットを撮ります。

弊社で「AUNライブキャプチャ」というページ全体をキャプチャーできるChrome拡張を公開しているので、ぜひご活用ください。

https://chromewebstore.google.com/detail/aunライブキャプチャ/nklehcoamlgpnlljogplljnidlciimgo

ステップ2: デザインシステム JSON を作成

キャプチャーしたスクリーンショットをAIに送って、デザインの要素を構造化したJSON で表現してもらいます。

私はClaudeを使いましたが、ChatGPTやGeminiでも大丈夫です。

以下のプロンプトを使います（参考記事から引用・和訳）

これらのスクリーンショットの視覚的デザインを、実際のコンテンツを含まずに説明するJSONプロファイルを作成してください。

色彩、タイポグラフィ、スペーシングなどの全体的なデザインスタイル、要素の構造とレイアウト、
デザインの一貫性を保つためのルールやパターンにフォーカスしてください。

このJSONはAIに十分なコンテキストを与えて、
類似したデザインでスタイルを再現するために使用します。
スタイル、色彩、タイポグラフィ、スペーシング、レイアウトロジックなど、すべてを含めてください。

実際に生成されたJSONの例

自社のトップページ （www.phonogram.jp） のキャプチャーから生成した結果がこちらです。

生成されたJSON

{
  "designSystem": {
    "name": "Japanese Business Website Design Profile",
    "description": "Clean, professional Japanese website with illustrated elements and clear information hierarchy"
  },
  "colorPalette": {
    "primary": {
      "red": "#E53E3E",
      "redAccent": "#C53030",
      "description": "Main brand color used for CTAs, highlights, and key elements"
    },
    "secondary": {
      "orange": "#FF8C00",
      "orangeLight": "#FFB347",
      "description": "Secondary accent color for highlights and decorative elements"
    },
    "neutral": {
      "white": "#FFFFFF",
      "lightGray": "#F7F7F7",
      "mediumGray": "#E2E8F0",
      "darkGray": "#4A5568",
      "black": "#1A202C",
      "description": "Neutral palette for backgrounds, text, and structural elements"
    },
    "functional": {
      "errorRed": "#E53E3E",
      "successGreen": "#38A169",
      "warningYellow": "#D69E2E"
    }
  },
  "typography": {
    "hierarchy": {
      "h1": {
        "fontSize": "32px",
        "fontWeight": "700",
        "lineHeight": "1.2",
        "letterSpacing": "-0.5px"
      },
      "h2": {
        "fontSize": "24px",
        "fontWeight": "600",
        "lineHeight": "1.3",
        "letterSpacing": "-0.25px"
      },
      "h3": {
        "fontSize": "20px",
        "fontWeight": "600",
        "lineHeight": "1.4"
      },
      "body": {
        "fontSize": "16px",
        "fontWeight": "400",
        "lineHeight": "1.6"
      },
      "bodySmall": {
        "fontSize": "14px",
        "fontWeight": "400",
        "lineHeight": "1.5"
      },
      "caption": {
        "fontSize": "12px",
        "fontWeight": "400",
        "lineHeight": "1.4"
      }
    },
    "fontFamily": {
      "primary": "Noto Sans JP, Hiragino Kaku Gothic ProN, Meiryo, sans-serif",
      "fallback": "Arial, sans-serif"
    },
    "textColors": {
      "primary": "#1A202C",
      "secondary": "#4A5568",
      "muted": "#718096",
      "inverse": "#FFFFFF",
      "accent": "#E53E3E"
    }
  },
  "spacing": {
    "scale": {
      "xs": "4px",
      "sm": "8px",
      "md": "16px",
      "lg": "24px",
      "xl": "32px",
      "2xl": "48px",
      "3xl": "64px",
      "4xl": "96px"
    },
    "sectionSpacing": {
      "small": "48px",
      "medium": "80px",
      "large": "120px"
    },
    "contentSpacing": {
      "paragraph": "16px",
      "element": "24px",
      "component": "32px"
    }
  },
  "layout": {
    "container": {
      "maxWidth": "1200px",
      "padding": "0 20px",
      "margin": "0 auto"
    },
    "grid": {
      "columns": 12,
      "gutter": "24px",
      "breakpoints": {
        "mobile": "320px",
        "tablet": "768px",
        "desktop": "1024px",
        "wide": "1200px"
      }
    },
    "sections": {
      "hero": {
        "minHeight": "500px",
        "padding": "80px 0"
      },
      "content": {
        "padding": "60px 0"
      },
      "footer": {
        "padding": "40px 0"
      }
    }
  },
  "components": {
    "buttons": {
      "primary": {
        "backgroundColor": "#E53E3E",
        "color": "#FFFFFF",
        "padding": "12px 24px",
        "borderRadius": "6px",
        "fontSize": "16px",
        "fontWeight": "600",
        "border": "none",
        "cursor": "pointer",
        "transition": "all 0.2s ease",
        "hover": {
          "backgroundColor": "#C53030",
          "transform": "translateY(-1px)"
        }
      },
      "secondary": {
        "backgroundColor": "transparent",
        "color": "#E53E3E",
        "border": "2px solid #E53E3E",
        "padding": "10px 22px",
        "borderRadius": "6px",
        "hover": {
          "backgroundColor": "#E53E3E",
          "color": "#FFFFFF"
        }
      }
    },
    "cards": {
      "default": {
        "backgroundColor": "#FFFFFF",
        "borderRadius": "12px",
        "boxShadow": "0 4px 12px rgba(0, 0, 0, 0.1)",
        "padding": "24px",
        "transition": "transform 0.2s ease, box-shadow 0.2s ease",
        "hover": {
          "transform": "translateY(-4px)",
          "boxShadow": "0 8px 24px rgba(0, 0, 0, 0.15)"
        }
      },
      "feature": {
        "backgroundColor": "#FFFFFF",
        "borderRadius": "16px",
        "padding": "32px",
        "textAlign": "center",
        "border": "1px solid #E2E8F0"
      }
    },
    "illustrations": {
      "style": "flat",
      "characteristics": [
        "Simple, clean line art",
        "Friendly character designs",
        "Bright, cheerful colors",
        "Minimal shading",
        "Professional yet approachable"
      ],
      "colorScheme": {
        "skin": "#FFD4A3",
        "clothing": ["#4299E1", "#ED8936", "#48BB78"],
        "hair": ["#8B4513", "#2D3748", "#A0522D"],
        "objects": "#E2E8F0"
      }
    },
    "iconography": {
      "style": "outline",
      "strokeWidth": "2px",
      "size": "24px",
      "color": "#4A5568"
    }
  },
  "patterns": {
    "decorativeElements": {
      "checkeredBorders": {
        "pattern": "repeating diagonal red and white checks",
        "height": "20px",
        "colors": ["#E53E3E", "#FFFFFF"]
      },
      "speechBubbles": {
        "backgroundColor": "#FFFFFF",
        "border": "2px solid #E53E3E",
        "borderRadius": "20px",
        "padding": "12px 16px",
        "position": "relative"
      }
    },
    "contentBlocks": {
      "alternatingBackgrounds": {
        "odd": "#FFFFFF",
        "even": "#F7F7F7"
      },
      "sectionDividers": {
        "style": "subtle",
        "color": "#E2E8F0",
        "thickness": "1px"
      }
    }
  },
  "responsiveDesign": {
    "mobile": {
      "padding": "16px",
      "fontSize": "14px",
      "stackVertically": true,
      "hideSecondaryElements": true
    },
    "tablet": {
      "padding": "20px",
      "twoColumnLayout": true,
      "reducedSpacing": "75%"
    },
    "desktop": {
      "fullLayout": true,
      "maxContentWidth": "1200px"
    }
  },
  "animations": {
    "transitions": {
      "default": "all 0.2s ease",
      "slow": "all 0.3s ease",
      "bounce": "all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55)"
    },
    "hover": {
      "lift": "translateY(-2px)",
      "scale": "scale(1.02)",
      "glow": "0 0 20px rgba(229, 62, 62, 0.3)"
    }
  },
  "accessibility": {
    "colorContrast": {
      "minimum": "4.5:1",
      "preferred": "7:1"
    },
    "focusStates": {
      "color": "#E53E3E",
      "outline": "2px solid #E53E3E",
      "outlineOffset": "2px"
    },
    "textReadability": {
      "maxLineLength": "65ch",
      "minimumFontSize": "16px"
    }
  },
  "brandPersonality": {
    "tone": "professional yet friendly",
    "characteristics": [
      "Trustworthy",
      "Approachable",
      "Clear communication",
      "Solution-oriented",
      "Culturally appropriate for Japanese market"
    ],
    "visualStyle": [
      "Clean and organized",
      "Use of helpful illustrations",
      "Clear information hierarchy",
      "Consistent use of brand colors",
      "Balanced white space"
    ]
  }
}

ステップ3: コーディング実装

生成されたJSONを design.json としてプロジェクトに保存し、各ツールで以下のように参照します。

• Claude Code: @design.json でファイルを直接参照
• Cursor: @design.json でファイルをコンテキストに含める
• Gemini CLI: @design.json でファイルを直接参照

プロンプトは 要素やレイアウトを明確に指示すること がポイントですが、今回の主旨は デザインの再現性を高めること なので、要素の指示は適当でも大丈夫です。

エンジニア採用ランディングページをコーディングしてください。CSSはTailwindCSSを使用してください。

以下のセクションと要素を含めてください
- 魅力的な見出し、サブタイトル、主要CTAボタンを含むヒーローセクション
- 技術文化と福利厚生をアピールする会社の価値提案セクション
- 職種名、要件、給与を表示する募集職種セクション
- 写真、名前、役職、簡単な説明を含むチームメンバー紹介
- 使用している技術スタックを紹介するセクション
- ワークスペースの写真を含むオフィス環境セクション
- 応募から入社までのステップを示す採用プロセスのタイムライン
- 問い合わせ先と応募フォーム
- 会社リンクとソーシャルメディアを含むフッター

デザインの詳細については @design.json を参照してください

試してみた結果

実際にこの手法で作ってみた結果がこちらです。（Claude Code × Claude Sonnet 4）

元のデザイン	実際に生成されたページ

再現性の評価

試してみた結果、このアプローチの得意・不得意が見えてきました。
JSON化可能で再現度が低いものは、ステップ2のプロンプトを工夫することで改善できる可能性がありそうです。

デザイン要素	再現度	JSON化	課題・補足情報
配色・カラーパレット	✅ 良好	✅ 可能	数値で定義しやすく、正確に解釈・再現しやすい
タイポグラフィ	✅ 良好	✅ 可能	フォントサイズ、行間、文字色など数値・ルールで定義可能。ただし、フォントウェイトや任意改行の再現性に課題あり
特徴的パターン	🔶 普通	✅ 可能	構造化可能だが、複雑な組み合わせや微調整で再現度が変動
ボタン・カードデザイン	🔶 普通	✅ 可能	構造化可能だが、期待通りにならないことが多い
アイコンの網羅性	🔶 普通	🔶 部分的	必要なアイコンが不足することがあり、実装方法も統一されにくい
感情的トーン	❌ 困難	❌ 困難	親しみやすさ、温かみ、ブランド感など、抽象的・主観的要素は困難
写真素材	❌ 困難	❌ 困難	人物、オフィス環境など、具体的なコンテンツは生成・再現できない
イラスト	❌ 困難	❌ 困難	キャラクター、挿絵などは生成・再現できない

✅ この手法が有効な場面

• 管理画面・ダッシュボード
• Webサービスのランディングページ
• デザインシステムの構築・共有

❌ この手法が有効でない場面

• ビジュアル重視のクリエイティブサイト
• ブランド固有のイラスト・写真が重要なサイト
• 感情的な訴求力が必要なマーケティングページ

おわりに

今回試した デザイン構成をJSONとして抽出・活用する手法 は、まだ発展途上ながら、可能性を感じるアプローチでした。デザインの再現性を高めながら効率よくコーディングを進めるうえで、有効な選択肢となるかもしれません。

ただし現状では、感情的トーンや複雑なビジュアル要素の再現には課題があり、AIと人間が協調する「ハイブリッド」なアプローチが現実的 だと考えられます。AIが得意とする作業を任せ、人間は創造的で複雑な調整に集中するという分業体制です。

プロンプトやツールの工夫、そして今後のマルチモーダルAIの進化によって、より高精度なアウトプットが期待できそうです。

もし「こんなやり方もあるよ！」というアイデアがあれば、ぜひ教えてください。🙏