React学習 Coffee コーポレート

ReactとSCSS ModulesによるモダンなWebアプリ

React クイズアプリ SCSS Modules
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表現にも挑戦していきたい。