• 更新日 : 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つのポイントを紹介します。

コーディング仕様書は無料のテンプレートを有効活用しよう

コーディング仕様書とは、デザインだけでは伝わりにくい情報や要件を開発者向けに分かりやすく記載した指示書のようなものです。コーディング仕様書には、プロジェクトの概要やスケジュール表、サイトマップ、ワイヤーフレーム、リンク先・アニメーションなどの情報を記載します。コーディング仕様書には無料のテンプレートもあるので、情報の抜け漏れを防ぐためにも有効活用しましょう。

• 監修：伊藤紗香

  プロライター・校閲者。2019年より地方の新聞社・整理部校閲班にて3年間校閲を担当。政治経済・スポーツ・文化・地域面などさまざまな分野の記事を校閲し、同時期にWeb媒体のライティング・記事校閲にも携わる。現在新聞社での実務経験を生かし、プロのライター・校閲者として業務を担う。