- 更新日 : 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の修正は他のページにも影響を与える可能性があります。安易に変更を指示しないようにしましょう。
小数点以下の端数は、強制的に整数で書き出され画像がぼやけたり指定した幅にうまく合わなかったりと、さまざまな影響を与えます。デザインが思いがけなく崩れるリスクがあるため、仕様書に記載する数値は端数が含まれていないか確認しましょう。 |
コーディング仕様書は無料のテンプレートを有効活用しよう
コーディング仕様書とは、デザインだけでは伝わりにくい情報や要件を開発者向けに分かりやすく記載した指示書のようなものです。コーディング仕様書には、プロジェクトの概要やスケジュール表、サイトマップ、ワイヤーフレーム、リンク先・アニメーションなどの情報を記載します。コーディング仕様書には無料のテンプレートもあるので、情報の抜け漏れを防ぐためにも有効活用しましょう。
※ 掲載している情報は記事更新時点のものです。
※本サイトは、法律的またはその他のアドバイスの提供を目的としたものではありません。当社は本サイトの記載内容（テンプレートを含む）の正確性、妥当性の確保に努めておりますが、ご利用にあたっては、個別の事情を適宜専門家にご相談いただくなど、ご自身の判断でご利用ください。
関連記事
アルバイト向けマニュアルの重要性を徹底解説｜種類とテンプレも紹介
業務効率化や教育をスムーズに行うには、マニュアルの準備が不可欠です。すべての従業員が一定の水準で業務を遂行できるようにするために、アルバイト向けにもマニュアルを用意しておくことが大切です。 当記事では、アルバイトにも必要なマニュアルの重要性…
詳しくみるシステム開発の工程表とは？作り方・無料テンプレートを紹介
システム開発は複数の人が関わり多くの作業を経て成果物を作成するため、作業状況や納期までの予定を確認できる工程表の作成が必要です。しかし、工程表をどのように作成すればよいのか、分からない方もいるのではないでしょうか。 当記事では、システム開発…
詳しくみる展示会アンケートとは？準備が必要な理由と無料テンプレートを紹介
展示会アンケートは、自社の展示会において訪れたお客様から直接意見を収集するための効果的な手段です。来場者の満足度や製品に対するフィードバックを得ることで、見込み客の特定やマーケティング戦略の最適化、製品の改善につなげられます。 当記事では、…
詳しくみる研修アンケートの作り方は？必要項目・様式やテンプレートを紹介
研修後のアンケートは、研修効果の測定や改善に欠かせないツールです。アンケートを通じて、参加者の満足度や理解度、実用性を把握し、次回の研修の質向上に役立つフィードバックを得られます。 当記事では、効果的な研修アンケートの作り方や必要な項目、テ…
詳しくみるお客様の声とは？無料テンプレート・作り方も解説
お客様の声は、企業や商品に対する貴重なフィードバックであり、アンケートやSNSなどを通じて収集されます。これらの声は、商品やサービスの改善に役立つだけでなく、新たな商品開発やマーケティング戦略に活用可能です。 当記事では、お客様の声の意義や…
詳しくみる業務・作業依頼書とは？書き方や作成ポイント・テンプレートを紹介
業務・作業依頼書とは、業務内容や作業の詳細、依頼事項を明確に伝えるための文書です。業務・作業依頼書を使用することで、双方の認識違いやトラブルを防ぎ、スムーズな業務進行を実現できます。当記事では、業務・作業依頼書の基本的な書き方、役立つテンプ…
詳しくみる