- 更新日 : 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の修正は他のページにも影響を与える可能性があります。安易に変更を指示しないようにしましょう。
小数点以下の端数は、強制的に整数で書き出され画像がぼやけたり指定した幅にうまく合わなかったりと、さまざまな影響を与えます。デザインが思いがけなく崩れるリスクがあるため、仕様書に記載する数値は端数が含まれていないか確認しましょう。 |
コーディング仕様書は無料のテンプレートを有効活用しよう
コーディング仕様書とは、デザインだけでは伝わりにくい情報や要件を開発者向けに分かりやすく記載した指示書のようなものです。コーディング仕様書には、プロジェクトの概要やスケジュール表、サイトマップ、ワイヤーフレーム、リンク先・アニメーションなどの情報を記載します。コーディング仕様書には無料のテンプレートもあるので、情報の抜け漏れを防ぐためにも有効活用しましょう。
※ 掲載している情報は記事更新時点のものです。
※本サイトは、法律的またはその他のアドバイスの提供を目的としたものではありません。当社は本サイトの記載内容（テンプレートを含む）の正確性、妥当性の確保に努めておりますが、ご利用にあたっては、個別の事情を適宜専門家にご相談いただくなど、ご自身の判断でご利用ください。
関連記事
プロジェクトロードマップの作成方法｜効率的に作成できるテンプレートも
プロジェクトの成功には、明確な目標設定と効果的な進捗管理が不可欠です。プロジェクトロードマップは、全体像を時系列で整理した計画書のことで、関係者が多いプロジェクトでも目標設定や進捗を共有しやすくなるツールです。 当記事では、プロジェクトロー…
詳しくみるインタビュー取材の企画書とは？作成時のポイントとテンプレート
インタビュー取材を行うにあたって、まずはインタビュー対象者に了承を得る必要があります。了承を得る際に重要になるのが、インタビューの企画書です。企画書でインタビュー対象者に取材意図や質問内容を事前に伝えることは、承諾を得るだけでなく、インタビ…
詳しくみる顧客満足度調査（CS調査）とは？作成の流れ・無料テンプレートも
顧客満足度調査（CS調査）は、企業が顧客の声を正確に把握し、事業改善やマーケティング戦略の見直しに役立てるための重要な手法です。顧客の期待や意見を数値化し、商品やサービスの評価を明確にすることで、具体的な改善策を打ち出せるようになります。 …
詳しくみる撮影スケジュール表とは？作成方法や無料のテンプレを紹介
撮影スケジュール表は、映像制作現場などで、撮影スタッフと出演者が同じ情報を共有し、スケジュール通りに撮影が進むようサポートするための表です。撮影スケジュール表づくりにおいて、撮影準備や撮影内容を効率よく進めるには、スケジュールの明確な把握が…
詳しくみる企画書の書き方は？基本構成や分析方法、記載例を基にわかりやすく解説
アイデアをもとに新規プロジェクトを始める際に不可欠なのが企画書です。しかし企画案を言語化するのは、慣れない人にとって簡単な作業ではありません。 まずは読み手側にすぐに把握してもらえる企画書の作り方を把握することが大切です。そこで本記事では、…
詳しくみる出版企画書とは？採用される企画書の書き方・テンプレートを紹介
書籍の出版を成功させるためには、企画の魅力を伝えることが欠かせません。その際に重要な役割を果たすのが「出版企画書」です。どれほど優れたアイデアであっても、魅力が適切に伝わらなければ採用には至りません。そのため、企画書の作成にあたっては、出版…
詳しくみる