店舗の空気感をWebへ翻訳した純喫茶・酒場公式サイト制作（琥珀）
概要
創業1978年の架空の店舗「喫茶・酒場 琥珀」の公式ウェブサイトを、デザイン・コーディング・WordPress構築まで一貫して制作しました。
本サイトは、情報の伝達だけでなく、「昼と夜で表情を変える店舗の歴史と情緒を、Webという枠組みで再現すること」を目的に設計しています。
初めて訪れるユーザーにも、その場の温度感やレコードの針音が聞こえてくるような、没入感のある体験を目指しました。
目的設計
- 純喫茶としてのブランドの世界観の視覚化
- 昼と夜、異なるコンセプトの対比を明確に伝える
- 店舗運用者が容易に更新できる管理画面の構築
制作のこだわり
①シネマティックな没入感の設計
ダークトーンを基調に、アンティークゴールドをアクセントに配置。
ヒーローエリアに微細な背景アニメーションを実装し、静止画でありながらその場の空気感が漂うような演出を行いました。
②ユーザー体験を深めるアニメーション
ホバー時に要素がわずかに浮き上がるアニメーションや、遷移の滑らかな動きを実装。
派手な動きではなく、純喫茶らしい「落ち着いた余韻」を感じさせる操作感にこだわりました。
③運用性を考慮したCMS設計
WordPressのカスタム投稿タイプとカスタムフィールドを導入。
店舗スタッフが「メニュー名」と「価格」を入力するだけで、適切に昼夜のメニューが分類・表示されるよう、保守性の高いバックエンドを構築しました。
技術面
WordPressによるオリジナルテーマ開発。
CSS変数（CSS Variables）を活用した一貫した配色管理、BEMに基づいた命名規則を採用することで、将来的な改修やデザイン拡張にも柔軟に対応できる構造で構築しました。
