テスト投稿

sourire note（Astro + microCMS + Cloudflare Pages）

1. 概要

参考世界観:

• https://sourirephoto.com/
• https://www.instagram.com/sourire__photography/

目的: ブランドの柔らかい空気感を保ちつつ、SEOと収益性に強いアフィリエイトブログを構築する。

2. 目標

• ブランドと一致したビジュアル/トーン（穏やか・上品・写真中心）。
• エバーグリーンなキーワードでのSEO強化。
• microCMSでの簡易更新フロー。
• Cloudflare Pagesで高速・低コスト運用。
• アフィリエイトの開示と法令対応を明確化。

3. 非目標（v1）

• ユーザーアカウント/コメント機能。
• EC決済。
• 多言語対応（必要なら後で追加）。

4. 技術スタック

• フレームワーク: Astro（静的生成中心）
• CMS: microCMS
• リポジトリ/CI: GitHub
• ホスティング: Cloudflare Pages

5. 情報設計（案）

• Home（/）
• カテゴリ一覧（/category/[slug]）
• 記事（/posts/[slug]）
• タグ（/tag/[slug]）
• About（/about）
• Contact（/contact）
• Privacy Policy（/privacy）
• Affiliate Disclosure（/affiliate）
• 特定商取引法に基づく表記（/tokusho）
• 運営者情報（/operator）

6. デザイン方針（案）

• ビジュアル: 空気感のあるミニマル、柔らかな光、写真中心。
• タイポ: 見出しは上品なセリフ、本文は読みやすいサンセリフ。
• カラー: 暖色系ニュートラル、控えめなアクセント。
• レイアウト: 大きめヒーロー画像、余白多め、グリッドベース。

6.1 提案フォント/カラーパレット（初期案）

• 見出しフォント: Fraunces（上品で柔らかなセリフ）
• 本文フォント: Manrope（クリーンで可読性の高いサンセリフ）
• ベースカラー: #F6F1EC（暖色系のやわらかい生成り）
• テキスト: #2B2B2B（やさしいダークグレー）
• アクセント: #C8A88A（淡いキャメル）
• 余白/枠線: #E6DDD6（薄いサンド）

7. コンテンツモデル（microCMS）（案）

7.1 記事（Posts）

• title（string）
• slug（string, unique）
• excerpt（text）
• bodyRich（rich text）
• bodyMarkdown（markdown）
• heroImage（image）
• category（relation）
• tags（relation, multiple）
• publishedAt（datetime）
• updatedAt（datetime）
• affiliateBlocks（repeater）
  • productName
  • productUrl
  • image
  • priceText（optional）
  • ctaText（optional）

7.2 カテゴリ（Categories）

• name
• slug
• description
• coverImage

7.3 タグ（Tags）

• name
• slug

7.4 サイト設定（Site Settings / singleton）

• siteName
• siteDescription
• defaultOgpImage
• socialLinks
• analyticsId（optional）

8. ページ/コンポーネント（案）

• Layout: BaseLayout, PostLayout
• Components: Header, Footer, Hero, PostCard, AffiliateCard, Breadcrumbs

9. SEO / パフォーマンス

• ページごとのメタ情報自動生成。
• OGP/Twitterカード。
• Sitemap.xml + RSS。
• 画像最適化（Astro + Cloudflare Images もしくは標準機能）。

10. アフィリエイト/法務

• アフィリエイト開示ページ。
• アフィリエイト記事冒頭に開示ブロック挿入。
• プライバシーポリシーに解析/トラッキングを明記。

11. 環境変数

• MICROCMS_SERVICE_DOMAIN
• MICROCMS_API_KEY
• PUBLIC_SITE_URL
• PUBLIC_GA4_ID
• GA4_PROPERTY_ID（週次ランキング自動集計用）
• GA4_SERVICE_ACCOUNT_JSON（週次ランキング自動集計用）

12. ローカル開発（案）

• pnpm install
• pnpm dev
• pnpm build

13. デプロイ（案）

• GitHubとCloudflare Pagesを連携。
• Build Command: pnpm build
• Output directory: dist
• Cloudflare Pagesに環境変数を設定。

14. マイルストーン（案）

1. プロジェクト作成 + ベースレイアウト
2. microCMS連携
3. 主要ページと表示
4. SEO + RSS + Sitemap
5. アフィリエイトブロック + 開示
6. 公開

14.1 テスト設計

• パフォーマンス中心のテスト設計を docs/TEST_PLAN.md にまとめる。

14.2 デザイン設計

• デザイン設計は docs/DESIGN_SPEC.md にまとめる。

14.3 microCMS設計

• microCMS スキーマは docs/MICROCMS_SCHEMA.md にまとめる。
• microCMS 設定手順は docs/MICROCMS_SETUP.md にまとめる。
• 週次ランキング自動集計は docs/RANKING_AUTOMATION.md にまとめる。

15. 要確認事項（確定/変更可）

• 対応言語: 日本語のみ
• 主要アフィリエイト: Amazon / 楽天 / A8
• 大カテゴリ（初期）: カメラ、写真の撮り方、出産（後から追加しやすい設計）
• サイト名: sourire note
• 必須ページ: 一般的な収益サイトの構成を踏襲
• 解析ツール: GA4