実務では珍しくない依頼です。よくある形は次の3つです。

デザインカンプ → HTML/CSS化

最も一般的な形です。デザインが確定していて、実装だけを切り出します。範囲が明確なため見積もりも出しやすく、トラブルが起きにくい依頼です。

既存サイトのCSS改修

崩れの修正、レスポンシブの追加、デザインの部分変更などです。既存コードを読み解く時間が加わるため、新規より単価は上がりがちですが、部分的な依頼が可能です。

CSSのリファクタリング

継ぎ足しで肥大化した記述を整理する依頼です。見た目は変えずに構造だけ整えるため、「何をもって完了とするか」を事前に決めておく必要があります。

1. 対応する画面幅とブラウザ

ここが曖昧なまま進むと、納品後に「スマホで崩れる」というやり取りが発生します。最初にブレイクポイントと対応ブラウザを文書で共有してください。

「スマホ対応」という言葉だけでは、どの幅で切り替えるのか、横向きは考慮するのか、が伝わりません。数値で指定すれば認識のずれは起きません。

2. CSS設計のルール

命名規則、既存のCSS設計に合わせるのか新規で組むのか。既存サイトの改修では、これを伝えないと書き方が混在します。

特に指定がない場合でも、「既存のクラス名の付け方に合わせてください」と一言添えるだけで、後から読む人のコストが下がります。

3. デザインデータの渡し方

Figma、Adobe XD、PSD など、形式そのものより整理されているかどうかが重要です。余白・文字サイズ・色が定義されていれば、確認のやり取りが大幅に減ります。

逆に、レイヤー名が「グループ1」のまま、余白が目視でしか分からない状態だと、実装者は1つずつ確認するか、推測で進めるかになります。前者は時間が、後者は手戻りが発生します。

4. 納品範囲

HTML/CSS一式で納品か、WordPressテーマへの組み込みまでか。JavaScript の実装は含むのか。ここを曖昧にしたまま進めると、認識のずれが最後に出ます。

「コーディングをお願いします」という依頼だけでは、人によって想定する範囲が違います。着手前に、成果物の形を具体的に決めてください。

向いているケース

• デザインが確定していて、実装だけが残っている
• 社内のリソースが一時的に足りない
• 特定の実装（複雑なアニメーション等）だけ切り出したい
• 繁忙期だけ外部の手を借りたい

向かないケース

• デザインが固まっておらず、実装しながら決めたい
• 仕様が口頭でしか存在しない
• 短納期で大量の修正が想定される
• 発注側に確認・判断できる担当者がいない

後者は、外注そのものが悪いのではなく、やり取りの往復が増えて結局コストが上がるためです。デザインが固まっていない段階では、社内で進めた方が早いことが多くあります。

1. まず1ページだけ依頼して、書き方と精度を確認する
2. 問題なければ残りをまとめて依頼する
3. 継続するなら、月額の枠で契約に切り替える

いきなり全ページを依頼するより、1ページで相性を確かめる方が結果的に早く進みます。確認すべきは次の点です。

• クラス名の付け方が理解できるか
• レスポンシブの切り替えが意図どおりか
• 質問の内容が的確か（曖昧な点を放置していないか）
• 納期を守れるか

着手後の質問対応も、実は無視できないコストです。次を事前に共有しておくと、質問の回数が減ります。

• 参考サイト（動きや雰囲気の共有）
• 使用フォントとその入手方法
• 画像素材の提供方法と、書き出しはどちらが行うか
• テキストの確定・未確定の区別

特に4番目です。仮テキストのまま実装させ、後から本文に差し替えると、レイアウトが崩れて再調整になります。文字量が大きく変わる箇所は、先に確定させておく方が結果的に早く終わります。

• CSSだけの外注は成立する。ただし渡し方で品質と費用が変わる
• 画面幅・ブラウザ・設計ルール・納品範囲の4点を事前に決める
• デザインデータの整理が、そのまま見積もりに反映される
• まず1ページで相性を確認してから拡大する
• テキストの確定状況を共有すると手戻りが減る