コーディング代行を外注する際の準備物

①はじめに

Web制作プロジェクトにおいて、デザイン完成後に発生する「コーディング代行」への発注業務は、サイトの表示品質、公開スケジュール、そして最終的な利益率を左右する極めてクリティカルな分岐点です。

検索エンジン（Google）による評価アルゴリズムは、単なる視覚的デザイン以上に「Core Web Vitals（LCP・INP・CLS）に代表される高速表示性能」「セマンティックHTMLによる論理的文書構造」「モバイル端末における完全なアクセシビリティ（JIS X 8341-3 / WCAG 2.2）」といったフロントエンドの基盤品質を冷徹にスキャンしています。さらに、制作現場においてはFigmaのAuto LayoutやVariables（デザイントークン）を前提としたピクセルパーフェクトな実装力、WordPressのカスタムブロック（Gutenberg）開発やヘッドレスCMS構築など、コーダーに要求される技術水準は年々高度化しています。

しかし、実際の制作現場では以下のような「発注・受託間のコミュニケーション不全による手戻り」が後を絶ちません。

• 「デザインカンプを渡しただけで着工してもらったら、タブレット幅でレイアウトがガタガタに崩れていた」
• 「ホバー時やスクロール時のアニメーション演出が、デザイナーの頭の中にあったイメージと全く違っていた」
• 「フォームの必須バリデーションや完了画面の遷移仕様が伝わっておらず、公開直前に大幅な追加改修が発生した」
• 「metaタグやOGP、見出し構造（h1〜h6）の指定が漏れており、SEO上の重大な欠陥を抱えたまま納品された」

こうしたトラブルや手戻りの9割以上は、コーダーの技術不足ではなく、「発注前の指示書・仕様書における要件定義の曖昧さ」に起因しています。コーディング代行会社が能力を100%発揮し、一切のロスタイムなくピクセルパーフェクトかつ高パフォーマンスなコードを組み上げるためには、発注側が「何を、どの形式で、どこまで定義して渡すか」が決定打となります。

本稿では、数多くのWeb制作会社、広告代理店、事業会社のフロントエンド実装を黒衣（ホワイトラベル）として支え続けるコーディング代行のスペシャリスト「ファイブスターコーディング（Five Star Coding）」の実務ノウハウを結集。発注前に揃えるべき必須素材の完全リスト、手戻りを未然に防ぐ6大仕様カテゴリ、破綻しないレスポンシブ設計基準、アニメーション演出の伝達フォーマット、そして実務に即時投入できる仕様書構成案に至るまで、徹底的に解説します。

②コーディング代行の発注前に準備すべき「必須素材」一覧

コーディング代行会社に見積もりを依頼し、スムーズに着工へと移行するためには、作業の前提となる「素材一式」の不備をゼロにしておく必要があります。素材が揃わない状態での見切り発車は、作業の中断、差し戻し、そして納期の遅延を招く最大の要因です。

発注前に必ず手元へ揃えておくべき必須素材は、大きく分けて以下の5点に集約されます。

【コーディング代行発注前の必須素材チェックリスト】

 1. 確定版デザインカンプデータ（Figma / Adobe XD / Photoshop / Illustrator）
 2. サイトマップ ＆ ディレクトリ構造定義書（URLルール一覧）
 3. テキスト原稿 ＆ アセット素材（ベクターアイコン・ライセンス確認済み画像）
 4. サーバー・ドメイン・インフラ情報（接続権限・PHP/MySQLバージョン）
 5. 外部連携ツール・計測タグ情報（GA4・GTM・外部API・フォーム送信先）

1. 確定版デザインカンプデータ

デザインデータは、可能な限り「全要素の確定（デザインFIX）」の状態で共有することが鉄則です。制作途中のラフデータやボツ案が混在していると、コーダーが本番用のアートボードを誤認し、重大な手戻りが発生します。

• Figmaの場合:
  • 閲覧権限だけでなく、CSSプロパティやアセットの直接ダウンロードが可能な「Dev Mode（開発モード）権限」を付与する。
  • 実装対象となる最終アートボードに「★FIX」「本番用」などのラベルを明記し、下書きフレームは別ページへ隔離または削除する。
  • テキストレイヤー内の不要な小数点（例: 幅320.45pxなど）を整理し、ピクセルグリッドにスナップさせておく。
• Adobe XDの場合:
  • 「開発用に共有」リンクを発行し、ダウンロード可能なアセット設定を有効化する。
• Photoshop（.psd）/ Illustrator（.ai）の場合:
  • テキストはアウトライン化せず、編集可能なテキストレイヤーのまま保存する（フォント名、ウェイト、行高を正確に抽出するため）。
  • レイヤー構造をヘッダー、メインビジュアル、各セクション、フッター単位でグループ化（フォルダ分け）し、不要な非表示レイヤーは完全に削除（パージ）する。

2. サイトマップ ＆ ディレクトリ構造定義書

対象案件の全容を一覧化したドキュメントです。エクセルやスプレッドシート、Notion等で管理するのが理想的です。

• 各ページの日本語名称（例: サービス紹介、会社概要、お問い合わせ）
• 正式な公開URL（例: /services/, /company/, /contact/）
• 使用するテンプレートの種別（静的HTML固定ページ、WordPressカスタム投稿一覧、詳細ページなど）
• 階層構造（親子関係）の明示

3. テキスト原稿 ＆ アセット素材

デザインカンプ内に「ダミーテキスト（Lorem ipsum…）」や仮のプレースホルダー画像が残っている場合、本番用データの支給ルールを定めておく必要があります。

• テキスト原稿: カンプ内の文字をそのまま流用してよいのか、別途Wordやスプレッドシートで支給される最終校正済み原稿を流し込むのかを明示する。
• ロゴ・ベクターアイコン: SVG形式で書き出せる状態にしておく。IllustratorやFigmaで作成されたアイコンは、必ず「アウトライン化（Outline Stroke）」を行い、拡大縮小しても線の太さが歪まない状態にしておく。
• 写真・画像素材: カンプ内の埋め込み画像をそのままコーダー側でスライス（切り出し）してよいのか、高解像度の生データ（JPG/PNG）を別途フォルダで支給するのかを取り決める。有償ストックフォトを利用している場合は、ライセンス取得済みであることを確認する。

4. サーバー・ドメイン・インフラ情報

静的HTMLのファイル納品（ZIP納品）だけであれば不要ですが、代行会社に本番サーバーへの直接アップロードやWordPressの環境構築まで依頼する場合は、以下の情報が必須となります。

• サーバー会社名（エックスサーバー、ConoHa WING、さくらインターネット、AWS、Kinsta等）
• サーバー管理画面（コントロールパネル）のログイン情報、またはFTP/SFTP接続情報（ホスト名、ユーザー名、パスワード、ポート番号）
• SSH接続情報の有無（GitデプロイやWP-CLI操作を伴う場合）
• 稼働しているPHPのバージョン（推奨: PHP 8.1〜8.3系）およびMySQL/MariaDBのバージョン
• 既存サイトの常時SSL化の有無、およびDNS管理画面（ネームサーバー変更権限）の所在

5. 外部連携ツール・計測タグ情報

サイト公開と同時に稼働させるべきマーケティングタグや外部サービスがある場合、実装段階でコード内に組み込む必要があります。

お問い合わせフォームの送信先メールアドレス（To / Cc / Bcc）および自動返信メールの確定原稿

Googleタグマネージャー（GTM）コンテナID、またはGoogleアナリティクス（GA4）測定ID

広告計測タグ（Metaピクセル、Google広告コンバージョントラッカー、Yahoo!タグ等）

チャットボットツール、ヒートマップツール、外部CRM（HubSpot/Salesforce）埋め込みコード

③手戻りを防ぐコーディング指示書に記載すべき6つのカテゴリ

デザインカンプがどれほど精緻に作られていても、それは「静止画（1つの断面）」に過ぎません。実際のWebサイトは、ユーザーのマウス操作、画面幅の変化、文字数の増減、フォームの入力エラーなど、無数の「動的な振る舞い」を伴います。

コーディング指示書（仕様書）とは、この「カンプの見た目からは読み取れない裏側のルール」を漏れなく定義するための設計図です。手戻りを物理的にゼロへ抑え込むために、指示書に必ず盛り込むべき「6大カテゴリ」を解説します。

【手戻りを防ぐコーディング指示書の6大カテゴリ】

 ┌─────────────────────────────────────────────────────────────┐
 │ ① 基本仕様（言語・文字コード・CSS設計・納品形態）          │
 ├─────────────────────────────────────────────────────────────┤
 │ ② レスポンシブ ＆ 表示領域ルール（ブレイクポイント・最大幅）│
 ├─────────────────────────────────────────────────────────────┤
 │ ③ 動的ギミック ＆ インタラクション（ホバー・スクロール等） │
 ├─────────────────────────────────────────────────────────────┤
 │ ④ SEO ＆ メタデータ（タイトル・ディスクリプション・OGP）   │
 ├─────────────────────────────────────────────────────────────┤
 │ ⑤ フォーム ＆ バリデーション仕様（エラー表示・メール送信） │
 ├─────────────────────────────────────────────────────────────┤
 │ ⑥ CMS ＆ WordPress開発仕様（カスタム投稿・ブロック開発）   │
 └─────────────────────────────────────────────────────────────┘

カテゴリ1：基本仕様（基本構造・CSS設計・納品形態）

プロジェクト全体のコードの書き方やファイル構成に関するルールを定義します。

• HTMLバージョン / 文字コード: HTML5、UTF-8
• CSS設計規則: FLOCSS（Foundation / Layout / Object）の採用、BEM（Block Element Modifier）命名規則の厳格準拠
• プリプロセッサ: Sass（SCSS記法）、モダンなモジュールシステム（@use / @forward）の使用指定
• ブラウザ対応要件:
  • デスクトップ: Google Chrome最新版、Safari最新版、Microsoft Edge最新版
  • モバイル: iOS Safari最新版、Android Chrome最新版
• 納品形態:
  • ZIPアーカイブ一式納品（HTML/CSS/JS/画像/PHP一式）
  • GitHub / GitLabリポジトリへのプルリクエスト納品
  • 指定テストサーバーへの直接デプロイ納品

カテゴリ2：レスポンシブ ＆ 表示領域ルール

PC表示とスマホ表示の切り替え挙動や、ワイドモニターで閲覧された際のコンテナ制御を規定します（詳細は次章で深掘りします）。

• ブレイクポイントのpx数（例: 768px未満をスマホ表示、768px以上をPC表示）
• PCカンプの基準コンテンツ最大幅（例: 1200px）および左右の余白の広がり方（中央揃え固定 vs フルイド可変）
• タブレット中間幅（768px〜1024px）におけるカラム落ちやフォント縮小の計算ルール

カテゴリ3：動的ギミック ＆ インタラクション仕様

JavaScriptやCSS3アニメーションを用いた「動き」のルールを言語化します。

• ヘッダーの追従挙動（画面最上部に常時固定、スクロールダウンで非表示・スクロールアップで再出現など）
• ボタンやテキストリンクのホバーエフェクト（透明度変化、下線出現、背景色反転、浮き上がり等）
• スライダー・カルーセルの動作条件（自動再生の秒数、スワイプ対応、ページネーション/ナビゲーション矢印の有無）
• スクロール連動エフェクト（画面内に入った瞬間のフェードイン、パララックスの有無）
• モーダルウィンドウ、アコーディオン（FAQ）の開閉挙動と複数展開の許可/不許可

カテゴリ4：SEO ＆ メタデータ（文書構造・タグ設定）

Googleクローラーに高く評価されるための論理マークアップルールを定めます。

• 各ページの<title>タグの命名規則（例: ページ名｜サイト名）
• <meta name="description"> の原稿割り当て
• 見出し階層（<h1>〜<h6>）の指定（特にトップページの<h1>をロゴ画像にするか、キャッチコピーにするかの明示）
• OGP設定（SNSシェア用のタイトル、説明文、サムネイル画像URL、Twitterカード種別）
• パンくずリストの構造化データ（JSON-LD BreadcrumbList）のマークアップ要否

カテゴリ5：フォーム ＆ バリデーション仕様

離脱を防ぎ、確実にリード（問い合わせ）を獲得するための入力フォーム仕様を定義します。

• 各入力項目の属性（必須 / 任意）
• リアルタイムエラー表示（入力漏れ時に枠線を赤くし、下部にエラーメッセージを出す等）の要否
• 郵便番号からの住所自動入力機能（YubinBangoライブラリ等の組み込み）
• カタカナ項目の全角自動変換や、電話番号・メールアドレスの半角強制変換の有無
• 送信後の挙動（サンクスページURLへの画面遷移 vs Ajax送信による同一画面完了メッセージ表示）

カテゴリ6：CMS ＆ WordPress開発仕様

WordPress等のCMS化を伴う場合、クライアントの運用事故を防ぐためのバックエンドルールを明文化します。

• 導入するカスタム投稿タイプ名、スラッグ、ラベル（例: case_study ➔ 制作実績）
• カスタムタクソノミー（カテゴリー・タグ）の階層性（親子関係の有無）
• カスタムフィールド（ACF）の入力項目定義（テキスト、画像、真偽値、リピーター等）
• Gutenberg（ブロックエディタ）専用の独自ブロック化を希望するパーツの選定
• 1ページあたりの記事表示件数（posts_per_page）とページネーションのUI仕様

　

④レスポンシブ切り替えルール（ブレイクポイント）の指定方法

FigmaやXDでデザインを作成する場合、一般的には「PC版（横幅1200px〜1440px等）」と「スマホ版（横幅375px〜390px等）」の2つのカンプが用意されます。

しかし、実際のWebブラウザは、iPadなどのタブレット端末（横幅768px〜834px）、小型ノートPC（1024px〜1280px）、さらには大型4Kモニター（1920px〜2560px以上）まで、無段階の解像度でアクセスされます。この「カンプが存在しない中間幅や超ワイド画面で要素がどう振る舞うべきか」を指示書で明示しておかないと、予期せぬ文字の重なりやレイアウト破綻が発生します。

レスポンシブの破綻を完全に防ぐための指定手法を4つのポイントで解説します。

【レスポンシブ画面幅の階層構造】

 [〜767px]      ➔ 【SP表示】1カラム縦積み・フォント最適化
 [768px〜1023px]➔ 【タブレット中間幅】流体リキッド伸縮・clamp()計算
 [1024px〜1279px]➔ 【小型PC幅】2〜3カラム・余白比率保持
 [1280px〜]     ➔ 【標準PC幅】カンプ基準サイズ
 [超ワイド幅]   ➔ 【中央揃え固定】max-widthで固定し左右に余白を分配

1. ブレイクポイントの数値を「ピクセル単位」で厳密に指定する

業界で最も標準的なブレイクポイントの設定例は以下の通りです。案件のターゲット層やデザインに応じて、指示書に明記します。

• 2段階切り替え（標準的・高コストパフォーマンス）：
  • 768px 以上：PCレイアウト
  • 767px 以下：スマートフォンレイアウト
• 3段階切り替え（タブレットを特別扱いする場合）：
  • 1024px 以上：PCレイアウト
  • 768px 〜 1023px：タブレットレイアウト（カラム幅の比率維持、メニューのハンバーガー化など）
  • 767px 以下：スマートフォンレイアウト

プロの指定テクニック：

「スマホ対応をお願いします」という抽象的な依頼ではなく、**「メディアクエリは @media (min-width: 768px) のモバイルファースト、または @media (max-width: 767px) でデスクトップからの切り替えを統一してください」**と指定することで、CSSの記述規則が乱れるのを防ぐことができます。

2. PCデザインの「最大幅（max-width）」と余白の挙動を指定する

FigmaのPCカンプが幅1440px、その中央に幅1200pxのコンテンツエリアが配置されている場合、閲覧者の画面幅が1920pxや2560pxになった際にどう表示させるかを指示します。

• パターンA（推奨：中央揃え固定）：
  • 「コンテンツエリアの最大幅を1200px（max-width: 1200px; margin-inline: auto;）とし、画面幅がそれ以上広がった場合はコンテンツのサイズは固定のまま、左右の外側余白だけが均等に広がるようにしてください」
• パターンB（フルイド・可変幅）：
  • 「背景画像やキービジュアルのみ画面幅100%（width: 100vw;）で画面いっぱいに広げ、テキストやグリッド部分のみ1200pxで中央配置してください」

3. タブレット中間幅（768px〜1024px）における「崩れ防止」ルール

PC用の3カラム・4カラムのグリッドが、画面幅が狭まるにつれて窮屈になり、文字が不自然に1行に2文字ずつ落ちてしまう現象を防ぐための指示です。

• 「3カラムで並んでいる商品カードは、画面幅1024pxを下回った段階で2カラムに落とし、767px以下で1カラムの縦積みに切り替えてください」
• 「フォントサイズとセクション間パディングは、clamp()関数を用いて375px〜1200pxの間で滑らかに拡大縮小（流体タイポグラフィ）させてください」

4. テキストの「1文字落ち（孤立文字）」を防ぐ禁則処理指示

スマートフォンの狭い画面幅において、見出しの文末の「です。」や「〜について」の「て」の1文字だけが次の行へ改行されて落ちてしまうと、Webサイトの品格が著しく損なわれます。

「日本語テキストの約物（「」や（）など）の余白を美しく詰めるため、font-feature-settings: "palt"; を見出し要素に適用してください」

「見出しテキスト内の重要な文節には、指示書で指定した通り <span class="nobr">（CSS: display: inline-block; white-space: nowrap;）を付与し、単語の途中や句読点だけの1文字改行が発生しないように組んでください」

⑤ホバー・スクロール等のインタラクション挙動を正確に伝えるフォーマット

デザインカンプは静止画であるため、最も意思疎通のズレが発生しやすいのが「動き（マイクロインタラクション）」の領域です。

「ボタンを押したときにいい感じに動かしてください」「スクロールしたらオシャレにふわっと出してください」といった曖昧なオーダーは、コーダーを迷わせ、修正ラリー（手戻り）を無限に発生させる元凶となります。

プロのディレクターが実践している、エンジニアへ100%正確に意図が伝わる「4つの記述フォーマット」を解説します。

【インタラクション指示の基本構造】

 1. トリガー（契機） ➔ 「マウスを乗せたとき」「画面に入ったとき」
 2. 対象要素       ➔ 「このボタン」「このセクションのカード3枚」
 3. 変化の内容     ➔ 「背景色が#00f2feに変わる」「下から20px浮き上がる」
 4. 時間とイージング ➔ 「0.3秒かけて滑らかに（ease-out）」

1. ボタン・リンクのホバー（マウスオーバー）指示フォーマット

PC閲覧時に、ボタンやカード、ナビゲーションにカーソルが乗ったときの振る舞いを指定します。

演出パターン	具体的な指示書の記述例
透過フェード	対象: 全てのテキストリンクおよびバナー 「マウスホバー時、opacity: 0.7; に変化。変化時間は 0.3s ease;」
背景色反転・シャドウ	対象: 各種CTAボタン 「ホバー時、背景色を #0a192f から #00f2fe へ変更。同時に box-shadow を付与し、上に 2px 持ち上げる（transform: translateY(-2px);）。所要時間 0.25s」
矢印アイコンのスライド	対象: 「詳しくはこちら」ボタン内の右矢印 「ボタン全体にホバーした際、右矢印アイコンのみが右方向へ 4px スライドする（transform: translateX(4px);）。時間 0.3s」
画像ズームアップ	対象: お知らせ・ブログ一覧のアイキャッチ画像 「カードにホバーした際、外枠のフレームからはみ出さないよう（overflow: hidden;）、画像のみを 1.05倍 に拡大ズームする（transform: scale(1.05);）。所要時間 0.4s ease-out」

2. スクロール連動エフェクト（フェードイン・スライドイン）の指示フォーマット

スクロールしてコンテンツが画面内（ビューポート）に入ってきた際の登場アニメーションを定義します。

• 出現タイミング（閾値 / Threshold）の指定:
  • 「要素の上端が、画面の下から20%の位置までスクロールされた瞬間にアニメーションを発火させてください（Intersection Observer使用）」
• 動きの方向と移動量:
  • 「下から上へ 30px 移動しながら、不透明度 0 から 1 へフェードイン」
• ディレイ（時間差・スタッガー）の指定:
  • 「横に3つ並んでいるサービスカードは、同時に出現させるのではなく、左から順に 0.15秒 ずつ遅延（スタッガー効果）させて順番にフェードインさせてください」

3. スライダー・カルーセル（Swiper等）の詳細動作パラメータ指定

トップページのメインビジュアルや実績ギャラリーで多用されるカルーセルスライダーは、パラメータを箇条書きで指定します。

【スライダー動作仕様の記述例】
 ・使用ライブラリ: Swiper（最新版・CDN読み込み）
 ・表示枚数（PC）: 1画面に3枚表示（両端が見切れるカルーセル形式）
 ・表示枚数（SP）: 1画面に1.2枚表示（右端が少し見えてスワイプを促す設計）
 ・アイテム間余白: PC時は gap: 32px、SP時は gap: 16px
 ・ループ再生: 有効（最後のスライドの次は最初へシームレスにループ）
 ・自動再生（Autoplay）: 有効（4秒ごとに次のスライドへ遷移、ホバーで一時停止）
 ・スワイプ操作: モバイルでのタッチスワイプ、PCでのマウスクリックドラッグ両対応
 ・ナビゲーション: 下部にドットインジケーター（アクティブ時はシアン色に変化）

4. 既存Webサイトの「URL＋タイムスタンプ」で動きを伝える手法

高度なアニメーション（GSAPを使ったパララックスやローディング画面、SVGパスのアニメーション等）の場合、文章だけでニュアンスを伝えるのは困難です。

その場合は、「参考サイトのURL」と「動画キャプチャ」を併用します。

• 「〇〇株式会社のサイト（URL）のトップページのように、背景の図形がマウスの動きに合わせてわずかに追従するエフェクトを希望」
• 「参考サイト（URL）のメニューボタンを押した際、3本線が回転して『×』印に変化するアニメーションと全く同じ挙動にしてください」

このように実例を示すことで、コーダーはライブラリの選定からイージング関数の設計までを一発で理解し、試行錯誤の工数をゼロにすることができます。

⑥ダウンロードして使えるコーディング指示書構成案

Web制作の現場でそのままコピー＆ペースト、またはスプレッドシートやNotionに転記して実務に投入できる「コーディング指示書・仕様書の標準テンプレート」を作成しました。

このフォーマットの空欄を埋めてデザインデータ（Figma等）と一緒に提出するだけで、コーディング代行会社との間で発生する認識のズレや手戻りを物理的に排除することが可能です。

【実務用】コーディング代行 統一仕様書テンプレート

1. プロジェクト基本情報

• 案件名（サイト名）: 株式会社〇〇 公式Webサイトリニューアル
• 公開予定ドメイン（URL）: [https://example.com/](https://example.com/)
• 対象ページ数: 全 8 ページ（トップ 1P / 下層固定 5P / お知らせ 1P / お問い合わせ 1P）
• 希望初校アップ日: 2026年〇月〇日（〇）
• 最終校了・納品日: 2026年〇月〇日（〇）
• 本番公開予定日: 2026年〇月〇日（〇）
• 納品形態: [ ] ZIPファイル一式納品 / [ ] GitHubリポジトリへのPR納品 / [ ] 指定本番サーバーへ直接反映

2. 開発環境 ＆ 技術スタック要件

• マークアップ仕様: HTML5（セマンティック構造準拠、W3Cエラーゼロ目標）
• CSS設計: FLOCSS ＋ BEM（SCSS形式、Dart Sass @use 構文）
• JavaScript: ネイティブJavaScript（Vanilla JS）推奨、必要に応じて最新Swiper / GSAP使用
• 文字コード: UTF-8
• 動作保証対象ブラウザ:
  • Windows / Mac: Google Chrome（最新版）, Apple Safari（最新版）, Microsoft Edge（最新版）
  • スマートフォン: iOS Safari（最新2世代）, Android Google Chrome（最新版）

3. 表示領域 ＆ レスポンシブ設計ルール

• ブレイクポイント:
  • デスクトップ表示（PC）: 768px 以上
  • スマートフォン表示（SP）: 767px 以下
• コンテンツ最大幅（max-width）:
  • PCデザインカンプ幅: 1440px
  • インナーコンテナ最大幅: 1200px（画面幅が1200pxを超えた場合は中央揃え固定、左右外側にマージンを自動配分）
• フォント表示設定:
  • 基本フォント: Google Fonts Noto Sans JP（ウェイト: 400, 700）
  • 欧文専用フォント: Google Fonts Poppins（ウェイト: 600, 800）
  • 日本語テキストの禁則処理: <span class="nobr"> による句読点・単語の1文字落ち防止を適用

4. ページ別構成 ＆ メタデータ一覧表

No	ページ名	本番予定URL	カンプ対応アートボード名	テンプレート種別	<title> タグ	<meta name=”description”>
1	トップページ	/	Page_Top_FIX	front-page.php	株式会社〇〇｜最先端の技術で未来を創る	株式会社〇〇の公式サイトです。〇〇事業を中心に…
2	私たちについて	/about/	Page_About_FIX	page-about.php	私たちについて｜株式会社〇〇	株式会社〇〇の企業理念、代表メッセージ…
3	サービス一覧	/service/	Page_Service_FIX	page-service.php	事業案内・サービス｜株式会社〇〇	提供している3つのコア事業についてご紹介します…
4	お知らせ一覧	/news/	Archive_News_FIX	archive.php（WP通常投稿）	お知らせ・最新情報｜株式会社〇〇	株式会社〇〇からのプレスリリースや展示会情報…
5	お知らせ詳細	/news/sample/	Single_News_FIX	single.php（WP通常投稿）	【記事タイトル】｜株式会社〇〇	【記事本文から120文字を自動抜粋】
6	お問い合わせ	/contact/	Page_Contact_FIX	page-contact.php	お問い合わせ｜株式会社〇〇	サービスに関するご相談、お見積もり依頼はこちら…
7	完了画面	/contact/thanks/	Page_Thanks_FIX	page-thanks.php	送信完了｜株式会社〇〇	お問い合わせありがとうございます。担当者より…
8	404エラー	/404.html	Page_404_FIX	404.php	ページが見つかりません｜株式会社〇〇	お探しのページは移動または削除された可能性が…

5. インタラクション・JavaScript挙動仕様書

• グローバルヘッダー:
  • スクロール開始前: 背景透明、文字白
  • スクロール後（下方向へ 100px 移動時）: 背景が白（#ffffff、不透明度95%）に変化し、上部に固定配置（position: fixed;）。シャドウ（box-shadow: 0 4px 12px rgba(0,0,0,0.08);）を付与。所要時間 0.3s。
• ハンバーガーメニュー（SP時）:
  • 右上の三本線アイコンをタップした際、アイコンがアニメーションして「×」印に変形。
  • 画面全体にナビゲーションメニューが右からスライドイン（所要時間 0.35s ease-out）。
  • メニュー展開中は背面のWebページ本体がスクロールしないよう固定（overflow: hidden; 制御）。
• CTAボタンホバー:
  • マウスオーバー時、背景グラデーションの輝度を上げ、ボタン全体を上に 2px 持ち上げる（transform: translateY(-2px);）。所要時間 0.2s。
• セクション登場アニメーション:
  • 各セクションの見出しおよびコンテンツ要素は、画面下部から20%の位置に達した瞬間に、下から 20px 浮き上がりながらフェードイン（所要時間 0.6s ease-out）。

6. フォーム仕様書（お問い合わせ）

• フォーム実装方式: WordPressプラグイン（Contact Form 7）＋ functions.phpによるカスタムバリデーション
• 必須チェック項目:
  • お名前（1行テキスト）: 必須入力
  • フリガナ（1行テキスト）: 必須入力（全角カタカナのみ許可）
  • 貴社名（1行テキスト）: 任意入力
  • メールアドレス（email）: 必須入力（正しいメール形式 @ をチェック）
  • 電話番号（tel）: 必須入力（半角数字・ハイフン許容）
  • お問い合わせ種別（ラジオボタン）: 必須選択（3項目から1つ）
  • お問い合わせ内容（テキストエリア）: 必須入力（全角1000文字以内）
  • プライバシーポリシー同意（チェックボックス）: 必須チェック
• 送信先アドレス:
  • 管理者通知先（To）: info@example.com
  • 自動返信先: フォーム入力されたメールアドレス宛に即時返信
• スパム対策: Google reCAPTCHA v3のAPI連携（お問い合わせページ限定でのみJS読み込みを実行すること）

7. WordPress開発・CMS要件

• テーマ構築方針: 市販テーマ不使用、完全フルスクラッチのオリジナルテーマ開発
• 投稿機能の切り分け:
  • 通常投稿: 「お知らせ・ニュース」として使用
  • 固定ページ: トップページ、私たちについて、サービス案内、お問い合わせ
• 管理画面設計（ACF Pro使用）:
  • トップページのメインビジュアル画像・キャッチコピー文言を、管理画面から差し替え可能なフィールドを作成。
  • フッターに表示する「電話番号」「受付時間」「所在地」は、オプションページ（acf_add_options_page）を作成し、サイト全体で一元管理できるように構築。

指示書を活用したスムーズな進行なら「ファイブスターコーディング」へ

どれほど完璧な指示書やデザインカンプを用意しても、それを受け取るコーディング代行側の「技術的読解力」と「品質基準」が低ければ、満足のいく仕上がりには到達できません。

コーディング代行の専門チーム「ファイブスターコーディング（Five Star Coding）」は、制作会社様やディレクター様の意図を100%正確に汲み取り、手戻りのないクリーンなフロントエンド開発をご提供します。

【ファイブスターコーディングが選ばれる理由】

 1. 1pxのズレも許さないピクセルパーフェクトの追求
    FigmaやXDのデザインカンプを画面上に透過オーバーレイさせ、
    余白やフォントの文字詰め、角丸に至るまで厳格に検品します。

 2. Core Web Vitalsに完全準拠した超高速マークアップ
    無駄なスクリプトや不要なスタイルを徹底排除し、
    WebP対応、遅延読み込み、セマンティックHTMLを標準実装。
    GoogleのPageSpeed Insightsで圧倒的な高スコアを叩き出します。

 3. 壊れない完全オリジナルWordPressテーマ開発
    市販テーマを流用せず、完全スクラッチで軽量テーマを構築。
    更新担当者が触ってもデザインが崩れない直感的な管理画面を設計します。

 4. 制作会社様を支える完全黒衣（ホワイトラベル）対応
    Basic認証付きテスト環境の無償提供、Git納品、
    貴社名義でのクライアント対応サポートなど、専属開発部として機能します。

「指示書の書き方に不安がある」「ワイヤーフレームの段階で概算費用とスケジュール感をすり合わせたい」「急な案件で社内リソースがパンクしている」など、どのような制作課題でも構いません。

まずは現状のデザインデータや構想段階の資料をお手元にご用意いただき、お気軽にファイブスターコーディング（https://fivestar-coding.com/）へご相談ください。貴社のWeb制作プロジェクトを、最高水準の品質と手戻りゼロの進行力で強力にバックアップいたします。

FIVESTARCODINGはコーディング代行を成功に導く、信頼できるパートナーです。

コーディング代行成功のための戦略的依頼ステップ

①デザインと仕様の確定: Figma/XDファイルでデザインを確定させ、JavaScriptの挙動、アニメーション、レスポンシブのブレイクポイントを詳細に文書化する。

②品質要件の提示: SEOコーティング、WCAG準拠、Core Web Vitals目標値を明確に伝える。

③実績の検証: 依頼内容と類似した過去の外注実績を確認し、技術力を評価する。

お客様のご要望に応じた内容で、プランやスケジュールを円滑に進めさせていただきます。

こんな動きがほしい、モダンなサイトを構築したい等、お客様のご要望をぜひお聞かせください。

この他にも柔軟に対応することが可能ですので、ぜひ一度ファイブスターコーディングにまでお問い合わせください。