デザイナーとエンジニアが“同じ言語”で開発できる世界へ

はじめに

クライアントワーク中心のWeb制作ではデザイナーとエンジニア間のコミュニケーションギャップが、プロジェクトの速度や品質を左右します。

デザインカンプの色・余白が実装とズレる
Figma と CSS の命名規則が違う
ブレイクポイントやスペーシングの認識違い
案件ごとにゼロから設計し直す非効率さ
AI実装（MCPなど）を試しても、元のデザインデータが整っていないと上手くいかない

こうした背景から、 デザイナーとエンジニアが“同じ言語”で開発できる環境をつくるために生まれたのが、CSSフレームワーク FlonCSS です。

FlonCSSとは？

👉 https://floncss.dsflon.net/

FlonCSSは、ITCSSベースの堅実なCSS設計 × utility-first のスピードを両立した、ハイブリッドCSSフレームワークです。

インストール

npm install floncss

FlonCSSの特徴

ITCSS構造（Settings → Generic → Base → Objects → Components）
“全部 utility”にしない、ちょうど良い設計
モバイルファースト（@sm / @md / @lg / @xl）
デザインシステムと1対1で対応するCSS変数管理

デザインシステムとCSSフレームワークは、もっと仲良くできる

FlonCSSの核となる思想は、 FigmaとCSSを“同じ言語”にすること。

変数名の1対1対応

Figma Variables → FlonCSS CSS Variables（値の例）

color-primary
　↳ --color-primary （#08435E）

color-900
　↳ --color-900 （#000000）

color-100
　↳ --color-100 （#F5F5F5）

gutter/base
　↳ --gutter-base （32px）

font-size/2xl
　↳ --font-size-2xl （64px）

例1：カラー設定（Figma → CSS）

:root {
  --color-primary: #08435E;
  --color-primary-light: #DFEEF4;
  --color-900: #000000;
  --color-700: #333333;
  --color-500: #808080;
  --color-100: #F5F5F5;
}

Figma Variables

FlonCSS CSS Variables

例2：スペーシング設定（Gutters）

:root {
  --gutter-base: 32px;
  --gutter-2xl: 80px;
  --gutter-xl: 64px;
  --gutter-lg: 48px;
  --gutter-md: 16px;
  --gutter-sm: 8px;
  --gutter-xs: 4px;
}

Figma Variables

FlonCSS CSS Variables

この仕組みがもたらすメリット

Single Source of Truth を維持できる。
デザイナー「`--color-primary`でお願いします！」
→ エンジニア：そのまま使える。
ブランドカラー変更は **1箇所** 修正するだけ。
新規案件は **FlonCSSを複製して変数を調整するだけ**。
Figma上で「どの変数を使っているか」が明確（下図参照）。

FlonCSS MCP による“AI支援開発”

👉 https://www.npmjs.com/package/floncss-mcp

FlonCSSには、ClaudeなどのAIエージェントとつながるMCP（Model Context Protocol）サーバーも用意しています。

FlonCSS MCPが提供する機能

FlonCSSの設計思想・設定値・ユーティリティ一覧をAIに提供
`/floncss-setting` → settings.cssの生成
`/floncss-coding` → FlonCSS準拠のコーディング
`/floncss-refactor` → CSS/HTMLを自動リファクタリング

Figma MCP × FlonCSS MCP

1. Figma MCP → デザイン変数を抽出  
2. FlonCSS MCP → settings.css を自動生成  
3. 実装時もAIが最適なクラス構造を提案

新規案件のセットアップが一気に数分単位で完了します。

実践ワークフロー：コーポレートサイトの場合

1. デザインフェーズ

Figmaでデザインシステムを構築
変数名はFlonCSSと同じにしておくと最高にスムーズ

2. 設計フェーズ

npm install floncss

settings/ 配下の変数をFigmaの値に置き換えるだけ

3. 実装フェーズ（Objects × Utility）

<section class="mt mt:lg@xl">
  <h2 class="font:xl font:2xl@xl mb:md">サービス紹介</h2>
  <p class="font:base color:700">
    クライアントのビジネス課題を解決するWebソリューションを提供しています。
  </p>
  <a href="#" class="o-button:primary mt:md">詳しく見る</a>
</section>

クラスの意味

mt
 → margin-top: var(--gutter-base)

mt:lg@xl
 → 画面幅 1280px 以上では margin-top: var(--gutter-lg)

font:xl
 → font-size: var(--font-size-xl)

font:2xl@xl
 → 画面幅 1280px 以上では font-size: var(--font-size-2xl)

color:700
 → color: var(--color-700)