デザインは仕上がっている。あとはHTMLとCSSに起こすだけ。それなのに手が空かない ── コーディングの外注は、たいていこの状況から始まります。

デザイン制作やWordPress構築と違い、コーディングは範囲がはっきりしているぶん外に出しやすい工程です。一方で「どこまでがコーディングなのか」の線引きが会社ごとに違うため、そこを揃えないまま相見積もりを取ると金額がばらつきます。

コーディングだけを外注するのはどんなときか

依頼される場面は、だいたい次の4つに分かれます。

いずれも「デザインはある」という点が共通です。ここが企画やデザインから頼む場合と決定的に違い、費用も期間も大きく変わります。

どこまでがコーディングの範囲か

会社によって線引きが違う部分です。見積もりを比べる前に、次の表のどこまでを含めるかを決めて伝えてください。

「レスポンシブ込み」と書いていない見積もりは、たいてい別料金です。単価だけを見比べると、あとから倍になることがあります。当サイトの1ページ15,000円はレスポンシブ対応込みです。

費用はどう決まるか

多くの会社がページ単価で出します。市場の目安は1ページ1.5万円〜8万円で、この幅は主に次の4つで動きます。

1. ページの縦の長さ … トップページやLPは情報量が多く、下層ページの2〜3倍になることがある
2. 動きの量 … スクロール連動のアニメーション、複雑なホバー、カルーセルの数
3. 対応ブラウザと端末 … 古いブラウザを含めると検証の時間が増える
4. デザインデータの状態 … レイヤーが整理されていない、余白が揃っていない、フォントが渡っていない

見落とされやすいのは4つめです。デザインデータの状態は、こちらの準備で変えられる唯一の項目で、そのまま金額と納期に返ってきます。

ページ数は「デザインが違う画面の数」で数える

実績が100件あっても、詳細ページのデザインが1種類なら1ページです。ここを100ページと伝えると、見積もりが実態と何倍もずれます。

数え方の基本は、トップページで1、下層の共通レイアウトで1、一覧で1、詳細で1。これに固有のデザインを持つページを足していきます。

渡すものを揃えておく

入稿の段階でここが欠けていると、確認の往復が発生して納期が伸びます。

• デザインデータ（Figma・XD・PSD）。共有リンクの場合は閲覧権限も
• 使用フォント。有償フォントはライセンスの扱いも合わせて
• 書き出し用の画像素材。デザインデータから切り出してもらう場合はその旨
• テキスト原稿。画像に焼き込まれた文字は選択できないので、別途テキストで
• 対応が必要なブラウザ・端末
• リンク先の一覧（まだ存在しないページがある場合はその扱い）

受け取ったコードをどう確かめるか

コーディングの品質は、見た目が合っているかだけでは判断できません。納品後に自社や別の会社が触ることを考えると、次の4点は見ておく価値があります。

1. 画面幅を変えて崩れないか

ブラウザの幅をゆっくり縮めて、途中で文字が重なったり、横スクロールが出たりしないかを見ます。指定された3つの幅だけで確認していると、その間で崩れていることがあります。

2. 見出しがタグとして書かれているか

見出しが div にサイズ違いのCSSを当てただけになっていると、検索エンジンからも読み上げソフトからもページの構造が読めません。ブラウザの検証ツールで h1〜h3 を確認します。

3. テキストが画像になっていないか

見出しやキャッチコピーが画像のままだと、あとから文言を直すたびに画像の作り直しが要ります。デザイン上どうしても画像にする箇所以外は、テキストで組まれているのが望ましい状態です。

4. class名に規則があるか

半年後に別の人が触るとき、class名に規則があるかどうかで作業時間が変わります。ページごとに命名がばらばらだと、CSSのどこを直すと何が壊れるかが読めません。

よくある失敗

単価だけで選んで、合計が高くなる

1ページ8,000円でも、レスポンシブが別料金、JavaScriptが別料金、画像書き出しが別料金と積み上がると、込みで15,000円のところより高くなることがあります。比べるのは単価ではなく、同じ範囲での合計です。

修正回数の数え方を確認していない

「修正2回まで」の1回が何を指すのかが書かれていないことがあります。誤字の指摘と、レイアウトの作り直しが同じ1回として扱われると、確認の途中で回数が尽きます。

デザインが未完成のまま入稿する

「あとで直すのでこのまま進めてください」で始めると、直したぶんが追加費用になります。コーディングは、デザインが確定してから着手するのがいちばん安く済みます。

納品形式を決めていない

ソース一式なのか、サーバーに設置した状態なのか。Sass を使っているならコンパイル前のファイルも受け取るのか。ここを決めないと、次に触るときに困ります。

ワプラボに外注する場合

デザインデータをご入稿いただき、HTML/CSSにコーディングします。

レスポンシブ対応（PC・タブレット・スマートフォン）、JavaScriptによる動きの実装、フォームの設置、ブラウザ表示確認までが範囲です。最短3営業日で納品でき、ご依頼の要件どおりに動作しない箇所の修正は回数を問いません。

デザインデータがまだ無い段階や、既にあるHTMLの調整だけといったご相談にも対応しています。

まとめ

• コーディングの範囲は会社ごとに違う。レスポンシブ・JS・フォーム・画像書き出しの4点を先に揃えて伝える
• 比べるのは単価ではなく、同じ範囲での合計
• ページ数は「デザインが違う画面の数」で数える
• デザインデータの状態は、こちらの準備で金額と納期を変えられる唯一の項目
• 納品物は、見た目だけでなく構造（見出しタグ・class名・画像文字）まで確かめる
• デザインが確定してから着手するのが、結果としていちばん安い

デザインデータの形式とページ数をお知らせいただければ、お見積りと納品日をご提示します。データがまだ無い段階のご相談でも構いません。