Cafe Haru
からだにやさしい、ほっとする時間を。
オーガニックカフェ「Cafe Haru」のWebサイトサンプル。 写真の雰囲気を活かしたデザインと、スクロールアニメーション・スライダーなど インタラクションにこだわって制作しました。
TECH STACK
マークアップ
HTML / CSS
スクリプト
JavaScript
スライダー
Swiper.js
レイアウト
CSS Grid / Flexbox
POINTS
UI / デザイン
ヒーロー背景のオーバーレイ
linear-gradient + backdrop-filter: blur でテキストの視認性を確保しつつ、写真の雰囲気をそのまま残したヒーローセクションを実現。
CSS変数によるカラーテーマ管理
--color-accent1 など :root で一元管理し、サイト全体のトーンを統一。変更に強く、保守しやすい設計にしています。
インタラクション
スクロールアニメーション
getBoundingClientRect() でビューポート内を判定し、カード類を opacity + translateY でフェードイン。transition-delay でずらして視覚的リズムを演出。
ホバーエフェクト全般
カード・ボタン・画像すべてに transform: scale や transition を統一して適用。一貫したインタラクションで丁寧な操作感を実現。
Swiper.js によるレスポンシブスライダー
ブレークポイント別に表示枚数を切り替え（1→2→3枚）、オートプレイとループを設定。メニュー紹介をスムーズに閲覧できる。
レスポンシブ対応
CSS Grid の auto-fit / minmax
メディアクエリなしでカラム数を自動調整。画面幅に応じてグリッドが柔軟に変化し、どのデバイスでも崩れないレイアウトを実現。
ハンバーガーメニュー
モバイル時にナビをドロワー化し、リンククリックで自動クローズ。スムーズな開閉UXを実装。
ヘッダー
スクロール追従 + すりガラス効果
position: fixed + backdrop-filter: blur(10px) でコンテンツが透けて見えるモダンなヘッダーを実現。スクロールしてもナビが常に視認できる。
