React学習 Coffee コーポレート

制作概要

HTML/CSSの基礎学習の集大成として、カフェをテーマにした架空サイトをデザイン。その後、ReactとSCSS Modulesを用いて、インタラクティブかつ動的な体験が得られるWebアプリケーションへと発展させました。トップページにはファーストビューアニメーションとCTA導線を設置し、UXを意識した設計を実現。さらにクイズ回答結果に応じたクーポン表示機能も実装しています。

制作目的

• 配色・余白・フォント設計の一貫性を意識し、実務レベルのUI感覚を養うこと。
• グリッド・シングルカラム・2カラム構成など、複数のレイアウトパターンに対応できる土台を作ること。
• React Hooks（useEffect, useState）やモジュール分割による保守性と拡張性を学ぶこと。
• ページ遷移・スクロール・ホバーに応じたアニメーションの導入で、表現力と動的UIを強化。

使用技術

• フロントエンド：React（Vite）
• スタイリング：SCSS Modules
• ルーティング：React Router
• アニメーション：Intersection Observer／CSS Animation／Custom Hooks

主な機能（クイズアプリ）

• 全5問の選択式クイズ
• 回答に応じた動的な結果表示（正答数と％）
• 正答率に応じたクーポンコードの自動表示
• ページロード・スクロール時のフェードイン演出
• グローバルな共通UI（Header／Footer）をコンポーネント化

今後の展望

• Headless CMSやFirebaseとの連携により、メニュー情報の管理機能を追加予定。
• アニメーションライブラリ（Framer Motion等）を活用し、よりリッチなUI表現にも挑戦していきたい。