# ブログ / メディアサイト 制作プロンプト

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

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

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

---

## 出力先ディレクトリ

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

```
blog-site/
├── index.html
├── archive.html
├── post.html
├── category.html
├── about.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── images/
    └── （画像ファイル）
```

---

## プロジェクト情報

**ブログ名**
<!-- 例：Dev Notes / Thoughtful Living -->

**テーマ・ジャンル**
<!-- 例：フロントエンド開発 / 旅行 / ライフスタイル -->

**著者・運営体制**
<!-- 例：個人ブログ / 複数ライター企業メディア -->

**読者ターゲット**
<!-- 例：Web エンジニア初学者 / 30代会社員の副業志望 -->

**コンテンツ形式**
<!-- 例：技術記事・チュートリアル・書評・週次まとめ -->

**必要なページ・機能**
<!-- 例：トップ、記事一覧、記事詳細、カテゴリ、タグ、About、検索、ニュースレター登録 -->

**デザインスタイル**
<!-- 例：ミニマル白背景 / エディトリアル / ダーク文学的 / カラフルポップ -->

**カラーパレット**
<!-- 例：ホワイト × スレートグレー × アンバー -->

**マネタイズ手段**
<!-- 例：Google AdSense / 有料会員 / アフィリエイト / なし -->

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

---

## 構築要件

### グローバルナビゲーション
- ロゴ＋カテゴリナビリンク
- 右端に検索アイコン＋ダークモードトグル
- モバイルはハンバーガーメニュー

### トップページ
- ヒーロー：ブログのコンセプトを伝えるコピー＋最新注目記事カード（大）
- 注目記事フィーチャーグリッド（2〜3件、画像＋タイトル＋要約）
- 最新記事リスト（5〜8件、コンパクトカード形式）
- カテゴリ別タブ切り替えエリア
- ニュースレター登録ブロック（メール入力＋購読ボタン＋読者数表示）
- サイドバー（PC）：プロフィール、人気記事、タグクラウド、広告スロット

### 記事一覧ページ
- フィルターバー（カテゴリ・タグ・並び順：新着 / 人気）
- 記事カード：サムネイル・カテゴリバッジ・タイトル・要約（2行）・著者アイコン・日付・読了時間
- ページネーション or「もっと読む」ボタン
- 空状態（no results）表示

### 記事詳細ページ
- ヒーロービジュアル（サムネイル or グラデーション背景）
- 記事ヘッダー：カテゴリ・タイトル・著者・日付・読了時間・SNS シェアボタン
- 本文エリア
  - 最大幅 680px・行間 1.9・フォントサイズ 17px 相当
  - 見出し h2/h3 スタイリング（左ボーダーアクセント or 番号付き）
  - コードブロック（シンタックスハイライト＋コピーボタン）
  - 引用ブロック（blockquote スタイリング）
  - 注意書きボックス（info / warning / tip バリアント）
- 目次（TOC）：スクロール追従・現在地ハイライト
- 著者プロフィールカード（記事末尾）
- 関連記事カード（3件）
- コメントセクション（Disqus 等プレースホルダー or 自前フォーム）

### カテゴリ・タグページ
- ヘッダー：カテゴリ名・説明・記事数バッジ
- 記事グリッド（記事一覧と同形式）

### 検索機能
- モーダル or 全幅オーバーレイ式
- リアルタイムフィルタリング（フロントエンド）
- ヒット件数表示・キーワードハイライト

### About ページ
- 著者紹介（写真 placeholder・経歴・SNS リンク）
- ブログの理念・コンセプト
- メディア掲載・実績リスト

### フッター
- カテゴリ・タグリンク、SNS アイコン、RSS、プライバシーポリシー・免責事項、コピーライト

### タイポグラフィ
- 見出し用と本文用でフォントを使い分け（Google Fonts 可）
- 本文は読みやすさ重視（line-height 1.8〜2.0、最大幅 680px）
- モバイルのフォントサイズ・行間を個別調整

### パフォーマンス・SEO
- 画像 lazy load（`loading="lazy"` コメント付き）
- OGP / Twitter Card メタタグのコメント指示
- Article 構造化データのコメント指示
- RSS フィードのコメント指示

### 共通要件
- モバイルファースト・レスポンシブ
- ダークモード対応（prefers-color-scheme ＋ トグル）
- スクロールトリガーのフェードインアニメーション
- 画像・CSS・JS の読み込み URL にはキャッシュバスター（例：`image.png?v=1`）を付与する
- 記事読了プログレスバー
- スクロールトップボタン