デザインガイド — Anoy Backstage

anoy-share/public/<slug>/ 配下のドキュメントに共通して適用するトンマナ・トークン・コンポーネント一覧。このファイルが正本（source of truth）。コンポーネントの実物プレビューは public/design-595167c5ecda/index.html を参照。

このファイルは public/ の外側にあるため http.server から配信されない。矢野さんが直接編集していい。編集後、必要に応じて Claude にプレビューHTML（design-595167c5ecda/index.html）の同期を依頼すること。

1. 設計思想

モバイルファースト。スマホで会議中・移動中に開いて読まれる前提。
読みやすさが最優先。装飾より情報の階層と余白で勝負する。
ニュートラル・ライト。shadcn 系の light palette を踏襲。ダークテーマは作らない。
Surface Elevation で階層を作る。ページ背景は薄いグレー（#f7f7f8）、その上に白いカードが乗ることで「線も影もないのに浮いて見える」状態を作る。Material Design の “Surface Elevation”、Apple HIG の “Grouped Backgrounds” と同じ考え方。Linear / Stripe / Notion / GitHub の管理画面はこの戦略。
タイポは2書体だけ。Noto Sans JP（日本語）と Inter（英数）。それ以外は使わない。
アクセントは案件ごとに1色だけ。Drill = amber、Anoy LLC = slate、サムライ = slate-near-black、国交省CX = slate。
資料感を出す。プレゼンスライドではなく「内部資料」。バージョンと日付を必ず入れる。

1.1 Surface Elevation の使い方

[page bg]   #f7f7f8  ← canvas（薄いグレー）
   └ [card]   #ffffff  ← 白いカードが「乗ってる」感を獲得
       └ [tag/code]  #ebebed  ← さらに細かい強調

ボーダーは省略してOK（カードと canvas の明度差だけで階層が立つ）。
どうしても線が欲しいときは --border #e4e4e7 を薄く引く。
box-shadow は使わない。明度差で階層を作る方針を貫く。

2. デザイントークン

CSS variables として :root に定義する。新規ページは下記をコピペで開始する。

2.1 サーフェス（背景）

Surface Elevation システム。ページ → カード → さらに細かい強調、の3階層で明度を上げ下げする。

トークン	値	用途
`--bg`	`#f7f7f8`	ページ背景（canvas／薄いグレー）
`--bg-muted`	`#f2f2f3`	flow / preview 等の薄い面
`--bg-subtle`	`#ebebed`	tag / 強調背景
`--bg-card`	`#ffffff`	カード本体（canvas より明度が高い＝浮く）

重要：--bg を白から薄いグレーに変えたことで、白い --bg-card がボーダーなしでも視覚的に分離する。これが Surface Elevation の中核。旧バージョン（--bg: #ffffff）の既存ページ（anoyllc-light, tam-drill, cx01-*）は当面そのまま運用。新規ページは新トークンで作る。

2.2 文字色（フォアグラウンド）

トークン	値	用途
`--fg`	`#09090b`	見出し・本文最強調
`--fg-secondary`	`#27272a`	本文標準
`--fg-muted`	`#52525b`	リード文・補足
`--fg-faint`	`#71717a`	メタ・キャプション
`--fg-fainter`	`#a1a1aa`	番号・ナンバリング

2.3 線

トークン	値	用途
`--border`	`#e4e4e7`	標準ボーダー
`--border-strong`	`#d4d4d8`	ピル・ボタンの輪郭

2.4 アクセントとセマンティクス

トークン	値	用途
`--accent`	案件依存	主役色（後述）
`--accent-bg`	同薄色	q-card等の背景
`--accent-bd`	同中色	q-card等の境界
`--emerald` `#059669`	`--emerald-bg #ecfdf5` `--emerald-bd #a7f3d0`	成功・確定・上昇
`--rose` `#e11d48`	`--rose-bg #fff1f2` `--rose-bd #fecdd3`	訂正・警告・下降
`--amber` `#d97706`	`--amber-bg #fffbeb` `--amber-bd #fde68a`	議論中・要協議

2.5 案件別アクセント色

案件コード	accent 値	備考
`anoyllc`	`#0f172a`（slate-900）	自社
`samurai`	`#0f172a`（slate-900）	サムライパートナーズ
`cx01`	`#0f172a`（slate-900）	国交省CX
`tam-drill`	`#d97706`（amber-600）	Drill 専用

新規案件で違う色を使いたい場合は、ここに1行追記してから採用すること。 同じファイル内で2色以上のアクセントは使わない。

2.6 タイポグラフィ

--font-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'YuGothic', sans-serif;
--font-en: 'Inter', sans-serif;

本文は --font-jp を font-feature-settings: "palt" 付きで使う（日本語の詰めが効く）。
数字・英語・章番号は --font-en。font-variant-numeric: tabular-nums を併用して桁が揃うようにする。
太さは 400 / 500 / 700 の3段階だけ使う。600 は使わない（読み込み量削減のため）。

2.7 フォントサイズ（fluid scale）

clamp() で全部スケールする。固定 px は使わない。

--fs-h1:   clamp(28px, 7.4vw, 38px);
--fs-h2:   clamp(20px, 5vw, 24px);
--fs-h3:   clamp(16px, 4.2vw, 18px);
--fs-lead: clamp(15px, 4vw, 17px);
--fs-body: clamp(15px, 3.9vw, 16px);
--fs-sm:   clamp(13px, 3.4vw, 14px);
--fs-xs:   clamp(12px, 3.1vw, 13px);
--fs-meta: clamp(11px, 2.8vw, 12px);

2.8 スペーシング

--pad:     clamp(20px, 5vw, 32px);   /* 標準パディング */
--pad-sec: clamp(56px, 11vw, 88px);  /* セクション間 */
--radius:  10px;                       /* 全カード共通 */

2.9 レイアウト

body { max-width: 720px; margin: 0 auto; background: var(--bg); } で中央寄せ＋canvas色。
ページ全体の左右パディングは --pad。
セクション間の上下は --pad-sec。
グリッドが必要な箇所は @media (min-width: 640px) で2〜3カラムに切り替える。

2.10 ロゴ

共有アセット：public/_assets/anoy-logo.svg （fill="currentColor" 化済）
公開URL：https://01.anoy8.com/_assets/anoy-logo.svg
topbar での使い方は CSS mask を推奨（色を var(--fg) でテーマ追従できる、単一ファイルで全ページがキャッシュを共有できる、SVG path をHTML内に複製しない）：

.logo {
  width: 22px; height: 22px;
  background-color: var(--fg);
  -webkit-mask: url('/_assets/anoy-logo.svg') center/contain no-repeat;
          mask: url('/_assets/anoy-logo.svg') center/contain no-repeat;
}

元データはAdobe Illustrator書き出し（A4全面）。クロップ済みviewBox 179.98 302.87 235.74 235.74 を採用。
異なる viewBox / スタイルが必要な場合は _assets/ 配下に別ファイルを追加する（例：anoy-logo-wordmark.svg）。

3. ライティングのルール

3.1 ボイス

断定で書く。「〜と思われます」「〜かもしれません」を多用しない。
保留事項は明示する。ハルシネーション訂正 次のディスカッションで決めること のように章を立てて格納する。
強調はほどほど。<strong> の濫用禁止。1段落に1〜2個まで。
絵文字は使わない。

3.2 番号付け

セクションは英数2桁ゼロ埋め（01 02 …）で Inter 表示。
章タイトルは日本語、見出しスタイルは --fs-h2。
章の冒頭に .lead（リード文）を1〜2文入れる。

3.3 メタデータ

ページ右上の .doc-meta に v0.1 · 2026-04-27 の形式でバージョン＋日付を必ず入れる。
バージョンは Semantic ではなく単純な v0.1 → v0.2 → v1.0 の昇順。

4. コンポーネント一覧

実物プレビュー： https://01.anoy8.com/design-595167c5ecda/

コンポーネント	用途
`topbar`	全ページ共通の上部バー。logo / brand / doc-meta
`hero`	ヒーロー見出し。`h1` + `.hero-lead` + `.hero-stamp` (ピル)
`pill`	カテゴリタグ。グレーの輪郭、英数字向き
`toc`	目次。番号 + テキストの2カラム
`section`	章。`section-num` + `h2` + `.lead` + 本文
`kicker`	章内のサブ見出し。英大文字、強い字間
`flow`	ASCIIフロー図ブロック。`white-space: pre`、等幅
`q-card`	質問・提案。アクセント色の左罫 + 薄い背景
`dec`	判断待ち項目。Q番号 + タイトル + 選択肢
`cor`	ハルシネーション訂正。取り消し線旧 / 新
`chk`	確定事項。emerald 系の背景＋ラベル
`tbl`	比較表。シンプル罫線、英数 column header
`tag` `tag-ok` `tag-warn` `tag-talk`	インライン分類タグ
`foot`	フッター。ファイルパス + 編集メモ

5. 何をやらないか（Don’t）

❌ ダークテーマ（黒背景）。
❌ ゴールド・ネオン・グラデーション系のド派手なアクセント。
❌ 影（box-shadow）の使用。Surface Elevation（明度差）で階層を作る、それだけ。
❌ 複数のアクセント色を同一ページに混在させる。
❌ 絵文字、装飾的なアイコン、画像での見出し。
❌ font-size: 14px のようなマジックナンバー。var(--fs-sm) を使う。
❌ 720px を超える本文幅。グラフ等で必要なら .wide-bleed を別途用意する（未定義）。
❌ 改行制御（<br>）の濫用。基本は段落で構造化する。
❌ ロゴSVGをHTMLに毎回インライン展開する。_assets/anoy-logo.svg を CSS mask で参照すること。

6. このガイドの更新ルール

このファイル（_design-guide.md）が正本。
トークンや方針を変えたら、public/design-595167c5ecda/index.html のプレビューも合わせて更新する（Claude に依頼可）。
案件別アクセント色（§2.5）に新規エントリを追加するときは、_slugs.md のコードネーム辞書とも整合を取る。
新規コンポーネントを追加するときは、§4 の表に1行追記し、プレビューにも実例を入れる。

最終更新: 2026-04-27 / by Claude × Yano 変更履歴:

2026-04-27 v0.2: Surface Elevation 導入（--bg を白からグレーに）、ロゴ共有アセット化、CSS mask 推奨追加

anoy-share デザインガイド