# コーポレートサイト 制作プロンプト

## デザイン参考テンプレート

<!--
1. https://chartd.net/samples からお好みのテンプレートを選ぶ
2. テンプレートページの Download ボタンから ZIP をダウンロード
3. ZIP を解凍する
4. 解凍したフォルダとこの .md ファイルを両方 Claude Design へアップロードして送信
-->

アップロードした ZIP のデザイン・レイアウトをそのまま踏襲してください。
以下の構築要件は **機能・コンテンツの指定のみ** です。色・フォント・余白・コンポーネントの見た目はテンプレートに従い、要件を理由にデザインを変えないでください。

---

## 出力先ディレクトリ

すべてのファイルは `corporate-site/` ディレクトリ内に作成してください。

```
corporate-site/
├── index.html
├── about.html
├── services.html
├── recruit.html
├── contact.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── images/
    └── （画像ファイル）
```

---

## プロジェクト情報

**会社名・屋号**
<!-- 例：株式会社 Acme -->

**業種・事業内容**
<!-- 例：BtoB SaaS プロダクト開発 -->

**ターゲット**
<!-- 例：中小企業の経営者・IT 担当者 -->

**強み・差別化ポイント**
<!-- 例：導入実績 500 社、24h サポート、業界最安値 -->

**ページ構成**
<!-- 例：トップ、会社概要、事業内容、採用、お問い合わせ -->

**ブランドトーン**
<!-- 例：誠実・プロフェッショナル・革新的 -->

**カラーイメージ**
<!-- 例：ネイビー × ホワイト × ゴールド -->

**技術スタック**
<!-- 例：Next.js + Tailwind CSS / HTML のみ -->

---

## 構築要件

### グローバルナビゲーション
- ロゴ＋メニュー（PC：横並び、SP：ハンバーガー）
- スクロール時のヘッダー固定＋背景変化

### トップページ
- ヒーローセクション：大きなキャッチコピー＋サブコピー＋CTA ボタン 2つ
- 実績数値バナー（導入社数・満足度・対応年数など）
- 事業内容カード（3〜4項目）
- お客様の声 / 導入事例（ロゴ or カード）
- ニュース・お知らせ一覧（最新3件）
- CTA バナー（資料請求・お問い合わせ誘導）

### 会社概要ページ
- 企業理念・ミッションセクション
- 会社情報テーブル（所在地・設立・資本金など）
- 沿革タイムライン

### 採用ページ
- 募集職種リスト（職種・雇用形態・勤務地）
- 福利厚生・社風紹介
- 応募フォーム（バリデーション付き）

### お問い合わせページ
- 問い合わせ種別セレクト
- 氏名・会社名・メール・電話・本文フィールド
- 送信後サンクスメッセージ

### フッター
- サイトマップリンク、SNS アイコン、コピーライト

### 共通要件
- モバイルファースト・レスポンシブ
- セマンティック HTML（SEO 配慮）
- WCAG AA 準拠（コントラスト・alt・キーボード操作）
- スムーズスクロール・ページ内アンカー対応
- スクロールトリガーのフェードイン / スライドインアニメーション
- 画像・CSS・JS の読み込み URL にはキャッシュバスター（例：`image.png?v=1`）を付与する