桜で視線を運ぶ
花びらは前景・中景・遠景に分け、速度とぼかしを変えています。画面奥行きを作り、下方向へ自然に読み進められます。
春の受付を、ひと目で伝える。✦
余白と桜で、静かに惹きつける。✦
DESIGN INTENT
派手に動くのに、売り込み臭く見せない。
桜の動きは視線誘導、白い余白は信頼感、濃いCTAは行動の迷いを減らすために使います。
白で余裕を見せる
背景は真っ白ではなく、紙のような温度を持たせています。強い桜色を使っても、全体の品位が崩れにくい設計です。
CTAだけ濃くする
押す場所は濃い桜色に統一。ホバー時の光で、ボタンが実際に操作できる要素だと分かるようにしています。
PAGE STRUCTURE
春の告知に必要な情報だけを、順番に置く。
原稿がまだ薄い段階でも使えるよう、抽象的な実績や数字を足さず、訴求・構成・流れ・不安解消の順でまとめています。
最初の1画面で、季節感と目的を伝える
白い額縁、巨大な英字、桜吹雪、相談CTAを同時に見せます。第一印象で「春のページ」と分かる構成です。
3つの理由で、見る人の納得を作る
動きの意味、余白の意味、CTAの意味をカードで短く整理。商材に合わせて、悩み・結果・仕組みに差し替えられます。
最後は迷わせず、次の行動に絞る
最終CTAは一つを主役にして、補助導線を控えめに配置します。問い合わせ・資料請求・予約ページに置き換え可能です。
FLOW
公開前に整える流れ。
今すぐ作る範囲と、後から差し替える範囲を分けておくと、LPが一回きりの手作業で終わりません。
原稿固定
対象者・悩み・CTAを決める。
差し替え
見出しとカード文を商材用にする。
検品
スマホとPCで重なりを確認する。
公開
承認後に本番へ反映する。
CHECK
よく詰まるところを先に潰す。
花びらが重すぎない？
花びらはCSSアニメーションで生成し、ユーザー操作で停止できます。OSの「視差効果を減らす」設定にも対応しています。
白背景で薄く見えない？
本文は淡墨、CTAは濃い桜色に固定しています。淡い背景でも、読ませる場所と押す場所が分かれるようにしています。
商材が変わっても使える？
春の相談受付、講座募集、イベント告知、キャンペーン案内に差し替えやすい構造です。実績数字は必要になるまで入れていません。
何を後回しにする？
決済、フォーム送信、外部公開は別工程にします。まずは見た目と導線を固める方が、短時間で確認しやすいです。