- 更新日 : 2024年12月12日
Webサイト制作のコーディング仕様書とは【無料テンプレートあり】
コーディング仕様書とは、Webサイトやアプリなどを制作する際にデザインだけでは伝わりきらない情報や要件をまとめた開発者向けの指示書（説明書）のことです。「どの部分にどのような機能を持たせるか」「アニメーションやスライドショーをどのように動かすか」など具体的な指示を記載します。この記事では、Webサイト制作におけるコーディング仕様書の書き方や作成するときの注意点を紹介します。
目次
コーディングにおけるデザインの指示書（仕様書）とは？
コーディングにおけるデザインの仕様書は、Web制作の際にデザインデータだけでは伝わらない情報を具体的な指示としてまとめた制作指示書のことです。例えば、次のような指示が盛り込まれます。
|
他にもWebサイトのどこにどのような機能を持たせたいかといった要望を添えることもあり、プログラム設計書としての役割も果たします。
コーディング仕様書が必要な理由
コーディング仕様書が必要な理由は、制作会社とのコミュニケーションを円滑にして作業の滞りを防ぐためです。コーディング仕様書があることで得られる3つのメリットについて解説します。
仕様書があれば、つけたい機能や画像の配置など細かな指示を確認しながら制作できます。デザインから読み取れない仕様についての確認が減り、仕上がりが予想したものと違って修正依頼を行う手間も減るでしょう。
口頭でのあやふやなやりとりと違って、仕様書ははっきりとしたエビデンスになります。仕様書どおりの設計になっていなかった場合、修正依頼がスムーズに行えます。
制作会社と認識が異なり、想定外の仕様に仕上がることはよくあるトラブルです。仕様書を渡すことでデザインの要望をより具体的に伝えやすくなり、認識の齟齬を未然に防げるでしょう。 |
コーディング仕様書の無料テンプレート
コーディング仕様書をゼロベースで作成すると、情報の抜け漏れが発生する可能性があります。マネーフォワードクラウドでは、コーディング仕様書のテンプレートを無料で提供しています。こちらもぜひご活用ください。
コーディング仕様書のフォーマット
コーディング仕様書には、決まったフォーマット形式は存在しません。対応するソフトが多いためExcel形式で表にまとめたものや、Word形式で指示を文章化したもの、PowerPoint形式で画像を含めたものが一般的です。デザイナーの方が作成する仕様書では、PhotoshopやIllustratorを用いてデザインとは別レイヤーに仕様データを書き込む方法もあります。
ただし、PDF形式で仕様書を作成するのはあまりおすすめできません。リンク先やカラーコードなどコピーアンドペーストで反映したい情報が、コピーできない可能性があるためです。
コーディング仕様書の書き方
コーディング仕様書には、的確な情報を盛り込む必要があります。ここではどのような内容を書き込んでいくのか、代表的な指示について紹介します。
プロジェクトの概要
ホームページ運用の目的や、背景、機能が必要な理由などを含め、プロジェクトの概要は必ず用意しましょう。リニューアルのための制作であれば、解決したいホームページの課題も書き添えます。PV数やお問い合わせ数などホームページ制作によって達成したい目標を数値化した「KPI」も合わせて明示することで、制作会社側も課題が把握しやすくなります。概要についてはなるべく具体的に文章化することを意識しましょう。
スケジュール表
スケジュール表は、各タスクの作業開始日と終了日を明確に決めて一覧化したものです。「半年以内に」や「急ぎで」といった曖昧な表現は、担当者の解釈に委ねられてしまい、進捗の遅れにつながります。
最も重要な期日は納期（ホームページを公開する日）ですが、制作段階の重要なポイントには期日を設けたほうがいいでしょう。例えば、以下のようなタスクの完了に期日を設けると進捗管理やスケジュール調整がしやすくなります。
|
サイトマップ
サイトマップは、サイト全体の構成を確認できる資料のことです。一般的にはトップページを頂点としたツリー構造で一覧化します。サイトマップがあれば制作会社はサイト構造やホームページの目的を一目で理解でき、どのページにどのような情報が必要かを把握しやすくなります。
さらに、サイトマップを作成することで情報の抜け漏れを防ぎ、ホームページがどれくらいのボリュームになるかも想定できるでしょう。
ワイヤーフレーム
ワイヤーフレームとは、ホームページのレイアウトやコンテンツの配置を決めたデザインの設計図です。制作側が作成するものですが、依頼側で簡易版だけでも準備できれば打ち合わせがスムーズに進みます。
ワイヤーフレームについては、ExcelやPowerPointを用いて図式化して伝えると把握しやすくなります。ワイヤーフレームで伝えるべき情報はあくまでレイアウトです。色やフォントといった詳細については、別途盛り込んでおくといいでしょう。
リンク先・アニメーション
同じページ内のセクションや外部リンクに遷移する場合はサイトマップの情報では伝わりにくいため、詳細な情報が必要です。特に外部リンクに遷移する場合は、URLと外部リンクであることが分かるように指示しましょう。
アニメーションは、カーソルを合わせた時やボタンをクリックした時の動きや色の変化、読み込み中のアニメーションに関する指示です。用いる素材が決まっている場合は、素材ファイルに分かりやすい名前を付けます。文章で説明するのは難しいため、参考サイトやイメージに近い素材を用意して伝えるといいでしょう。
色・サイズ・フォント
サイトで使用するフォントと、サイズについても指示が必要です。フォントサイズはGoogleが推奨している16pxが基本とされています。
色については16進数カラーコードなどを用いて、数値化して指定しましょう。色の見え方はブラウザや表示デバイスなど環境によって異なり、色見本や文章で説明すると想定と違った仕上がりになる可能性があるためです。
CMSの仕様
CMS（Contents Management System）とは、プログラミング言語を用いずに簡単にWebサイトを構築できるシステムのことです。HTMLタグを用いた編集や同時編集が可能で、デザインを自由にカスタマイズできます。
CMSの中ではWordPressが有名ですが、どのCMSをツールとして使うのかを明記しておかなければ、想定と違った制作データが納品されることがあります。また、CMSの仕様については、「記事を新着順で表示できるように」や「後から情報を追加・変更できるように」といったページごとに欲しい機能を盛り込んでおきましょう。
コーディング仕様書を作成するときの注意点
ここでは、コーディング仕様書を作成する際に注意したい4つのポイントを紹介します。
フォントや余白のサイズがページごとに異なるなど、レイアウトがばらばらの状態にならないよう注意が必要です。サイトの視認性が悪くなり、制作会社も意図したデザインなのかミスなのかを逐一確認する手間が生じます。
レイアウトやアニメーションで参考にしたサイトがある場合は、そのページの情報を仕様書に盛り込みます。その際は、参照元のどのページにあるデザインを参考にしたのか詳細まで指定するといいでしょう。
CSSやJavaScriptの修正は他のページにも影響を与える可能性があります。安易に変更を指示しないようにしましょう。
小数点以下の端数は、強制的に整数で書き出され画像がぼやけたり指定した幅にうまく合わなかったりと、さまざまな影響を与えます。デザインが思いがけなく崩れるリスクがあるため、仕様書に記載する数値は端数が含まれていないか確認しましょう。 |
コーディング仕様書は無料のテンプレートを有効活用しよう
コーディング仕様書とは、デザインだけでは伝わりにくい情報や要件を開発者向けに分かりやすく記載した指示書のようなものです。コーディング仕様書には、プロジェクトの概要やスケジュール表、サイトマップ、ワイヤーフレーム、リンク先・アニメーションなどの情報を記載します。コーディング仕様書には無料のテンプレートもあるので、情報の抜け漏れを防ぐためにも有効活用しましょう。
※ 掲載している情報は記事更新時点のものです。
※本サイトは、法律的またはその他のアドバイスの提供を目的としたものではありません。当社は本サイトの記載内容（テンプレートを含む）の正確性、妥当性の確保に努めておりますが、ご利用にあたっては、個別の事情を適宜専門家にご相談いただくなど、ご自身の判断でご利用ください。
関連記事
ホテルのアンケート作成に使えるテンプレート｜回答率アップの工夫も
ホテルで顧客アンケートを実施すると、顧客のニーズや満足度を把握することが可能です。顧客の声を反映して、サービスの改善や新たなサービスの導入を検討するだけでなく、リピーターの獲得や顧客満足度の向上にもつながるでしょう。 当記事では、ホテルにお…
詳しくみる調査企画書とは｜作成方法や作成ポイント・無料テンプレを紹介
調査企画書は、調査の目的や手法を整理し、関係者と共有するための書類です。適切な調査企画書を作成することで調査の精度を向上させ、効果的なデータ収集が可能になります。しかし、調査の目的が曖昧だったり手法が適切でなかったりすると、得られた結果の信…
詳しくみる業務改善報告書の書き方やポイントは？無料テンプレート・記載例つき
業務改善報告書は、会社組織の非効率な業務を見直すために必要な書類です。会社の生産性向上や業務効率化には、業務改善報告書の作成が欠かせません。では、業務改善報告書をどのように作成すればよいでしょうか。 本記事では、業務改善報告書の書き方やポイ…
詳しくみる締日変更のお知らせの書き方！作成のポイントと無料テンプレートも
請求書の締日変更のお知らせを作成する際は、誠意の伝わる文面で、変更内容や理由を正確に明記することが重要です。また、取引先への配慮やタイミングを誤ると、業務に支障をきたす可能性があります。 当記事では、締日変更のお知らせの具体例や注意点、さら…
詳しくみる人材紹介会社におけるヒアリングシートの項目・無料のテンプレを紹介
人材紹介会社が採用支援を行う際、企業側に対して行うヒアリングは、クライアントの採用を成功するために必須のプロセスです。企業側がなぜ・どういった目的で、どのような人材を求めているか知らなければ、採用は成功しません。 この記事では、ヒアリングの…
詳しくみる清掃チェックリストの無料テンプレート！作り方やホテルや店舗の例を紹介
清掃チェックリストは、掃除の抜け漏れを防ぎ、清潔な環境を保つためのリストです。ホテルや飲食店、工場などでは、清掃の基準をはっきりさせることで、お客様や従業員が気持ちよく過ごせる環境を作れます。例えば、トイレ掃除の項目をリスト化すれば、毎日決…
詳しくみる