- 更新日 : 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の修正は他のページにも影響を与える可能性があります。安易に変更を指示しないようにしましょう。
小数点以下の端数は、強制的に整数で書き出され画像がぼやけたり指定した幅にうまく合わなかったりと、さまざまな影響を与えます。デザインが思いがけなく崩れるリスクがあるため、仕様書に記載する数値は端数が含まれていないか確認しましょう。 |
コーディング仕様書は無料のテンプレートを有効活用しよう
コーディング仕様書とは、デザインだけでは伝わりにくい情報や要件を開発者向けに分かりやすく記載した指示書のようなものです。コーディング仕様書には、プロジェクトの概要やスケジュール表、サイトマップ、ワイヤーフレーム、リンク先・アニメーションなどの情報を記載します。コーディング仕様書には無料のテンプレートもあるので、情報の抜け漏れを防ぐためにも有効活用しましょう。
※ 掲載している情報は記事更新時点のものです。
※本サイトは、法律的またはその他のアドバイスの提供を目的としたものではありません。当社は本サイトの記載内容（テンプレートを含む）の正確性、妥当性の確保に努めておりますが、ご利用にあたっては、個別の事情を適宜専門家にご相談いただくなど、ご自身の判断でご利用ください。
関連記事
レセプションの案内状・招待状の例文や書き方、無料テンプレートを紹介
レセプションの案内状は、特別なイベントの招待を正式に伝える大切な役割を持っています。特に、飲食店やアパレルのプレオープン、新商品の発表会、レセプションパーティなどでは、顧客や関係者に丁寧な招待をすることで、ブランドの印象を高め、ファンを増や…
詳しくみる読者アンケートは社内報にも必要？効果や質問項目・テンプレを紹介
社内報は、企業内の情報共有やコミュニケーション促進に欠かせないツールです。一方で、社内報を作っても、読者である各従業員に読まれない内容では効果が上がりません。従業員にとって価値のある社内報を作成するためにも、従業員の声を拾い上げる読者アンケ…
詳しくみるヒアリングシートでWeb制作の課題解決！作り方や活用法（テンプレート付き）
コーポレートサイトやLPなどのWeb制作では、打ち合わせ前にヒアリングシートの作成が必要です。ヒアリングを実施しておけば、顧客（クライアント）の課題や要望を把握しやすくなるでしょう。 本記事では、Web制作でディレクションをスムーズに進めら…
詳しくみる飲食店の日報はどう書く？売上戦略に活かせる無料テンプレート付き
飲食店の日報は、売上や来客数、顧客の声を記録することで、売上アップや店舗運営を改善するために役立ちます。しかし、「日報をどう書けばいいのかわからない」と悩む方も少なくありません。日報には、時間帯別の売上や来客数、天気、お客様の反応だけでなく…
詳しくみるマーケティング計画とは？スケジュールの立て方や手順・テンプレを紹介
マーケティング計画は、企業がマーケティング目標を達成するための計画です。計画が適切に設計されていれば、限られたリソースを効果的に活用し、目標達成の可能性を高められます。しかし、スケジュールの立て方が曖昧だと、計画の実行段階でつまずきが発生す…
詳しくみる締日変更のお知らせの書き方！作成のポイントと無料テンプレートも
請求書の締日変更のお知らせを作成する際は、誠意の伝わる文面で、変更内容や理由を正確に明記することが重要です。また、取引先への配慮やタイミングを誤ると、業務に支障をきたす可能性があります。 当記事では、締日変更のお知らせの具体例や注意点、さら…
詳しくみる