HTMLコーディング仕様書作成システム

1 案件基本情報

クライアント名

案件名

納品希望日

発注担当者

連絡先メールアドレス

2 デザインファイル情報

デザインツール

デザインファイルURL

画像素材の格納場所

デザインに関する補足事項

3 ページ構成・ファイル構成

制作するページを追加してください。階層構造は「/」で表現します（例：company/about.html）

4 コーディング要件

HTML仕様

CSS仕様

レスポンシブ対応

デザイン基準幅

対応ブラウザ

対応デバイス

使用禁止ライブラリ・フレームワーク

5 実装する機能

ハンバーガーメニュー

スマホ時のメニュー開閉

画像スライダー

カルーセル、スライドショー

アコーディオン

Q&A、開閉コンテンツ

タブ切り替え

コンテンツのタブ表示

モーダルウィンドウ

ポップアップ表示

フォームバリデーション

入力チェック、エラー表示

スムーススクロール

ページ内リンクの滑らかな移動

スクロールアニメーション

要素のフェードイン等

その他実装が必要な機能

6 動作・インタラクション仕様

ホバーアクション

アニメーション仕様

クリック時の動作

7 SEO・アクセシビリティ対応

各ページに適切なmeta情報（title, description）を設定画像にalt属性を設定見出しタグ（h1-h6）を適切に使用セマンティックHTML（header, nav, main, footer等）を使用 OGP（Open Graph Protocol）タグを設定 ARIA属性でアクセシビリティ向上

8 納品形式・ファイル構成

ディレクトリ構成

📁 ファイル構成の指定方法

チェックを入れたフォルダが納品物に含まれます。よく使うフォルダから選んでください。

※ HTMLファイルは「ページ構成」で指定したものが自動的に含まれます

必要なフォルダにチェック

📁 css/

CSSファイルを格納

📁 js/

JavaScriptファイルを格納

📁 images/

画像ファイルを格納

📁 fonts/

Webフォントを格納

📁 lib/

ライブラリファイルを格納

📁 assets/

その他のアセットを格納

その他のフォルダ（任意）

その他のファイル（任意）

構成プレビュー

納品方法

Gitリポジトリ（使用する場合）

9 注意事項・その他

コーディング時の注意点

開発環境・使用ツール

その他特記事項

HTMLコーディング仕様書