コーディング依頼書は、Webページの設計図です。
コーディングをする際に必要不可欠であり、コーディングの規模やリンク先・ボタンの位置などを示しています。
コーディング代行業者に依頼をする際に、重要なデータで、別名、コーディング指示書、またはコーディング仕様書とも呼ばれます。
コーディング依頼書は重要なデータですが、意外と書き方を知らない人も多いのではないでしょうか。
この記事では、コーディング依頼書を書く際に必要な事項をまとめています。
コーディング代行を依頼する際、ぜひ参考にしてくださいね。
コーディング依頼書の書き方
コーディング依頼書の書き方に決まったフォーマットはありません。
ExcelやPowerPoint、GooglドキュメントやGoogleスプレッドで書かれることが多いです。
気を付けたいこととして、PDFでコーディング依頼書を書かないようにしましょう。
なぜなら、リンク先などのテキスト情報をコピーペーストできないので、無駄な作業量が増えてしまうからです。
しかしながら、ファイル形式やフォーマットが決まっていないからこそ、何を書くべきなのか迷ってしまう人も多いでしょう。
コーディング依頼書で具体的に書いておくべき代表的な事項は、以下の通りです。
- スケジュール
- サイトマップ
- ワイヤーフレーム
- アニメーションなどの動き
- 色・サイズ・フォント
- リンク先の指定
- 使用するCMSの指定
順に解説します。
スケジュール
各段階や全体の納期・スケジュールについて書いておきましょう。
開始日や終了日など、明確に書いてあればあるほど良いと考えたほうがいいです。
コーディング開発の納期、テスト段階の日程、最終確認など、各段階に必要な期間を計画する必要があります。
なぜなら、具体的な納期の記載がないと、いつまでもダラダラと開発期間が増えることになってしまうからです。
開発期間が長いと、費用も同じようにダラダラとかかってしまいます。
そのようなことを避けるために、スケジュールは明示しておきましょう。
サイトマップ
サイトマップは、サイトの構成やページ間の関係を示します。
Webサイトに含まれるページとその階層構造を表現したもので、開発者が各ページをどのように作成するべきか、アクセスが集中すると予想されるサイトの入り口はどこなのかを把握できます。
また、コーディングの規模をイメージしやすくなるのも、コーディング代行業者にとっては有益になります。
なぜなら、コーディングに必要な人員を確保しやすくなるからです。
適切なスケジュール管理もできるようになり、コーディング着手前に納期について相談しやすくなります。
ワイヤーフレーム
ワイヤーフレームとは、Webサイトのなかで「何を・どこに・どのように」配置するかを表した図です。
Webサイトの設計図・全体図ともいえます。
ワイヤーフレームでは、レイアウトやボタンの位置、テキストの配置などを簡単な図や線で表しましょう。
ExcelやPowerPointを用いて、図として表現するとわかりやすくなります。
Webページの骨格となるものなので、要素の取りこぼしはないか、確認を重ねてからコーディング代行業者に渡しましょう。
関連記事：ワイヤフレームとは？作り方やおすすめツールを初心者向けに解説
アニメーションなどの動き
「動き（アニメーション）」がある箇所の指定も必要です。
たとえば、ボタンをクリックした際にアニメーションがあったり、ページスクロール時にエフェクトが発生したりするなどの動きを指定します。
ユーザーが操作する際に発生する動き、アニメーションの効果内容を明確に書いておきましょう。
文字の色やサイズ・フォント
Webサイトで使用する文字のフォントや色、サイズも依頼書に書くべき事項です。
だいたいの場合、フォントサイズはGoogle推奨の16pxが基本とされていますが、フォントサイズの指定は明示しておきましょう。
また、色については、16進数カラーコードを用いて伝えることを推奨します。
「赤色」といっても非常に多様な赤色があり、赤色という指示だけでは、具体的にどんなカラーを使えばいいかわからないからです。
リンク先の指定
リンク先の指定も、忘れずに書いておきましょう。
同じページ内に移ったり、外部URLに遷移したりする場合、サイトマップだけではわかりにくい場合があります。
そのようなことを避けるために、リンク先の指定を明示しましょう。
使用するCMSの指定
使用するCMSについても指定しましょう。
CMSといえばWordpressが有名ですが、暗黙の了解の要素ではありません。
使用するCMSを指定しておかないと、想像していたものとは違う制作データが作られてしまうおそれがあります。
コーディング依頼書作成のポイント
コーディング依頼書作成のポイントも2つあります。
- デザイン（依頼書の画像の大きさやフォントなど）は統一する
- 参考にするWebページも書いておく
順に解説します。
デザインは統一する
コーディング依頼書の書き方・画像サイズは統一しましょう。
書き方とは、フォントの大きさや余白の有無、画像サイズのことを指します。
例えば、見出し以外のフォントサイズが定まっていなかったり、余白の有無がバラバラだったりしたら、コーディングする側は困惑してしまいます。
また、画像サイズがバラバラの場合でも同様です。
コーディングの際に無駄な混乱を招かないように、デザインは統一するようにしましょう。
参考にするWebページも書いておく
参考にしたいWebページがあったら、コーディング依頼書に書いておきましょう。
アニメーションやビジュアルのイメージを伝える際、参考Webページがあったほうがイメージを共有しやすいです。
また、参考にするWebページに改善点がある場合、コーディングに取り掛かる前にコーディング代行業者から改善の提案を受ける可能性があります。
その結果、参考Webページより品質が良いWebページが出来上がる場合もあります。
もしコーディング依頼書が不明確だったら？
もし、コーディング依頼書がいいかげんだったら、修正箇所や本来不要なコミュニケーションが増えてしまうでしょう。
その結果、事前に取り決めた予算・期間内でプロジェクトを終わらせるのは難しくなってしまいます。
高品質なWebページどころか、望んでいた機能が実装されていないWebページが出来上がってしまう可能性もあります。
こうした結果を避けるために、コーディング依頼書は明確なルールのもとで書くようにしましょう。
まとめ
ポイントまとめ
コーディング依頼書に書くべき事項は、以下の通りです。
・スケジュール
・サイトマップ
・ワイヤーフレーム
・アニメーションなどの動き
・色・サイズ・フォント
・リンク先の指定
・使用するCMSの指定
コーディング依頼書は、Webページの設計図ともいえます。
高品質なWebページを構築するために、コーディング代行業者にわかりやすいように書くようにしましょう。
【関連記事】
コーディング代行を依頼する際の相場はいくら？外注に必要な費用をご紹介
