FLOW ANATOMY #21 — 1サイトを縦に解剖する
はこぶね見積は、
なぜ読ませる前に動かすのか。
技法は『点』、サイトは『線』。架空の引越し会社『はこぶね見積／HAKOBUNE』は、コピーで期待を煽ってから料金表を見せる、という順番を取りません。ページを開いた瞬間から入力フォームが主役で、間取り・距離・時期・階数・オプションを触るたびに、右の見積カードがその場で金額を返す。裏側では単一の compute(state) が金額モデルを計算し、その結果へ向けて数値がdt正規化トゥイーンで毎フレーム近づき、内訳バーの幅が金額と一緒に連続的に伸び縮みする。読ませて説得するLPではなく、触らせて納得させる“道具”としての設計を、章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
選ぶ→選ぶ→選ぶ→動かす→"見積が返る"→俯瞰する→書面になる、という一本の道。入力側の章はどれも短い操作で終わり、その都度すぐ結果（右の見積カード）が動く。動くのは主に数字とバー幅だけで、レイアウト自体は静かなまま。だからこそ、入力の積み重ねが「重い操作」ではなく「軽い実験」に感じられます。
- 00HERO起 — 見出しの代わりに、フォームが最初に立つ動
- 01BASICS選 — 間取りと距離、いちばん効く2つの入力動
- 02SEASON時 — 月ごとの相場係数をミニバーで選ぶ動
- 03CONDITIONS加 — 階数・エレベーター・オプションを積む動
- 04QUOTE映 — 右の見積カードが、常に今の答えを映す常
- 05CURVE俯 — 12ヶ月分の相場を、曲線で俯瞰する動
- 06DOC証 — 入力の結果が、そのまま見積書になる動
見出しの代わりに、フォームが最初に立つ
狙いヘッダーには会社名と¥0の合計だけがあり、その下にいきなり「条件を動かすと、右の見積がその場で変わります」という一文と、間取り選択の入力が始まる。装飾的なヒーロー画像も、説得文の長い前置きもない。Live Estimateのパルスするドットが「これは今すぐ動く画面だ」と最初の1秒で宣言し、ヘッダーの薄い読了プログレスバーが、フォーム自体を“読み物”のように下まで導線化する。
つなぎここで決まるのは、情報の順番ではなく“主導権”。ユーザーは説明を読まされる客ではなく、条件を入れて答えを引き出す操作者として扱われる。以降の全ての章は、この最初のフォーム入力の続きに過ぎません。
間取りと距離、いちばん効く2つの入力
狙い五択のカード型ラジオで間取りを選ぶと、基本作業料の目安（¥30,000〜など）がその場で見える。続く移動距離は、押しやすい太さのカスタムレンジで、値を動かすたびに「同一市内〜近距離」のようなタグがラベルとして切り替わる。金額モデルの中でこの2つ（work＝間取り基準額、dist＝基本運賃＋距離×単価）が土台になるため、あえて最初に置き、他の入力より大きく扱っている。
つなぎここで「だいたいの相場感」が最初につかめることで、以降に足していく時期調整やオプションが“上乗せの理由”として理解しやすくなる。積み上げ式の見積が、いきなり総額から始まらない配慮です。
月ごとの相場係数を、ミニバーで選ぶ
狙い12本の細い棒が1年を表し、高さが月別の相場係数（1月=1.00基準、3〜4月は最大×1.60）をそのまま示す。繁忙期の棒には赤みがかったis-peakクラスが付き、視覚だけで「この月は高い」と分かる。棒を押すと共通の setMonth() が呼ばれ、月ラベル・倍率・「繁忙期／通常期／閑散期」のバッジが同時に切り替わる。数字の表より先に、形で相場の山を見せている。
つなぎこの setMonth() は、後段の相場カーブ（章05）のクリックとも同じ入口を共有する“単一の真実”。どちらから月を選んでも、フォームの表示・見積・カーブのマーカーが必ず一致し、矛盾した状態が生まれません。
階数・エレベーター・オプションを積む
狙い旧居／新居それぞれに階数スライダーとエレベーターのトグルスイッチがあり、「エレベーターなし＋2階以上」の場合だけ荷物量に応じた階段加算が発生する（floorFee()）。続くオプション作業はチェックボックス列で、ピアノ運搬や大型家具の分解などを選ぶたびに金額が積み上がる。早割・平日割引も同じ並びに置かれ、"足す条件"と"引く条件"が同じ視覚言語（チェック＋価格タグ）で扱われる。
つなぎここまでで、金額を動かす全ての要因（間取り・距離・時期・階数・オプション・割引）がフォーム側で出そろう。次章では、それらの合算がどう1枚のカードに集約されるかを見ます。
右の見積カードが、常に今の答えを映す
狙いここがこのサイトの背骨。入力イベントのたびに compute(state) が新しい金額を返し、合計・内訳6項目の target を差し替える。1本のrequestAnimationFrameループが、表示中の値を毎フレーム target へ指数的に寄せながら（dtで正規化し、高fps・低fpsでも速度が変わらない）、金額テキストと内訳バーの幅を同時に再描画する。内訳バーは絶対値の最大でその都度正規化されるため、割引がマイナス側に伸びるのも含めて“今の内訳の比率”が常に視覚的に読める。
つなぎスクリーンリーダー向けには、トゥイーン中は読み上げず、値が落ち着いた最終値だけをaria-liveへ書く設計（毎フレーム読み上げると音声が壊れるため）。派手な動きの裏に、reduced-motionでは即座に最終値を出す配慮も同居しています。
12ヶ月分の相場を、曲線で俯瞰する
狙いフォーム内のミニバーが「今どこにいるか」なら、ここは「1年を通してどう動くか」という俯瞰図。SVGの折れ線とグラデーション面で相場係数の推移を描き、繁忙期・閑散期を色分けした凡例と、選択中の月を指す縦のマーカーが付く。点や折れ線をクリックすると、章02と同じsetMonth()を通ってフォームの選択が変わり、上のシミュレーターへ即座に反映される。
つなぎ「なぜこの時期は高いのか」を数字の羅列でなく曲線の形で見せることで、次の見積書で提示される時期調整額に説得力が生まれる。俯瞰してから細部（金額）に戻る、という視線の往復です。
入力の結果が、そのまま見積書になる
狙い最後は帳票。「概算 PREVIEW」の斜めスタンプが押された御見積書の様式に、これまでの入力条件（間取り・距離・時期係数・階数・オプション件数）が"条件"列として、金額が"金額"列としてそのまま流し込まれる。見積番号はページ読み込み時に一度だけ発番され、有効期限は発行日の14日後を自動計算。フォームで動かした結果が、証跡として残る形に変換される締めくくりです。
つなぎ「概算です・訪問見積りで確定します」という但し書きを5項目、率直に添えることで、動かして遊べる道具と、実際の契約との境界線を曖昧にしない。触らせて終わりではなく、次の行動（問い合わせ）へ橋を架ける章です。
TAKEAWAY“動かして分かる”form-firstの5原則
はこぶね見積から取り出せる、見積・料金診断・シミュレータ系ツールサイト全般に持ち帰れる設計則。#22 koban の“実物ダッシュボードUI”と読み比べると、同じ「読ませずに使わせる」志向でも、入力→計算のform-firstと、既存データの一覧・監視のdashboardでは主役が正反対（前者は入力、後者は表示）だと分かります。
フォームを、ヒーローの代わりにする
説得のコピーを長く書く前に、触れる入力を最初に置く。第一印象を「読む」ではなく「動かす」にすると、離脱の代わりに“1回操作してみる”という低いハードルの行動を引き出せる。
金額モデルは1箇所にまとめる
compute(state)のような単一の計算関数に全ロジックを集約し、フォームも帳票も同じ結果を参照する。入口が2つ（ミニバーと相場カーブ）あっても、真実の計算元が1つなら状態は絶対に食い違わない。
数字は瞬間移動させず、trueへ寄せる
値が変わるたびに置き換えるのではなく、dt正規化した指数トゥイーンで target へ毎フレーム近づける。数値が"生きている"感触が生まれ、内訳バーの伸縮と歩調を合わせやすくなる。
内訳は相対値で見せる
各項目の金額を、その時点の絶対値の最大でバー幅を正規化する。合計が変わっても内訳バーは常に“今の比率”を正しく表現し、割引のようなマイナス値も同じ土俵で視覚化できる。
動きの裏に、静かな配慮を敷く
トゥイーン中は読み上げず最終値だけをaria-liveへ、reduced-motionでは即座に最終値を描画。派手な数値アニメーションほど、アクセシビリティと省モーションの受け皿を用意して初めて安心して使える道具になる。