生成AIで地域事業者のWeb発信を増やす体験会

あなたは地域事業者のWeb制作アシスタントです。

目的:
津久見市内の事業者が、スマホで見やすく、問い合わせにつながる1ページサイトを作る。

入力:
- 事業者名:
- 業種:
- 写真ディレクトリ:
- 参考サイトURL 3つ:
- 営業時間:
- 料金・メニュー:
- 所在地:
- 電話番号:
- 予約方法:
- 掲載したい強み:

事前リサーチ（実装の前に必ず行う）:
- この業態のLP・ホームページのベストプラクティスをWeb検索で調べる。特に「来店客がページで真っ先に知りたいこと」を特定し、ファーストビュー直下で即答する
  例: 飲食店なら 営業時間・定休日 / 定番メニューと価格 / 駐車場 / 予約可否。美容室なら 料金 / 予約方法 / 店の雰囲気
- 同業態で繁盛している店のサイトを2〜3例見て、見せ方（写真の使い方・情報の順序）を参考にする。文章・画像・デザインはコピーしない
- Googleマップのクチコミを調べ、客がほめている点と注意点を抽出する
  - ほめられている点（例: おかわり無料、座敷あり、眺めが良い）は強みとしてページ本文や「お客さまの声」要約に反映する。クチコミ原文は転載せず要約する
  - 注意点（例: 売り切れ、混雑時期、駐車場の場所）はFAQで正直に先回りして案内する。隠すと来店後の不満になる
  - クチコミ投稿のメニュー写真から価格等を転記した場合は「要確認」と明記し、出典をページ末尾に残す
- 実装後、初めての客のつもりでページを上から読み「いつやってる？いくら？どこ？予約は？」に10秒で答えられるかセルフチェックする

デザイン方針（最重要）:
- AI系・SaaS系サイトにありがちな「AIっぽいWebデザイン」を避け、事業者固有の業種・客層・利用シーンに基づく独自性の高いデザインにする
- 避けるもの: 濃紺背景、青〜紫のグラデーション、ネオン発光、抽象的な球体・粒子・波形・ニューラルネット風ライン、均一な3カラム構成、角丸カードを並べただけのセクション、ガラスモーフィズムの既視感ある使い方
- 代わりに、業種の世界観が伝わる配色・タイポグラフィ（フォント選定）・余白・非対称レイアウトを設計する
  例: 和菓子店なら和紙×縦書き×明朝体、美容室なら余白と細身ゴシック、海鮮食堂なら藍×朱の太い明朝
- 文様・ロゴ・バッジなどの装飾グラフィックは、写真の流用ではなくインラインSVGやCSSで独自に作る
- 業種が同じでも他の参加者と同じ見た目にしない。1事業者1デザイン

アニメーション:
- JavaScriptでスクロール連動の出現、視差、ホバーのマイクロインタラクションを実装する
- 派手に動かすのが目的ではなく、視線誘導・情報理解・ブランド体験を強める目的で使う
- prefers-reduced-motion で無効化し、リスナーは画面破棄時に解放する

要件:
- 1ページで完結する構成にする
- ファーストビューに事業者名、業種、主な価値、問い合わせ導線（電話ボタン）を置く
- 画面右上に固定（position: fixed）の電話ボタンを置き、タップで発信できる tel: リンクにする
- 写真を大きく使い、スマホで文字が詰まらないようにする
- 料金、営業時間、所在地、FAQを必ず入れる
- 所在地にはGoogleマップの埋め込み（APIキー不要の「https://maps.google.com/maps?q=店名+住所&output=embed」方式のiframe）と「Googleマップで開く」リンクを入れる
- 確認が取れていない価格・営業時間は「店頭で確認」「要確認」と書き、推測で埋めない
- 参考サイトの雰囲気は参考にするが、文章や画像はコピーしない
- セマンティックHTML、見出し階層、title/meta description、OGP、画像のalt、レスポンシブ、表示速度、アクセシビリティのベストプラクティスに従う
- 外部リンクは target="_blank" rel="noopener noreferrer" を付ける
- 公開前に人間が確認すべき項目を最後にリスト化する

実装:
- 既存プロジェクトの構成・フレームワーク（Vue/Nuxtなど）に合わせ、Reactなど別のものを持ち込まない
- 画像パスは指定されたディレクトリから参照する
- 余計な外部ライブラリを追加しない（フォントの読み込みは可）
- 実装後にブラウザでスマホ幅・PC幅の両方を表示確認する

# Skill: tsukumi-ai-site-setup

目的:
参加者PCまたは講師PCで、生成AIによるWeb制作体験会を始められる状態にする。

確認するもの:
- Git が使えること
- GitHub アカウントにログインできること
- Node.js と pnpm が利用できること
- Codex または Claude Code が利用できること
- Chrome が利用できること
- Chrome DevTools MCP を接続できること

手順:
1. 作業用リポジトリを作成または複製する
2. 参加者ごとの写真ディレクトリを作る
3. 参考サイトURL、営業時間、料金、所在地をメモにまとめる
4. Codex または Claude Code にサイト作成プロンプトを渡す
5. Chrome DevTools MCP で表示確認する

確認観点:
- スマホ幅で文字が切れていない
- 写真が粗すぎない
- 電話番号、地図、予約導線が見つけやすい
- 外部リンクは新しいタブで開く
- 公開してよい写真と文章だけが使われている

# Skill: tsukumi-cloudflare-deploy

目的:
完成確認済みの参加者サイトを Cloudflare Pages に公開する。

前提:
- GitHub リポジトリに変更を push 済み
- Cloudflare アカウントを用意済み
- 公開前チェックが完了済み

手順:
1. Git の変更内容を確認する
2. 公開してよい写真、文章、連絡先だけが含まれるか確認する
3. GitHub に push する
4. Cloudflare Pages で GitHub リポジトリを接続する
5. ビルドコマンドと出力ディレクトリを設定する
6. デプロイ後URLを開き、スマホ表示とリンクを確認する
7. 津久見紹介ポータル側に掲載するURLを記録する

公開前チェック:
- 店舗名、住所、電話番号、営業時間
- 料金やメニューの税込/税別表記
- 写真利用許諾
- 予約導線
- GoogleマップやSNSへのリンク