AIスタートアップ（スタイリッシュ）

だれに向けたページか

社内の規程・マニュアルが多く、「どこに書いてあるか」を探す時間を減らしたい中堅企業の情報システム・総務の担当者。あわせて、投資家と採用候補。 「技術の会社らしい、静かな凄み」を最初の数秒で出す。

色

暗いページ。本文は明るい灰。

※ 共通ルールの本文色 #374151 は明るい地の色。このページは全体が暗いので、本文は明るい灰にする（白い地を作るときは #374151 に戻す）。

文字

• 英字：Syne（700・800）
• 数字・小さな英字：IBM Plex Mono（500）
• 日本語：Noto Sans JP（400・700）

ページの構成と演出

1. メインビジュアル（A11）：暗い煙の写真の上で、ばらばらの小さな破片（点と短い線）が画面中から集まり、「NAGI」の形になる。集まった後もかすかに漂い、マウスを近づけると少し散ってまた戻る。文字の縁は紙のようにかすれる（SVG の feTurbulence）。キャンバスは飾りなので aria-hidden、見出しは普通の h1
2. リボン（F06）：メインビジュアルの下から、紫→桃色の太い帯が画面を横切りながら、「使命」「製品」「数字」の区切りをまたいで下へ伸びていく（SVG の線の長さをスクロールで描く）。帯は文字の後ろを通る
3. 使命：大きな一文と短い説明
4. 製品：3つの機能。写真とカード
5. 数字：導入社数など（見本の値）
6. 結び（D05）：煙の背景に、金属のように光る「N」の印を格子状に並べる。印はひとつずつ違う向きで光り、スクロールとマウスで光の角度が少しずつ動く。中央に「話を聞いてみる」のボタン
7. フッター

動きの決まり

• JSや GSAP が無いとき：破片は出ず、「NAGI」は文字として静かに表示（かすれの効果は CSS だけで付く）／リボンは最初から描き終わった形／金属の印は止まった光り方。全部読める
• prefers-reduced-motion のときは、破片を最初から文字の形で止めて描き、漂わせない。リボンは描き終わった形、光も動かさない
• 破片の数は画面の広さに合わせて減らす（スマホは少なく）。画面外に出たら描くのを止める
• 導入社数・数字・投資家の名前は見本の値（〇〇）。会員が本物に替える

写真（codex）

暗い煙／夜のオフィス／キーボードの手元／チップの接写／会議室、の5枚。顔は写さない。

下層ページを作るときの決まり

• 全ページ暗い地。白い地は使わない
• リボン（F06）は1ページに1本まで。金属の印（D05）はロゴと結びだけ
• 破片の文字（A11）はトップだけ