デザインカンプ通りに実装してもらえない…すれ違いを防ぐコツ

「デザインカンプを渡したのに、上がってきたページは余白も文字の大きさも微妙に違う」「スマホで見たらレイアウトが想定と全然違った」「修正を依頼したら、それは指示になかったと言われた」。コーディングを外注している制作会社様から、こうしたお悩みを伺うことがあります。

結論から言うと、カンプ通りに実装されない原因の多くは、外注先の技術力よりも「カンプに描かれていない部分」の解釈のずれにあります。デザインカンプは、ある画面幅・ある内容のときの「1枚の完成図」です。画面幅が変わったとき、文章が長くなったとき、ボタンにマウスを乗せたときなど、カンプに描かれていない状態は、実装する側が推測して作るしかありません。その推測がデザイナー様の意図とずれると、「カンプ通りじゃない」というすれ違いになります。

この記事では、デザインと実装のすれ違いが起きる原因と、依頼の前・作業中・確認時にできる具体的な対策を、外注を受ける側の目線も交えてまとめました。

カンプ通りにならない「すれ違い」はなぜ起きるのか

すれ違いが起きる場面は、大きく分けて次の4つです。

原因1：カンプに描かれていない画面幅の扱いが決まっていない

PC用とスマホ用のカンプがあっても、その間のタブレット幅や、より大きなモニターで見たときの表示は描かれていないことがほとんどです。横に並んだ要素をどの幅で縦に並べ替えるのか、背景を画面いっぱいに広げるのか、中央の幅で止めるのか。ここが決まっていないと、実装する人によって判断が分かれます。

原因2：「ピクセル単位で合わせる」か「意図を合わせる」かの認識が違う

制作会社様は「カンプと1ピクセルもずれないこと」を期待していても、外注先は「見た目の印象とデザインの意図が合っていればよい」と考えていることがあります。逆に、ピクセル単位で合わせることにこだわりすぎて、文章が増えたときに崩れやすい作りになってしまうこともあります。どちらが正しいというより、案件ごとにどこまで合わせるかの基準を共有していないことが問題です。

原因3：動きや状態の指定がない

ボタンにマウスを乗せたときの色の変化、メニューを開いたときの動き、スクロールに合わせて要素が表示される演出など、静止画のカンプでは表現しきれない部分です。「なんとなくふわっと」のような指示だけだと、仕上がりのイメージが人によって変わります。

原因4：実際の原稿や画像がカンプと違う

カンプでは仮の短い文章が入っていたのに、実際の原稿は3倍の長さだった、という場面はよくあります。見出しが2行になったり、画像の縦横比が違ったりすると、カンプ通りのレイアウトにはならないことがあります。

依頼前に決めておきたい5つのこと

すれ違いを防ぐいちばんの近道は、作業が始まる前に「カンプに描かれていない部分」の扱いを決めておくことです。最低限、次の5つを共有しておくと、上がってくるものが大きく変わります。

①対応する画面幅と、レイアウトが切り替わる幅

「スマホは375px幅のカンプを基準に、768px以下でスマホ用のレイアウトに切り替える」のように、基準となる幅と切り替わる幅を数値で伝えます。タブレット幅を個別に作り込むのか、スマホとPCの間をなめらかに伸び縮みさせるだけでよいのかも決めておきましょう。

②どこまでカンプに合わせるかの基準

「余白と文字サイズはカンプの数値どおり。それ以外は見た目が自然であれば任せる」のように、厳密に合わせてほしい部分と、実装側の判断に任せる部分を分けて伝えます。基準があると、外注先も迷わずに作業でき、確認する側もチェックの観点が明確になります。

③フォントと文字の指定

Webフォントを使うのか、端末に入っているフォントで表示するのか。行間や文字間隔をどこまで再現するか。フォントは見た目の印象を大きく左右するのに、カンプのデータを開くだけでは指定が伝わりにくい部分です。使用するフォント名と、ライセンス上Webで使えるかどうかも事前に確認しておくと安心です。

④動きや状態の一覧

ボタンやリンクにマウスを乗せたとき、メニューを開いたとき、入力欄でエラーが出たときなど、「状態が変わる部分」を一覧にしておきます。参考にしたいサイトの動きがある場合は、「このくらいの速さで、下からふわっと表示」のように言葉で補足すると伝わりやすくなります。

⑤原稿・画像の確定度

カンプに入っている文章や画像が本番用なのか、仮のものなのかを伝えます。仮の場合は、「見出しは最大何文字くらいになりそうか」「画像は横長か正方形か」といった見込みだけでも共有しておくと、崩れにくい作りにしてもらえます。

作業中にすれ違いを広げないための進め方

依頼の前にすべてを決めきるのは難しいものです。作業中の進め方を工夫するだけでも、すれ違いはかなり防げます。

最初の1ページで認識を合わせる

すべてのページを一度に作ってもらうのではなく、まずトップページや代表的な下層ページを1つ仕上げてもらい、そこで認識のずれがないかを確認します。最初の1ページで基準がそろえば、残りのページは同じ考え方で進められるため、手戻りが少なくなります。

質問しやすい流れをつくる

外注先が「ここはどうしますか」と気軽に聞ける流れがあると、推測で作られる部分が減ります。質問をまとめて送ってもらい、制作会社様がまとめて回答する、という形でも十分です。逆に、質問がまったく来ない場合は、推測で進めている部分が多い可能性もあります。

判断したことを記録しておく

途中で決めたこと（「この見出しは2行になってもよい」「この区切り線は省略してよい」など）は、やり取りの中で流れてしまわないよう、一か所にまとめておきます。案件の後半や修正の段階で「言った・言わない」になるのを防げます。

カンプの読み取り方や、カンプに描かれていない部分の扱いを最初にすり合わせたうえで進めたい場合は、こちらのサービスでコーディングの外注を承っています。

https://coconala.com/services/3480190

確認・修正の段階でできること

上がってきたページを確認するときも、少しの工夫でやり取りがスムーズになります。

実機と複数のブラウザで確認する

パソコンの画面で幅を縮めて確認するだけでなく、実際のスマホでも表示を確かめます。同じ画面幅でも、端末やブラウザによって文字の折り返しや見え方が少し変わることがあるためです。

修正の指示は「場所・今の状態・期待する状態」をセットで

「ここがおかしい」だけでは、外注先はどう直せばよいか判断できません。「スマホ表示のお知らせ一覧で、日付とタイトルの間の余白が今は狭い。カンプでは16pxなので合わせてほしい」のように、場所・今の状態・期待する状態をセットで伝えると、1回の修正で意図どおりに直りやすくなります。画面のキャプチャに印を付けて送るのも効果的です。

「カンプにない修正」と「カンプとの違い」を分けて伝える

確認していると、カンプを作った時点では気づかなかった改善点が見つかることもあります。カンプとの違いを直す修正なのか、新たに変更したい修正なのかを分けて伝えると、外注先も作業量や費用の見通しを立てやすく、お互いに気持ちよく進められます。

外注先を選ぶときに見ておきたいポイント

すれ違いが起きにくい外注先かどうかは、依頼前のやり取りである程度見極められます。

・カンプを見たうえで、「この部分はどう扱いますか」と具体的な質問をしてくれるか

・画面幅の切り替えや動きについて、自分から確認してくれるか

・できないこと、難しいことを最初に正直に伝えてくれるか

・返信が早く、作業中の途中経過を共有してくれるか

・NDAや「黒子」としての対応など、制作会社様の案件の進め方に合わせられるか

特に、カンプを受け取った段階で質問が出てくる外注先は、描かれていない部分まで意識して作業してくれる傾向があります。「質問が多い」ことは、すれ違いを防ぐうえではむしろ安心材料と言えます。

私自身が外注先としてお受けするときに意識していること

私はWeb制作歴6年で、HP・LP・ECサイトの制作を100件以上手がけてきました。デザイナー様から受け取ったカンプを実装する立場として、作業に入る前に、画面幅の切り替え、フォント、動き、原稿の確定度など、カンプから読み取れない部分を確認するようにしています。判断に迷う部分は推測で進めず、質問をまとめてお送りしています。

NDA対応・本人確認済みで、制作会社様の黒子としての対応も可能です。平日日中は1時間以内の返信を目安にしており、できないことは最初にお伝えするよう心がけています。

まとめ：すれ違いは「カンプに描かれていない部分」で起きる

デザインカンプ通りに実装されない原因の多くは、画面幅、合わせる精度の基準、フォント、動き、原稿の確定度といった「カンプに描かれていない部分」の解釈のずれです。依頼前にこれらを共有し、最初の1ページで認識を合わせ、修正は具体的に伝える。この3つを意識するだけでも、手戻りは大きく減らせます。

「カンプの意図をくみ取って実装してくれる外注先を探している」「繁忙期のコーディングだけを任せたい」という制作会社様は、お気軽にご相談ください。カンプと案件の進め方を伺ったうえで、対応できる範囲とスケジュールをお伝えします。

https://coconala.com/services/3480190

まだ依頼内容が固まっていない段階のご相談は、こちらからお気軽にどうぞ。

https://coconala.com/users/4536617