スクール向けLP (EduFlow)

プロジェクトの概要

スクール運営を支援する架空のSaaSプロダクト「EduFlow」のランディングページです。単なる情報の羅列ではなく、ターゲットユーザーの課題（生徒管理、売上管理の煩雑さ）を解決するソリューションとしての魅力を伝える構成を意識しました。

デザインのコンセプト

ダークテーマを基調としつつ、アクセントカラーに鮮やかなインジゴとパープルのグラデーションを採用。信頼感と先進性を両立させた「モダンなSaaS」のトーン＆マナーを追求しました。GSAPライクなスクロールアニメーション（Intersection Observer）を実装し、ページを読み進める楽しさを演出しています。

技術的な特徴

Viteによる高速な開発とビルド
最新のビルドツールViteを採用。SCSSの自動コンパイルや画像の最適化を統合し、開発効率とパフォーマンスを両立させました。

SCSSによる疎結合なスタイル設計
変数やミックスインを効果的に活用し、保守性の高いスタイルシートを構築。ダークテーマの管理が容易な構造にしています。

JavaScriptによるリッチな演出
アコーディオン形式のFAQや、スクロールに合わせた要素のフェードインなど、ユーザーの視線を誘導するための演出をJavaScriptで実装しました。