FIGMA GUIDELINE
必須となるのは、Auto Layoutだけです
AI駆動HTMLコーディング代行サービスをご利用いただくために、必須となるFigmaの設定はAuto Layoutです。その他の項目は、より正確にパーツ化・モジュール化するための推奨事項です。
REQUIREMENTS
Auto Layout以外が未対応でもご相談いただけます。整理されているほど、共通部品や状態を正確に判別できます。
01
要素の並びと余白を、構造として読み取れるようにします。
02
再利用するUIと、実装する状態を明確にします。
03
ページ・部品・レイヤーの役割を判別できる名前にします。
04
同じ役割の色を共通値として扱えるようにします。
05
対応するページと部品の関係を画面幅ごとに揃えます。
06
完成版とラフ・旧案を明確に区別します。
02〜06は推奨事項です。未対応の場合もご相談いただけます。Tailwind向けの値調整や特別なプラグインは必要ありません。
ESSENTIALS
Auto Layoutは必須項目として、その他の5項目は実装精度を高める推奨項目としてご案内します。
複数要素で構成されるまとまりは、Auto Layoutで関係を定義してください。
要素同士の並びと余白を構造として読み取れるため、文字量や画面幅が変わっても崩れにくい実装につながります。
Figmaヘルプセンター
複数箇所で使うUIは、コンポーネントとインスタンスで管理してください。
共通部品と状態が明確になり、ページごとの別実装を防ぎ、修正を関連ページへ反映しやすくなります。
Figmaヘルプセンター
ページ・部品・主要レイヤーは、用途を判別できる名前にしてください。
見た目だけでは分からない構造を、人とAIの双方が名前も手掛かりに判断できます。
Figmaヘルプセンター
サイト内で使用する色は、スタイルまたは変数として整理してください。
同じ色を共通値として扱えるため、実装後の一貫性を保ち、変更もしやすくなります。
Figmaヘルプセンター
同じページと部品が、画面幅ごとに対応している状態にしてください。
同じHTML・コンポーネントを画面幅に応じて変化させやすくなり、レスポンシブ実装の分断を防げます。
Figmaヘルプセンター
完成版とラフ・旧案を区別し、コード化する画面を明確にしてください。
誤った画面や古い案を参照するリスクを減らし、実装対象を正しく確定できます。
Figmaヘルプセンター
SPECIFICATION
動作や条件は、コメント・アノテーション・仕様書など、判別できる方法で補足してください。表現方法を統一する必要はありません。
01
リンク先、開閉、選択、送信など、操作後に何が起きるかを補足してください。
02
開始条件、終了状態、繰り返しの有無など、画面だけでは判断できない動きを示してください。
03
画面幅、ログイン状態、入力内容、件数など、表示が変わる条件を共有してください。
04
通常状態以外に表示する文言、画像、ボタン等を明示してください。
05
スライダーや一覧の件数が少ない場合など、表示や動作が変わる条件を示してください。
06
更新可能部分、任意項目、欠損時の扱いなど、データによる変化を補足してください。
CHECKLIST
必須項目はAuto Layoutです。その他の項目は、可能な範囲でご確認ください。
CONTACT
デザイン作成途中でも、代表ページやサイトマップがあればご相談いただけます。
Figmaヘルプセンター
