ABYSS AFTER HOURS

上の提案をもとに AI が起こした詳細ブリーフです。これがそのままコードを書く AI への入力になりました。原文のまま載せています。

# ABYSS AFTER HOURS — 強化版デザインブリーフ v1

業種: 夜間水族館(tourism/leisure・翻案)。スタイル: ダーク探索・発見駆動型。

---

## ブランド軸

- **名前**: ABYSS AFTER HOURS(アビス・アフターアワーズ)。和文サブ表記「発光生物の夜間水族館」
- **業種**: 夜間限定水族館。20:00〜24:00 のみ開館し、発光生物(バイオルミネセンス)だけを展示するナイトプログラム
- **ペルソナ**: 20〜40 代の都市生活者。仕事帰りに一人で来る観測好き、デートの行き先に「静かな体験」を選ぶカップル、写真・デザイン職。昼のファミリー水族館の客層とは重ならない
- **価格帯**: プレミアム体験型。ナイトチケット大人 ¥3,800、年間ナイトパス ¥14,000、貸切観測枠 ¥30,000〜。昼型水族館(¥2,000 前後)より明確に高い
- **ブランド人格(5語)**: 寡黙 / 計器的 / 畏怖 / 親密 / 一滴の悪戯心
- **Why-This-Brand**: 発光生物は明るい水槽では本来の姿を見せない。ハダカイワシの発光器もウミホタルの青い霧も、観察に必要なのは照明ではなく暗闇である。だから 20:00 開館は営業上の演出ではなく生物学的な必然であり、館内照度は 0.002 ルクス(新月の夜の海面下と同じ)に保たれる。この館が提供するのは「見せてもらう展示」ではなく「自分の光で見つける観測」で、サイトもそれを予行演習として体験させる。暗闇を照らした者だけが、開館前にすでに一度この館を訪れている。

## 差別化軸

同業(水族館サイト)の凡庸な見せ方 3 つ:

1. **爽やか海テンプレ**: 明るい青地+泡・波のあしらい+丸ゴシック。昼の水族館の文法で、夜間・深海の題材でも青グラデを明るくしただけのものが大半
2. **時刻表ファースト型**: ショースケジュール・ファミリー料金・割引バナーが最上部に積まれる情報羅列。体験の予感がゼロのまま料金表に着地する
3. **なんちゃって幻想演出**: 紫グラデ+漂うパーティクル+「幻想的な癒しの空間へ」。見た目だけの没入で、ユーザーは何も操作せず、何も発見しない

この案の踏み外し方:

- 暗闇を**装飾でなく機能**にする。ページは本当にほぼ真っ暗で、カーソル(懐中電灯)で照らさない限り生物は存在すら分からない
- 発見が**サイト構造を実際に変える**。見つけた種が図鑑 HUD に登録され、発見数に応じて展示紹介・チケット特典・隠し展示の予告が解放される。眺める没入ではなく、成果が残る探索
- ダークネオンの定石(黒地に発光 1 色・スクロール駆動 WebGL: GSAP / Igloo / Unseen 系)からもさらに一歩外す。**光をユーザーが持つ資源**にし、さらに「館内停電」で館の都合が体験に割り込む。完璧に制御された演出ではなく、生き物と設備を抱えた施設の手触りを残す

## トーン&マナー

- **人称**: 一人称は「当館」、二人称は「あなた」。館内放送・注意書きの口調を基調にする
- **敬体/常体**: 案内文は敬体(「〜ください」「〜しております」)。HUD・計器ラベル・図鑑データは常体・名詞止め(「水深 812m」「捕食 待機中」)。この二重奏がブランドの声そのもの
- **抽象度**: 低く保つ。種名・水深・ルクス値・水温など検証可能な数値で語る。詩的な一行は発見の瞬間と Hero にだけ許す(1 セクション 1 行まで)
- **リズム**: 短文。読点より句点。空白(間)を恐れない。館内放送のように、必要なことだけ言って黙る
- **避ける言葉**: 「幻想的」「癒し」「非日常」「映え」「圧倒的」「感動体験」などの観光クリシェ全般。最上級表現(「日本初」「世界最大級」)。絵文字。感嘆符は全サイトで 0 個

## デザイン原則

- **配色方向**: Drenched。漆黒が面積の約 90% を占め、地そのものがブランド。色は 3 役割の意味論で運用する:
  - `--abyss`(基調地): oklch(0.05 0 0)。**純粋な無彩色黒**。チルトさせない。懐中電灯の光錐が効くには地の暗さが絶対条件
  - `--ink`(水塊/深度): oklch(0.18 0.045 300) 前後の深海インクパープル。没入層ではパネル・深度レイヤーの面、実務層(guide)では**地色として反転継承**する(後述)
  - `--biolume`(生物発光): oklch(0.86 0.17 195) 前後の酸性シアン。**生物と発見にだけ**使う。ナビやボタンの装飾に流用しない
  - `--lamp`(人間側の設備): oklch(0.673 0.217 38.6) の白熱オレンジ。**停電時の非常灯・注意書き・営業情報の計器**にだけ使う(面積 ≤5%)。「シアン=生物、パープル=水、オレンジ=人間の設備」という区別が画面の文法になり、ありがちな黒×シアン一辺倒から抜ける
  - 本文テキストは oklch(0.93 0.008 195)(黒地で 4.5:1 を大きく超える)。暗地に薄グレー本文でコントラストを割る事故を避け、全テキスト AA 検証を必須とする
- **タイポ体系**(3 ファミリー上限をフル活用):
  - **HUD mono**: Fragment Mono(Google Fonts)。極小サイズ(11〜13px)・`tabular-nums` 必須。計器ラベル・図鑑データ・座標表示
  - **可変幅 display**: Anybody(variable、wdth 軸 50〜150)。Hero と種名の英字見出し。**発見の瞬間に wdth が 60→130 へ開く**のがブランドモーションの核。clamp() の max は 6rem 以下、letter-spacing は -0.04em より詰めない
  - **和文**: Zen Kaku Gothic New。本文 Regular、見出し Bold。和文は 1 家族に留めてペイロードを守る
  - スケール比 1.25 以上。HUD の極小と display の巨大の落差そのものが「計器の緊張と発見の抑揚」を作る
- **グリッド/レイアウト原則**: 没入層はグリッドレス(生物は空間座標で散らし、HUD は四隅に固定)。実務層は 12 カラムだが左右非対称(左 1/3 に計器風メタ情報、右 2/3 に本文)。セクション余白は clamp() で呼吸させ、発見ログ周りだけ意図的に密にする
- **モーション言語**: ease-out-expo 系で統一。バウンス・エラスティック禁止
  - 懐中電灯: カーソル追従の光錐(CSS mask + radial-gradient)。**lerp 0.08〜0.12 の遅延**で「重い光学機器」の手応えを出す。即時追従は玩具に見える
  - 発見: 微発光 → 0.4s の間 → フル発光 → display の wdth 展開 → 0.6s 遅れて HUD 登録。段階を持つ
  - 停電: 1 セッション 1〜2 回、3 秒間の全暗+非常灯オレンジ。復帰時に照らしていた生物が少し移動している
  - `prefers-reduced-motion`: 懐中電灯追従を「クリック/タップ位置への固定スポット照射」に置換、停電イベントは発火させない、wdth アニメは即時切替。**リビールは必ず可視デフォルト上の強調**とし、クラス付与を待って初めて表示される実装を禁止(headless レンダラで空白になる)
- **写真/動画の役割**: 発光生物は**生成画像が主役**(漆黒背景に単体の発光生物、`data-img-spec` プレースホルダで仕込み後工程で差し替え)。spec 例: 「漆黒の背景に浮かぶホタルイカ 1 匹、青白い発光器が点在、被写界深度浅め、超高感度撮影風のノイズ微量」。実務層の館内写真は最小限(2〜3 点、暗所での人のシルエット)。明るい水槽写真は世界観を壊すため全面禁止

## ページ構成

二層構成: `index`(没入層 = ナイトプログラム)+ `guide/`(実務層 = 営業案内)。ヘッダーに両層を常時往来できるナビを置く(Unseen の二層ナビの継承)。

### index(没入層)

- **入場ゲート** — 主張: 「開館時刻を待って、音と光の許諾を取る誠実な入口」
  - 20:00 に向かうカウントアップ時計演出、館名ロゴ、「音ありで入館する / 音なしで入館する」の 2 ボタン(Enter without audio の翻案。音なしも同格のボタンとして置く)
- **暗闇探索フィールド** — 主張: 「照らさなければ、何もいないのと同じ」
  - ほぼ全暗のロングセクション。懐中電灯カーソルで探索し、5〜7 種の発光生物が隠れている。かすかな微発光(ヒント)を散らして詰み防止
- **発見ログ HUD** — 主張: 「あなたの観測記録が、そのまま図鑑になる」
  - 画面隅に DISCOVERED 3/7 などの計器表示。発見済みの種はサムネイル+種名+水深データで図鑑化。localStorage で永続化し再訪時も維持
- **解放セクション(展示紹介)** — 主張: 「見つけた種の展示だけが、語り始める」
  - 3 種発見で展示紹介が解放。各種に生成画像+和名/学名+観測データ(水深・発光色・発光の用途)
- **解放セクション(チケット導線)** — 主張: 「発見数がそのまま入館の理由になる」
  - 5 種発見でナイトパスの早期観測者特典コードが出現。CTA には発見数が刻まれる(「5/7 種を確認済み。残りは現地で」)。全 7 種で隠し展示「未記載種 SP-8」の予告が解放
- **停電イベント** — 主張: 「ここは演出装置ではなく、生き物と設備を抱えた施設である」
  - 3 秒の全暗+非常灯+「館内点検中です。係員がすぐ参ります。」の一文
- **脱出口** — 主張: 「探索したくない人の導線を、暗闇の外に常設する」
  - 「営業案内へ(通常ページ)」リンクを**常時視認可能な明度**で固定表示。skip link と同思想の誠実さ

### guide/(実務層)

- **営業案内ヘッダー** — 主張: 「実務情報は 1 スクロールで全部届く」
  - 地色は `--ink`(インクパープル)に反転。開館 20:00 / 閉館 24:00 / 最終入館 23:00 を HUD mono の計器風に表示
- **料金** — 主張: 「価格は体験の設計図として見せる」
  - ナイトチケット / ナイトパス / 貸切観測枠の 3 種。含まれるもの(貸出ライト・図鑑アプリ連携)を明記
- **アクセス・注意事項** — 主張: 「暗所体験の安全と配慮を先回りして言う」
  - 所在地・交通、暗所が苦手な方/光過敏への配慮、再入場、写真撮影ルール(フラッシュ禁止)
- **FAQ + チケット CTA** — 主張: 「疑問を潰し切ってから買わせる」
  - 4〜6 問。CTA は「日時を選んで入館予約」

### 実装ノート(auto-loop 規約)

- `src/pages/<slug>/index.astro` + `<slug>/guide/index.astro`、`<Slug>Layout.astro`(DemoBanner + skip link)、`src/components/<slug>/`、`src/styles/<slug>.css`(`body.<slug>-page` スコープ)、本文コピーは `site-content-<slug>.json` に全分離(EN 版 `.en.json` も作る)
- WebGL は不要。DOM + CSS mask + 少量の canvas で成立させる(スマホ・低スペック耐性と OOM 回避)。タッチ環境はタップ=照射、ドラッグ=光の移動
- JS 無効時フォールバック: 全生物を静的表示し、図鑑・展示紹介も解放済み状態で出す(コンテンツをモーションの人質にしない)

## コピー方針

**Hero 草案(候補)**:

1. 「光は、あなたが持ってきてください。」(推し。ブランドの操作原理そのものを一文にした招待)
2. 「開館は、日没のあとで。」
3. 「20:00、海がひらく。」
4. 「ここでは、見つけた者だけが見られます。」

サブコピー案: 「発光生物だけを展示する、20:00 開館の水族館。館内照度 0.002 ルクス。観測用ライトは入館時にお渡しします。」

**各セクションの言葉のトーン**:

- 入場ゲート: 館内放送の敬体。「まもなく開館いたします。」の静かな事務性
- 探索フィールド: ほぼ無言。HUD の英語計器(LUX 0.002 / DEPTH -812M / DISCOVERED 0/7)だけが語る
- 発見の瞬間: 1 行だけ詩を許す(例: 「ホタルイカ。あなたの光に、光で応えました。」)。直後に常体データで着地(「発光色 470nm / 相模湾 / 水深 200〜600m」)
- 展示紹介: 図鑑の常体。観察事実のみ、擬人化しない
- チケット導線: 敬体に戻る。発見数を引用して個人化(「5/7 種を確認済みのあなたへ」)
- guide: 全編敬体の実務文。世界観の演出語彙を混ぜない(ここが素っ気ないほど没入層が効く)

## クラフトの肝

1. **懐中電灯の光の質(モーション/色)**: 単層の radial-gradient にしない。中心の白熱コア(わずかに `--lamp` 寄りの暖色)+外周の `--biolume` かぶりの二重光錐とし、不透明度 ±2% を 4〜7 秒周期で揺らすフリッカーを乗せる。lerp 遅延と合わせて「電池で動く実物の機材」の説得力を作る
2. **発見の「間」**: 照らした瞬間に出現させない。微発光に気づく 0.4s → 呼吸するような明滅 → フル発光 → Anybody の wdth が 60→130 へ開く → 0.6s 遅れて HUD へ登録音(音許諾時のみ)。この時差の設計が「発見した」という主観を作る。即時反応にした瞬間ただのホバーエフェクトに堕ちる
3. **HUD mono の徹底(タイポ詳細)**: `tabular-nums` で数字の桁揺れゼロ。DEPTH 値はスクロール量と連動して実際に増える。表示するのは全て実データ(水深・ルクス・水温・発見数)であり、飾りの英字を並べない。「小さい mono ラベルの反復」を装飾でなく計器として成立させることが、eyebrow 系 AI 痕跡との決定的な違い
4. **色の意味論を最後まで守る(色のニュアンス)**: `--biolume` は生物と発見以外に絶対に使わない(リンクホバーやボーダーに漏らさない)。guide 層の CTA ホバーは地色を暗転させず `box-shadow: inset 0 -2px 0` の下線浮上で返す(暗転はコントラスト AA を割る既知の罠)。停電時のオレンジは 3 秒間だけ画面を支配し、通常時は注意書きの 1 行にしか出ない。希少さが非常灯の信号性を保つ
5. **停電の演出量(抑制)**: 頻度は 1 セッション 1〜2 回・3 秒まで。スクロールや探索操作はブロックしない(モーションで操作を人質に取らない)。復帰時に照らしていた生物がわずかに位置を変えている、という 1 点の芸だけ仕込む。「多くやらない」ことが、この 1 点を記憶に残す