コーディングを外注するとき、
「デザイン通りに仕上がるかな？」
「納期までに仕上げてもらえるかな？」
「スマホ表示までちゃんと対応してもらえるかな？」
「修正はどこまでお願いできるんだろう？」
と不安になることはありませんか？

特に、デザイナーさんや個人ディレクターさんがコーディングを外注する場合、
依頼前の確認が少ないまま進めてしまうと、あとから認識のズレが出てしまうことがあります。

この記事では、コーディング外注でよくある失敗と、依頼前に確認しておきたいポイントをまとめます。
また、私が実際にコーディングをお受けする際に、トラブルや手戻りを減らすために行っている対策もあわせて紹介します。

「デザイナー側が頑張って全部準備しないといけない」という話ではなく、
外注先とスムーズに進めるための確認ポイントとして読んでいただければと思います。

コーディング外注で失敗が起きる原因は「認識のズレ」

コーディング外注で起きるトラブルは、
必ずしも「誰かが悪い」という話ばかりではありません。

多くの場合、

• どこまで対応してもらえると思っていたか
• どこから追加費用になるのか
• スマホ表示はどの程度まで作り込むのか
• 修正対応はどこまで含まれるのか
• デザインの再現度をどこまで求めるのか

といった部分の認識が、依頼する側とコーダー側でズレていることが原因です。

たとえば、依頼する側は
「スマホ対応も当然含まれている」と思っていても、
コーダー側は
「PCデザインをもとにした基本的なコーディングのみ」と考えて見積もっている場合があります。

このズレがあるまま進めると、
納期・費用・修正範囲で後からトラブルになりやすくなります。

だからこそ、コーディングを外注する前には、
最初の確認がとても大切です。

失敗1｜スマホ対応が含まれていると思っていた

コーディング外注でよくあるのが、スマホ対応・レスポンシブ対応の認識ズレです。

たとえば、PCデザインだけを渡してスマホはいい感じにと思って依頼した場合、依頼する側はスマホ表示まで整えてもらえると思っていても、コーダー側はPCデザインのみの対応として納期や料金を出していることがあります。

この認識がズレたまま進めてしまうと、完成後に「スマホで見るとイメージと違う」「余白や文字サイズを調整してほしい」「画像の見え方を変えてほしい」といった修正が増えやすくなります。

PCデザインだけの場合は、スマホ対応の範囲を確認する

PCデザインのみで依頼する場合は、スマホ表示をどこまで対応するのかを事前に確認しておくことが大切です。

確認しておきたいのは、たとえば以下のような内容です。

・スマホ表示もコーダー側で調整するのか
・タブレット表示まで確認するのか
・画像のトリミングや切り替えは必要か
・レスポンシブ対応は費用に含まれているか

私の場合、PCデザインのみをいただいたときは、まずスマホデザインの有無を確認します。

スマホデザインがない場合でも、レスポンシブ対応が必要か、どこまでこちらで判断してよいかを確認したうえで、納期や費用を計算するようにしています。

最初にここを確認しておくことで、依頼する側もコーダー側も「思っていた内容と違った」というズレを減らしやすくなります。

失敗2｜修正対応の範囲が曖昧だった

コーディング外注でトラブルになりやすいのが、
修正対応の範囲です。

たとえば、コーディング後に

• クライアントから文章変更が入った
• デザインの一部が変更になった
• セクションの順番が変わった
• 画像を差し替えることになった
• ボタンやリンク先が追加になった
• デザインデータのミスに気づいた

ということは、実際の制作現場ではよくあります。

このとき、依頼側は
「案件が完了するまでの修正だから対応してもらえるはず」
と思っているかもしれません。

一方で、コーダー側は
「最初にいただいたデザインから変更が入ったので追加対応になる」
と考える場合があります。

ここを最初に決めていないと、
お互いに悪気がなくても認識のズレが出てしまいます。

コーダー起因の修正と、デザイン変更は分けて考える

修正対応は、大きく分けると以下の2つがあります。

1つ目は、コーダー側のミスによる修正です。

たとえば、

• デザインと余白が違う
• 指定の文字サイズと違う
• リンク先が間違っている
• スマホ表示が崩れている
• 指示された内容が反映されていない

といったものです。

このようなコーダー起因の修正は、
当然ですがコーダーが追加費用なしで対応します。

2つ目は、依頼後に内容そのものが変わる修正です。

たとえば、

• デザインを変更したい
• セクションを追加したい
• 構成を変えたい
• 文章量が大きく変わった
• クライアント都合で内容が変わった

といったものです。

この場合は、作業量によって追加費用になることがあります。

私の場合も、コーディング起因の修正には対応しつつ、
デザイン変更やクライアント都合による大きな修正については、
事前に追加費用が発生する可能性をお伝えするようにしています。

これは自分側の損失を防ぐためでもありますが、
それ以上に、依頼してくださるデザイナーさんが
「思っていた対応と違った」と感じないようにするためでもあります。

失敗3｜デザイン通りに仕上がらなかった

コーディング外注で、デザイナーさんが特に気になるのが「デザイン通りに仕上がるかどうか」だと思います。

デザインと実際のブラウザ表示に差が出る理由は、大きく分けて2つあります。

1つ目は、確認不足によるズレです。

たとえば、

・余白が違う
・フォントが違う
・文字サイズが違う
・行間が違う
・画像の位置やサイズが違う

といったものです。

もう1つは、デザインツールとWebサイトの表示の違いです。

デザインデータは大きさを変えると基本的に全ての文字や画像、余白がそれに合わせて伸び縮みしバランスを保ってくれますが、コーディングはそうではありません。

たとえば、横幅1280pxで作られたデザインがある場合、コーディングでは基本的に「画面幅1280pxのときの余白や文字サイズ」を固定値として実装します。

つまり1280pxの画面幅のPCで見た時にデザイン通りになります。

しかし、実際のWebサイトは見る人によって画面幅がバラバラです。

1280pxより狭い画面で見たときには、文字の改行位置が変わったり、余白の見え方が変わったり、画像のバランスが変わったりします。

Webサイトでは、すべての画面幅でデザインデータとまったく同じ見た目にするのは難しいです。

画面幅は1px単位で変わりますが、そのすべてに対して個別に文字サイズや余白を指定していくのは、現実的にかなり難しいからです。

そのため、実際のコーディングでは、デザインの見た目をできるだけ守りながら、ユーザーが読みやすい状態になるように調整することがあります。

その結果、デザインデータとブラウザで見た表示に差が出て、
「デザイン通りに仕上がっていない」と感じることがあります。

私が行っている対策

私の場合、確認不足によるズレを減らすために、ブラウザの拡張機能を使ってデザインを実際のブラウザ上に重ね、その上をなぞるようなコーディングする手法をとっています。

ただ横に並べて見比べるだけでなく、実際の表示とデザインを重ねながら確認することで、余白・文字サイズ・要素の位置などのズレをできるだけ減らしています。

また、LPなど見た目の印象が特に大切な案件では、少し特殊なコーディング方法を使います。

画面幅に応じて文字サイズや余白が自然に伸び縮みする手法で、個別で関数（プログラムの様なもの）を用意する必要がありますがデザインをどの画面サイズでも再現度高く守れます

ただし、この方法はどのサイトにも向いているわけではありません。

特にコーポレートサイトやメディアサイトのように、文章の読みやすさや更新性が大切なサイトでは、文字サイズが小さくなりすぎたり、管理しづらくなったりする可能性があるため、基本的にはあまりおすすめしていません。

当方では、認識ズレを減らすために事前確認を大切にしています

コーディング外注で起きる失敗の多くは、
事前の確認で減らすことができます。

私自身、これまでコーディング代行としてさまざまな案件に対応する中で、
どの部分で認識ズレが起きやすいのかを少しずつ学んできました。

たとえば、

• スマホ対応が含まれているか
• PCデザインのみの場合、スマホ表示をどうするか
• 画像の切り出しをどうするか
• 修正対応はどこまで含むか
• デザイン変更が入った場合どうするか
• WordPress化やフォーム対応はどこまで行うか
• サイトはアップロードまで対応するのか

といった部分は、
最初に確認しておくことで、
後からのトラブルや手戻りを減らしやすくなります。

そのため当方では、
ただデザインを受け取ってそのまま作業するのではなく、
必要な部分は事前に確認しながら進めることを大切にしています。

これは、依頼するデザイナーさんやディレクターさんにとっても、
安心して任せやすい進め方だと考えています。

まとめ｜コーディング外注は、依頼前の確認で失敗を減らせる

コーディング外注では、
技術力や料金だけでなく、
依頼前の確認がとても大切だと思っています。

最初に確認しておくことで、
依頼する側も、コーダー側も、
安心して進めやすくなります。

コーディング外注で失敗したくない方、
デザインの意図をできるだけ崩さずに実装してほしい方、
事前に相談しながら進められるコーダーを探している方は、
お気軽にご相談ください。

デザイナーさん・個人ディレクターさん向けに、
LPコーディング、WordPress・下層ページコーディング、WordPress化、既存サイト修正などのご相談を受け付けています。

コーディング代行