The Craft Lemon Sour
架空のクラフトレモンサワー「The Craft Lemon Sour」のプロモーションを目的としたLPです。
Viteをビルドツールとして採用し、FLOCSSベースのSCSS設計や、各セクション（コンポーネント）ごとに分割したJavaScriptモジュールの運用など、実務を強く意識したモダンなフロントエンド開発環境で制作しました。
特にGSAP（GreenSock Animation Platform）をフル活用し、ユーザーのスクロールや操作に連動する魅力的なUI/UXを実現しています。
- POINT
-
・GSAPプラグインを駆使した、没入感のあるアニメーション実装
標準のGSAPに加え、ScrollTrigger、ScrollToPlugin、SplitTextといったプラグインを活用しています。マウス連動パララックス（FVセクション）や、containerAnimation を用いた横スクロール（Lineupセクション）、PC環境限定のマグネティックボタン（Shopセクション）など、ユーザーの操作やスクロールに連動する、没入感のあるUXを追求しました。
・FLOCSSアーキテクチャに基づく、保守性の高いCSS設計
CSSの設計にはFLOCSSを採用し、レイアウト、プロジェクト、コンポーネントごとにSass (SCSS) ファイルを細かく分割して管理しています。特に z-index の管理においては、ヘッダーやハンバーガーメニューなどのグローバルに競合する値は _variables.scss で一元管理し、セクション内でのみ完結する重なり順は各SCSSファイル内に直接記述するルールを設けることで、破綻しにくく保守性の高いスタイル管理を実践しました。
・機能ごとのJavaScriptモジュール化と、JSDocによるドキュメント化
main.js に全ての処理を記述するのではなく、ヘッダー機能や各セクションのアニメーションなど、機能単位でJavaScriptをモジュール化して分割しています。さらに、エクスポートする各初期化関数にはJSDocを用いて役割や引数・戻り値を明文化し、複数人でのチーム開発を想定した、可読性が高くメンテナンスしやすいコードベースを構築しました。
・Vite + Stylelint を導入したモダンな開発・ビルド環境の構築
フロントエンドのビルドツールとしてViteを採用し、HMRによる高速な開発環境を構築しています。また、Stylelint（Recess Orderによるプロパティ順序の自動ソート含む）を導入し、保存時の自動フォーマット化によりコード品質を担保しています。公開に向けては、Viteによるファイルのバンドルと圧縮、Autoprefixerによるベンダープレフィックスの自動付与を行い、パフォーマンスを意識した最適なビルドプロセスを実践しました。 - ページ数
- 1 ページ
- 使用技術
- GSAP / JavaScript / HTML/CSS