---
id: election-template
name: 沖縄知事選 特集記事テンプレート
category: 政策・選挙
status: 進行中
priority: ★★ 高
updated: 2026-04-09
---

# 沖縄知事選2026 特集記事テンプレート

## 📝 概要
中立版ポータル（`okinawa-election-2026`）の特集記事HTML制作パターン。第5話で確立したデザインシステム・コンポーネント・ワークフローを引き継ぎ用にドキュメント化。和紙風ライトテーマ + 深紅アクセントで、Atlas Daily 特集記事として運用中。

## 🌐 中立版ポータル基本情報
- **リポジトリ**: `~/okinawa-election-2026/`
- **ブランド名**: Atlas Daily（旧U&I株倶楽部から変更済み）
- **ヘッダー表記**: 第1〜4話 → `Atlas Daily Special Report` ／ 第5話 → `Atlas Daily 特集`
- **フッター統一表記**: `編集責任者：上間喜壽 ＋ Atlas Daily編集部AIチーム`
- **パスワード**: SHA-256ハッシュ `0f741576ac812cab54af2138b9633930a373028830bf72cd3ded6af3d7b1e2eb`、sessionStorage key `okinawa2026_auth`

## 🎨 デザインシステム（CSS変数）
```css
:root {
  --bg: #f5f0e8;        /* 和紙風ライト背景 */
  --surface: #fffdf8;
  --surface2: #f0ebe0;
  --border: #d6cfc0;
  --ink: #1a1510;
  --ink2: #3d3628;
  --ink3: #6b5f4e;
  --red: #b5271a;       /* 保守陣営・警告 */
  --red2: #d94030;
  --blue: #1a4a8a;      /* 野党・玉城系 */
  --gold: #9a7a28;      /* ブランド強調 */
  --gold2: #c4a040;
  --green: #1a6b4a;     /* オール沖縄系 */
}
```

## 🔤 フォント
- **Shippori Mincho**: 見出し（h1, h2）、大型引用
- **Noto Serif JP**: 本文テキスト
- **Noto Sans JP**: タグ、ラベル、メタテキスト、UI要素

## 🧩 主要コンポーネント
- **ヒーロークォート**: 42px明朝体イタリック・中央揃え・上下56px余白
- **ビジュアルタイムライン (.vtl)**: 3カラム（年号|ドット|コンテンツ）。ドット色で分類（緑/赤/金/青）
- **用語解説ホバー (.info-tip)**: 点線下線 + ホバー吹き出し
- **プロフィールカード (.profile-grid)**: 顔写真260px + ボーダートップ色分け
- **ターニングポイントカード (.tp-card)**: 左ボーダー5px赤 + 番号バッジ
- **幹部グリッド (.figure-grid)**: 4カラム
- **候補者対比カード**: 丸型100x100px、左=オール沖縄/右=自民
- **データ可視化**: CSS .bar-chart / .data-table / .trend-table / .compare-grid
- **アコーディオン**: .acc-toggle + .acc-body

## 📸 写真ソース（Wikimedia Commons CC/PD）
利用実績のあるURL一覧は引き継ぎメモ（`project_election_article_template.md`）に詳細記載。
- 沖縄戦民間人 / 1972年復帰式典 / 普天間飛行場 / オスプレイ編隊 / 辺野古座り込み
- 平和の礎 / ひめゆり学徒隊 / 翁長雄志 / 玉城デニー / 伊波洋一 / 糸数慶子 ほか

## ⚙ 制作ワークフロー（最適化済み）
1. **Phase 1: 並列リサーチ**（2-3エージェント同時）
2. **Phase 2: 検証・統合**（クロスチェック・写真URL存在確認）
3. **Phase 3: HTML生成**（全データ揃ってから1回のWriteで完成版）
4. **Phase 4: ポータル更新**（index.htmlに新記事カード + 「第N話」番号付与）

## ⚠ 注意事項
- 琉球新報・沖縄タイムスのロゴは著作権上使用しない
- 古謝玄太のCC/PD写真はWikimedia Commonsに存在しない（2026年3月時点）
- 写真の見切れは `object-position` で必ず調整
- ヘッダー背景は `filter:blur()` でぼかすテクニックが有効

## 🔗 関連プロジェクト
- [election-repos](election-repos.md) — 中立版/対策本部版の管理ルール
- [okinawa-2075](okinawa-2075.md) — 中立性確保の根拠