制作会社・Webデザイナー向け｜コーディング外注で認識違いを防ぐ対応範囲の決め方

Webサイトのデザインが完成し、コーディングだけを外注したいとき、「どこまでお願いできるのか」が分かりにくいことはありませんか。

ひとことでコーディングといっても、HTML・CSSの作成だけを指す場合もあれば、スマートフォン対応やJavaScript、WordPressへの組み込み、サーバーへの反映まで含める場合もあります。

対応範囲が曖昧なまま進めると、見積り後に追加作業が必要になったり、納品時に想定していた状態と違ったりすることがあります。

今回は、制作会社様やWebデザイナー様がコーディングを外注するときに、最初に決めておきたい対応範囲を整理します。

【1．基本のコーディング範囲を確認する】

まず確認したいのは、基本料金に何が含まれているかです。

一般的なコーディング作業としては、次のような内容があります。

・HTMLによるページ構造の作成

・CSS・Sassによるレイアウトや装飾の実装

・パソコン・スマートフォンのレスポンシブ対応

・ハンバーガーメニューやアコーディオンなどの基本的な動き

・主要ブラウザでの表示確認

ただし、対応するブラウザ、タブレット表示、アニメーションの範囲などは、依頼先によって異なります。

「スマートフォン対応込み」「基本的なJavaScript込み」のように、見積りの段階で含まれる内容を確認しておくと安心です。

【2．デザインに含まれていない部分の扱いを決める】

コーディングは、基本的に完成したデザインをブラウザ上で再現する作業です。

そのため、デザインにないページやパーツを追加する場合、コーダー側で判断して作成してよいのか、デザイナー側で追加デザインを用意するのかを決めておく必要があります。

特に確認しておきたいのは、次のような部分です。

・スマートフォン用デザインがない場合のレイアウト

・ホバー時やメニュー展開時の見た目

・エラー画面や送信完了画面

・文章量が増減した場合の表示

・デザインに記載されていないアニメーション

コーダーにレイアウト調整を任せる場合も、「デザイン制作まで含まれる」という意味ではありません。判断が必要な箇所を先に共有し、どちらが対応するかを決めておくことが大切です。

【3．ページ数ではなくレイアウト数も伝える】

見積りでは、ページ数だけでなく、異なるレイアウトがいくつあるかも作業量に影響します。

例えば、下層ページが5ページあっても、すべて同じレイアウトで文章と画像を差し替える場合と、5ページすべてが異なるデザインの場合では、必要な作業時間が変わります。

依頼時には、次のように整理すると伝わりやすくなります。

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

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

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

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

ページ一覧やFigmaの画面一覧を共有するだけでも、見積りの精度を上げやすくなります。

【4．修正と仕様変更を分けて考える】

制作中の修正には、大きく分けて「デザインとの差異を直す修正」と「決定後の内容を変更する仕様変更」があります。

例えば、余白や文字サイズがデザインと異なる場合は、通常は差異修正として扱います。一方、コーディング開始後にレイアウトを変更したり、セクションや機能を追加したりする場合は、追加作業になることがあります。

依頼前に、次の点を確認しておくとトラブルを防ぎやすくなります。

・修正回数の目安

・修正として対応される範囲

・デザイン変更時の追加費用

・追加作業が発生する場合の確認方法

修正回数だけでなく、「どのような変更を修正に含めるか」を共有しておくことが重要です。

【5．WordPress化や公開作業は別工程か確認する】

HTML・CSSでページを作る作業と、WordPressへの組み込みやサーバーへの公開は別の工程です。

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

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

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

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

・既存サイトへの組み込み

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

「コーディング後、そのまま公開できる状態まで必要なのか」「HTML・CSS一式の納品でよいのか」によって、見積りと納期が変わります。

【6．納品形式と確認方法を決める】

納品方法も案件によって異なります。

ZIPファイルで受け取るのか、Gitで共有するのか、テスト環境へアップロードして確認するのかを事前に決めておくと、納品直前のやり取りがスムーズになります。

制作会社様の既存ルールがある場合は、次の内容も共有します。

・使用するCSS設計や命名規則

・Sassの使用有無

・対応ブラウザ

・ファイルや画像の命名ルール

・Gitのブランチ運用

・JavaScriptの実装方針

指定がない場合も、納品後に修正・運用しやすい構成になっているかを確認しておくと安心です。

【まとめ】

コーディングを外注するときは、ページ数と納期だけでなく、次の範囲を確認しておくことが大切です。

1. 基本料金に含まれるコーディング作業

2. デザインにない部分の対応方法

3. ページ数と異なるレイアウトの数

4. 修正と仕様変更の境界

5. WordPress化や公開作業の有無

6. 納品形式と制作ルール

すべての仕様を依頼前に確定する必要はありません。未確定の箇所を明確にしたうえで相談すれば、必要な作業を一緒に整理できます。

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

デザイン制作、原稿作成、画像選定、WordPress化、サーバー作業は基本のコーディングとは分け、必要な場合は対応範囲を確認したうえでお見積りします。

制作会社様のルールに合わせた実装や、継続的なコーディング外注についても、まずはデザインデータ・ページ数・ご希望納期を分かる範囲でお知らせください。

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