コーディングを外注するときに用意したいもの
デザインデータやSP仕様、動き、素材、フォーム、納期など、コーディングを外注する前にそろえておきたい情報をまとめます。
コーディングを外注するとき、
「デザインカンプが完成したので、あとはコーダーに渡せば大丈夫」
と思うかもしれません。
実際には、カンプだけでは判断できないことがたくさんあります。
たとえば、
- PCとSPでレイアウトをどう変えるのか
- メニューやQ&Aを開いたときにどう見せるのか
- ボタンや要素をどう動かすのか
- フォーム送信後に何をするのか
- どの環境へ設置するのか
- いつ初稿を提出し、いつクライアントに確認してもらうのか
こうした情報が曖昧なまま制作を始めると、途中で確認が増え、回答待ちで作業が止まることがあります。
完成してから、
「スマホではこうなると思っていなかった」
となれば、デザインもコーディングも修正が必要になります。
すべてを完璧にそろえてから依頼する必要はありません。
ただし、見積りや実装方法に影響すること、見た目について判断が必要なことは、できるだけ早めに共有しておくと制作が進めやすくなります。
1．PC・SPのデザインを用意する
レスポンシブサイトを依頼する場合、基本的にはPCとSP、両方のデザインを用意します。
PCデザインをそのまま縮小すればSPになるわけではないからです。
たとえば、
- PCで横並びの要素をSPではどう並べるのか
- 表を横スクロールさせるのか、縦に組み替えるのか
- グローバルナビゲーションをSPではどう表示するのか
- 画像と文章の表示順をSPではどうするのか
といった部分は、デザイン上の判断が必要です。
「SPはいい感じにレスポンシブでお願いします」
という依頼でも対応できますが、見せ方に複数の選択肢がある部分は確認が必要になります。
一方、タブレット専用のカンプまで用意してもらうことは、私はほとんどありません。
SPと同じレイアウトを基本にし、タブレットではコンテンツ幅を調整する程度でよいかを確認して進めます。
すべての画面幅を細かくデザインする必要はありません。
画面幅が変わったときに、見せ方を判断しなければならない場所を決めておく。
そこまでできていれば十分です。
2．開閉後・hover時など、変化する状態を決める
通常時のカンプだけでは分からないものもあります。
たとえばハンバーガーメニューなら、開いたときに、
- 画面全体を覆うのか
- 横からスライドするのか
- 背景を暗くするのか
- メニューをどのように並べるのか
といった情報が必要です。
Q&Aのアコーディオンなら、回答を開いたときの背景色や余白、アイコンの変化などに希望があれば分かるようにしておきます。
hover時の色や動きについても、意図があるものは指定しておくと認識がずれにくくなります。
ただし、すべての状態を細かくデザインする必要はありません。
フォームのエラー表示など、特に希望がなければコーダーに任せてもよい部分もあります。
基準はシンプルです。
- 見た目について意図があるものは指定する
- 特にこだわりがないものは任せる
この分け方で十分です。
3．アニメーションは参考例まで共有する
アニメーションについて、
「ふわっと表示してください」
「いい感じに動かしてください」
だけでも対応できることはあります。
何度も一緒に仕事をしていて認識が合っている相手なら、
「ここは、ぽよぽよした動きで」
くらいでも伝わる場合があります。
ただ、初めて依頼する相手や、細かな動きまで合わせたい案件では、参考例があるほうが確実です。
クライアントから参考サイトを指定されているなら、URLだけでなく、
「このボタンの動きを参考」
「スクロール時のこの表示方法を参考」
と、見る場所まで伝えます。
ここで確認しておきたいのが、どこまで参考にするのかです。
一つのボタンだけなのか。
ページ全体のアニメーションや雰囲気まで近づけたいのか。
後者の場合は、
「もう少しゆっくり」
「動きを小さく」
といった調整が発生しやすくなります。
そのため、動きにこだわる案件では、実装時間だけでなく調整時間も見積りに含めて考えます。
4．画像・フォント・動画などの素材を確認する
デザイン以外に必要な素材も確認します。
特に忘れられやすいのが、
- ファビコン
- OGP画像
です。
公開直前になって、
「そういえば用意していなかった」
となることがあります。
画像は、カンプからこちらで書き出せる場合もあります。
ただし、
- 本来テキストとして実装する部分まで一枚の画像になっている
- 必要なパーツを個別に書き出せない
- 元画像のサイズが小さい
といった場合は、元データが必要です。
フォントについては、私は事前に注意事項を共有し、テキストとして実装する箇所にはGoogle FontsなどWebで使用できるフォントを選んでもらうようにしています。
動画がある場合も、素材そのものが未完成でも、
- YouTubeを埋め込むのか
- MP4ファイルを設置するのか
までは早めに確認したいところです。
MP4を直接設置する場合は、容量によってページの表示速度や自動再生の可否にも影響します。
素材がまだそろっていなくても、何が、どの形式で入る予定なのかが分かれば、見積りや実装方法を考えやすくなります。
5．フォームは「送信後」まで仕様を決める
問い合わせフォームや申し込みフォームは、カンプだけでは正確に見積れません。
少なくとも、
- 送信先メールアドレス
- 管理者へ届くメールの件名・本文
- 自動返信メールの有無と内容
- サンクスページの有無
などを確認します。
フォームは、画面に見えている入力欄だけが制作物ではありません。
送信したあとに何が起こるのかまで含めて、実装内容が決まります。
あとから、
「自動返信メールも必要だった」
「確認画面も付けたい」
「送信後は別ページへ移動したい」
となれば、その分の作業が増えます。
そのため、フォームについては、できれば見積り時点で仕様を確認しておきます。
6．設置先とログイン情報を確認する
制作したページをどこへ設置するのかも確認します。
分かる範囲で、
- 設置先URL
- サーバー情報
- FTP情報
- WordPressのログイン情報
などを共有してもらえると、実際の環境を確認できます。
ただし、見積り段階ではクライアントから情報を預かれないこともあります。
その場合は、
「制作したファイルをアップロードするだけ」
「既存サイトへ組み込むところまで対応する」
など、条件を分けて見積ることもできます。
最近はサーバー管理画面などに二段階認証が設定されていることも多く、ログイン時にクライアント側の対応が必要になるケースもあります。
WordPressのログイン情報を受け取った場合は、コーダーへ転送する前に、できれば一度デザイナー自身でログインできるか確認しておきます。
実際には、
「届いたIDとパスワードではログインできなかった」
ということもあります。
事前に確認しておけば、
コーダー → デザイナー → クライアント
と問い合わせが往復する時間を減らせます。
7．渡す前にデザインデータを見直す
カンプをコーダーへ渡す前に、一度完成データとして見直します。
よくあるのが、
- PC版とSP版で文章が違う
- 同じボタンなのに色や余白が違う
- リンク先が分からない
- 同じ見出しなのにページによってスタイルが違う
といった不整合です。
意図的な違いなのか、単なる修正漏れなのかは、コーダーには判断できません。
そのため、見つけるたびに、
「こちらはどちらが正しいですか？」
と確認することになります。
すべてのミスをなくしてから渡す必要はありません。
まずは、
- PCとSPで文章が一致しているか
- 共通パーツの見た目がそろっているか
- リンク先が分かるか
- 開閉する要素の状態が分かるか
あたりを確認するだけでも、制作中のやり取りを減らせます。
8．公開日から逆算して初稿提出日を決める
コーディングの納期は、公開日だけでは決められません。
実際には、
- コーダーが初稿をテスト環境へアップする
- デザイナーが確認する
- 修正する
- クライアントが確認する
- 再修正する
- クライアントが最終確認する
という工程があります。
私は通常、再修正後にクライアントの確認が終わった段階を納品としています。
そのため、最初に知りたいのは、
コーダーがテスト環境へ初稿をアップする日
です。
たとえば金曜日公開なのに初稿が木曜日では、確認や修正にほとんど時間がありません。
さらに土日やクライアントの休業日を挟めば、コーディングが終わっていても確認が進まないことがあります。
納期を決めるときは、
公開日 → クライアント最終確認 → 修正 → クライアント初回確認 → 初稿提出
の順に逆算します。
コーダーの制作期間だけでなく、デザイナーとクライアントが確認する時間まで含めて予定を組むことが必要です。
9．全部そろう前でも、分からないことは相談する
ここまで準備項目を並べましたが、全部そろうまでコーダーへの相談を待つ必要はありません。
むしろ、完成前に相談したほうがよいこともあります。
たとえばデザイン中に、
「このレイアウトは実装できる？」
「SPではどう見せると作りやすい？」
「このアニメーションを入れると工数はどのくらい増える？」
と疑問が出たら、その時点で相談できます。
完成してから、
「このままでは実装が難しいので変更してください」
となれば、カンプを作り直すことになります。
早めに確認しておけば、その手戻りを減らせます。
コーダーは、完成したデザインを受け取ってHTMLやCSSに変換するだけの人ではありません。
少なくとも私は、
クライアントから要望を聞く段階や、デザインを考えている段階から技術面を相談してもらい、一緒に完成まで持っていく相手
としてデザイナーを支えたいと考えています。
必要な情報がまだそろっていないなら、
「何を決めておけばいいですか？」
という相談からでも構いません。
外注前に確認したい9項目
コーディングを外注する前に、最低限次の項目を確認しておくと進めやすくなります。
- PC・SPの見せ方は決まっているか
- 開閉後やhover時など、変化する状態は分かるか
- アニメーションの参考例と対象箇所は分かるか
- 画像・フォント・動画などの素材はそろっているか
- フォームの送信後まで仕様が決まっているか
- 設置先と必要なログイン情報は確認できているか
- PC・SP間や共通パーツに不整合がないか
- 公開日から逆算して初稿提出日を決めているか
- 分からないことを完成まで抱え込んでいないか
すべてを完璧にそろえることよりも、どこまで決まっていて、どこが未確定なのかを共有できる状態にしておくことが大切です。
デザイナー、コーダー、クライアントの三者で確認や修正を進めるからこそ、判断に迷うことは早めに共有する。
それが、コーディング外注をスムーズに進めるための準備になります。