開発への間隔と階層の受け渡し
間隔・文字サイズ・階層を、開発が推測しない仕様にする
このデザインを、開発がそのまま使える仕様にしてください：[デザインの説明またはスクリーンショット]。要件：1）スペーシングのスケールを定義し（例：4/8/12/16/24/32）、このページが実際に使っている段だけを示す；2）ブロックごとに、外側マージン、ブロック間隔、要素の内側パディング、テキストとアイコンの間隔を列挙；3）文字サイズ・行高・字重の階層関係、および折り返し可能なテキストと折り返し後の揃え方を明示；4）正確に固定すべき箇所と柔軟でよい箇所を指定；5）狭い画面での値の変化を示す。「間隔は統一して」だけで終わらせないこと。
使い方
受け渡し前に一度通す。開発が「ここは何 px か」と聞き返す手間が減る。
向いている場面
- デザインを実装に渡す段階で、「ここは何 px か」と何度も聞かれる——間隔のスケール、文字階層、固定と柔軟の境界を一度に書いておけば終わる。
- 複数ページや複数プラットフォーム（Web とミニアプリ）で揃えたい——同じスケールの中で狭い画面の値を示し、各端が独自に決めるのを防ぐ。
向いていない場面
- デザインがまだ動いていて構造が固まっていない——注釈は次の改稿で全部無効になる。構造が固まってから行う。
- 必要なのはコンポーネントの実装（Flex のパラメータ、ブレークポイントのロジック）——受け渡しが渡すのは数値で、実装方法は開発の判断。越権しない。
例
入力
カードリストページ：上部にタイトルバー、絞り込み行、カード一覧（各カードにサムネイル、タイトル、2 行の説明、下部の操作）
得られるもの
まずスケール 4/8/12/16/24/32 を定義し、このページは 4・8・16・24 のみ使用と明記。ブロックごとに値を提示：左右マージン 16、タイトルバー高 56、絞り込み行とリストの間 12、カードの内側 16、サムネイルと文字の間 12。文字階層はタイトル 17／行高 24、説明 14／行高 22 で 2 行まで省略。正確に固定すべき箇所（カード内側、タップ領域 44 以上）と柔軟でよい箇所（カード間隔 8〜12）を分け、狭い画面の値も示す。
よくある誤用
- 「間隔は統一して」「デザインファイルを見て」だけで済ませる——開発は依然として推測するしかなく、注釈がないのと同じ。
- すべての値を固定 px で指定する——レスポンシブや長い文言の場面で即破綻する。柔軟にすべき箇所にはルールを書く。
こう変えると効く
- 「8pt グリッドから外れている値と、その理由を明記する」を足す——例外に理由があれば、後の保守でグリッド値に戻される事故が防げる。
- 「狭い画面の値」を「3 つの画面幅に対するブレークポイント表」に変える——スマホ・タブレット・デスクトップを一度にカバーし、二次的なやり取りが減る。