レイアウト方針Claude Code 用

書体は三つで足りる

見出し、本文、欧文・数字。役割ごとに一つずつ。それ以上増やすと散る。

保留中の候補

見出し書体を差し替えるときは、方向の違いとセットでこの中から選ぶ。

黒地に、発光する二色

ベースはほぼ黒。アクセントはピンクとシアンだけで、どちらも「光っている」用途に限る。塗り面には使わない。

罫線と余白で組む

カードで区切らない。1px の線と大きな余白で区切る。要素の境界は「囲む」のではなく「引く」。

• 01

  最大幅 1100px、左右 1.25rem

  セクションは上下 6rem。詰めるより空ける。

• 02

  セクションラベルは縦書き

  DM Mono の大文字を writing-mode: vertical-rl で立てる。横に置く小さな英字ラベルは定型に見える。

• 03

  列挙は番号で

  アイコンの代わりに 01〜 の中抜き数字。ホバーで点灯する。

• 04

  角丸は最小限

  ボタン 4px、ピル 999px、ネオン看板の枠だけ 28px。カードの角丸 20px は使わない。

• 05

  グリッドは罫線グリッド

  統計やスウォッチのような並びは gap: 1px と線色の背景で格子にする。

部品の見本

ボタン

数値

枠

折りたたみ

引用

光り、追い、現れる

動きは三種類。ネオンのちらつき、マウスに追従する背景のグロー、スクロールに合わせたフェードイン。いずれも prefers-reduced-motion で止まる。

/* ネオン */
text-shadow: 0 0 6px #fff, 0 0 14px var(--pink), 0 0 30px var(--pink), 0 0 60px var(--pink), 0 0 100px var(--cyan);
animation: flicker 4s infinite;

/* マウス追従グロー（body::before） */
background: radial-gradient(600px circle at var(--mx) var(--my), rgba(255,47,214,.12), transparent 60%);

/* スクロール駆動フェードイン。JS 不要 */
.reveal { animation: up linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }

やらないこと

「Claude Code のサイトっぽい」「AI 生成 LP の定型」と指摘されたものを、そのまま並べておく。見比べるための反面教師。

• ×

  Inter / Zen Kaku Gothic New / system-ui

  この三つのスタックを見た瞬間に AI 生成に見える。

• ×

  見出しの明朝体

  Shippori Mincho、Noto Serif JP など。上品にはなるが、この方針の中では浮く。

• ×

  90 年代ネタ

  Comic Sans、マーキー、点滅 NEW、工事中、訪問者カウンター。ギャグとしても古い。