FLOW ANATOMY #18 — 1サイトを縦に解剖する
MOFU（もふ）は、
なぜバウンシーで親しまれるのか。
技法は『点』、サイトは『線』。架空のペットグルーミング&ケアサロン『MOFU／もふ』は、動物の実写を一枚も使いません。かわりに自作のバウンシーなSVGマスコット（犬・猫・小鳥）とカード主導のレイアウトだけで、「ここは、こわくない」と感じさせます。高級LPが余白と静けさで格を出すのに対し、ここでは丸ゴ書体、明るいパステル、ぽよんと弾むスプリング物理が"安心して連れて行ける"手ざわりになる。まばたきし、しっぽを振り、カーソルへ傾くマスコットたち——親しみを設計で作る方法を、章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
ヒーロー→（持続レイヤー）→サービス→料金→スタッフ→ご予約。派手な物語で押すのではなく、"ぷにっとした手ざわり"と"顔のあるマスコット"をカードで一枚ずつ積み上げ、親しみと安心をつくる設計です。色はクリーム地にミント・ピーチ・スカイ・コーラルの淡いパステルだけに絞ります。
- 00HERO起 — マスコットがバネで弾んで出迎える動
- 01持続レイヤー常 — 浮遊・肉球カーソル・スプリングが全篇を包む常
- 02SERVICES品 — 4つのケアをぽよんと弾むカードで動
- 03PRICING選 — 3プラン、真ん中に人気リボン動
- 04STAFF人 — マスコットが瞬き・しっぽを振る動
- 05BOOKING誘い — 犬猫トグルつきの予約カード動
マスコットが、バネで弾んで出迎える
狙いクリーム地に淡いパステルのブロブが浮く明るい画面で、自作の犬と猫のSVGマスコットが少し落ちてからぽよんと弾んで着地する。以降もアイドル中はときどき「ぴょん」と跳ね、カーソルの左右にあわせて上半身が傾く。見出しは丸い英字ディスプレイ Baloo 2 で「ふわふわで、ごきげん。」。動物の実写を一枚も使わず、丸ゴ書体・角丸カード・ぷにっと押し込むボタンだけで"やさしくてこわくない"トーンを最初の一画面で宣言する。
つなぎここで決まるのは「この子を安心して連れて行ける」という第一印象。マスコットの弾みとまばたきが、以降すべてのカードに宿る"生きている感じ"の基準になる。
浮遊・肉球カーソル・スプリングが、全篇を包む
狙いマスコットの弾みは、生JSのバネ運動（pos += vel; vel += (target − pos)×k − vel×damp）で計算される。CSSのイージングでは出せない"行き過ぎて戻る"オーバーシュートが、跳ねにも傾きにも一貫して効く。デスクトップではカーソルの後ろに色とりどりの肉球スタンプが左右交互に散り、上端にはミント→ピーチ→コーラルの太い進捗バーが常駐。ナビは下スクロールで角丸の半透明バーに縮み、ブランドの肉球マークが少し傾いたまま親しみを絶やさない。
つなぎ章が切り替わっても、このバネの手ざわりとパステルの浮遊感だけは消えない。明るい高明度の画面に「ずっと同じ、やさしいお店の中にいる」一体感を静かに敷き続ける持続レイヤー。ボタン・カード・トグルまで、触れるものはすべて同じバネで返事をする。
4つのケアを、ぽよんと弾むカードで
狙いシャンプー・カット・爪&肉球・デンタルの4サービスを、それぞれ違う淡色（スカイ・ピーチ・ミント・レモン）の角丸カードで並べる。上部に丸いアイコンバッジ、下に価格とひとことタグ。ポインターを乗せるとカードが強めのバネでふわっと持ち上がり、わずかに傾く——おもちゃ箱から一つ手に取ったような手ざわり。写真のかわりに自作のフラットSVGアイコン（泡・はさみ・肉球・歯）が主役を張り、料金は"〜"付きで正直に添える。
つなぎヒーローで作った親しみを、はじめて"できること・かかるお金"に接続する章。カードごとに色を変えて選ぶ楽しさを出しつつ、丸ゴ書体と角丸で一貫したやさしさを保つ。
3プラン、真ん中に人気リボン
狙いプチもふ／まるっともふ／もふプレミアムの3つの月額プランを、それぞれ小さなマスコット（小鳥・犬・猫）を看板にしたカードで提示。真ん中の「まるっともふ」だけを一段持ち上げ、コーラルの枠と「いちばん人気♪」リボンで自然に視線を誘導する。チェックはミントの丸バッジ、価格は特大の丸数字。煽るカウントダウンではなく、"わかりやすさ"で選ばせる王道の3段組み。
つなぎサービス単品を見たあとに「まとめると安心でお得」を見せる章。真ん中を主役にするだけで、迷いを減らして予約への一歩を軽くする。
マスコットが、瞬き・しっぽを振る
狙い店長のもこ（犬）、猫専門のゆず（猫）、受付のぽぽ（小鳥）を、大きなマスコットの肖像カードで紹介する。各マスコットはCSSアニメで数秒ごとにまばたきし、しっぽや耳を振る——静止画では出せない"生きている看板娘"感を、軽量なSVG＋transformだけで実現。ひとことの吹き出しと、得意分野のチップで人柄（キャラ柄）を立ち上げ、"誰に預けるのか"を顔のあるものにする。
つなぎ料金の次に「どんな人（子）が担当してくれるか」を見せることで、価格の裏にある安心が腑に落ちる。マスコットの一貫した造形が、ブランド全体の"手作りのやさしさ"を人物にも及ぼす。
犬猫トグルつきの、予約カード
狙いひとつの大きな角丸カードに、飼い主とその子の情報をまとめる。「🐶わんちゃん / 🐱ねこちゃん」のセグメント切替はバネで持ち上がって選択を返し、希望メニューは丸いチップで複数選択。送信するとバリデーションのうえ、その子の名前を添えた温かいメッセージで応える（デモ・送信されません）。左には予約カード内でもマスコットが弾み、泡がふわふわ昇る。急かさず、記入のハードルだけを下げる設計。
つなぎ親しみ→サービス→料金→人と積み上げた信頼を、最後にいちばん軽い一歩（フォーム）へ収束させる章。触れるたびにバネで返事が来る入力そのものが、このお店の"やさしさ"の証明になっている。
TAKEAWAY"バウンシー"でつくる流れの5原則
MOFUから取り出せる、ペット・キッズ・ホビー・親しみ系のサービス全般に持ち帰れる設計則。#15 みのり農園 の"手描きクラフト"と読み比べると、同じ「写真ゼロのSVG主体」でも、片や落ち着いた信頼・片やごきげんな親しみ、と目的で肌ざわりが変わることが分かります。
マスコットに"生き"を仕込む
静止したキャラは飾りだが、数秒ごとのまばたき・しっぽ振り・カーソルへの傾きを足すと"看板娘"になる。軽量なSVG＋CSS/JS transformだけで、実写に頼らず「そこにいる」を作れる。親しみ系ブランドでは、この生気が最大の差別化になる。
バネは"行き過ぎて戻る"
親しみの正体はオーバーシュート。ボタンもカードも、少し行き過ぎてから戻るスプリング（CSSのcubic-bezierや生JSのバネ運動）で返事をさせると、触るたびに小さな喜びが生まれる。整った等速イージングは"事務的"に見える。
カードで選ぶ楽しさを作る
縦長ストーリーではなく、角丸カードのインデックスを主役に。サービス・料金・スタッフをそれぞれ色違いのカードで並べると、"おもちゃ箱から選ぶ"体験になる。情報の粒が揃い、比較もしやすく、親しみと実用が両立する。
パステルと丸を最後まで貫く
クリーム地にミント・ピーチ・スカイ・コーラル。彩度を上げすぎず、角はすべて大きく丸め、書体も丸ゴで統一する。色数と角Rを絞って一貫させるほど、明るくても安っぽくならず"やさしいのに整っている"に着地する。
楽しさと配慮はセット
弾むホバー・肉球カーソル・浮かぶ泡で楽しさを出す一方、reduced-motionでは弾みと泡を止め、モバイルでは重い演出をスキップ、フォームは煽らず記入だけを軽くする。手ざわりの良さは、来訪者を疲れさせない配慮とセットで初めて"良いお店"に見える。