「デザインはFigmaで完成しているので、あとは実装だけお願いしたい」
Web制作のご相談では、こうしたケースもよくあります。
見た目のデザインが決まっていれば、制作はすぐ始められそうに見えます。ただ、実際にWebサイトとして動かすためには、デザインデータだけでは判断できないことも少なくありません。

たとえば、次のような内容です。

• スマートフォンではどのように表示するのか
• ボタンを押したときにどこへ遷移するのか
• メニューやモーダルはどう動くのか
• お知らせは誰がどのように更新するのか
• お問い合わせフォームの送信先はどこか
• 現在のサイトやサーバーをそのまま使うのか
• 公開作業は誰が担当するのか

こうした情報が最初にある程度整理されていると、見積もりの精度が上がり、実装開始後の確認や手戻りも減らしやすくなります。
この記事では、デザイン支給でWeb実装を依頼するときに、事前に整理しておくと進めやすいポイントを紹介します。

1. まず「どこまで実装するか」を整理する

最初に確認したいのは、今回の依頼範囲です。
たとえばコーポレートサイトであれば、次のように必要なページを一覧にしておくと分かりやすくなります。

• トップページ
• 会社情報
• サービス紹介
• 採用情報
• お知らせ一覧・詳細
• お問い合わせフォーム

Figma上にすべてのページが並んでいる場合でも、「このページは今回の対象」「これは既存ページを流用する」といった区別があると、見積もり時の認識差を減らせます。
また、似たページが複数ある場合は、共通レイアウトなのか、それぞれ個別に作る必要があるのかも実装工数に関わります。
まずは細かな技術仕様よりも、「今回どのページ・機能までを完成させたいか」 を明確にすることが大切です。

2. PC・スマホでの見え方を確認する

PC版のデザインは完成していても、スマートフォン版が用意されていないケースがあります。
その場合、実装側である程度判断してレスポンシブ対応することもできますが、次のような判断が必要になる部分があります。

• 要素の並び順
• 画像のトリミング
• 表や料金表の見せ方
• ナビゲーションの形
• PCでは横並びの要素をスマホでどう配置するか

スマートフォン用デザインがあるのが理想ですが、すべての画面サイズを細かくデザインする必要はありません。
「スマホではこの順番にしたい」「この画像は見切れても問題ない」など、特にこだわりたい部分だけでも共有しておくとスムーズです。

3. ホバーやアニメーションなど「動き」を共有する

静止画のデザインからは分からないのが、Webサイト上での動きです。

• ボタンにマウスを乗せたときの変化
• ヘッダーをスクロールしたときの挙動
• ハンバーガーメニューの開閉
• モーダル表示
• スライダー
• スクロールに合わせたアニメーション
• アコーディオンの開閉

動きまでFigmaで細かく作り込まれている必要はありません。
「ここはふわっと表示したい」「このエリアは横にスライドする」といったコメントや参考サイトがあるだけでも、実装側は意図を理解しやすくなります。
逆に指定がない場合は、実装側で一般的な挙動を提案してもらう方法もあります。

4. テキスト・画像・フォームなどの素材と仕様を整理する

デザイン上では仮の文章や画像が入っていることがあります。
実装を始める前に、次の素材が揃っているか確認しておくと安心です。

• 本番で使用するテキスト
• ロゴデータ
• 写真・イラスト
• Webフォント
• 動画
• ダウンロード資料

お問い合わせフォームがある場合は、見た目だけでなく次の仕様も決める必要があります。

• 入力項目
• 必須・任意
• 確認画面の有無
• 自動返信メール
• 管理者への通知先
• 送信完了後の表示

デザイン上にフォームが描かれていても、これらの仕様までは分からないことが多いため、実装担当者と早めに確認しておくのがおすすめです。

5. 「公開後に誰が更新するか」を決める

サイト制作では、公開後の運用方法によって実装方法が変わることがあります。
たとえば次のような情報を社内で更新したい場合、CMSを使えるようにしておくと運用しやすくなります。

• お知らせ
• 社員インタビュー
• 導入事例
• セミナー情報
• 採用情報

一方で、ほとんど変更しないページまで管理画面から編集できるようにすると、必要以上に仕組みが複雑になることもあります。
「どの情報を、誰が、どのくらいの頻度で更新するのか」を整理したうえで、更新が必要な範囲だけCMS化するのも一つの方法です。
公開時の見た目だけでなく、公開後の運用まで含めて考えると、使いやすいサイトになりやすくなります。

6. 既存サイトの改修では、現在の環境情報も重要

新規サイトではなく、既存サイトのリニューアルや一部改修の場合は、現在の環境についても確認が必要です。

• 現在利用しているCMS
• サーバーやホスティング
• ドメインの管理先
• ソースコードの管理方法
• お問い合わせフォームの仕組み
• アクセス解析
• 外部サービスとの連携

特に、既存のドメインやメールを継続利用する場合は、Webサイトだけを切り替えるつもりでも周辺設定への影響を確認する必要があります。
すべてを依頼側で調査する必要はありませんが、「どのサービスを使っているか分からない」という状態も含めて最初に共有しておくと、実装側が必要な確認項目を整理しやすくなります。

7. 公開作業を誰が担当するか決める

実装が終わったあと、どこまでを依頼するのかも確認しておきたいポイントです。

• 実装データの納品まで
• テスト環境への公開まで
• 本番環境への公開まで
• 公開後の確認・修正まで
• その後の保守運用も依頼する

制作会社や案件によって、範囲は異なります。
「実装だけ」という言葉が、コード納品までを意味するのか、本番公開までを意味するのかで認識がずれることもあります。
最終的にどの状態まで完成させてほしいのかを共有しておくと安心です。

8. すべてを完璧に決めてから依頼する必要はない

ここまでいろいろな項目を紹介しましたが、依頼前にすべてを完璧に決める必要はありません。
むしろ、Web制作に慣れていなければ「何を決めればよいのか分からない」のが普通です。
重要なのは、次の3つを分けて共有することです。

• 決まっていること
• まだ決まっていないこと
• 判断を相談したいこと

ブラキオでも、デザインを確認したうえで、実装に必要な仕様や確認事項を整理しながら進めることがあります。
「デザインはあるけれど、実装するために何を決めればいいか分からない」という段階でも、まずは相談いただければ、必要な項目を一緒に整理できます。

まとめ

デザイン支給でWeb実装を依頼するときは、Figmaなどのデザインデータに加えて、次のような情報があると制作を進めやすくなります。

• 実装するページ・機能の範囲
• PC・スマホでの見え方
• ホバーやアニメーションなどの動き
• 本番で使用するテキストや画像
• フォームの仕様
• 公開後に更新したい情報
• 既存サイトの環境
• 公開作業の担当範囲

最初からすべて決まっていなくても問題ありません。
未確定の部分を含めて共有し、実装担当者と確認しながら整理していくことで、手戻りを減らし、スムーズに制作を進めやすくなります。

ブラキオでは、デザイン支給でのWeb実装や、既存サイトの改修、CMSを含む企業サイト制作にも対応しています。実装範囲の整理から相談したい場合も、お気軽に株式会社ブラキオへお問い合わせください。