ズレは「ミス」ではなく「未定義」から生まれる

Figmaと実装の差分は、実装者の技量不足が原因ではありません。
多くの場合、次のような状態で発生します。

• 数値やルールが決まっていない
• 状態（hover / error / empty 等）が想定されていない
• SP時の振る舞いが曖昧
• 可変要素の上限・下限が決まっていない

つまり、ズレは「間違えた」結果ではなく、「決めていなかった」結果です。
FHWでは、この前提を共有した上で実装に入ります。

Figmaは「完成形」ではなく判断材料

FHWでは、Figmaを完成形の正解とは捉えていません。
Figmaはあくまで、

• 意図を共有するための設計資料
• 実装判断のための材料の一つ

という位置づけです。
そのため、Figmaどおりに再現すること自体を目的にするのではなく、構造・保守性・拡張性を優先した判断を行う場合があります。

ズレが出やすい代表的なポイント

実装ズレが発生しやすい箇所には、明確な傾向があります。

• セクション間の余白
• テキストの折り返し・行数
• hover / error / empty などの状態
• SP時の並び順・情報の優先度
• 件数増減や長文などの可変要素
• フォントサイズや行間の微差

FHWでは、これらを「後で気づくポイント」ではなく「最初に確認すべき項目」として扱います。

実装前に必ず整理する項目

実装に入る前に、次の項目を整理・共有します。

• 余白ルール（スケールの考え方）
• 状態を持つ要素と持たない要素
• 可変時の振る舞い（増減・長文化）
• SP / PCで変わる要素
• 表示優先度
• 省略・切り捨てのルール

これらを事前に定義することで、実装中の迷いや、後戻りを最小限に抑えます。

「再現しない」という判断も選択肢

Figmaどおりに再現しない判断をする場合もあります。
その際は、

• デザインの意図を理解したうえで
• 構造・実装の安定性を優先して調整する

という前提で判断します。
判断に迷う場合は、デザイナー・ディレクターへ確認し、必要に応じてお客様にも確認したうえで実装します。

役割分担と確認の流れ

ズレを防ぐために、役割は明確に分けます。

• デザイン側が決めること
• 実装側が判断すること

その境界が曖昧な場合は、実装側で抱え込まず、都度確認を行います。
確認は、

• グローバルナビ単位
• セクション単位

など、実装途中の段階で随時行うのが基本です。

このページで伝えたいこと

実装ズレは、防げます。
そしてその多くは、「決めていないこと」から生まれています。
FHWでは、ズレが起きてから修正するのではなく、起きない前提を構造として組むことで、実装の安定性と品質を支えています。