このプレビューは実サイトを埋め込み表示しています。レイアウトは実際の閲覧環境と異なる場合があります。
コンセプト
パーソナルジムの集客LP。ビフォーアフター比較スライダー・3種のプログラム紹介・トレーナープロフィール・料金表・予約CTAを1ページに集約し、体験予約への導線を設計。
背景・課題
ビフォーアフター比較・プログラム詳細・料金表など情報量の多いコンテンツを1ページに集約しつつ、CTAへの自然な導線を維持した。
REBUILD
同じデザインを STUDIO で再構築
この作品は HTML / CSS / JavaScript で書いた静的サイトである。同じデザインがノーコードでも成立するかを確かめるため、静的版の実測値（配色・余白・文字サイズ・動きの秒数）をそのまま基準にして、STUDIO 上で同じ画面を組み直した。完全な複製ではなく、下に挙げた差は残っている。
- 移植元：静的 HTML / CSS / JavaScript・1ページ（GitHub Pages で公開）
- 移植した範囲：全12セクション
- STUDIO 版の構成：423ノード
- 斜めカット（clip-path）・ネオングロー・ビフォーアフターのバッジまで再現
- ページ全体の高さの差：PC +0.68%
- カウントアップ演出と FAQ の排他開閉は、STUDIO に該当機能がないため落としている
DESIGN PERSPECTIVE
TECHNOLOGIES & FEATURES
主な機能
アニメーションフォームビフォーアフターCTA設計
使用技術
HTMLCSSJavaScript
CMSなし
フォームあり
アニメーションあり