FLOW ANATOMY #13 — 1サイトを縦に解剖する
SUIRENは、
なぜ明るい誌面でうるおいを語れるのか。
技法は『点』、サイトは『線』。ギャラリーのショーケースは暗い背景と全面シェーダーに偏りがちですが、架空のラグジュアリー スキンケア『SUIREN／睡蓮』はその逆へ振り切りました。背景はクリーム色の高明度。レイアウトは中央寄せをやめ、左右非対称のスプリットグリッドという雑誌の組み方。主役の絵は生成CGではなく、真珠色に輝く実写のプロダクト写真。そして水は暗いGLSLの全画面シェーダーではなく、SVGのグーイ（メタボール）で"にじむ一滴"として描く。動きも、ゆっくりした高級グライドではなく、わずかに行き過ぎて戻るバネのようなスプリング。——明るさ・写真・非対称・スプリングという四つの選択が、どうやって「みずみずしさ」を誌面に翻訳したのかを章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
ローダー→非対称ヒーロー→持続レイヤー→思想の帯→コレクション→シグネチャー→リチュアル→サンプル請求→締め。各章が、成分を語るより先に「真珠色の写真」と「にじむ水」で質感を体験させ、うるおいの実感で購入へ運ぶよう設計されています。色はクリームと真珠、差し色は淡いブラッシュとアクアだけ。動きは常にひと呼吸バネで返す。
- 00LOADER起 — 一滴が跳ね、ワードマークが灯る動
- 01HERO主張 — 左に大見出し、右に実写ボトル動
- 02持続レイヤー常 — 雫カーソル・進捗・二種の視差が全篇を縁取る常
- 03ETHOS思想 — 非対称の帯とスクロール・マーキー動
- 04COLLECTION質感 — 段差をつけた崩しグリッドの三製品動
- 05FEATURE物語 — 一滴が水面のように広がる見開き動
- 06RITUAL所作 — 満たして、閉じこめる三ステップ動
- 07CONTACT誘い — まずは一滴から動
- 08FOOTER結 — 明るいまま静かに閉じる常
一滴が跳ね、ワードマークが灯る
狙いクリーム色の画面に、ブラッシュ×アクアの小さな雫がバネのように弾みながら上下し、その下に「SUIREN」のワードマークが広いトラッキングで静かに置かれる。スピナーもパーセント表示もなく、暗転もしない。最初の一枚から高明度のトーンと"跳ねる水"のスプリング感を宣言している。読み込みに失敗しても必ず消えるフェイルセーフ付きで、コンテンツを恒久的に隠さない。
つなぎここで一度だけ「明るさ」と「バネで動く水滴」を提示しておく。直後のヒーローで、その明るさは全画面のクリームへ、その一滴は右カラムの実写ボトルへと引き継がれる。
左に大見出し、右に実写ボトル
狙いヒーローは中央寄せをやめ、雑誌の見開きのように左右非対称のスプリットグリッドで組む。左カラムにはナンバー付きのアイバウ、Frauncesのイタリックが効いた「Still Water,」＋Zen角ゴシックの極太「素肌へ還る。」という書体のジャンプ、コピー、二つのボタン、そして AQUA 92% などのメタ。右カラムには真珠色に輝く実写のセラムボトルを、上部だけアーチ型に切り抜いて配置する。背景ではSVGのグーイ（メタボール）がピンクとアクアのにじみをゆっくり融合させ、その上を淡い"露"のドットが漂う。上端の要素はスクロール連動ではなくロード時にスプリングで立ち上がるので、初期表示で欠けない。
つなぎ最初の全画面で「これは明るい写真の雑誌だ」と一目で分からせる。生成CGでも全面シェーダーでもなく、実写×非対称という選択そのものが、以降ずっと続く"エディトリアルな清潔感"の原型になる。
雫カーソル・進捗・二種の視差が、全篇を縁取る
狙い既定のカーソルは消され、乗算合成の"水滴"リングが遅れてポインターを追い、中心の点だけが即応する。クリックすると、その場からアクアの波紋がひとつ広がって消える。画面上端にはブラッシュ→アクアの細い進捗バーが常駐。さらに二種類の視差が全篇に効く——マウスに応じてグーイと写真がわずかに漂う「マウス視差」と、スクロールで写真や露のレイヤーが遅れて沈む「スクロール視差」。暗い画面の代わりに、明るい紙面の上で"軽く浮遊する water"の気配を敷き続ける。
つなぎ章が切り替わっても、この雫カーソル・進捗・二種の視差だけは消えない。余白の多い高明度の誌面に、「水の中にいる」ではなく「水滴が紙の上を転がる」ような軽やかさを通底させる。
非対称の帯と、スクロール・マーキー
狙い思想のセクションも中央寄せにしない。大きなセリフの一文「肌は、塗り重ねるほど乾く。」を左の広いカラムに、右の狭いカラムには処方チームの署名入りの短い注記を、下端で揃える非対称の二段組みで置く。その下には「とろむ・満ちる・とどまる／HYDRATE・SOOTHE・SEAL」の言葉が横へ無限に流れるマーキーの帯を細い罫線で挟む。文章で説くのではなく、誌面のリズムでブランドの哲学を体感させる。
つなぎヒーローで宣言した「非対称」を、ここで思想の見せ方にも一貫させる。静止した大見出しと、横に流れるマーキーの対比が、次のコレクションの"段差グリッド"へ視線の速度を渡す。
段差をつけた崩しグリッドの三製品
狙い三つの処方を、高さを揃えた整列ではなく、二枚目・三枚目を順に下げた段差の崩しグリッド（ブロークングリッド）で並べる。一枚目は実写のセラムボトル、二枚目は淡いピンクとブルーの水滴マクロ（エッセンス）、三枚目は真珠色の露のマクロ（クリーム）——ボトル一点＋テクスチャ二点で誌面に呼吸を作る。カードはスクロールでスタガー気味に立ち上がり、ホバーで写真がゆっくりズームし、ポインターを乗せるとごく浅く（±5度）傾く。二・三枚目にはアクアとブラッシュのソフトライトを薄く重ね、同じ水を色で描き分ける。
つなぎ整列を崩すことで、静的な"棚"ではなく編集された"誌面"になる。実写とテクスチャを混ぜる構成が、次のシグネチャーの大きな一枚（見開き）への助走になる。
一滴が水面のように広がる、見開き
狙いシグネチャーは二カラムの見開き。左に、クリーム色の大理石へ一滴が広がる実写ボトルを下側だけアーチ型に切り抜いて置き（ヒーローのアーチと上下で対になる）、その縁にはブラッシュ×アクアの立体的な"水滴"オブジェが、スクロール視差で少し強めに遅れて浮く。右では「一滴が、水面のように広がる。」の見出しに続き、8層構造・発酵コンプレックス・二相のとろけを、罫線で仕切った定義リストで静かに並べる。背景にはもう一つのグーイがにじむ。成分表を羅列せず、"広がる"という感触の言葉で効能を語る。
つなぎヒーローの実写とアーチをここで大きく再演することで、ブランド全体が一枚の"写真の質感"で結ばれる。反復が過剰にならないよう、アーチの向きと写真だけを変えて気配を残している。
満たして、閉じこめる三ステップ
狙い「ひらく→満たす→とどめる」の三つの所作が、真珠色の淡いパネルの上に、時間差を付けて立ち上がる。◍・◈・❍ の細い水のグリフをアクセントに、STEP番号と短い言葉を添える。背景には水滴マクロの写真を薄く敷き、放射状マスクでふわりと溶かして視差で沈める。カードはホバーでバネのように上へ跳ね、影が伸びる。使い方を説明しながら、その所作自体を静かな儀式へと格上げする。
つなぎコレクション（選ぶ）→シグネチャー（知る）→リチュアル（使う）と、購入後の体験まで地続きで見せる配列。段階が進むほど言葉を減らし、余白と写真の淡さに語らせる度合いを上げている。
まずは、一滴から
狙い誘いも非対称の二段組み。左に「まずは、一滴から。」の大見出しとアトリエ・問い合わせ情報、右に真珠色のパネルに載せたサンプル請求フォームを置く。いきなり高額な本製品を売り込まず、肌タイプを選んでミニサイズを試す——という一段低い入口を用意する。送信すると「肌タイプに合わせたサンプルをご用意しております…（デモ）」と静かに応える。動物実験なし・無香料の一文が、ブランドの誠実さをさりげなく添える。
つなぎ売り込みの言葉ではなく、明るい余白と「一滴から」という低い敷居だけで背中を押す。全篇の高明度とスプリングのトーンを崩さないまま、最後の一歩へ運ぶ設計。
TAKEAWAY“明るいうるおい”でつくる流れの5原則
SUIRENから取り出せる、コスメ・スキンケアや"清潔感／体感"を売るサイト全般に持ち帰れる設計則。#10 静けさ の「暗さと金の引き算」と読み比べると、同じ"引き算のラグジュアリー"が、明るさと写真でも成立することが分かります。
混んだレーンの逆を選ぶ
周囲が暗い全面シェーダーに寄っているなら、高明度・写真主体・非対称に振るだけで即座に差別化になる。“みんなと違う場所”は、凝った新技術より先に、明るさ・レイアウト・画像素材という基本の選択で作れる。
実写一枚は、CG百行に勝つ
スキンケアの説得力は質感にある。真珠色に光る実写のボトルを主役に据えると、生成CGでは出しにくい"本物のうるおい"が一目で伝わる。抽象は差し色（グーイ・露）に回し、中心は写真に譲る。
非対称と段差で“誌面”にする
中央寄せの積層は整うが単調になりがち。左右非対称のスプリット、下端揃えの二段組み、カードの段差——雑誌の組み方を借りるほど、静的なLPが編集された誌面の格を帯びる。
水はGLSLでなくSVGでも描ける
“にじむ水”はfeGaussianBlur＋feColorMatrixのグーイ（メタボール）で、軽く・明るく・自己完結に作れる。重い全画面シェーダーに頼らず、モチーフだけを差し色として置くと、高明度の紙面を汚さない。
動きはバネで“ひと呼吸”返す
ゆっくり滑るグライドは高級だが眠くもなる。少し行き過ぎて戻るスプリング（overshoot）を、リビール・ボタン・カードのホバーに使うと、軽やかで触りたくなる質感になる。重い演出はモバイル／reduced-motionで静止画に切り替え、待たせない配慮とセットで成立させる。