デザイン完成後にコーディングを外注するには？ 入稿・見積もり・検収のチェックリスト

デザインが完成していても、「スマホで見たときはどう並ぶか」「送信に失敗したらどう表示するか」まで画像から読み取れるとは限りません。コーディングを外注するときは、見積もりを頼む段階で、完成後に誰がどの操作をして合格とするかを書いておくと、依頼と検収の両方に使えます。

依頼範囲を決める。静的なLPか、更新できるサイトか

キャンペーン終了まで内容が同じLP

公開期間と原稿が決まったLPなら、デザインをHTML・CSSなどに実装し、指定環境に置く方法が候補です。確認したいのは、納品がファイル一式なのか、本番への反映まで含むのかです。既存フォームにリンクする場合と、同じページ内に新しいフォームを設ける場合でも作業量が変わります。

店舗や広報が更新を続けるサイト

WordPressで作るなら「自分で更新したい」だけでなく、担当者が変えたい情報と頻度を伝えます。たとえば「お知らせは広報が週1回追加」「各支店の営業時間は支店長が随時変更」と書けば、一覧の作り方や編集画面の要否が見えてきます。企画から整理する場合は、Web制作の要件定義と記入例も活用できます。

デザインに、画面だけでは伝わらない仕様を添える

スマホと中間幅で優先したい情報を決める

PCで横3列の商品カードは、スマホでは1列なのか、横に送って見るのか。スマホデザインが手元になければ、優先したい順番と、実装者に提案してほしい範囲を記入します。幅の広いPCと狭いスマホの2枚だけで判断しにくい場合は、タブレットでメニューが収まらなくなる場面も確認します。

Figmaの閲覧権限と操作時の状態を渡す

確定版のページ名をそろえ、画像の原本、フォントの利用条件、原稿、リンク先をまとめます。見た目が一枚のボタンでも、押せる状態、処理中、入力不足の状態をどう区別するかは別の仕様です。メニューの開閉、キーボード操作、エラー文言は、デザインのコメントや短い指示表に残せます。

同じ条件で見積もりを取る

ページ数・テンプレート数・公開作業をそろえる

「10ページ」でも、10種類のレイアウトを作る場合と、共通の詳細ページに9件の原稿を入れる場合では異なります。見積依頼には、ページの一覧、共通部分、フォーム、アニメーション、CMSへの登録件数、納品形式、希望日を書きます。料金を比較するときは、追加の原稿流し込みや公開立ち会いが含まれているかも確かめましょう。

入稿指示の記入例。セミナー申込LPの場合

以下は説明用の架空例です。仕様番号を付けると、「フォームを直してください」という連絡を、どの状態で何を期待したかまで具体化できます。

デザイン確定後に申込項目を増やす場合と、合意した必須チェックが動かない場合は、見積もり上の扱いが変わります。仕様変更と不具合修正の窓口を先に決めましょう。

納品時は、入稿時の指示に沿って検収する

完成画像との見比べに、実際の操作を加える

確認環境で画面幅を変え、長い見出し、メニュー、リンク、フォームを操作します。メールは送信成功の表示だけでなく、指定した受信箱に届くところまで確認します。修正依頼にはテスト日時、端末、ブラウザー、再現手順を添えると、担当者が同じ状態を作れます。

実際の更新担当者に引き渡す

管理者権限ではできても、日々使う担当者の権限では編集できないことがあります。担当者自身がテスト用の情報を一度更新し、プレビューから修正までできるかを確かめます。本番の申込者にテスト通知を送らないよう、検収の宛先も分けておきます。

公開と引き継ぎの担当を決める

公開予定時刻、反映担当、公開直後の確認担当、問題があったときの戻し方を1枚にまとめます。納品物には、実装データのほか、更新手順、ビルドが必要ならその方法、利用素材の注意点を指定しましょう。公開後の文章差し替えを自社で行う場合は、どのファイルや編集画面を使うかも引き継ぎます。

LP制作の全体の流れと照らして、依頼したい工程が決まったら、ページ数・デザインの進捗・公開希望日をお知らせください。ランサーズのコーディング・WordPress構築パッケージで対応内容を確認できます。