ホームページ制作を依頼する際に、制作会社とのやり取りで認識のズレが生じることがあります。リンク先の指定やアニメーションの動き、対応ブラウザなど、口頭や雰囲気だけでは伝わらない情報は意外と多いものです。こうした情報を事前にまとめたものがコーディング指示書です。
このページでは、コーディング指示書の書き方と、制作会社に伝えるべき具体的な項目を解説します。
ホームページ制作のコーディング指示書とは
ホームページ制作のコーディング指示書とは、制作会社に対してホームページの仕様や要件を伝えるための資料です。
リンク先の設定やアニメーションの動き、対応ブラウザの指定など、口頭や打ち合わせだけでは伝わりきらない情報をコーディング指示書としてまとめておくことで、制作会社との認識のズレを事前に防ぐことができます。
コーディング指示書に決まったフォーマットはなく、テキストやスプレッドシートなど、発注者が使いやすい形式で問題ありません。重要なのはこうしたいという意図を具体的に言語化することです。
制作会社への依頼時だけでなく、納品後の改修や保守の際にも、コーディング指示書があることで仕様の意図を確認しやすくなります。
コーディング指示書が必要な理由
コーディング指示書が必要な理由は、発注者の意図が言葉にしなければ伝わらない情報が多いからです。
制作会社はヒアリングや打ち合わせをもとにホームページを制作しますが、細かい仕様まですべてを汲み取ることには限界があります。リンクをどのページに設定するか、ボタンをクリックしたときの動きはどうするかといった判断が必要な場面では、明確な指示がなければ制作会社側の判断で進められることになります。
結果として、完成後に思っていたものと違うという状況が生まれやすくなります。
修正対応が増えれば公開スケジュールが遅れるだけでなく、追加費用が発生するケースもあります。コーディング指示書を事前に用意しておくことで、こうしたトラブルを未然に防ぎ、スムーズな制作進行につながります。
また、指示書はエビデンスとしても機能するため、伝えたつもりによるトラブルを防ぐうえでも有効です。
コーディング指示書の書き方
コーディング指示書の書き方に、決まった形式はありません。発注者が使いやすいツールで作成すれば問題なく、ExcelやGoogleスプレッドシートで項目を表にまとめる方法や、PowerPointやGoogleスライドにスクリーンショットを貼り付けて注釈を加える方法が一般的です。
コーディング指示書を作成する際のポイントは、文章だけで伝えようとしないことです。特にアニメーションやレイアウトに関する指示は、言葉だけでは伝わりにくいため、参考サイトのURLを添付したり、画面に直接書き込んだりすることで、制作会社が意図を把握しやすくなります。
また、リンク先のURLやカラーコードなど、コピー＆ペーストで使える情報はテキスト形式で記載しておくと、制作会社側の作業効率が上がります。PDFでの共有は文字のコピーができないケースがあるため、避けた方が無難です。
コーディング指示書に書く内容
コーディング指示書に書く内容は、制作会社がデザインや打ち合わせだけでは判断できない情報が中心になります。発注者が意図を持っている部分については、漏れなく言語化して伝えることが重要です。以下に、コーディング指示書に記載しておきたい代表的な項目を紹介します。
デザイン案やワイヤーフレームに記載する
コーディング指示書は、デザイン案やワイヤーフレームに直接書き込む形で作成するのが最もわかりやすい方法です。
該当箇所に吹き出しやコメントを付けることで、制作会社がどの要素に対する指示なのかを一目で把握できます。別資料として用意する場合も、「トップページのメインビジュアル下のボタン」のように、どの箇所に関する指示かを明確にしておくことが重要です。
コーディング指示書と制作物の対応関係が曖昧だと、指示の読み違いが起きやすくなります。
見出しタグを指定する
見出しタグの扱いは、制作会社によって判断が異なる場合があります。
例えばh1タグをロゴ画像に設定するか、ページタイトルのテキストに設定するかは、明示しなければ制作会社側の判断で進められることがあります。SEOの観点から意図がある場合は、コーディング指示書に「トップページのh1はタイトル部分に設定する」のように具体的に記載しておくことで、意図通りの実装につながります。
リンク先を指定する
ナビゲーションやバナー、ボタンなど、クリックやタップで遷移する要素にはすべてリンク先を明記します。
同じサイト内のページであればURLを、外部サイトへのリンクであれば別タブで開くかどうかも合わせて指定しておきましょう。コーディング指示書にリンク先の情報が揃っていると、制作会社が都度確認する手間が省けるため、制作がスムーズに進みます。
画像のalt属性を指定する
alt属性とは、画像が表示されない場合に代わりに表示されるテキストのことで、SEOやアクセシビリティの観点から重要な要素です。
「会社外観の写真」「スタッフが接客している様子」など、画像の内容が伝わる短い説明をコーディング指示書に記載しておきましょう。装飾目的で意味を持たない画像については、alt属性を空にする旨を明記しておくと、制作会社側の判断ミスを防ぐことができます。
動きを指定する
アニメーションやスライダー、フェードインなどの動きは、デザインからは読み取れないため、コーディング指示書で具体的に指示する必要があります。
「スクロールに合わせてふわっと表示する」といった曖昧な表現では伝わりにくいため、イメージに近い動きが掲載されているホームページのURLを添付するか、「3秒ごとにスライドが切り替わる」のように数値で伝えることが重要です。動きの指示が具体的であるほど、完成イメージとのズレを防ぎやすくなります。
対応したいブラウザとデバイスを指定する
ホームページはブラウザやデバイスによって表示が異なる場合があります。
ChromeやSafariなど対応するブラウザと、パソコン・スマートフォン・タブレットといったデバイスをコーディング指示書に明記しておくことで、制作会社がテスト範囲を把握しやすくなります。特にターゲット層が特定のデバイスを多く使う場合は、その旨も合わせて伝えておくと、優先度を共有できます。
コーディング指示書に関するよくある質問
コーディング指示書に関して、発注者からよく寄せられる質問をまとめました。制作依頼前に疑問を解消しておくことで、スムーズな進行につながります。
コーディング指示書はどのくらい詳しく書けばいいですか？
コーディング指示書は、自社に要望がある箇所を中心に記載すれば十分です。
リンク先や動きの有無など、意図が決まっている部分は具体的に伝え、特にこだわりがない部分は制作会社の判断に任せて問題ありません。初めて依頼する制作会社の場合は、認識のズレが生じやすいため、要望がある箇所はやや丁寧に書いておく方が安心です。
指示書がなくても制作を依頼できますか？
コーディング指示書がなくても依頼自体は可能ですが、制作会社側の判断で進む部分が増えるため、完成後に修正が発生しやすくなります。
修正が増えると公開スケジュールが遅れるだけでなく、追加費用が発生するケースもあります。完成イメージを共有するためにも、コーディング指示書は可能な範囲で用意しておくことをおすすめします。
まとめ
ホームページ制作をスムーズに進めるうえで、コーディング指示書は発注者と制作会社の認識をそろえるための重要な資料です。リンク先や動き、対応ブラウザなど、口頭だけでは伝わりにくい情報を事前に言語化しておくことで、完成後の修正や手戻りを減らすことができます。
コーディング指示書に決まったフォーマットはなく、自社として要望がある箇所を中心にまとめるだけで十分です。完璧な指示書を目指すよりも、意図が伝わる内容を用意することを意識してください。
