nzw.jp Design System

使い方

各ページの <head> で CSS を読み込み、プロパティ値に変数を参照します。

<link rel="stylesheet" href="https://nzw.jp/static/css/design-system.css">

.my-title  { color: var(--nzw-text-strong); font-size: var(--nzw-text-2xl); }
.my-button { background: var(--nzw-accent); border-radius: var(--nzw-radius-full); }
.my-card   { box-shadow: var(--nzw-shadow-sm); padding: var(--nzw-space-6); }

配色 — Color

基準は index.html。アクセント＝Sky、テキスト＝Slate 系。

Surface / Border

Text

Accent (Sky)

Secondary / Semantic

Brand accents（プロダクト別）

タイポグラフィ — Typography

和文 Noto Sans JP ＋ 欧文 Inter。等幅 JetBrains Mono。表示用 Orbitron / ゲーム Rajdhani。

サイズスケール

余白 — Spacing

4px グリッド。--nzw-space-1 = 4px 〜 --nzw-space-20 = 80px。

スマホの版組 — Mobile layout

狭い画面で崩れるのは、たいてい 余白・表の列幅・改行の位置 の 3 つです。ただし「スマホだから小さくする」は解決にならない（一度やって戻しました）。直すのは構造のほうで、余白は広い画面と同じまま保ちます。基準にしている数字は iPhone の論理幅 390px と 430px の実測です。

折返し点は 3 つだけ

@media の条件にカスタムプロパティは使えない（メディアクエリは変数を評価しない）ので、数字はどうしても各ページに直書きになります。だからこそ書いてよい数字を決めておく。増やす前に、この 3 つで足りないかを先に疑ってください。

余白は画面幅で落とさない

表は「積む」が既定、「流す」が例外

狭い画面で表を width: 100% のまま押し込むと、いちばん長い列が 1 文字ずつ縦に流れます。幅が足りないときに削られるのは、いつも「説明」の列です。

1. 1
   既定は積む — .ds-table そのまま

   640px 以下で 1 行を 1 かたまりに畳み、見出し行（thead）は隠します。1 行目に「見出しセルと値」、2 行目に説明。列の見分けは太字・等幅・灰色という書体側に移します。既定パラメータの表はこれで 1 画面に 4 行 → 10 行になりました。

2. 2
   例外は流す — .ds-table--wide

   列を左右に並べて見比べること自体に意味がある表だけ。畳むと比較できなくなるからです。器には .nzw-scroll-x を付けて端にぼかしを出します。このページでは時間帯テーマの値・天気プリセット・ブラックホールの大きさの 3 つだけです。

3. 3
   畳むと意味が消える列には data-label

   <td data-label="彩度"> と書くと、積んだときだけ小さな見出しが値の前に出ます。「—」や数字だけの列は、見出し行が消えると何の値か分からなくなるので、そこにだけ付けます。書体で見分けがつく表には付けません。

改行の位置

ラベルと操作は必ず対にする

現在地の下線 — Current underline

「いまここ」を線で示すときの寸法。ヘッダーのナビがこれを使っています。

余白の入れ方

線の長さ

--nzw-underline-offset = var(--nzw-space-1)（4px）／ --nzw-underline-bleed = var(--nzw-space-1)（4px）／ --nzw-underline-weight = 2px。実装は /static/css/site-nav.css の .site-header-link と [aria-current="page"]::after。

角丸 — Radius

影 — Shadow

グラデーション — Gradient

モーション — Motion

標準トランジション --nzw-transition（300ms）。共通キーフレーム nzw-float / nzw-spin-slow / nzw-rainbow-flow。

虹ライン — Rainbow line

ヘッダー下とフッター上に敷く .nzw-rainbow-line の候補比較。実サイトと同じ 2px・同じ周期・同じ天気倍率で動かしています。

候補

天気連動のスケール

雪 → 曇 → 雨 → 晴 の順に、彩度と速度が段階的に上がります。判定範囲は bg-synapse.js の WEATHER_PRESETS と共通。彩度は 3 秒かけて滑らかに変化し、周期の切り替えは位相を保持するため見た目のジャンプは起きません。大雨だけはこの 1 軸から外れ、周期は晴れ寄りに速く・彩度は雨より低くします（動きは強いが色は濁る、という別の性格づけ）。

時間帯テーマ — Time of day

トップページは body に時間帯クラスを 1 枚だけ付けて配色を切り替えます。4 種類ありますが、地と文字が入れ替わるのは theme-night だけです。

4 つのテーマ

値

切り替えと保存

夜モードで上書きするもの

反転で読めなくなる面と文字だけを、狙って上書きします。原則は「面は slate 系に置き換え、ブランドの色は枠線に残す」。

時間帯と天気が効く先

配色以外にも波及します。ここが「時間帯 / 天気」という 2 軸で画面が変わる全体像です。

背景の線 — Synapse background

トップページの全面に敷いた #bg-canvas。神経の伝播を模した、ノードと線のアニメーションです。実装は /static/js/bg-synapse.js（SynapseBackground クラス）。

何を描いているか

1. 1
   ノードを撒く

   画面端 margin: 50px の内側に particleCount: 45 個。半径 1–3px。ごく遅いブラウン運動で漂い、速度は目標値の 0.5–1.5 倍に収束させ続ける（速すぎても遅すぎても補正が入る）。壁では反射する。

2. 2
   近いもの同士を結ぶ

   距離が connectionDistance: 250px 未満のノードを双方向に結線。ただし Math.random() > 0.1 の判定で約 1 割は間引く。全結合にすると総当たりの網になって「たまたま繋がっている」感じが消えるため。毎フレーム 2% の確率で結線を作り直し、動きに追従させる。

3. 3
   1 点から伝播させる

   ランダムな 1 ノードを起点に幅優先探索（BFS）で到達順を作り、nodeActivationDelay: 150ms ずつずらして順に発火させる。発火したノードは activationTime = 1.0 から毎フレーム 0.008 ずつ減っていく。両端が発火中の線だけが色と shadowBlur を持ち、それ以外は rgba(180,180,180, …) の細い線として残る。

1 サイクルの流れ

既定のパラメータ

天気プリセット

天気コード（Open-Meteo）で setWeather(code) を呼ぶと、この表の値が現在設定にマージされます。判定範囲は虹ラインと共通です。

3 つの形状

ページへの敷き方

<canvas id="bg-canvas"></canvas>
<script src="/static/js/bg-synapse.js"></script>
<script>
  const bg = new SynapseBackground(document.getElementById('bg-canvas'));
  if (!window.PREFERS_REDUCED_MOTION) bg.start();
  bg.setWeather(0);   // 天気コードでプリセット切替
</script>

/* トップページでの見え方。線そのものは主張させない */
#bg-canvas {
  position: fixed; inset: 0;
  z-index: -1;           /* body の背景より上・コンテンツより下 */
  pointer-events: none;
  filter: blur(0.3px);   /* セクション背景の上を流れるときの硬さを取る */
  opacity: 0.55;
}

opacity: 0.55 と blur(0.3px) は後から足したものです。素のままだと線がくっきりしすぎて、 カードの上を横切ったときに本文より目立ちました。動きを減らす設定（prefers-reduced-motion）の ときは start() 自体を呼びません。

背景の粒 — Field background

上の背景の線と交互に出る、もう1つの段階（濃い）。漂う粒と、ときどき走る稲妻です。実装は /static/js/bg-field.js（BackgroundField クラス）。素の WebGL2 で、外部ライブラリは使っていません。

何を描いているか

1. 1
   地の色

   全面を覆う三角形1枚に、2オクターブのノイズで tintA ↔ tintB をゆっくり混ぜる（アニメGIFのような繰り返しではなく、time uniform で連続的に流す）。不透明度は明るい地で0.16、暗い地で0.30しかない。「見える」より「気配」を狙う層で、ブラックホールの重力圏の輪と同じ考え方。

2. 2
   粒を漂わせる

   pointCount: 1800個の点を、CPU側のシミュレーションなしで動かす。各点の位置は (種, 位相, 時刻) だけで決まる閉じた式（サイン・コサインで小さな楕円をなぞる）なので、頂点シェーダだけで完結する。位相の大小で奥行き（サイズと不透明度）を表現し、遠近感を出す。

3. 3
   稲妻を走らせる

   4〜8秒に1回、ランダムな1粒を起点に、進行方向 ±55° の円錐内から「狙いの跳躍距離にいちばん近い粒」を選んで5〜8回跳ねる（ビリヤードのように、当たるたびに向きを振る）。各辺をギザギザに4分割して折れ線にし、当たった粒には閃光を置く。跳ねが3回未満で終わったら「ただの線」にしか見えないため捨てて、次の周期に引き直す。

既定のパラメータ

天気プリセット

setWeather(code) で速度・大きさ・色相を差し替えます。判定範囲は虹ラインや背景の線とほぼ共通ですが、こちらだけ「大雨・雷雨」が独立した1段濃い区分として増えています（65 / 67 / 82 / 95–99）。判定は「大雨・雷雨」を「雨」より先に見る — コード65・67・82は雨の範囲(51–67 / 80–82)にも入るため、あとに置くと大雨側の判定に届かない。

地の明暗に合わせる

setTheme(dark, tintA, tintB) を時間帯テーマの切り替えに合わせて呼ぶ（背景の線と同じ橋渡しを bg-manager.js が持つ）。明るい地では粒を弱く小さくする — 暗い地と同じ量を白地に乗せるとベージュの斑点になって本文が読みにくくなるため。稲妻も明るい地では通常合成、暗い地では加算合成（光として足す。通常合成だと線が粒を消してしまう）に切り替える。

壊れたら「軽い」へ

WebGL2 はソフトウェア実装や低スペック端末で Canvas 2D より遅いことがあるため、動かす価値が無いと判断したら呼び出し側（bg-manager.js）に軽いへ落とすよう伝えます。

ページへの敷き方

<script>
  // bg-manager.js は「濃い」に耐える端末と判定したときだけ、これを遅延読み込みする
  const s = document.createElement('script');
  s.src = '/static/js/bg-field.js';
  s.onload = () => {
    const bg = new BackgroundField(document.getElementById('bg-canvas'));
    if (!bg.start()) return;   // WebGL2 なし・ソフトウェア実装 → light へ
    bg.setWeather(0);
    bg.onFallback = (why) => { bg.stop(); /* ここでも light へ差し替える */ };
  };
  document.head.appendChild(s);
</script>

bg-synapse.js と同じ表面（start / stop / setConfig / setWeather）を実装しているので、 bg-manager.js は2つを無改造で入れ替えられます。setTheme は背景の線には無い、こちら専用の口です。

ブラックホール — Black hole

サイト内に 2 つあります。アプリ一覧・このページをゆっくり横切る徘徊するブラックホール（/static/js/bh-wanderer.js ＋ 起動係の /static/js/bh-ambient.js）と、1 画面で完結するゲーム Singularity（/static/blackhole.html）。描画の原典はどちらもアプリ側の synapse-link です。

徘徊するブラックホール

6 つの層

1. 1
   Distortion Rings — 重力圏の同心円

   4 本の輪（pullDistance の 40%–100%）と、中心から外へ抜ける放射グラデーション。いちばん濃いところで rgba(139, 92, 246, 0.06) しかない。ここは「見える」より「気配がある」を狙う層。

2. 2
   Ambient Particles — 吸い込まれていく粒子

   12 + radius × 0.5 個。半径の 1.5–4.0 倍の距離に置き、少しずつ内側へ寄せる。事象の地平面（0.5 倍）に届いたら外周へ戻して alpha を引き直す。色は紫（270–300）かオレンジ（20–40）のどちらか。

3. 3
   Accretion Disk — 降着円盤

   加算合成（globalCompositeOperation: 'lighter'）。3 層 × 60 分割の円弧で、層ごとに半径・線幅・回転速度を変える。色相は t × 120 + 260 + layer × 30 なので、紫から回して外側に暖色が乗る。

4. 4
   Event Horizon Glow — 事象の地平面のにじみ

   半径 r × 1.4 × pulse の放射グラデーション。紫 #a855f7 と暖色 #d97757 を 0.3 / 0.7 の位置に置いて、内側は紫、外周は赤みへ倒す。

5. 5
   Core — 本体

   外側は blur(7px) 付きのグラデーションで縁をにじませ、内側 0.6r はほぼ真っ黒でベタ塗り。中心を完全な黒にすることで、周りの加算合成の明るさが際立つ。

6. 6
   Tactical Info — VOID タグ

   VOID: xx.x% と照準のかぎ括弧。値は danger = radius / (画面幅 / 4)。危険度が上がるほど色が紫 → 赤 → 金へ動き、0.8 を超えると点滅する。書体は --nzw-font-game（Rajdhani）。

大きさ（原典の表そのまま）

徘徊のさせ方

動きだけは原典に無い追加分です（ゲームでは重力計算で動く）。「直進して壁で跳ね返る」を避けるための作りになっています。

置き場所

奥行きの入れ替わり

重くしないための決め

Singularity — 1 画面のゲーム

/static/blackhole.html。徘徊するほうと違い、こちらは全画面・黒地・30 秒で終わる作りです。トップページのトーンとは意図的に切り離しています。

コンポーネント — Components

トークンのみで構築した任意採用のベースクラス。新規ページはこれらを使うと統一が取れます。

Button .nzw-btn

Card .nzw-card

Badge .nzw-badge

プロジェクトカード — Labs & Prototypes

トップページの #projects-grid に並ぶカード。1 枚に「何か」「いつ」「どこで動くか」「どうやって手に入れるか」を全部載せる、という前提で組み立てています。

1 枚の解剖

組み立て

<div class="project-card group backdrop-blur-xl border border-sky-100/80 rounded-2xl
            overflow-hidden card-hover flex flex-col relative
            premium-bg-synapse premium-card-content"
     data-category="game">
  <a href="…" class="flex flex-col flex-grow">
    <div class="aspect-video relative premium-image-synapse">…</div>
    <div class="px-5 pt-5 flex-grow flex flex-col">…</div>
  </a>
  <div class="px-5 pb-5 mt-auto">…</div>
  <!-- .plat-badge-strip は JS が追加する -->
</div>

面の色 — premium-bg-*

共通の型は linear-gradient(145deg, rgba(255,255,255,.8) 0%, <プロダクト色 50% 透過> 100%) ＋ box-shadow: 0 10px 30px -5px rgba(<プロダクト色>, .15), inset 0 1px 0 rgba(255,255,255,.8)。上辺の inset 1px がガラスの縁になります。トークンでは --nzw-shadow-accent が同じ形です。

premium-bg-bom だけ昼でも暗色で、hover 中は bom-danger-flash（1 秒周期で枠線の緑が明滅）を回します。 例外は 1 枚だけと決めています。2 枚目を作った時点で「淡い面で揃える」という取り決めが取り決めでなくなるため。

プラットフォームのバッジ

絞り込み