FLOW ANATOMY #02 — 1サイトを縦に解剖する
FlowDeskは、
なぜ迷わず申し込めるのか。
技法は『点』、サイトは『線』。架空SaaS『FlowDesk』のLPは、感情でなく論理で運びます。エンタメ系サイトが気分を盛り上げるのに対し、ここでは各セクションが『問題→解決→証拠→料金→申込』という論証のステップ。迷わせず申し込みまで運ぶ"説得の階段"を章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
問題提起→信頼→機能→実証→使い方→数字→料金→申込。各章が、想定される反論への"返答"になっています。
- 00LOADER起 — ロゴが描かれ信頼から動
- 01HERO主張 — 結論を最初の一画面で動
- 02持続+⌘K常 — いつでも呼べる安心感常
- 03TRUST信 — 反論をロゴで潰す動
- 04FEATURES機能 — 触れる質感で見せる動
- 05DASH実証 — 動くデータで裏づけ動
- 06FLOW理解 — 貼り付けて1本道に動
- 07STATS数字 — 転がして印象づけ動
- 08PRICING比較 — 目線を中央へ動
- 09CTA・FOOTER決断 — 光らせて背中を押す動
結論を、最初の一画面で
狙いWebGLシェーダーが背景で揺れ、テキストスクランブルが「ひとつの流れに。」を解読するように入場し、製品モックアップが右側に並ぶ。B2Bの読み手が時間を使う前に「このツールは何ができるか」を断言する。
つなぎ感情を溜める前に要点を出す。時間のない読み手への配慮そのものが、このヒーローの導入設計の核心。モックの動きがスクロールを誘う。
いつでも呼べる、コマンドの安心感
狙い上端の進捗バーが残り距離を伝え、ガラス化する追従ヘッダにはナビと「⌘K」ボタンが常駐する。⌘Kを押せばコマンドパレットが開き、機能・ページ・アクションを即検索できる。どこにいても操作の起点が手元にある。
つなぎ⌘Kはこの全章に存在する持続レイヤー。プロダクトの「使える感」を通底させ、読み手に"すでに使っている気分"を与える。
主張を、動くデータで裏づける
狙いCanvasで自描画される折れ線グラフ、スパークライン、オドメーターで跳ね上がる数値。「効果がある」という言葉を、その場で動く数字とグラフに変換してリアリティを与える。
つなぎ言葉の実績より、動く証拠のほうが信頼を生む。機能(04)→効果(05)という論証の流れが完成し、「信用できる」の地盤が整う。
使い方は、貼り付けて1本道に
狙い左のビジュアルをsticky固定したまま、右のステップをスクロールで切り替える。導入・設定・チーム招待という使い方の流れを、視線を動かさずに1本道として見せる。
つなぎ「使えそう」の次に「使い方は簡単」を、視線を固定して見せることで認知負荷を最小にする。「複雑そう」という次の疑念を、ここで先回りして潰す。
数字は、転がして印象づける
狙いセクションに到達するとオドメーターが桁ロールし、導入社数・タスク処理数・ユーザー満足度などの実績数値が立ち上がる。抽象的な信頼感を、具体的な数で固める最後の裏づけ。
つなぎ申し込みの直前に、最後の後押しとなる数字を置く。「これだけの規模で使われているなら安心」という確信を積んで、料金ページへ送り出す。
最後は、光らせて背中を押す
狙いオーロラグロウが揺れる背景カードの中央に「無料で試す」ボタンと⌘Kへの誘導を置く最終CTA。フッターはブランドロゴ・3列リンク・デモ免責で締める。
つなぎ⌘Kとシマーを全篇で繰り返し、この最後のCTAへ自然に集約させる。装飾ではなく「申込」が常にゴールだったことが、ここで初めて自然に感じられる。
TAKEAWAY"説得"でつくる流れの5原則
FlowDeskから取り出せる、B2B LPや論理型サイト全般に持ち帰れる設計則。#04 足し算・#05 引き算 など他の作法と読み比べると、同じ技法が目的によってまったく異なる位置に使われていることが分かります。
結論から始める
感情を溜める前に「何ができるか」を断言する。B2Bの読み手は時間がない。ヒーローで主張を出しきることで、残りの章が「裏づけ」として機能し始める。
反論を先回りで潰す
ロゴで「使われてる?」に、ダッシュボードで「効果ある?」に答える。各章が想定反論への返答になっていると、読み手は章をまたぐたびに疑念が減る。
主張は動くデータで裏づける
言葉の実績を、その場で動く数字とグラフに変換する。証拠が動くと信頼が増す。静止した数字より、カウントアップやオドメーターの動きが記憶に残る。
視線を中央へ設計する
料金3枚の真ん中だけを光らせ、迷いを減らす。選ばせる場所では散らさない。「どれを選ぶか」より「申し込むかどうか」に意識を集中させることが決断の設計。
一貫した導線で締める
⌘Kとシマーを繰り返し、最後のCTAへ集約する。装飾でなく「申込」が常にゴール。全篇で使われた要素が最後のCTAに自然に集まることで、押し付けに感じさせない。