コーディングサービスにおけるFigmaデータに関するガイダンス

※弊社では、デザインデータはFigma形式でのみ受け付けております。他形式（Adobe XD、Sketch、画像データ等）でのご提供には対応しておりませんので、ご了承ください。

この文書は、コーディング業務を効率的かつ正確に進行するために、Figmaデータの受け渡し時に留意いただきたい点をまとめたガイドラインです。

以下のようなデザインカンプは、Figma本来の効率性を活かしきれず、コーディング工数の見積もりに大きな誤差が生じる可能性があります。
また、制作前の検証作業にも多くの工数が必要となるため、以下の対応をお願いしております。

全体的な注意点

特に、レスポンシブ対応（ブレークポイント間のリキッド部分）において、動作仕様の不足が多く見られます。

画面幅に応じてどの要素が縮小・改行・非表示になるのか、基準点（中央・左寄せなど）がFigmaの機能で設定可能であるにもかかわらず明示されていないなど、レイアウトの動作ルールが共有されていないケースが散見されます。

このような状態では、制作者側で仕様を類推せざるを得ず、実装時のズレや再修正の発生要因となります。

リキッド幅で変化する要素の可変ロジックや、左右・上下の整列ルール、要素の最小・最大幅などを、可能な限りFigma内で定義し、視認できる状態での共有をお願いいたします。

事前検証が必要と判断された場合

事前検証が必要と判断された場合は、別途お見積もり・ご請求とさせていただきます。

また、事前検証の結果、制作工程に進むために修正が必要な問題点が発見された場合、その内容はご依頼者様側での修正をお願いしております。修正内容をご対応いただけない限り、次の制作工程に進行することはできません。

なお、当方にて修正を代行する場合には、別途工数と日数が必要となります。こちらも追加見積もり・追加納期としてご相談させていただきます。

また、諸事情により事前検証が難しい場合には、制作工程中に発覚した「工数追加ポイント」1点につき、30分相当の追加工数として後日ご請求させていただきます。

※都度のご確認や対応においてもコミュニケーションコストが発生するため、追加工数の妥当性についての個別交渉には応じかねます。

工数追加ポイントの具体例

以下に挙げる内容は、実際に追加工数が発生しやすい項目の一例です。 状況やデザイン全体の構造によって他にも該当するケースがあるため、これらに限らず事前の確認・調整を推奨します。

レイアウト・マージンまわり

  • マージンが不明瞭なコンポーネント
    • 例1：無作為なテキストレイアウト。Auto Layoutが適用されておらず、line-height等の影響でマージンが視認しづらい。
    • 例2：要素の折り返し（FlexやGridでの制御など）で表現すべき部分を、手動のテキスト改行（Shift + Enter等）で処理している。
  • 不要な透明レイヤーによって下の要素が隠れている
    • 例1：透明オブジェクトがコンテンツサイズに合わせて調整されておらず、視認性や操作性に影響している。
    • 例2：Auto Layoutなどを使用しておらず、レイヤーサイズが不適切なまま放置されている。

画像まわり

  • 書き出しが困難な画像
    • 例1：レイヤーのグループ化が不適切なため、画像の再グループ化や再編集が必要。
    • 例2：アイコンボタンなどで余白が考慮されておらず、視覚的には同サイズに見えても、タップ領域やオブジェクトサイズの統一がされていないため、再調整が必要。
    • 例3：画像や要素の「クリッピング」が完成しておらず、見えている範囲と実際のデータが一致していないため、書き出し時に不要部分が含まれてしまう。
    • 例4：大きな画面サイズに対応する際、背景画像などに必要な塗り足し（マージンや余白）が足りず、画像の端が切れたり、背景の境界が不自然に見えてしまう。
    • 例5：ボタンの背景画像などで、タップ領域にあたる部分が十分に確保されていない。
    • 例6：複数のブレンドモードが使われている箇所で、書き出し用画像パーツとしての考慮がされておらず、ブレンドモードごとの再グループ化が必要になる。
    • 例7：アニメーションや動的なテキストの増減などで、「ループ画像」が必要な箇所で、それが考慮された画像が用意されていない。

UI操作・インタラクション

  • ボタンやメニューのタップ領域が考慮されていない
    • 例1：ボタンやメニューの境界が不明瞭。
    • 例2：サイズの規則性がAuto Layoutなどで表現されておらず、バラバラになっている。
  • 動的なデザイン仕様が定義されていない
    • 例1：ホバー時の挙動が未定義。
    • 例2：アクティブ・フォーカス時のスタイルやアニメーション仕様が抜けている。
    • 例3：スクロールに伴うアニメーション（フェードイン・スライドイン等）や、パララックス効果などの演出仕様が定義されていない。

デザイン整合性・デバイス間考慮

  • PC版とSP版デザインの大きな乖離
    • 例1：PCとSPのデザイン構造が著しく異なり、並行して比較検討されていない。
  • フォント検証が未熟
    • 例1：フォント最適化がなされておらず、Mac環境に依存した設計になっている。
    • 例2：WindowsやAndroidなど、他のOSへの視認性やレンダリングが考慮されていない。
    • 例3：商用利用に適さないフリーフォントが指定されている、あるいはライセンス未確認のままのフォントが使用されている。

レイヤー構造・再編集性

  • レイヤー構造が非効率・非実用的
    • 例1：レイヤー階層が深すぎて該当要素へのアクセスが困難になっている。
    • 例2：見出しやタイトルなどが1文字ずつバラバラのテキストレイヤーとして作成されており、再編集・解析に手間がかかる。
  • その他、再編集が必要と判断される箇所・コンポーネント