Atomic
スクロールに合わせてページがストーリーを語りかけるように構築された、SaaSアナリティクス製品向けのモーションドリブンなマーケティングサイト。
React 19
Vite
Tailwind CSS 4
GSAP
Locomotive Scroll
Framer Motion
Swiper
概要
Atomicは、「ビジネスの現状を常に把握できる」という単一の約束を中心に構築されたSaaSアナリティクス製品のランディングページです。このページには、極めて重要で難易度の高い役割が1つあります。それは、1回のスクロールの中で訪問者に製品の先進性を感じさせ、登録する価値があると確信させることです。下へスクロールするにつれて各セクションが所定の位置にアニメーション表示され、最終的に社会的証明へと着地する1ページの体験として構築しました。
課題
ランディングページは最初の数秒で評価されます。大半のマーケティングテンプレートは静的でどれも似通っており、チームが「上質」なアニメーションを取り入れようとした途端、スクロールはぎこちなくなり、読み込み時間は跳ね上がります。求められた要件は、多くのサイトが見落としがちなポイント、すなわち訪問者の閲覧を邪魔したりメッセージを埋もれさせたりすることなく、真にシネマティックに感じられるモーションを実現することでした。
役割とアプローチ
レイアウト、ビジュアルデザイン、コピーストラクチャ、アニメーションに至るまで、本作はすべて私が一貫して担当しました。ページ全体にエフェクトを散りばめるのではなく、スクロール全体を1つの緻密に構成されたシークエンスとして扱い、各セクションが最適なタイミングで現れるように設計しました。私が常に意識していた原則は、モーションは訴求のために機能しなければならないということです。単なる装飾ではなく、まずヘッドライン、次にプロダクト、そして社会的証明へと自然に視線を誘導する設計を徹底しました。
技術スタック
主な機能
ギャラリー
課題と解決策
テキストアニメーションのタイミング調整が最も繊細な部分でした。SplitTextはヘッドラインを計測して行ごとに分割しますが、Webフォントの読み込み完了前に実行されるとレイアウトのズレが生じ、分割が崩れてしまいます。そのため、すべてのテキストアニメーションをdocument.fonts.readyの待機処理の背後に配置し、実際のフォントが適用されてから分割処理が行われるようにしました。これにより、ちらつきやリフローを排除しました。
3つのアニメーションシステムの調和も課題でした。GSAPのスムーズスクロールエンジン、Framer Motionのプログレスバー、Locomotiveはいずれもスクロール位置の制御を試みます。そこで私はGSAP ScrollSmootherを唯一の信頼できる情報源（Single Source of Truth）とし、その出力値の上に他のシステムを重ねることで、全体の同期を維持しました。タッチデバイスではスムーズスクロールを意図的に抑え、スマートフォンの動作がもたつかず軽快に反応するように調整しました。
成果
その結果、商用レベルの緻密なスクロール演出を備えた高速なランディングページが完成しました。多くのマーケティングサイトが試みながらも、洗練された形で実現できている例はごく稀です。実際のプロダクトページとして機能するだけでなく、パフォーマンスを犠牲にしない高度なフロントエンドアニメーションのリファレンスとしても通用します。
同様のプロダクト課題をお持ちですか？
現在のプロダクト状況、達成したい成果、直面している制約についてお聞かせください。それらをもとに適切な第1マイルストーンを策定します。
Webアプリケーション開発サービス