デザインカンプが出来上がったら、実装をどこに任せるかを考えるタイミングです。Figma・XDのデータからコーディングを外注する場合、事前に流れを把握しておくとやり取りがスムーズになります。
依頼から納品までの一般的な流れ
01ご相談・要件確認(ページ数、レスポンシブ対応範囲、CMSの要否など)
↓02デザインデータの共有(Figma・XDの閲覧権限を付与)
↓03お見積もり・納期の提示
↓04実装作業
↓05納品・検収(表示崩れやリンク切れがないかの最終確認)
依頼前に準備しておきたいこと
Figma・XDのデータは、レイヤー名やコンポーネントが整理されているほど実装がスムーズに進み、結果的に費用や納期にも良い影響があります。特に以下の点は事前に整えておくと安心です。
- PC・タブレット・スマホなど、必要なブレイクポイントのデザインを用意する(全画面サイズ分が理想だが、最低でもPCとスマホは欲しい)
- ホバー時・クリック時など、状態ごとのデザインがあれば併せて共有する
- フォントファイル、またはWebフォントの利用可否を明確にしておく
- 使用する画像素材(実データ or ダミー)を整理しておく
- CMS化する場合、どの項目を管理画面から更新できるようにしたいかを整理しておく
コミュニケーションで意識したいこと
デザインの「意図」を伝えることも重要です。単に見た目を再現するだけでなく、なぜその余白・配色にしたのかという狙いを共有しておくと、実装側が細部の判断に迷ったときに、デザインの方向性を崩さない選択がしやすくなります。たとえば以前担当したコーポレートサイトの新規制作では、ヒアリングシートを基にしたワイヤーフレーム設計の段階から関わることで、参考サイトを踏まえたブランドカラーの意図まで実装に反映することができました。
事例:イベント企画会社のコーポレートサイト新規制作ZEROVENTUREでは、Figma・XDのデザインデータからの実装を専門に対応しています。データの状態を拝見した上で、進め方のご提案も含めてご相談に乗ります。