- 更新日 : 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の修正は他のページにも影響を与える可能性があります。安易に変更を指示しないようにしましょう。
小数点以下の端数は、強制的に整数で書き出され画像がぼやけたり指定した幅にうまく合わなかったりと、さまざまな影響を与えます。デザインが思いがけなく崩れるリスクがあるため、仕様書に記載する数値は端数が含まれていないか確認しましょう。 |
コーディング仕様書は無料のテンプレートを有効活用しよう
コーディング仕様書とは、デザインだけでは伝わりにくい情報や要件を開発者向けに分かりやすく記載した指示書のようなものです。コーディング仕様書には、プロジェクトの概要やスケジュール表、サイトマップ、ワイヤーフレーム、リンク先・アニメーションなどの情報を記載します。コーディング仕様書には無料のテンプレートもあるので、情報の抜け漏れを防ぐためにも有効活用しましょう。
※ 掲載している情報は記事更新時点のものです。
※本サイトは、法律的またはその他のアドバイスの提供を目的としたものではありません。当社は本サイトの記載内容（テンプレートを含む）の正確性、妥当性の確保に努めておりますが、ご利用にあたっては、個別の事情を適宜専門家にご相談いただくなど、ご自身の判断でご利用ください。
関連記事
乗船名簿とは？無料テンプレ・名簿を作成する場合のポイントも
乗船名簿は、乗船者の氏名や住所、連絡先などの個人情報を記録するドキュメントです。万が一の事故や緊急事態が発生した際に、安全確認や救助活動のために活用されます。最近では小規模な船舶にも乗船名簿の作成が法令により義務付けられるなど、その重要性が…
詳しくみるRFP（提案依頼書）とは？メリットや書き方を解説（テンプレート付き）
RFP（提案依頼書）とは、企業が開発会社にシステム開発を依頼するための書類です。要件を適切に伝え、双方の認識のズレなどのトラブル防止に役立ちます。 本記事では、RFP（提案依頼書）を作成するメリットや書き方、作成からシステム開発までの流れを…
詳しくみる介護業務マニュアルとは？作成に役立つ無料テンプレートも紹介
介護業務マニュアルは、介護スタッフが一定の基準に基づいて質の高い介護サービスを提供するために作成される、介護事業所において欠かせないツールの1つです。内容には、日常的な介護業務の手順や注意点、さらに緊急時の対応方法や感染症予防策が含まれ、苦…
詳しくみるフローチャートとは？作り方のポイントと無料テンプレートを紹介
フローチャートは、複雑な業務や作業手順を整理し、全体像を把握するのに便利なツールです。矢印や記号を使って流れを図式化することで、効率的な運用や課題発見に役立ちます。 この記事では、フローチャートの基本的な作り方や無料テンプレートについて紹介…
詳しくみるアジャイル開発に仕様書は必要？仕様書の必要性やテンプレートも紹介
アジャイル開発は、変化するニーズに迅速に対応するための柔軟なソフトウェア開発手法として、多くの企業で採用されています。 アジャイル開発ではスピードと柔軟性が求められるので、仕様書作成に時間を割くことがデメリットになる場合があります。しかし、…
詳しくみるIT手順書とは？テンプレートをもとにわかりやすい書き方や例文を解説
IT手順書とは、ITシステムの操作や運用に関する手順を事細かに記載したドキュメントです。作業品質が一定に保たれたり、ミスを防止できたりするメリットがあります。 IT手順書の作成時には、文章や表などを用いてわかりやすく記載することが重要です。…
詳しくみる