# Hikaproj Web Platform v3 — Design System

Hikaproj Web Platform v3 は、特定のツールやページ種別に限定されない共通デザインシステムです。Webサイト、アプリケーション、記事・一覧などのコンテンツで視覚言語と操作ルールを共有しながら、それぞれの目的に適した画面を構成します。

## 1. 適用範囲と設計原則

- すべての画面に同じレイアウトを強制せず、必要な領域・コンポーネントを選んで組み立てる。
- ダークなグリーン系背景、オフホワイトの文字、ライム/シアン/コーラルのアクセントを共通基盤とする。
- 角丸を抑えた面、細い罫線、控えめな光・グラデーションを使い、情報の視認性を優先する。
- display、本文、等幅ラベルの役割を分けて、情報の階層をわかりやすくする。
- PC/モバイル、マウス/タッチ/キーボード、支援技術を含む利用環境を考慮する。
- 色だけで意味を伝えず、ラベル・アイコン・文章・ARIA状態を組み合わせる。
- 本番機能の処理・データ設計は各ページの責務とし、見た目の共通化と混同しない。

## 2. ファイル構成

| ファイル | 用途 |
| --- | --- |
| `index.html` | システムの概要、基礎トークンと用途別の構成例 |
| `components.html` | 再利用可能な共通UIコンポーネントの見本 |
| `style.css` | 共通デザイントークン、共通コンポーネントとレスポンシブ規則 |
| `script.js` | 共通ナビ、タブ、ダイアログ、range見本の軽い操作 |
| `tool-template/` | AIが新しいツールを作るときのページ雛形と作業ガイド |
| `DESIGN-MANUAL.md` | デザインシステムの利用・実装仕様 |

CSSとJavaScriptはこのフォルダー内で完結します。ヘッダーロゴだけは `https://hikaproj.com/new/512.hikaproj.logo.png` を参照します。共通ヘッダーのサイトリンクは `https://hikaproj.com/new/` 配下です。Google Fonts、外部CSS、アイコンライブラリーは使用せず、利用可能な日本語/等幅フォントへフォールバックします。

## 3. デザイントークン

値は `style.css` の `:root` に定義します。ページ固有の見た目を追加するときも、まずトークンを再利用してください。

| トークン | 値 | 用途 |
| --- | --- | --- |
| `--bg` | `#101311` | 全体の暗い背景 |
| `--surface` | `#171c19` | パネル、ダイアログ等の面 |
| `--ink` | `#eaf0e9` | 見出しと主要テキスト |
| `--dim` | `#a3aea4` | 本文補足、入力ラベル |
| `--muted` | `#6f7c72` | 短いメタ情報、低優先度ラベル |
| `--line` | `rgba(225, 242, 227, .14)` | 通常の区切り線 |
| `--line-strong` | `rgba(225, 242, 227, .23)` | 入力枠、明瞭さが必要な線 |
| `--lime` | `#c6ff53` | 主要操作、選択、成功状態 |
| `--cyan` | `#66dcff` | 補助操作、情報、キーボードfocus |
| `--coral` | `#ff775b` | 注意・警告・エラーのアクセント |
| `--pad` | `clamp(18px, 5vw, 72px)` | ページ端のレスポンシブ余白 |
| `--mono` | DM Mono → IBM Plex Mono → Courier New | 数値、コード、短い分類ラベル |
| `--display` | Manrope → Noto Sans JP → OS sans-serif | ロゴ、タイトル、見出し |
| `--copy` | Noto Sans JP → Yu Gothic → Meiryo | 日本語本文、フォームUI |

アクセント色は意味を持たせて使い分けます。ライムは主操作/選択/成功、シアンは情報/補助/フォーカス、コーラルは注意/警告です。ページ内に多数の主操作を置く場合は、視覚的な優先順位を別途整理します。

## 4. レイアウトとタイポグラフィ

### 共通グリッド

- 標準コンテンツ幅は `min(100% - 2 * var(--pad), 1120px)`、フッターの最大幅は1220px。
- 空間を固定値だけにせず、`clamp()`、`minmax()`、Grid/Flexで画面幅に合わせる。
- コンテンツ種別に応じて1列/2列/複数列を選び、狭い画面では読み順を保ったまま縦積みにする。
- ページ固有の構成は自由にできるが、本文幅・端余白・見出し階層は共通トークンを使う。

### 文字階層

- display見出しは大きさ・太さ・行間でページの主題を示す。
- 本文は可読性を優先し、通常14px前後、補足は9–12pxを目安とする。
- 8–9pxの等幅ラベルは短い分類コードだけに使用し、文章を小さく詰め込まない。
- ページ見出しは `clamp(34px, 5vw, 54px)` が基本。ヒーローなど重要な場合はより大きくしてよい。
- 長い本文に等幅フォントを使わない。日本語フォールバックを必ず指定する。

### ページヘッダー `.site-header`

- 高さ70px、620px以下では59px。半透明の背景と18px blurでページ上端に固定する。
- 左にブランドロゴ、右に「相互リンク」「新着情報」「お問い合わせ」を置く。
- ロゴ画像は `https://hikaproj.com/new/512.hikaproj.logo.png`、ブランドリンク先は `https://hikaproj.com/new/`。
- 各リンク先は `https://hikaproj.com/new/links/`、`https://hikaproj.com/new/news/`、`https://hikaproj.com/new/contact/`。
- 相互リンクはシェアアイコンとライム枠で特徴づける。SVGはインラインで、外部アイコンライブラリーに依存しない。
- 620px以下はナビを開閉式にする。ボタンの `aria-expanded`、名前、表示状態を同期する。

### ページ見出し `.page-head`

- タイトルと説明、任意のコードラベル、補助マークでページを導入する。
- 下辺に細い罫線、右側に薄い円形装飾を用いる。装飾が文字や操作を隠さないようにする。
- ページ固有のロゴ/イラストを配置してもよいが、読みやすさと見出しの優先順位を保つ。

### フッター `.site-footer`

- 上辺に細い罫線、左右にページ情報・関連導線・著作権を配置する。
- ページに不要なリンクや分類を無理に追加せず、内容に合わせて項目数を調整する。

## 5. コンポーネント仕様

一覧と使用例は `components.html` を参照します。カードに配置されたパーツをそのまま使うことが目的ではなく、適切なHTML要素・状態・アクセシビリティ属性を含めた実装例として参照します。

### ボタン・リンク

- `.button-primary`: 最重要操作。ライム背景、暗色文字、最小高42px。画面の主操作に限定する。
- `.button-secondary`: 補助操作。透明背景、明るい罫線。hoverでシアンに変化する。
- `.button-text`: 罫線を使った軽い操作。操作要素は実動作に合わせてbuttonまたはanchorにする。
- `.icon-button`: 単独のアイコン操作用。視覚アイコンに加えて日本語 `aria-label` を必ず付ける。
- `.text-link`, `.back-link`: 遷移先のあるリンク用。操作処理だけの場合はbuttonを使う。
- focus輪郭を消さない。disabled状態はHTMLの `disabled` と視覚表示を一致させる。
- 送信を意図しないbuttonには `type="button"` を指定する。

### 入力・フォーム

- `.text-field`, `.select-field`, `.textarea-field`: 暗い入力面、明確な罫線、focus時はシアン枠。
- `.range-control`: トラック2px、ライムのつまみ。WebKit/Firefox両方のrange擬似要素を定義。
- `.choice-list`: fieldset/legendで関連するcheckboxまたはradioをグループ化。
- `.switch-row`: ネイティブcheckboxを `role="switch"` と組み合わせる。ラベル全体を操作可能にする。
- すべての入力に可視ラベルを関連付ける。placeholderだけをラベル代わりにしない。
- ネイティブ入力のキーボード操作・フォーカス・フォーム送信の意味を保持する。

### 状態・フィードバック

- `.badge`: 短い状態語。成功はライム、情報はシアン、警告はコーラル、通常はニュートラル。
- `.status-example`: 状態をアイコン/点、テキスト、分類ラベルで示す。色だけに依存しない。
- `.notice-compact`, `.notice-warning`, `.notice-error`: 補足/注意/エラーを区別し、文章にも状態と次の行動を記す。
- `.progress-bar`: ネイティブ `progress` を使い、実データとアクセシブル名を設定する。
- `.loading-spinner`: 短時間の読み込み表示。必ず説明テキストを併記し、reduced-motionでは動きを止める。
- `.empty-state`: 空であること、理由または次の操作を説明する。
- 動的な結果は `role="status"`/`aria-live="polite"` 等で支援技術に伝える。エラーを成功扱いにしない。

### コンテンツ・データ表示

- `.component-card`, `.foundation-card`, `.usage-card`: 情報をまとまりごとに分ける面。境界線と弱い背景変化を用いる。
- `.sample-list-row`: 行全体をリンクにできる場合に使う。クリック対象があることを明確にする。
- `.data-table`: 表形式データに使用し、`thead`、見出しセル、`scope`を正しく設定する。
- `.table-scroll`: 小画面で表が必要な最小幅を持つ場合の横スクロール受け皿。
- `.pagination`: 現在位置に `aria-current="page"`、前後移動に説明用ラベルを付ける。
- `.inline-code`, `.code-block`: コードや設定値を本文から視覚的に分離する。

### ナビゲーション・重なりUI

- `.tabs`: `role=tablist/tab/tabpanel`、`aria-selected`、`tabindex`、panelのhiddenを同期する。左右矢印、Home、Endに対応する。
- `.disclosure`: 独自処理が不要ならネイティブ `details/summary` を使用する。
- `.sample-dialog`: 確認や短いタスク向け。ネイティブ `dialog.showModal()` を使い、Escと明示的な閉じる操作を提供する。
- ナビゲーションはリンク、ページ内状態切替はbuttonを使い、見た目だけで要素の意味を曖昧にしない。

## 6. インタラクションと動き

- hoverは補助表現とし、タッチ・キーボードでも状態を識別できるようにする。
- 変化は色、罫線、数px程度の位置変化を中心にし、内容を邪魔する動きを加えない。
- `prefers-reduced-motion: reduce` ではスクロール、トランジション、アニメーションを抑制する。
- メニュー、タブ、ダイアログ等のJSは表示状態とARIA属性を常に同期する。
- ページ固有のデータ処理、保存、認証、セキュリティ要件は共通デザイン層へ持ち込まない。

## 7. レスポンシブ・アクセシビリティ基準

| 幅 | 基本挙動 |
| --- | --- |
| 761px以上 | 2列以上のグリッド、常時表示のナビ |
| 760px以下 | ヒーロー/紹介領域を縦積み、複数列を縮小 |
| 620px以下 | ヘッダー59px、開閉式ナビ、コンテンツ余白を縮小 |
| 360px以下 | 控えめな文字/間隔縮小。機能を隠すのではなく縦積みにする |

- 最低320px幅を想定し、意図しないページ全体の横スクロールを発生させない。
- テーブルやコードなど横幅が必要な内容は、局所的なスクロール領域に収める。
- `lang="ja"`、見出し階層、`main`/`nav`/`footer`等のランドマークを適切に保つ。
- Tab/Shift+Tab、Enter/Space、矢印キーで主要な操作を利用できること。
- focus-visibleのシアン輪郭を維持し、色だけでfocusを示さない。
- 画像以外の情報をブランドテキストとともに表示する。装飾画像は空altにする。
- 文字サイズやコントラストを下げて情報を詰め込まない。

## 8. ファイルの使い分けとページ制作

1. 新しいページで `style.css` と共通ヘッダー構造を読み込む。
2. 目的に合わせて `.page-head`、グリッド、パネル、一覧などを選び、ツール/記事/アプリの型を無理に共通化しない。
3. 既存トークンとコンポーネントで足りない場合のみ、意味のあるページ固有クラスを追加する。
4. ページの機能は対応するアプリケーションコードに実装し、見本用の文言やデータを本番処理と誤認させない。
5. 入力/リンク/ボタンごとにラベル、遷移先、状態、エラー、キーボード操作を確認する。
6. 320px、360px、620px、760px、desktopの幅で確認する。横幅や内容量により追加のブレークポイントを設けてよい。
7. このマニュアルとパーツ見本も同時に更新し、実装と仕様の不一致を残さない。

### AIによるツール制作

ツール固有ページを新規作成する場合は [`tool-template/`](./tool-template/) を開始点として使用します。AIは [`tool-template/AI-TOOL-GUIDE.md`](./tool-template/AI-TOOL-GUIDE.md) を読み、雛形の共通ヘッダー/フッターと見た目を維持しながら、ツール固有のUIと機能だけを実装します。雛形には特定ツールのフォームや処理を含めず、機能仕様は依頼内容に従います。

## 9. パーツクラス早見表

| クラス | 用途 |
| --- | --- |
| `.site-header`, `.brand`, `.site-nav`, `.site-menu` | 共通サイトヘッダー/モバイルナビ |
| `.page`, `.page-head`, `.page-code`, `.page-head-mark` | ページ幅・見出し |
| `.foundation-*`, `.usage-*`, `.system-*` | デザインシステム概要ページ |
| `.button-primary`, `.button-secondary`, `.button-text`, `.icon-button` | アクション |
| `.text-field`, `.textarea-field`, `.select-field`, `.range-control` | 入力コントロール |
| `.choice-list`, `.switch-row`, `.switch-control` | checkbox/radio/switch |
| `.badge`, `.notice-*`, `.status-example` | 状態・フィードバック |
| `.progress-bar`, `.loading-spinner`, `.empty-state` | 進捗・読み込み・空状態 |
| `.component-card`, `.sample-list-row`, `.data-table`, `.pagination` | カード・一覧・データ表示 |
| `.tabs`, `.tab-button`, `.tab-panel`, `.disclosure`, `.sample-dialog` | タブ・開閉・ダイアログ |
| `.text-link`, `.back-link`, `.site-footer` | 導線・フッター |