---
name: corporate-site-builder
description: 中小企業・個人店舗向けのコーポレートサイト/店舗サイトをHTML・CSS・JSで複数ページ自動生成するスキル。「ホームページを作って」「コーポレートサイトを作りたい」「店舗のWebサイトが欲しい」「〇〇(飲食店/工務店/サロン等)のサイトを作って」といった依頼で必ず使うこと。業種ごとの構成テンプレート(references/配下)とAI画像生成(既定Codex CLI・追加課金なし。OpenAI/Geminiにも切替可)を組み合わせ、ヒアリングからサイト完成・画像生成・ブラウザ確認までを一気通貫で行う。ページ数が多い・業種特有の構成が必要・写真素材が必要、といった規模の依頼で特に効果を発揮する。
---

# 企業・店舗ホームページ自動生成スキル

中小企業・個人店舗向けの複数ページサイトを、ヒアリング→構成設計→コーディング→画像生成→動作確認まで一貫して作るためのスキル。

## 全体の流れ

1. **保存場所の確認** — 案件ごとに独立したフォルダに作る(既存の別プロジェクト内に混在させない)
2. **Phase 0: ヒアリング** — 業種・店名・必要ページ・デザインの雰囲気・画像方針を確認
3. **業種テンプレートの選定** — `references/` 配下の該当業種ファイルを読み、なければ `references/_template.md` の型に沿って設計する
4. **共通基盤の適用** — `assets/base.css` / `assets/base.js` をコピーし、業種のカラーパレットで CSS カスタムプロパティを上書きする
5. **ページ実装** — 業種テンプレートのページ構成・セクション構成・コピーに沿って静的HTMLを作成(画像はプレースホルダー、アイコンはlucide、FAQはdetails/summary、フォームはaction="#")
6. **画像の扱い** — デフォルトはplacehold.coプレースホルダー。実写風の仮画像が必要な場合のみ`scripts/image_backend.py`で生成に切り替える(既定Codex CLI・追加課金なし。`IMAGE_BACKEND=openai`等で切替可)
7. **動作確認** — ローカルサーバーで起動し、実際にブラウザで表示・レスポンシブ・リンク切れを確認してから完成とする

各ステップの詳細は以下。

---

## 1. 保存場所

このスキルは案件ごとに新しい独立フォルダを作る。既存の無関係なプロジェクト(電子書籍生成システムなど)の中に埋め込まない — 混在するとファイル管理・デプロイが破綻する。

```
<案件名>/
├── index.html, menu.html, ... (業種ごとのページ)
├── css/style.css
├── js/script.js
├── images/               ← 生成した画像
├── scripts/
│   ├── image_backend.py       画像生成の入口（既定codex／IMAGE_BACKENDで切替）
│   ├── codex_image_gen.py     Codex CLI経由の生成。APIキー不要
│   ├── openai_image_gen.py    OpenAI(gpt-image-2)経由。従量課金
│   └── generate_images.py
└── .env                  ← OPENAI_API_KEY / GEMINI_API_KEY（openai/geminiを使う場合のみ。既存プロジェクトから該当キーだけコピーする）
```

## 2. Phase 0: ヒアリング(必須・省略禁止)

作り始める前に、以下を必ず確認する。ユーザーが既に業種・店名等を伝えている場合はその情報を使い、足りない項目だけ聞く。

| 項目 | 確認内容 |
|------|---------|
| 業種・業態 | デザインの雰囲気とページ構成に直結する。`references/` の対応表を見て一致するファイルを探す |
| 店名・社名 | 実名か仮名か。仮名の場合はテンプレート用と明示してもらう |
| 必要ページ | トップ以外に何ページ必要か(業種テンプレートのデフォルト構成を提示して増減を確認) |
| デザインの雰囲気 | 清潔・高級・温かみ・ポップ等。配色パレットの選択に使う |
| 画像の扱い | デフォルトはplacehold.coプレースホルダー。実写風の仮画像が必要ならAI自動生成（既定Codex CLI・追加課金なし）、または実案件ならユーザー提供の実写真か |
| 保存場所 | 案件専用の新規フォルダをどこに作るか |

**この確認をスキップして実装を始めない。** 業種を誤認すると配色・構成・コピーの方向性がすべてずれる。

## 3. 業種テンプレートの選定

`references/` 配下に業種別のテンプレート仕様がある。まずここを確認する。

- `references/restaurant.md` — 飲食店・カフェ・居酒屋(実装検証済み)
- `references/_template.md` — 新しい業種を追加するときの雛形(必須項目の一覧)

対応する業種ファイルが無い場合は `references/_template.md` の項目に沿って、その場でユーザーと一緒に構成を設計してよい。設計した内容は今後の横展開のために新しい `references/<業種名>.md` として保存する(このスキル自体を育てていく)。

業種ファイルには以下が含まれる:
- サイト構成(必要ページの一覧)
- トップページのセクション構成(セクションごとのレイアウト・要素・レスポンシブ挙動)
- 各セクションのコピー例
- 構造化データ(JSON: メニュー/実績/スタッフ等の繰り返し要素)
- 業種特有の信頼要素(何を見せると信頼されるか)
- 配色・トーンの指針

## 4. 共通実装ルール(全業種共通・MANDATORY)

どの業種でも以下は共通の前提として適用する。`assets/base.css` と `assets/base.js` をコピーしてベースにし、業種のカラーパレットに合わせて CSS カスタムプロパティ(`:root` 内の `--color-*`)だけ差し替える。

1. **カラーは `:root` のCSSカスタムプロパティで定義する。** 変数名は `--color-base`(ベース)/ `--color-text`(テキスト)/ `--color-accent`(アクセント)/ `--color-sub`(サブ・セクション交互の背景色)の4つに統一する。業種ごとの配色は `references/*.md` の配色セクションの値をこの4変数に当てはめるだけでよい。
2. **アイコンはlucide(CDN)を使う。** `<script src="https://unpkg.com/lucide@latest"></script>` を各ページの `</body>` 直前、`js/script.js` の読み込み前に置く。アイコン自体は `<i data-lucide="アイコン名" width="48" height="48" class="icon"></i>` のように配置し、`js/script.js` 内で `DOMContentLoaded` 後に `lucide.createIcons()` を呼ぶ(`assets/base.js` に実装済み)。インラインSVGを手書きしない。
3. **画像はデフォルトでplacehold.coのプレースホルダーを使う。** `https://placehold.co/{width}x{height}/{ベース色 or サブ色の16進}/{テキスト色の16進}` の形式で、業種の配色に合わせた暗色/明色を指定する。`alt` 属性には必ず実写に差し替える際の撮影意図を書く(例:「湯気の立つだし巻きの寄り」「施工前後を並べた比較カット」)。実写風の仮画像がどうしても必要な場合のみ、7章の gpt-image-2 生成に切り替える。
4. **FAQ・アコーディオンは `<details>` / `<summary>` で実装し、JSを使わない。** ブラウザ標準の開閉機能をそのまま使うことで、余計なJSを増やさずアクセシビリティも確保できる。開閉アイコンの回転などの装飾はCSSの `[open]` セレクタで行う。
5. **SPのカルーセル(看板商品・お客様の声など横スクロール系セクション)はCSSスクロールスナップで実装し、JSは最小限にする。** `overflow-x: auto; scroll-snap-type: x mandatory;` と子要素の `scroll-snap-align` だけで実装できる。JSはヘッダーのハンバーガーメニュー開閉など、CSSだけでは実現できない操作に限定する。
6. **フォーム(問い合わせ・予約・見積もり依頼等)は送信先が未定のため `action="#"` で構造のみ実装する。** 実際の送信先(フォーム管理SaaS・メール送信・予約システムAPI等)が決まるまでは、フィールド構成とバリデーション属性(`required` 等)だけを作り込み、存在しない送信先をでっち上げない。
7. **レスポンシブ・セマンティック・アクセシビリティの基本仕様:**
   - レスポンシブ対応、ブレイクポイントは **768px**
   - セマンティックHTML(`header` `main` `section` `footer` 等)
   - キーボードフォーカスの可視化 (`:focus-visible`)
   - `prefers-reduced-motion` 対応
   - ヘッダーは共通パターン: 左ロゴ + 右ナビ(SP時ハンバーガー)、追従型(sticky)、CTAボタンをナビ右端に常設
   - フッターは共通パターン: 店舗/会社情報 + ページリンク + 営業案内 + SNS導線(lucideアイコン) + コピーライト

`assets/base.css` はダーク系の飲食店パレットで書かれているが、`:root` の変数を業種に応じて書き換えれば流用できる設計になっている。FAQアコーディオン(`.faq-item`)と予約フォーム(`.reservation-form` / `.form-row`)のスタイルも `assets/base.css` に含まれているので、そのまま流用できる。

### ページ間の共通パーツについて

ページ数が多い(6ページ以上)案件では、ヘッダー・フッターのHTMLを全ページに手で複製すると修正時に漏れが起きやすい。8ページ程度までは手動複製で問題ないが、10ページを超える、または今後の更新が頻繁に見込まれる場合は、Pythonのテンプレート処理(`str.format` や Jinja2)でヘッダー・フッターを1箇所で管理し、ビルド時に各ページへ差し込む方式に切り替えることを検討してよい。これは必要になってから導入する — 最初から作り込まない。

## 5. ページ実装

業種テンプレートの「サイト構成」に従ってページを作る。各ページは:

- `<title>` と `meta description` をページごとに設定する(SEO上、全ページ同じにしない)
- ナビゲーションの現在地に `aria-current="page"` を付ける
- セクション構成は業種テンプレートの「トップページ セクション構成」を参考にしつつ、サブページ用に再構成する(トップの抜粋+詳細を追加する形が基本)
- 業種テンプレートに実データがなければ、コピー・数値・固有名詞は**もっともらしい仮の内容**で埋めてよい(テンプレート検証が目的の場合)。実案件では必ずユーザーからの実データに差し替える

### 地図の埋め込み

Google Maps APIキーなしで埋め込める:
```html
<iframe src="https://www.google.com/maps?q=<検索キーワードまたは住所>&output=embed" loading="lazy" title="店舗地図"></iframe>
```

### 予約・問い合わせ導線

外部の予約システム(ホットペッパー・TableCheck・SaaSの問い合わせフォーム等)を使う業種では、ボタンの `href` はいったん `#` にしておき、コメントか注記で「導入システムのURLをここに設定」と明示する。存在しない外部URLをでっち上げない。

## 6. 画像の扱い(デフォルト: プレースホルダー / オプション: AI生成)

**デフォルトは4章のルール3にある通りplacehold.coのプレースホルダー。** テンプレート検証や構成確認が目的の場合、これで十分でありAPIコスト・生成時間もかからない。

実写風の仮画像がどうしても必要になった場合(最終納品前の見た目確認など)のみ、以下の手順でAI生成に切り替える。

`scripts/image_backend.py` と `scripts/codex_image_gen.py` をコピーする。**既定バックエンドはCodex CLI**（`codex login`済みならAPIキー不要・追加課金なし）。OpenAIやGeminiを使いたい場合だけ、案件フォルダ直下に `.env`（`OPENAI_API_KEY`／`GEMINI_API_KEY`）を置き、環境変数 `IMAGE_BACKEND=openai` または `IMAGE_BACKEND=gemini` を設定する（この場合の従量課金は実行した本人の負担になる）。

生成する画像の一覧は `generate_images.py`(案件フォルダ直下に新規作成、`scripts/generate_images.example.py` を参考にする)としてまとめ、`IMAGES` リストに `name` / `width` / `height` / `prompt` を書く。`from image_backend import generate_image` で読み込む。

- 実写風のスチール写真を狙う場合は、プロンプト冒頭に業種に応じた撮影スタイルの前置き文(`BASE_STYLE` のような定数)を共通化し、各画像固有の内容を後ろに続ける
- サイズは横長ヒーロー画像 `1536x1024`、正方形の商品・人物・内観写真 `1024x1024` を基本にする(いずれのバックエンドもこのサポートサイズに準拠)
- 画像生成は時間がかかるため、まとめて1本のスクリプトで実行し、バックグラウンドで走らせて他の作業(HTML実装)と並行させる
- 生成失敗した画像は最大3回まで再試行し、それでも失敗したら一覧に残してユーザーに報告する(黙って諦めない)
- バックエンドを切り替えた場合も、`alt` 属性の撮影意図テキストはプレースホルダー段階のものをそのまま流用できる(すでに書いてあるはず)
- **画像生成後、`images/`に保存されるだけではサイトには反映されない。** `generate_images.py`はPNGファイルを書き出すだけで、HTML側の`<img src="...">`や`style="background-image: url(...)"`は自動更新されない。生成が終わったら、各ページ(`index.html`/`about.html`等すべて)を開き、`placehold.co`のURLが残っていないか`grep -rn "placehold.co" *.html`等で確認し、対応する`images/*.png`のパスに手動で差し替えること。この差し替え漏れは表示上「1536 x 1024」のようなプレースホルダー文字列が実写画像の代わりに出るだけで、画像自体は正常に生成されているため見落としやすい。

## 7. 動作確認(必須・省略禁止)

コーディングが終わったら、必ず実際にページを開いて確認する。型チェックやファイル生成の成功だけでは「動くこと」の確認にならない。

- ローカルで静的サーバーを起動する(`python3 -m http.server` 等)
- 主要ページを開き、ヘッダーのハンバーガーメニュー・スティッキー動作・画像表示・内部リンクの遷移を確認する
- **AI画像生成に切り替えた場合は、全ページで実際に実画像が表示されているか(プレースホルダーの文字が残っていないか)を目視確認する。** 生成スクリプトを実行しただけでは終わりではない(6章参照)
- スマホ幅(375px程度)とデスクトップ幅の両方を確認する
- 画面幅を変えたときにレイアウト崩れがないか、フォーカスリングがキーボード操作で見えるかを確認する

**環境上の注意:** プレビュー用の内蔵ブラウザツール(preview_start等)が使うサンドボックスは、案件フォルダが現在の作業ディレクトリ(プロジェクトルート)の外にある場合、起動に失敗したり(`os.getcwd()` 制限)、起動できても配下のファイル読み取りが全て拒否される(`os.listdir('.')` すら拒否されることを確認済み)ことがある。この場合、内蔵プレビューでの表示は諦め、`python3 -m http.server <port>` を直接バックグラウンドで起動し、`curl` でHTTPステータスを確認したうえで `open http://localhost:<port>/index.html` のようにOSのデフォルトブラウザで開き、ユーザー自身の目視確認を仰ぐ。この制約は案件フォルダの中身の問題ではなく、プレビューツール側のサンドボックス範囲の問題なので、コード側で回避しようとしない。

---

## このスキルを育てる

新しい業種のサイトを作るたびに、その業種の仕様を `references/<業種名>.md` として追加していく。追加時は `references/_template.md` の項目をすべて埋めること。業種が増えるほど、次回以降の立ち上げが速くなる。
