データ分析（綺麗系・LP）のWebデザイン見本｜カツプロデザインギャラリー

データはあるのに見ていない、小さなお店や会社の経営者（30〜60代）。「分析」と聞くと身構える人。むずかしくない・やさしいと感じてもらい、「30分の無料相談」につなげる。


業種	IT・Web（データ分析）
系統	綺麗系（余白・細い線・丸みのある細いゴシック・白と灰だけ・ゆっくりした動き）
テイスト	シンプル／ナチュラル・やさしい
色	白・黒・グレー
形	LP型（1枚もの）：悩み→解決（ビフォー・アフター）→特長→気づきを探す体験→声→料金→よくある質問→申し込み
スライド	なし
メインビジュアル	静止画を動かす（動画風）：机の写真1枚が、ゆっくり寄ったり流れたりして動画のように見え、スクロールで縮む
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A02 寄りの写真が縮み、中央に商品が1個浮かぶ→左右から単語／G02 中央の縦線を左右に動かしてビフォー・アフター／C06 ドラッグで歩き回る暗い場所とスポットライト
架空の会社	「しずく分析室」SHIZUKU DATA STUDIO — 小さなお店・会社の、売上や来店のデータを読み解く2人の事務所

だれに向けたページか

データはあるのに見ていない、小さなお店や会社の経営者（30〜60代）。「分析」と聞くと身構える人。 むずかしくない・やさしいと感じてもらい、「30分の無料相談」につなげる。

メインビジュアル（A02＋動画風）：画面いっぱいに机の写真を寄りで（2.4倍）。読み込みからずっと、写真がゆっくり流れて動画のように見える。スクロールすると写真が角丸のカードまで縮み、その中央に切り抜きの報告書が1冊ふわりと浮かぶ。左から「数字を、」右から「ことばに。」が入ってくる。最後に申し込みボタン
悩み：「データはあるけど、見ていない」など3つ
解決（G02）：中央の縦線を左右に動かすと、ぐちゃぐちゃの表（ビフォー）が、1枚のグラフとひとこと（アフター）に変わる。キーボードの矢印でも動く
特長3つ
気づきを探す（C06）：暗い部屋に点（データ）が散らばっている。始める前に「ドラッグで歩き回る／矢印キーでも」の説明と「はじめる」ボタン。押すとスポットライトの丸が出て、ドラッグで部屋を歩き回ると、光の中に「気づき」のカードが浮かぶ
声：3件
料金：3つ
よくある質問
申し込み：フォーム

JSや GSAP が無いとき：写真はカードの大きさで止まり、報告書と言葉は最初から並ぶ。ビフォー・アフターは上下に2枚並ぶ。暗い部屋は明かりがついた状態で、気づきのカードが全部並ぶ
prefers-reduced-motion：上と同じ「動かない版」
動きはどれもゆっくり（流れる写真は1周30秒）。暗い部屋は勝手に動かない（操作したときだけ）

新しく作る：窓辺の机（hero）／報告書の切り抜き（report）写真庫から：005 タブレットを指す手（point）／024 相談の手元（consult）／024 明るい事務所（office）

料金・お客様の声・実績は見本の値（〇〇）。会員が本物に替える。ビフォーの表の数字は飾り。