デザインカンプ解釈

実装レイヤー選定（dzero-tech-selection）を経ていない場合は先にそちらを読むこと。

原則: デザインデータの数値は「結果」であって「仕様」ではない

デザインデータから読み取るべきは意図（可変か固定か、何に整列しているか、余白は何との関係か）であり、表示されている数値そのものではない。

• 要素の width / height をデザインの数値のまま固定値で書かない。可変を前提にレスポンシブに落とし込む
• デザイン上の X/Y 座標を top / left（inset-*）にそのまま変換しない
• 値を書くときは何を基準にした値なのかを計算式で明示する（dzero-css の値のルールに従う）
• 行高が絶対値（例: 24px）で指定されていても、そのまま line-height: 24px と書かず font-size との比率（例: calc(24 / 16) = 1.5）に変換する <!-- 暫定ルール: stylelint（declaration-property-unit-disallowed-list）による line-height の px 禁止を linters に提案中。導入されたらこの項目は削除する -->

デザインに描かれていない状態も実装対象

デザインカンプは通常デフォルト状態の静止画しかない。描かれていなくても以下は実装する。

• インタラクティブ要素の :hover と :focus-visible（キーボード操作時のフォーカス表示。詳細は dzero-a11y）
• エラー・空・長文（折り返し・はみ出し）などの状態はデザインに定義がなければユーザーに確認する

デザイントークンへの対応付け

• 色などの値はプロジェクトのカスタムプロパティ（__assets/_libs/style/base/root.css の :root に定義。Figma のバリアブルもここに定義される）に対応付けて使う
• デザイン側でバリアブル・スタイルが設定されていない値でも、直接書かずに対応するトークンがないか先に探す <!-- 暫定ルール: stylelint（declaration-strict-value 系）によるトークン強制を linters に提案中。導入されたらこの項目は削除する -->

アセット（画像等）の扱い

• 画像の書き出し・変換は自分で行わず、ユーザーに依頼する（エージェントが行うと著しく遅いため。作業分担のルール）
• 配置されたファイルの命名は [種類]-[修飾語・詳細]-[連番]@[解像度].[拡張子]（[種類] と [拡張子] は必須）。種類は bg / pict / thumb / hero / banner / text / logo / icon / obj から選ぶ（メディア: 画像）
• フォーマットは可能であれば AVIF・WebP を採用する。ベクターデータがあるものは SVG を採用する
• 画像をページやコンポーネントごとのサブディレクトリに分けない（共通で使い回すか将来わからないため）