Figma・XDのコーディング見積りで金額が変わる5つのポイント

「デザインは1ページだけなのに、なぜ見積り金額に幅があるのだろう」

FigmaやXDで作成したデザインのコーディングを依頼するとき、このように感じる方もいらっしゃるかもしれません。

コーディングの作業量は、単純なページ数だけでは決まりません。同じ1ページでも、ページの長さ、スマートフォン用デザインの有無、アニメーションやフォーム、納品方法などによって必要な作業が変わります。

今回は、デザインデータからコーディングを依頼するときに、見積り金額へ影響しやすい5つのポイントを整理します。

1．ページ数とページの長さ

最初に確認するのは、ページ数と各ページのボリュームです。

例えば、同じ「1ページのLP」でも、5セクション程度の短いページと、商品説明・実績・料金・FAQなどが続く長いページでは、実装するパーツの数が異なります。

複数ページのサイトでは、ページ数だけでなく、異なるレイアウトが何種類あるかも作業量に影響します。

・トップページ：1ページ

・共通レイアウトの下層ページ：3ページ

・個別デザインの下層ページ：2ページ

・お問い合わせページ：1ページ

このように整理すると、共通部分と個別に実装する部分を確認しやすくなります。

見積りを依頼するときは、FigmaやXDの共有URLだけでなく、「全部で何画面あるか」「同じレイアウトを使うページがあるか」も伝えるとスムーズです。

2．パソコン・スマートフォン用デザインの有無

パソコン用とスマートフォン用のデザインが揃っている場合は、それぞれの見た目を基準にレスポンシブ対応を進められます。

一方、スマートフォン用デザインがない場合は、画面幅が狭くなったときの並び順、余白、文字サイズ、画像の見せ方などを決める必要があります。

この調整をコーダー側へ任せる場合は、どこまで判断してよいかを事前に共有しておくことが大切です。

例えば、次のような希望があると判断しやすくなります。

・2列の要素はスマートフォンで縦に並べる

・表は横スクロールできるようにする

・装飾画像はスマートフォンでは非表示にする

・タブレット表示はコーダー側の調整に任せる

スマートフォン用デザインがないこと自体が問題なのではありません。ただし、デザインされていない部分の調整方法によって確認事項と作業量が変わるため、見積り前に相談しておくと安心です。

3．アニメーションやJavaScript機能

デザインカンプだけでは、動きの内容を判断できない場合があります。

例えば、次のような実装が必要かどうかで作業量が変わります。

・ハンバーガーメニュー

・アコーディオン

・タブ切り替え

・画像スライダー

・スクロールに合わせた表示

・モーダルウィンドウ

・絞り込みや並び替え

「ふわっと表示させたい」「参考サイトと同じ動きにしたい」という場合は、対象箇所と参考URLを共有すると認識を合わせやすくなります。

基本的なメニューやアコーディオンと、複数要素が連動する複雑なアニメーションでは、必要な実装と確認時間が異なります。

見積り時には、必要な動きを一覧にして伝えるか、デザインデータ内に注釈を入れておくとスムーズです。

4．フォーム・WordPress・既存サイトへの組み込み

HTML・CSSで画面を作成する作業と、フォームやWordPressへの組み込みは別の工程です。

例えば、次の作業が必要な場合は、最初の相談時に伝えておきます。

・お問い合わせフォームの設置

・送信確認・自動返信メールの設定

・WordPressオリジナルテーマへの組み込み

・お知らせや実績を更新する管理画面の作成

・既存サイトへの追加・差し替え

・サーバーへのアップロードや公開切り替え

静的なHTML・CSS一式で納品する場合と、WordPressで更新できる状態まで仕上げる場合では、納品時の状態が異なります。

「最終的に誰が、どこへ設置するのか」「公開後にどの内容を更新したいのか」を共有すると、必要な対応範囲を整理しやすくなります。

5．納期とデザインの確定状況

希望納期と、デザインや素材がどこまで確定しているかも見積りに影響します。

短期間での納品では、実装だけでなく、依頼者側の確認と修正に必要な日数も考える必要があります。

また、コーディング開始後に次のような変更がある場合は、追加作業になることがあります。

・セクションの追加・削除

・レイアウトの大幅な変更

・スマートフォンデザインの差し替え

・アニメーションや機能の追加

・原稿量や画像比率の大きな変更

余白や文字サイズなど、デザインとの差異を直す修正と、確定後の仕様変更は分けて考えると、対応範囲が分かりやすくなります。

公開希望日だけでなく、初稿確認日や修正期間も含めてスケジュールを相談すると安心です。

見積り相談時に共有したい内容

見積りを依頼するときは、次の内容を分かる範囲で共有すると、必要な作業を確認しやすくなります。

1. Figma・XDなどのデザインデータ

2. ページ数と各ページの種類

3. パソコン・スマートフォン用デザインの有無

4. 必要なアニメーションや機能

5. フォーム・WordPress・公開作業の有無

6. 希望納期

7. 実績としての掲載可否

すべて決まっていなくても問題ありません。未確定の項目を最初に共有すれば、決まっている範囲と追加確認が必要な範囲を分けて整理できます。

まとめ

コーディングの見積り金額は、ページ数だけでなく、主に次の内容で変わります。

1. ページ数とページの長さ

2. パソコン・スマートフォン用デザインの有無

3. アニメーションやJavaScript機能

4. フォーム・WordPress・既存サイトへの組み込み

5. 納期とデザインの確定状況

見積りに必要な情報を整理しておくと、依頼後の追加作業や認識違いを減らしやすくなります。

YOSHI CODEでは、Figma・XD・Photoshop・Illustratorなどの完成済みデザインをもとに、HTML・CSS・Sassでのコーディング、レスポンシブ対応、基本的なJavaScript実装をご相談いただけます。

デザインデータ、ページ数、ご希望納期を分かる範囲でお知らせいただければ、対応範囲を確認したうえでお見積りします。

▼ Figma・XDコーディングサービスはこちら