FLOW ANATOMY #18 — 1サイトを縦に解剖する
星川プラネタリウムは、
なぜ1画面ずつで見上げさせるのか。
技法は『点』、サイトは『線』。架空の科学館『星川プラネタリウム／HOSHIKAWA』は、長いランディングページを縦に流しません。かわりに1画面＝1スライドのscroll-snapで、夜空・星座・上映・ドーム・来館を一枚ずつ“切り替えて”見せます。背景ではCanvasの星がごくゆっくり流れて瞬き、たまに流れ星が一閃する。中央では星がひとつずつ線で結ばれ、星座が立ち上がる。速さや派手さで押すのではなく、静けさと余白で「見上げる時間」をつくる——プラネタリウムの暗がりをブラウザに移した設計を、章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
夜空→今夜の星座→投影プログラム→ドームと望遠鏡→来館案内。スライドを一枚ずつめくるリズムそのものが緩急になります。動くのは主に背景の星と、線で結ばれる星座だけ。色は藍と星白、一点の淡ゴールドに絞り、暗いのに“沈まない”静けさを保ちます。既存の暗い作品（ネオンやシネマ）とは、はっきり別人格の落ち着きです。
- 00HERO起 — 藍の夜空に見出しがそっと浮かぶ動
- 01STARFIELD常 — Canvasの星が全篇でゆっくり流れ瞬く常
- 02CONSTELLATION結 — 星がひとつずつ線でつながる動
- 03PROGRAMS知 — 投影プログラムを静かに並べる動
- 04DOME物 — ドームと望遠鏡が線から描かれる動
- 05VISIT誘 — 来館案内と観望会の通知動
- 06NAV常 — 右の星ドットが今の一枚を指す常
藍の夜空に、見出しがそっと浮かぶ
狙い第一画面いっぱいが深い藍の宇宙。ロゴの環と放射の“星のマーク”を淡ゴールドで置き、SpectralのセリフとZen角ゴシックの細字で「夜を、／見上げにいく。」とだけ、ゆっくり下からフェードイン。二行目は星白→微光パープル→淡ゴールドのグラデで断ち切る。派手なアニメを最初に見せず、静けさと余白で“これは見上げるための場所だ”と宣言する。
つなぎここで決まるのは、速さでも情報量でもなく“トーン=静謐”。以降のすべてのスライドが、この暗いのに沈まない藍と、ゆっくりした呼吸の上に積まれていく。
Canvasの星が、全篇でゆっくり流れ瞬く
狙い背景には固定のCanvas 2Dスターフィールドが敷かれ、二百を超える星が深さ（大きさ・明るさ）ごとに分かれて、ごく緩やかに横へ流れ、サインカーブで瞬く。スクロール量に応じて奥の星ほどゆっくり動く視差で、スライドをめくるたびに星図がわずかにずれる。数秒〜十数秒に一度だけ、白→淡ゴールドの尾を引く流れ星が一閃して消える。WebGLもGLSLも使わない、生Canvasの静かな一枚。
つなぎこの星の層だけは、どの章に切り替わっても消えません。暗がりに“ずっと同じ空の下にいる”という一体感を敷き続ける、持続レイヤー。だからスライドが変わっても、体験は途切れず地続きに感じられる。
星が、ひとつずつ線でつながる
狙いこのサイトの背骨。中央のパネルに置かれた星々（SVGの円）を、結ぶ線がpathLength＋stroke-dashoffsetで一本ずつ順番に描いていく。オリオン座・カシオペヤ座・北斗七星をタブで切り替えると、線がいったん消えてから、また静かに引き直される。明るい星は淡く瞬き、名前が遅れて浮かぶ。“ばらばらの点”が“意味のある形”になる瞬間を、指の操作で体験させる。
つなぎ解説で言葉を尽くす前に、星座という「見立て」の面白さを手で通す章。ここを抜けると、以降の上映プログラムやドームが「あの星空を見せてくれる場所」として腑に落ちる。
ドームと望遠鏡が、線から描かれる
狙い左に、半球のドームとリブ、スリット窓、そして屋上の反射望遠鏡を一本の線画で。画面に入るとドームの輪郭→リブ→金色のスリット→望遠鏡→星の順に、時間差で描き上がる。右にはドーム直径18m・220席・投影する星40万・望遠鏡40cmの四つの数字を、罫線で仕切ったスペック表に。施設のスケールを、写真ではなく“描かれる線”で伝える。
つなぎ「星座を見せてくれる装置」を具体化する章。冒頭のCanvasの星（作りもの）と、ここで語る本物の望遠鏡（生の星）が対になり、屋内投影と屋外観望の両輪という施設の性格が立ち上がる。
来館案内と、観望会の通知
狙い左に開館時間・休館日・観覧料・アクセス・観望会を、セリフのラベルつき定義リストで淡々と。右のガラス質カードには「星空観望会の空席通知」フォーム。晴天時のみ・定員制という条件を正直に添え、メールを入れると星あかり色の一文で静かに応える。煽らず、来たい人にそっと戸を開ける締めくくり。
つなぎ見上げたい気持ちを、最後に「行ける場所・行ける時間」へ着地させる章。天気まかせの観望会という誠実な条件そのものが、このブランドの静けさと地続きになっている。フッターは架空である旨を明記して、藍の夜に沈む。
右の星ドットが、今の一枚を指す
狙い画面右端に、スライドの数だけ小さな星ドットが縦に並ぶ。今いる一枚のドットが淡ゴールドに灯り、かすかな光暈をまとう。ホバーで章名がそっと現れ、押せばその一枚へ滑らかに移動。1画面ずつのサイトで“自分が今どこにいるか”を、常に静かに示し続ける羅針盤。上部の半透明ナビはスクロールで細く締まる。
つなぎスライドを切り替える体験に、迷子にならないための座標を与える持続レイヤー。派手さはないが、これがあることで“一枚ずつ見せる”構成が親切さに変わる。
TAKEAWAY“静けさ”で没入させる流れの5原則
星川プラネタリウムから取り出せる、文化施設・科学館・美術館・体験型スポット系のサイト全般に持ち帰れる設計則。#10 静けさ の“引き算のラグジュアリー”や #17 食欲 の暗いシズルと読み比べると、同じ「暗い背景」でも狙う感情（高級・食欲・畏敬）で作り分けが必要だと分かります。
1画面＝1メッセージに絞る
scroll-snapで一枚ずつ見せるなら、各スライドは一つのことだけを言う。情報を詰め込まず、余白を主役にする。めくるリズムそのものが緩急になり、来訪者は“見上げる”ように受け取れる。
動きは遅く、たまに一閃
常時速く動かすと没入は壊れる。星はごくゆっくり流れて瞬き、流れ星は数秒〜十数秒に一度だけ。低頻度のご褒美が、静けさの中に“見ていたくなる”理由を残す。
線を「引く」ことを体験にする
完成した星座を置くのではなく、pathLengthで一本ずつ結ばれる過程を見せる。点が形になる瞬間を指の操作に結びつけると、ただの図がインタラクティブな発見に変わる。
暗くても“沈ませない”配色
藍を地に、星白と一点の淡ゴールド。ネオンにもモノクロにも寄せず、微光パープルをアクセントに置くと、暗いのに冷たすぎない“畏敬”のトーンになる。差し色を一色に絞るほど品位が保てる。
静けさは配慮とセット
右の星ドットで現在地を常に示し、reduced-motionでは星も流れ星も止め、モバイルではスナップを解いて素直に縦スクロールへ。没入の演出は、迷わせない・酔わせない設計と組んで初めて“心地よい静けさ”になる。