コーディング外注でよくある失敗と防ぎ方｜発注前に押さえるポイント

まず、よくある失敗を一覧にします。どれも技術の問題ではなく、情報の受け渡しの問題です。

発注前に、次の項目が文書で揃っているか確認してください。全部埋まっていなくても、「未定」と書いてあるだけで外注先は確認すべき点に気付けます。

• 全ページの一覧（ページ名・URL・テンプレート種別）
• PCとスマホのデザインデータ（または崩し方のルール）
• 共通パーツ（ヘッダー・フッター・ボタン・見出し）の指定
• 使用フォントと、Webフォントの有無
• アニメーション・スライダーなど動く要素の一覧
• CMS化の範囲（どの項目を誰が更新するか）
• 対応ブラウザと端末、保証する版
• 画像の書き出し形式とサイズの上限
• フォームの項目・送信先・自動返信の有無
• 納品形式（サーバーへ直接か、データ一式か）と検収方法

指示書の書き方はコーディング指示書・仕様書の作り方で、テンプレート付きで解説しています。

このチェックリストを、そのまま依頼文にした例です。コピーして、【】の部分を書き換えてお使いください。

件名：【案件名】コーディングのご依頼
■ 対象ページ：トップ1・下層【数】（ページ一覧を添付）
■ デザイン：PC版・スマホ版（スマホ版がないページは添付の崩し方ルールに準拠）
■ 動く要素：スライダー（トップ）、スクロール時のフェードイン（見出しのみ）
■ CMS：お知らせ・実績をWordPressで更新（更新担当はクライアント様）
■ 対応ブラウザ：Chrome／Edge／Safari／Firefoxの最新版、iOS・Androidの標準ブラウザ
■ フォーム：お問い合わせ1種（項目は添付）、自動返信あり
■ 納品：テストサーバーへ設置、検収後に本番へ反映
■ 未定の事項：【例：フォームの送信先アドレス】

最後の「未定の事項」の欄が大切です。決まっていないことを隠さずに書いておくと、外注先は見積もりの前提をそろえやすくなり、後からの追加費用も起きにくくなります。

「デザインどおりに作ってください」は、実は一番解釈が分かれる依頼です。

デザインデータは「ある画面幅で、ある文字量のとき」の見本でしかありません。文字が増えたとき、画面が狭いとき、画像の比率が違うときの振る舞いは、デザインには描かれていないことがほとんどです。

当社では、受け取ったデザインに対して「文字が2倍になったら」「画面幅が中途半端なとき」の扱いを最初に質問します。この質問への答えを先に用意しておくと、仕上がりのズレは大きく減ります。デザインデータの整え方はデザインデータの渡し方にまとめています。

もう一つ多いのが、デザインツール上の見た目とブラウザの表示の違いです。同じフォントでも、ツールとブラウザでは文字の太さや行の高さがわずかに変わります。ピクセル単位で一致させることを検収の基準にすると、終わりのない修正になりがちです。「どの程度のズレまで許容するか」「どこは厳密に合わせるか（ロゴ・メインビジュアルなど）」を発注時に決めておくと、検収がスムーズになります。

すべてのページのスマホデザインを用意するのが理想ですが、現実には難しいこともあります。その場合は、崩し方のルールを決めて渡すのが有効です。

ルールの例です。

• 横並びの要素は、768px未満で縦に並べる
• 表は横スクロールにする（文字を縮めない）
• 画像と文章の横並びは、画像を上・文章を下にする
• ナビゲーションはハンバーガーメニューにまとめる
• 本文の文字サイズは16pxを下限にする

このくらいの粒度で決めておくと、外注先が迷う場面が少なくなります。

なお、スマホでの見え方は実機で確認するのが確実です。ブラウザの開発者ツールで画面幅を変えるだけでは、文字の大きさやタップのしやすさまでは分かりません。確認に使う端末をあらかじめ決めておくと、「自分のスマホでは崩れている」という報告の食い違いを防げます。対応範囲の決め方は対応ブラウザの範囲の決め方で解説しています。

WordPressなどのCMSに組み込む場合、失敗が多いのは「更新できると思っていた箇所が固定だった」というケースです。

更新の自由度を上げるほど、管理画面の入力項目が増えて操作が難しくなる面もあります。更新する人のパソコンの得意・不得意も考えて、必要な範囲に絞るのが結果的に使われる仕組みになります。「全部更新できるように」は工数が大きく膨らむので、優先順位を付けて決めるのがおすすめです。WordPress化の範囲についてはWordPressサイト制作を外注するも参考にしてください。

失敗を防ぐ進め方の一例です。

1. 事前共有：上のチェックリストを埋めて資料を渡す
2. 質問の往復：外注先からの質問に回答し、曖昧な点をなくす
3. 見積もり・スケジュールの合意：範囲外の作業の扱いも決める
4. トップページを先に確認：共通パーツの方向性をここで合わせる
5. 下層ページの実装：トップで決めたルールを横展開する
6. 検収：確認項目を決めたうえで、まとめてフィードバックする

トップページだけ先に確認する工程を入れると、方向違いに早く気付けます。フィードバックは1件ずつ小出しにするより、担当者の間で意見をまとめてから一度に伝えるほうが、修正の重複や指示の食い違いを防げます。検収のやり方はWeb制作の検収チェックリストをご覧ください。

当社（RunLand）は制作会社様の下請けを専門に、コーディングやWordPress構築をお受けしています。着手前には必ず、上で挙げた項目のうち「未定」のものを洗い出し、一覧にしてお返ししています。

不明点を着手前に潰しておくほうが、結果的に納期も早くなるからです。修正依頼の伝え方を揃えておくと、さらに手戻りが減ります。詳しくは修正依頼の伝え方で解説しています。

また、作業中に判断が必要になった箇所は、その場で決めて進めるのではなく、選択肢を添えてご確認いただくようにしています。たとえば「この見出しが2行になる場合、行間を詰めるか、文字を小さくするか」といった形です。小さな判断でも積み重なると仕上がりの印象が変わるため、制作会社様の意図から外れないことを優先しています。

Q. デザインデータがスマホ版だけ・PC版だけでも依頼できますか？

A. 可能です。もう一方の崩し方をルールで決めていただくか、こちらから案を出して確認いただく形で進められます。

Q. 途中で仕様が変わったらどうなりますか？

A. 変更内容と影響（工数・納期）をお伝えし、合意のうえで進めます。着手前に変更時の扱いを決めておくとスムーズです。

Q. 納品後の不具合はどこまで対応してもらえますか？

A. 検収の基準と、納品後の修正対応の期間・範囲を事前に取り決めておくことをおすすめします。当社では発注時に確認しています。