外注パートナーに制作を依頼するときの伝え方
制作会社が外注パートナーにWebページの制作を頼むとき、最初に何を伝えると確認の往復や作り直しが減るかをまとめます。伝えておきたい項目と依頼文の例に加えて、AIで依頼文を整えるときの頼み方の例ものせます。
外注パートナーは、制作の一部を引き受けてくれる社外の人や会社のことです。この記事では、デザインをもとにページを組み立てる作業を、外のパートナーに頼む場面を中心に書きます。
最初の共有で、外注先の段取りが決まる
外注先は、最初に受け取った情報をもとに、見積もり、日程、作り方を決めます。そのため、最初の情報があいまいだと、あとから確認のやり取りが増えます。やり取りが増えるだけで済めばまだよく、頼む作業の範囲そのものが変わってしまうこともあります。
よくあるのが、デザインの修正が続いているのに、納品日だけは最初のまま、という場面です。コーダー(デザインをもとに、Webページとして表示されるようにコードを書く人)から見ると、作業を始められる日はどんどん遅れるのに、仕上げる日は変わりません。そのぶん、コーダーが作業に使える日数だけが減っていきます。
制作会社の側では「まだ調整中」のつもりでも、外注パートナーの側では「始められる日が遅れたのに、納品日は同じ」という状態になっています。これを防ぐには、デザインを確定する日、コーディング(コードを書いてページを組み立てる作業)を始める日、確認する日、納品する日を、セットで伝えておきます。
依頼するときに伝えたいこと
外注先には、デザインのデータと一緒に、作るときの判断の材料も渡すと、進めやすくなります。
このあとの一覧に出てくるFigma(フィグマ)は、Webページのデザインを作って、ほかの人と共有できるツールです。PCはパソコン用、SPはスマホ用のことを指します。最初に伝えておきたいのは、次のような項目です。
- 目的:問い合わせ、採用、資料請求、認知(名前を知ってもらうこと)など、何のためのページか
- ターゲット:誰に向けたページ・サイトか
- 成果指標:何が起きたら成功とするか。問い合わせの数、CV(問い合わせや申し込みなど、サイトで起きてほしい行動)、見てほしいページなど
- Figmaデータ:編集できる権限か、見るだけの権限か。どのページが対象か
- レスポンシブデザイン:画面の幅に合わせて表示を切りかえるための、PC用とSP用のデザインがあるか
- 参考サイト:動き、余白、雰囲気、演出の参考になるサイト
- アニメーションの指定:どこを、どのくらい動かすか
- 納品方法:zip(たくさんのファイルを1つにまとめたもの)、GitHub(プログラムのファイルを置いて共有するサービス)、テスト環境(公開前に確かめるための、一般の人には見えないサイト)など
- 納期:初稿(最初に出してもらう出来上がり)の日、確認日、納品日、公開日
- 修正範囲:何回まで直してもらうか、何が追加の費用になるか
外注先にとって特に助かるのは、完成に近いFigmaデータです。実際の仕事では、修正が残っていることもあります。それでも、どこが決まっていて、どこがまだ決まっていないかが分かれば、外注先は作業の計画を立てやすくなります。
デザインのデータに加えて、「何のための制作か」が伝わっていると、外注先は判断しやすくなります。たとえば同じCTA(問い合わせや申し込みに進んでもらうボタンや案内)でも、問い合わせを増やしたいLPと、採用の応募につなげたいページとでは、優先する導線(見た人がボタンまでたどる道すじ)が変わります。LPは、広告などから来た人に向けた、縦に長い1枚の宣伝ページです。
目的、ターゲット、成果指標が分かると、外注先はデザインを写して終わりにせず、作っている途中で気になったところを相談しやすくなります。最初の共有では、次の項目をまとめて渡しておくのがおすすめです。
- 目的:このページで何をかなえたいか
- 対象者:誰に見てほしいか
- 成果指標:何が起きたら成功か
- 承認フロー:誰が確認して、誰が最後に決めるか
外注先が動きやすくなる依頼文の例
依頼文には、作業の範囲、渡すデータ、納期、納品方法をまとめて書くと、受け取る側との思いちがいが減ります。LPのコーディングなら、たとえば次のように書きます。次の枠は、外注先にメールやチャットで送る依頼文の見本です。〇〇のところには、実際の内容を入れます。
LPコーディングをお願いしたいです。
・ページ数:LP 1ページ
・目的:無料相談への問い合わせ
・ターゲット:中小企業のWeb担当者
・デザイン:Figmaあり(PC/SP)
・アニメーション:ファーストビューのフェードイン、CTAボタンのホバー
・参考サイト:〇〇
・初稿希望日:〇月〇日
・納品方法:zip、またはGitHub
・修正回数:初稿後2回まで
・公開作業:今回は不要
例の中の「ファーストビュー」は、ページを開いて最初に見える部分です。「フェードイン」はふわっと浮かび上がるように出てくる動き、「ホバー」はマウスのカーソルを重ねたときの見た目の変化を指します。
WordPressでサイトを作ってもらう場合は、更新する範囲も書きくわえます。WordPressは、管理画面から文章や写真を書きかえられるようにする仕組みです。
WordPress構築をお願いしたいです。
・ページ数:トップ + 下層5ページ
・目的:サービス内容の理解と問い合わせ獲得
・承認者:ディレクター確認後、クライアント確認
・投稿機能:お知らせ
・カスタム投稿:実績
・更新したい箇所:実績、料金表、FAQ
・デザイン:Figmaあり(PC/SP)
・テスト環境:あり
・納品方法:テスト環境へ反映後、zip納品
・修正回数:初稿後2回まで
「下層」は、トップページからたどる中のページのことです。「投稿機能」は、お知らせのように記事を足していける機能を指します。「カスタム投稿」は、お知らせとは別に、実績のような記事の種類を作ることです。
「ディレクター」は、制作の進め方をまとめる役の人です。「FAQ」は、よくある質問をのせるページを指します。
このくらい具体的に書いてあると、外注先は見積もりや日程を決めやすくなります。
メモから依頼文の下書きをAIに作ってもらう
伝えたいことはメモにあるのに、依頼文の形にまとまらないこともあります。そんなときは、AIに下書きを作ってもらう方法があります。
ここから出てくる枠の中の文は、ChatGPTやClaude(ChatGPTと同じように、文章で話しかけて使うAI)の入力欄に貼って使えます。( )の部分は、自分の内容に書きかえてください。
制作の一部を外注先にお願いするための依頼文を作りたいです。
下のメモを、外注先にそのまま送れる依頼文の下書きにしてください。
頼む作業:(LP 1ページのコーディング)
目的:(無料相談への問い合わせを増やしたい)
見てほしい人:(中小企業のWeb担当者)
デザイン:(Figmaあり。パソコン用とスマホ用の両方)
動き:(最初に見える部分をふわっと出す。ボタンにカーソルを重ねたら色を変える)
日程:(デザインを決める日・作業を始める日・初稿の日・納品の日を、それぞれ日付で)
納品のしかた:(zip)
修正:(初稿のあと2回まで)
項目ごとに「・」で始まる短い行にしてください。
メモに無いことは足さずに、「未定」と書いてください。
「いい感じに」のように、人によって受け取り方が変わる言い方があれば、最後に書き出してください。
AIの下書きは、送る前に自分で読み直してください。日付や回数がメモのとおりになっているかは、とくに確かめておきます。
外注で手戻りが起きやすいポイント
手戻り(一度進めた作業を、やり直すこと)が起きやすいのは、デザインの変更と、実装ミスの修正が混ざったときです。実装ミスは、作る側がデザインや依頼のとおりに作れていないことを指します。
実装ミスの修正は、もちろん外注先が対応する範囲です。一方で、デザインの変更や仕様(ページや機能をどう作るかの決まりごと)の追加は、最初の見積もりとは別の作業になることがあります。ここを分けておかないと、修正が増えるたびに、どこまでが追加の費用なしで頼めるのかがあいまいになります。
最初に決めておきたいのは、次のことです。
- 修正の回数:初稿のあと何回まで直してもらうか
- 修正の種類:実装ミス、デザインの変更、仕様の追加を分けて扱う
- スマホの対応:スマホ用のデザインが無い場合、どこまで任せるか
- 承認者:誰が確認してOKを出すか
スマホ用のデザインは、なるべく具体的なイメージを伝えておくと、外注先が迷わずに進められます。「いい感じに」だけだと、受け取り方が人によって変わります。成り行きで任せる場合でも、参考サイトや、スマホで優先したい見せ方があれば、外注先は判断しやすくなります。
直したいことを、AIに種類ごとに分けてもらう
修正をお願いする前に、直したいことを種類ごとに分けておくと、どれが追加の費用になりそうかを外注先と話しやすくなります。直したいことを書き出して、ChatGPTやClaudeの入力欄に貼ってください。
外注先にコーディングをお願いしているページについて、修正を頼む前に整理したいです。
下の「直したいこと」を、次の3つの種類に分けてください。
・実装ミス(デザインや依頼のとおりに作られていない)
・デザインの変更(あとから色や配置を変えたくなった)
・仕様の追加(最初の依頼に無かったページや機能を足したい)
どれに当たるか迷うものは、迷った理由も書いてください。
最初に送った依頼の内容:(ここに、最初の依頼文を貼る)
直したいこと:(スマホで見ると見出しが2行に分かれる。ボタンの色を濃くしたい。お知らせの一覧を足したい)
AIの分け方が正しいとは限りません。とくに実装ミスかどうかは、最初の依頼文やデザインと見くらべて、自分で確かめてから外注先に伝えてください。
よくある質問
Q. 外注パートナーに依頼するとき、最低限何を共有すべきですか?
A. Figmaのデータ、対象のページ、PC用とスマホ用のデザインがあるか、納期、納品方法、修正の回数は、最初に伝えておくのがおすすめです。
Q. スマホ用のデザイン(SPデザイン)が無くても依頼できますか?
A. 依頼はできます。ただ、「いい感じに」とだけ伝えると、受け取り方が人によって分かれます。参考サイトや、スマホで優先したい見せ方など、ある程度のイメージを伝えると進めやすくなります。
Q. デザイン変更と実装ミスの修正は分けた方がよいですか?
A. 分けた方がよいです。実装ミスの修正と、デザインの変更や仕様の追加とでは、作業の中身が違います。前もって扱いを決めておくと、思いちがいを防げます。
Q. 納品方法は何がありますか?
A. zipでファイルをまとめて渡す、GitHubで共有する、テスト環境に上げる、などがあります。どの形で納品してもらうかは、作業を始める前に決めておくとスムーズです。
Q. デザイン修正中でもコーディングを依頼できますか?
A. 依頼はできます。ただし、デザインが決まる日と納品日を、セットで確かめておく必要があります。デザインの修正が続くと、コーダーが作業に使える日数だけが短くなることがあるからです。
まとめ
外注パートナーへの依頼は、最初の共有で進めやすさが変わります。最初に伝えておきたいのは、次のことです。
- Figmaのデータと、対象のページ
- 目的、ターゲット、成果指標
- PC用とスマホ用のデザインがあるか
- 参考サイトと、アニメーションの指定
- 納品方法
- 修正の回数と、修正の範囲(実装ミスとデザインの変更を分ける)
- デザインを確定する日と、納品日
依頼の中身が決まりきっていなくても、まだ決まっていないところを「未定」と書いて伝えれば、外注パートナーと相談しながら進められます。外注先が判断しやすい情報を先に渡しておくと、制作会社の側で確認する手間も減ります。
Figmaのデザインを渡して頼む場合は、Figma支給のコーディング依頼前に確認したい7つの項目もあわせて確認しておくと手戻りが減ります。
費用の見積もりを取る段階で必要な情報は、Web制作の見積もり前に確認すべき項目まとめに一覧でまとめています。
制作会社様の外注パートナーとして対応します
LPコーディング、WordPress構築、制作進行の補助など、制作会社様のリソース不足を補う形で対応しています。
Figma支給の実装や短納期案件も、まずは条件を整理したうえでご相談ください。