# 都市を読むダッシュボード / Civic Data

## 1. デザインの核
氷色の地図と黒い統計帯。地区選択が地図・指標・解説を連動させ、都市データサービスの価値を最初の画面で体験する。
主役は画像や装飾の量ではなく、操作が内容の理解につながること。以下の規則を守り、別業種でも同じ視覚言語でトップページを設計する。

## 2. 情報構成
左に課題、右に概念地図 → 地区連動指標 → 分析手法 → プロジェクト相談
デモは架空ブランド「GRID / CITY」。ブランド名、コピー、実績は必ず移植先の内容に置き換える。説明のない装飾セクションは追加しない。

## 3. 色と書体
背景 #e0f5f8、主文字 #112c3c、強調 #075dce、罫線 #aacbd1。tokens.css を使う。明暗反転セクションにもこの関係を引き継ぐ。
本文は DM Sans + Noto Sans JP、メタ情報は IBM Plex Mono。表示用書体は下記のCSS仕様に従う。欧文と日本語を同じサイズに揃えず、それぞれの文字密度に合わせる。

## 4. レイアウトと固有の造形
次のスタイル仕様がこのパターンの輪郭を決める。クラス名は変えてよいが、比率・配置・タイポグラフィの役割は維持する。
```css
.city-hero{display:grid;grid-template-columns:1fr 1.1fr;min-height:620px}.city-copy{padding:60px 4vw}.city-copy h1{font-size:clamp(34px,4.2vw,66px);line-height:1.3;letter-spacing:-.05em}.city-copy em{font-style:normal;color:var(--color-accent)}.city-copy>p:not(.eyebrow){margin-top:28px}.districts{display:flex;flex-wrap:wrap;gap:8px;margin-top:38px}.districts button{font-size:14px;padding:12px}.atlas{position:relative;overflow:hidden;background:#bedde3;display:flex;align-items:center;justify-content:center;min-height:480px}.map-grid{width:80%;aspect-ratio:1;display:grid;grid-template-columns:repeat(7,1fr);gap:9px;transform:rotate(-24deg) skew(8deg);transition:transform .7s}.map-grid i{display:block;background:#599ca9;border:1px solid #2d7484;opacity:calc(.3 + var(--h)/160%);height:var(--h);align-self:center;transition:background .5s,transform .5s}.map-grid i:nth-child(5n){background:#edfaff}.map-grid i:nth-child(7n){background:#075dce;transform:translateY(-12px)}.atlas[data-area="1"] .map-grid{transform:rotate(-8deg) skew(8deg) scale(1.08)}.atlas[data-area="2"] .map-grid{transform:rotate(-38deg) skew(8deg) scale(.9)}.map-label{position:absolute;top:22px;left:24px;font-size:11px}.map-tag{position:absolute;bottom:30px;left:30px;padding:20px 25px;background:#f0fcff;display:grid;gap:6px}.map-tag strong{font-size:28px}.metrics{background:#112c3c;color:#e0f5f8;display:grid;grid-template-columns:repeat(3,1fr);padding:35px 5vw}.metrics>div{border-right:1px solid #527180;padding:0 30px}.metrics>div:last-child{border:0}.metrics span{font:12px var(--font-mono)}.metrics strong{font:clamp(50px,8vw,110px)/1.3 var(--font-display);display:block}.metrics small{font-size:20px;margin-left:10px}.method-row{display:grid;grid-template-columns:80px 1fr 2fr;border-top:1px solid var(--color-line);padding:25px 0;gap:20px}.method-row h3{font-size:25px}@media(max-width:700px){.city-hero{grid-template-columns:1fr}.city-copy{padding:40px 5vw}.atlas{min-height:380px}.metrics{padding:25px 10px}.metrics>div{padding:0 12px}.metrics span{font-size:10px}.metrics strong{font-size:42px}.metrics small{font-size:12px;margin-left:3px}.metrics p{font-size:12px}.method-row{grid-template-columns:35px 1fr}.method-row p{grid-column:2}}
```
このCSSはスタイルの設計値。移植先の意味に沿ってセレクターを対応させ、架空の内容そのものを再利用しない。

## 5. インタラクション
同一地区の選択状態を地図・解説・数値へ同期。概念地図はCSS Gridで表現し架空データと明示。
- 操作前から内容を読める初期状態を用意する。JSが動かなくてもナビゲーションと本文を保持する。
- hoverのみでしか使えない機能は作らない。button、range、details等のネイティブ要素を使い、タッチとキーボードを同等に扱う。
- 選択状態は aria-pressed、結果更新は必要な箇所だけ aria-live で伝える。
- 動作低減設定では自動アニメーションを止め、状態変更は即時または静止画で返す。
- デモ用のCTAは実在する予約・購入として扱わない。移植時に実サービスへ接続する。

## 6. モバイル
700px以下では複雑な分割を一列にする。横回遊の見本だけは意図的な横スクロールを残す。ページ全体には横はみ出しを作らない。見出しはclampで縮小し、本文は16pxを維持する。操作対象は原則44px以上を確保する。

## 7. 禁止事項
- 背景をベージュや茶色に置き換え、全セクションを同じ温度に寄せない。
- 汎用の角丸カード3列へ構成を置き換えない。
- 意味のない紫青グラデーション、絵文字アイコン、架空の顧客ロゴを追加しない。
- すべてをフェードインさせて初期表示を隠さない。
- 参考サイトの画像・ロゴ・コピー・有料プロンプトは流用しない。

## 8. 再現の確認
背景・表示書体・主要な配置比率・固有の操作が保持されていること。別業種への移植では、操作対象をその業種で意味のある内容へ翻訳する。独立セッションによる再現検証は未実施で、検証済みの記録を偽って記載しない。


## ヘッダーロゴ（2026-09-15追加）

ブランド表示には新規生成した `assets/logo.webp` を使う。画像生成指示と表示条件は `LOGO.md` に記録。デモは画像を埋め込み、altにブランド名を残している。従来の本文用フォントによるロゴ表記は、この画像仕様に置き換える。別ブランドへ応用する場合はブランド専用に生成し直す。