FLOW ANATOMY #03 — 1サイトを縦に解剖する
MOON BREWは、
なぜ余白で誘うのか。
技法は『点』、サイトは『線』。架空カフェ『MOON BREW』は、商品である珈琲を主役にした感覚的な誘い。 同じ和トーンでも引き算で静を作る#05 あわいに対し、 こちらは視差や自動ビューアで"間"と"質感"を見せ、来店欲を育てます。 その余白の設計を章ごとに解剖します。 解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
待つ→浮かぶ→傾ける→品→産地→場→誘い。急がせない時間設計そのものが"余白"の正体です。
- 00LOADER灯 — 一杯が満ちるのを待つ静
- 01HERO浮 — 視差で夜に浮かべる動
- 02持続レイヤー常 — 紙の質感と珈琲の足あと常
- 03STORY想 — ゆっくり傾けて立てる静
- 04MENU品 — 主役を間をおいて見せる動
- 05BEANS産地 — 素材の物語で深みを動
- 06GALLERY場 — 余白あるグリッドで静
- 07ACCESS・FOOTER誘 — そっと扉を指す静
視差で、夜に浮かべる
狙いマウス追従の多層パララックスが、月・カップ・豆など6レイヤーを異なる速度で浮遊させる。動きはゆっくりと設計されており、夜の空間に漂う浮遊感を最初の画面で確立する。「月夜に、一杯の余白を。」のコピーが縦書きでクリップリビールする。
つなぎ速い動きでなく、漂う動き。最初の章で「ゆっくりした時間」を体感させることが、以降の余白設計への入口になる。スクロールキューが静かに次の章へ誘う。
紙の質感と、珈琲の足あと
狙いペーパーグレインの全面オーバーレイ、豆のトレイルと珈琲カップ跡を描くカスタムカーソル、スクロールでガラス化する追従ヘッダの3層が常時存在する。強い1点でなく、全面に薄く敷かれた層として世界観を持続させる。
つなぎNOCTILUCA がシェーダーと粒子で主張する持続レイヤーを持つのに対し、MOON BREW は紙の肌理と豆の足あとという生活感のある素材で全章を包む。目立たないが、消えると世界観が薄れる。
想いは、ゆっくり傾けて立てる
狙いスクロールインでskewしながら、「01 — Concept」「自家焙煎」「季節ごとの深さ」という3本の柱（ピラーカード）が傾きを伴って立ち上がる。傾きの動きがわざと速度を落とし、文章を読む呼吸に合わせる。「満たされた一日の終わりにも」で始まるコピーがdropcap付きで静かに広がる。
つなぎ浮遊するヒーロー(01)の後に、傾きでさらにテンポを落として「読ませる」章。店主の言葉を通じて、訪れる理由の感情的な根拠を作る。
主役の珈琲は、間をおいて見せる
狙いホバーでclip-pathワイプ遷移する静止画ビューアが、約4.2秒で自動切替しながらメニューを一品ずつ見せる。左サイドにメニューリストを並べ、カーソルを合わせると右の写真がワイプで切り替わる仕組み。一覧で並べず、一品を鑑賞させる時間を作る。
つなぎ情報を絞り眺める時間を設けることで、珈琲が主役になる。引き算の見せ方の典型。「気になる一杯に、カーソルを合わせてください。」という一文が、操作を誘いながら体験のテンポを指示する。
素材の物語で、深みを足す
狙い円形の画像ディスクとroastバッジ付きのグリッドカードで、豆と産地を紹介する。エチオピア・コロンビアなど産地ごとの焙煎プロファイルと風味メモが添えられ、商品の背後にある素材の物語が見えてくる。
つなぎメニューで「一杯」の印象を作った後に、その豆の来歴を見せる。来店の理由が、珈琲の味から物語の奥行きへと厚みを増す章。clip-pathのホバーリビールがカードに静かな反応を与える。
居場所を、余白あるグリッドで
狙いwide/tallで変化するMasonryライクのフォトグリッドに、カウンター席・窓際の光・珈琲の湯気といった店内の情景を並べる。figcaptionで場面の説明を添え、写真と余白を等価に扱うことで、視線が自然に泳ぐ。
つなぎ商品(珈琲)から場(店)へ。「ここに座る自分」を想像させる橋渡しの章。来店動機が、飲み物の魅力から空間の魅力へと広がる。
TAKEAWAY"もてなし"でつくる流れの5原則
MOON BREW から取り出せる、感覚的な誘いで来訪欲を育てるサイト全般に持ち帰れる設計則。#05 あわい(引き算編)を対で読むと、同じ和トーンでも設計の重心の違いが浮かび上がります。
待ち時間を所作に変える
ローダーで珈琲が満ちるのを待たせる。読み込みすら提供の所作にすると、開く前から世界が始まる。
商品は、間をおいて見せる
メニューを一覧にせず、ワイプと自動切替で一品ずつ。情報を絞ると商品が主役になる。
質感を全面に薄く敷く
紙グレインと豆トレイルを常時うっすら。世界観は強い1点でなく全面の薄い層で持続させる。
視差で奥行きを、所作で速度を落とす
浮遊とskewインでスクロール速度を意図的に下げる。急がせない時間設計が余白の正体。
誘いはそっと、最後に指す
来店を急かさず、店内と地図を見せてから静かに扉を示す。引きの強さは引かないことで作る。