FLOW ANATOMY #11 — 1サイトを縦に解剖する
AXION Oneは、
なぜ欲しくなるのか。
技法は『点』、サイトは『線』。架空フラッグシップスマホ『AXION One』の製品LPは、スペックを説明する前にモノそのものを主役に据えます。エンタメ系サイトが気分で運ぶのに対し、ここでは各セクションが『実在させる→数字で裏づける→質感で触れさせる→予約へ』という物欲を積み上げる階段。Three.jsで手のひらの端末を実在させ、数字を転がし、削り出しの質感を見せ、最後に予約への一本道へ集約します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
開幕→実在→持続→数字→質感→光学→決断→締め。各章が、「本当に良いモノか?」という購買前の疑いに順番で答えながら、物欲を一段ずつ積み上げていきます。
- 00LOADER開幕 — ブランド名から静かに立ち上げる動
- 01HERO / 3D実在 — 手のひらの端末を回して見せる動
- 02持続レイヤー常 — 追従ナビと進捗が全篇を貫く常
- 03SPECS数字 — 転がるカウンタで妥協のなさを動
- 04DESIGN質感 — 削り出しの色を選ばせる動
- 05CAMERA光学 — 絞りのゲージで凄みを見せる動
- 06BUY決断 — 価格を出し予約へ集約する動
- 07FOOTER締め — 余韻を残して信頼で閉じる動
手のひらの端末を、実在させる
狙いヒーローの主役は文章ではなくモノ。Three.jsが手続き的に組み上げたチタン端末が、スタジオライト風の環境反射（シアン＋バイオレット）をまとって、ゆっくり自動回転する。スクロールすると回転角がわずかに変わり、暗い背景ではグロウが呼吸する。写真でも動画でもなく「その場に在る」立体だからこそ、見る人は無意識に持った感覚を想像し始める。
つなぎ製品ページの勝負は最初の一画面。ここで「実物が在る」と信じさせられれば、以降のスペックはすべて"その実物の説明"として効き始める。回り続ける端末が、下へのスクロールを誘う。
数字は、転がして妥協のなさを見せる
狙いセクションに到達すると、120Hz・5200mAh・190g・4400nitのカウンタが0から一気に立ち上がる。イージングで加速・減速する数字は、静止したスペック表より「性能が動いている」実感を残す。続くガラスカードでは、チップ・電池・ディスプレイ・保護等級を、アイコンと小さな数値ペアで淡々と積む。
つなぎ実在させた（01）モノに、今度は具体的な裏づけを与える。数字が動くことで「本当に良いのか?」という疑いに先回りで答え、物欲を"確信"へ一段引き上げる。
質感は、色を選ばせて自分ごとにする
狙い「削り出しの、静けさ。」のコピーに、4つのカラースワッチが並ぶ。クリックするとヒーローの3D端末の本体マテリアルの色が即座に切り替わり、選んだ色名がその場で表示される。0.42mmベゼルやGrade 5チタンといった加工数値のcalloutが、スクロールで順にリビールされる。読む対象だった端末を「自分の一台」として触らせる章。
つなぎ数字（03）で確信させた直後に、色を選ばせて所有をシミュレートさせる。触って自分ごとになった瞬間、物欲は"欲しい"から"どの色にするか"へと質を変える。
光学は、絞りのゲージで凄みを見せる
狙い「夜を、昼のように写す。」の見出しの下に、インラインSVGで描いたレンズ／絞り羽根のビジュアルが据えられる。同心円と多角形の絞り、放射グラデーションのハイライトが、レンズ断面のゲージのように機能する。右側にはメイン50MP/1inch・望遠5x・超広角120°・8K動画のスペックが、到達とともにリビールで立ち上がる。
つなぎスマホ購入で最も比較される「カメラ」を、表組みでなく光学の造形として見せる。数字を絵に変えることで、専門スペックが感覚的な"凄み"に翻訳され、物欲を最後のひと押し手前まで運ぶ。
決断は、価格を出して一本道に集約する
狙いガラスの大きなカードの中で、価格「¥149,800〜」がカウンタで一気にロールアップする。予約手続きへのマグネティックボタンはカーソルに吸い付き、下取り割引・分割金利0%・2年保証のバッジが不安を先回りで潰す。ここまで積んだ物欲を、迷わせず「予約」の一点へ落とす最終章。
つなぎヘッダの「予約する」で全篇ずっと見えていた出口が、ここで初めて主役になる。実在→数字→質感→光学で積んだ欲求が、価格提示と吸着ボタンで摩擦なく行動へ変換される。
TAKEAWAY製品を主役にする"物欲"の5原則
AXION Oneから取り出せる、プロダクトLPやハードウェア紹介ページ全般に持ち帰れる設計則。#02 説得の論証型と読み比べると、同じ数字系の技法が「証拠」ではなく「物欲の燃料」として異なる位置に使われていることが分かります。
まずモノを実在させる
写真や文章より、回せる3Dのほうが所有を想像させる。Three.jsで反射する立体を最初に置くことで、以降のスペックがすべて"その実物の説明"として効き始める。実在感が物欲の土台になる。
数字は静止させず転がす
同じ120Hzでも、0から立ち上がるカウンタは「性能が動いている」実感を残す。カウントアップとオドメーターで、スペック表を"体感される裏づけ"に変える。動く証拠は記憶に残る。
触らせて自分ごとにする
色スワッチのクリックで3D端末が塗り替わる。読む対象だったモノを操作させた瞬間、欲求は「欲しい」から「どの色にするか」へ質を変える。所有のシミュレーションが最強の説得。
専門スペックを造形に翻訳する
カメラの数字を表組みでなく絞り羽根のSVGで見せる。比較されやすい要素ほど、数値を感覚的な"凄み"に翻訳すると強い。専門情報を絵に落とすことで、詳しくない人にも欲求が伝わる。
出口を切らさず一点へ集約する
「予約する」を全篇のヘッダに常駐させ、最後に価格と吸着ボタンで主役にする。物欲がどこで芽生えても、そのまま行動へ滑り込める。装飾でなく導線として背景と常駐UIを働かせる。