第0章：プロジェクト初期設定とGitHub中心ワークフロー標準手順

新規案件がスタートした際、「環境構築での属人化・ミスをゼロにし、誰でも15分で本番デプロイ可能な状態まで立ち上げる」 ための初期設定手順と、日々の進行管理フローです。

[案件立ち上げの全体像（所要時間: 約15分）]
1. GitHub (Team) ──► リポジトリをテンプレートから作成 & Issue起票
2. Figma          ──► 案件ファイル作成 & カバー・確定デザインページ準備
3. microCMS       ──► サービス/APIスキーマ作成 & APIキー取得
4. ローカルPC      ──► 推奨パスに配置し、Cursorでプロジェクト初期化
5. Cloudflare     ──► PagesにGit連携 & 環境変数・Deploy Hook設定

1. プロジェクト初期セットアップ手順

ステップ 1：【GitHub】組織リポジトリの作成

※ 個人アカウントへの誤作成を防ぐため、必ずGitHubブラウザ上のチーム組織（Organization）から作成します。

GitHubでご契約中の GitHub Team（組織） ページを開きます。
「Create repository」（または社内テンプレートリポジトリの 「Use this template」）をクリックします。
リポジトリ設定を入力します：
- Repository name: [クライアント名]-[案件名]（例: client-corp-lp）
- Visibility: Private（非公開）
作成後、画面に表示される リポジトリURL（https://github.com/組織名/リポジトリ名.git）をコピーしておきます。

ステップ 2：【Figma】案件ファイルの作成

Figmaの 01_Active Projects フォルダ内に新規ファイルを作成します。
ファイル名を [クライアント名] 案件名（例: [〇〇大学] 2026年度学部改組LP）にします。
ガイドライン（第2章）に基づき、以下のページ構成を作成します：
- 📌 Cover（ステータス・GitHubリポジトリURLを記載）
- 🎨 Tokens & Components（カラー・フォント・UIパーツ）
- 📱 Designs（Cursor連携用の確定デザインのみを配置）

ステップ 3：【microCMS】APIの作成とキー取得

microCMSで新しいサービスを作成（例: client-news）。
ガイドライン（第4章）に沿って、必要なAPI（お知らせ・事例など）のスキーマを定義します。
サービス設定＞ APIキー から、以下の2つをメモします：
- MICROCMS_SERVICE_DOMAIN（サービスID）
- MICROCMS_API_KEY（コンテンツ読み取り権限のみのGETキー）

ステップ 4：【ローカルPC ＆ Cursor】プロジェクトの初期化

OSごとの推奨パスにフォルダを作成し、CursorのComposerで一発初期化します。

フォルダの作成場所:
- Mac: ~/Develop/組織名/プロジェクト名
- Windows: C:\dev\組織名\プロジェクト名
- ※ OneDriveやiCloudなどの同期フォルダ配下には絶対に置かないこと
Cursorでフォルダを開き、Ctrl + I（Mac: Cmd + I）で Composer（Agentモード） を起動します。
以下の指示文を実行します。

Cursorへの指示文（コピー用）：

新規Astroプロジェクトを以下の要件で初期化し、GitHubリモートリポジトリに接続してください。

【要件】
1. Astro + Tailwind CSS + TypeScript + microcms-js-sdk をセットアップ
2. ルート直下にガイドライン標準の「.cursorrules」と「.gitattributes (eol=lf)」を作成
3. 「.env」と「.env.example」を作成（MICROCMS_SERVICE_DOMAIN, MICROCMS_API_KEY の雛形）
4. Gitを初期化し、以下のリモートURLに接続してmainブランチに初期コミットをプッシュ
   リモートURL: [ステップ1でコピーしたURL]

作成されたローカルの .env ファイルに、ステップ3のmicroCMSキーを入力します。

ステップ 5：【Cloudflare Pages】自動デプロイ連携

Cloudflare ダッシュボード＞ コンピュート (Workers / Pages) ＞作成＞ Pages ＞ Git に接続 を開きます。
ステップ1で作成した GitHub Teamのリポジトリ を選択します。
ビルド設定を行います：
- フレームワークプリセット: Astro
- ビルドコマンド: npm run build
- ビルド出力ディレクトリ: dist
「環境変数」 を展開し、以下を登録します：
- MICROCMS_SERVICE_DOMAIN
- MICROCMS_API_KEY
「保存してデプロイ」 をクリック（約1分で本番URLが発行されます）。
（オプション）Deploy Hookの作成:
- Pagesの 設定＞ビルド＞デプロイフック でフックを作成し、URLをmicroCMSのWebhookに設定（記事公開時の自動再ビルド用）。

2. GitHubを中心とした日々の開発ワークフロー

初期設定完了後は、すべての作業が 「GitHub（Issue） → Cursor（実装） → PR（プレビュー確認） → マージ」 のサイクルで進行します。

┌──────────────────────────────────────────────────────────┐
│ 1. 【GitHub】Issue（タスク）を起票する                     │
│    （例: Issue #12「お知らせ詳細ページのUI実装」）        │
└───────────────┬──────────────────────────────────────────┘
                ▼
┌──────────────────────────────────────────────────────────┐
│ 2. 【Cursor】作業ブランチを作成し、AIに実装させる           │
│    （例: ブランチ名「feat/news-detail」）                 │
│    （コミット: feat: お知らせ詳細ページ実装 closes #12）  │
└───────────────┬──────────────────────────────────────────┘
                ▼
┌──────────────────────────────────────────────────────────┐
│ 3. 【GitHub】Pull Request（PR）を作成する                 │
│    （CloudflareがPRコメント欄に「Preview URL」を自動発行）│
└───────────────┬──────────────────────────────────────────┘
                ▼
┌──────────────────────────────────────────────────────────┐
│ 4. 【確認・検収】Preview URLでデザイン・動作をレビュー    │
│    （ディレクター・デザイナーはURLを開くだけで確認完了） │
└───────────────┬──────────────────────────────────────────┘
                ▼
┌──────────────────────────────────────────────────────────┐
│ 5. 【マージ】「Merge pull request」をクリック             │
│    ├─ 本番サイトが全自動で最新化される                   │
│    └─ Issue #12 が自動的に「Done（完了）」に移動して終了 │
└──────────────────────────────────────────────────────────┘

チームメンバーの役割分担

ディレクター / 進行管理:
- 修正要望やタスクをGitHubの Issue に登録する。
- コーダーからPRが出たら、Preview URL をブラウザや実機スマホで開いて検収する。
デザイナー:
- Figmaの 📱 Designs ページに確定デザインを配置する（Auto Layout必須）。
- PRのPreview URLを見て、余白やフォント、レスポンシブの意図通りかチェックする。
コーダー / エンジニア:
- CursorのComposerに 「Issue #〇〇とFigmaのURL」 を渡してコードを生成する。
- コミットメッセージに closes #〇〇 と書いてGitHubへプッシュする。