FLOW ANATOMY #05 — 1サイトを縦に解剖する
あわいは、
なぜ静かなのか。
#04 NOCTILUCA が光と音を重ねる足し算の流れなら、 湯宿「あわい」は引き算の流れ。 置かないものを決め、動きを3つに絞り、霧と朱印と縦書きを反復する—— “静けさ”がどう設計されているかを章ごとに読み解きます。 解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
9章のうち「動」はわずか3つ(部屋・食・季節)。残りはすべて静——この比率そのものが、あわいの流れの設計です。
- 00HERO筆致 — 墨と霧で静かに開く静
- 01余白の作法引き算 — 置かないものを決める常
- 02CONCEPT言葉 — 縦書きの静寂静
- 03ROOMS場 — 縦スクロールが横になる動
- 04ONSEN湯 — 霧がもう一度立つ静
- 05CUISINE食 — 皿が順に灯る灯
- 06SEASONS季 — 色だけが動く触
- 07ACCESS約束 — 静けさを預かる静
- 08FOOTER余韻 — 印を結んで閉じる静
ローダーの代わりに、筆で開く
狙いNOCTILUCAが「SYNC 100%」の儀式で始まったのに対し、あわいにローディング画面はない。代わりに縦書きの「あわい」へ上から墨が滲み、罫線がすっと引かれ、最後に朱印がポンと押される——開幕の演出そのものがイントロを兼ねる。
つなぎ霧のcanvasが画面に漂い続け、写真の上に「間」を作る。この霧はのちの章でもう一度立つ、最初のモチーフ提示でもある。左上の ↻ で何度でも再生できます。
「置かないもの」を先に決める
狙い持続レイヤーは上端の進捗バー、たった1本。カスタムカーソルも質感オーバーレイもない。NOCTILUCAが3つ重ねた場所で、あわいは1つに絞る——静けさは要素の少なさではなく、置かない決断の積み重ねで作られる。
つなぎ代わりに「常にあるもの」の役割は書体と色が担う。明朝(Zen Old Mincho)と和紙色・藍・朱の3色が全章を貫き、ページのどこにいても同じ宿の中にいる感覚を保つ。
最初の「動」— 縦スクロールが横になる
狙い静の章が2つ続いたあと、ここで初めて大きく動く。スクロールすると画面が固定され、3つの離れ(霞・灯・月白)が横に流れていく。静→静→動の配列だからこそ、この横移動が効く。カードに乗せると写真がわずかに視差で応える。
つなぎ縦の読みから横の「眺め」へ、頭の使い方を切り替えさせる章。「🖐 サイトを直接さわる」にしてこの位置でスクロールすると、横移動を体験できます。
霧が、もう一度立つ
狙い横移動の昂ぶりを、藍色の深い静寂で受け止める。ヒーローで漂っていた霧のcanvasがここで湯けむりとして再登場——同じ演出を文脈を変えて繰り返すと、装飾が物語になる。
つなぎ泉質・効能は表組みのまま出す。事務的な情報を無理に演出せず、静かな器(罫線だけの表)に載せることで、かえって世界観が守られる。NOCTILUCAがニュースをターミナルに「変換」したのと正反対の解法。
八つの皿が、順に灯る
狙い会席の八品を、中央の一本線でつないだタイムラインに。スクロールで線が下へ伸び、皿がひとつずつ明るくなる。コース料理の「順番に運ばれてくる」体験を、スクロールの時間軸にそのまま写した構成。
つなぎ動きといっても光るのは不透明度だけ——「動」の章ですら瞬発的な動きはない。先付から水物まで読み終える頃、読者は夕食を一巡している。
触れる山場は、色で語る
狙い唯一のインタラクション。春夏秋冬の4列に手を乗せると、その季節だけがふわっと広がる(ホバー拡張アコーディオン)。色は桜鼠・若竹・紅柄・雪白の和色グラデーションで、開いた列にだけ花びらや雪が静かに舞う。
つなぎ初稿ではここが400vhの巨大スクロール演出だったが、「広すぎて飽きる」という指摘で75vhのアコーディオンに作り直された経緯がある。流れを長くすることと、豊かにすることは別物——という実例。
印を結んで、余韻で閉じる
狙いフッターは「湯」の一文字印と、冒頭と同じタグライン「なにもしない、をしに行く。」だけ。入口の言葉で出口を閉じるのは#04と同じ文法だが、あわいは光らせず、静かに置くだけで終わる。
つなぎ霧・朱印・縦書き・和色——提示したモチーフがすべて回収され、9章を通して新しい要素がほとんど増えていないことに気づく。静の流れの正体は、この「増やさなさ」にある。
TAKEAWAY“静の流れ”を作る5つの原則
あわいから取り出せる、落ち着いたトーンのサイト全般に持ち帰れる設計則。#04の5原則(足し算編)と対で読むのがおすすめです。
置かないものを先に決める
ローダーなし、カーソル演出なし、持続レイヤーは進捗バー1本。静けさは「何を足すか」ではなく「何を置かないか」の決断で作られる。
動は3つまで
9章のうち大きく動くのは部屋・食・季節だけ。動の前後に必ず静を挟むと、少ない動きが何倍にも効く。
モチーフは3度繰り返す
霧はヒーローと湯で、朱印はヒーローと予約とフッターで、縦書きは題字と本文で。2度目で気づかせ、3度目で物語にする。
情報は静かな器のまま
泉質表・会席・宿情報は素の表とリストで出す。無理に演出へ変換しないことが、かえって世界観を守る場面がある。
速度を上げない
出現1.1秒、罫線2.4秒、ホバー0.5秒——全篇でトランジションが長く、瞬発的な動きがひとつもない。時間設計の一貫性がトーンになる。