店舗HP・F&B・エディトリアル
Halo Coffee カフェHP
店舗HPF&Bエディトリアル
作品のデザインをフルページで確認できます
作品をフルページで見る
Overview
下北沢のスペシャルティコートプのHP。Playfair Display × Noto Serif JPでエディトリアルな世界観を演出。フルスクリーンヘーロー・産地紹介・タブ切り替えメニュー・Storyセクションを実装。
制作情報
| 種別 | HP制作（店舗・F&B） |
| ツール | Figma / HTML・CSS・JS |
| 対応範囲 | デザイン＋コーディング |
| レスポンシブ | PC・スマホ両対応 |
デザインで工夫したこと
タブ切り替えメニュー
Coffee / Non Coffee / Food / Bakery の4カテゴリをJSで動的切り替え。
スクロール連動ヘッダー
透明→毛ガラスに変化するヘッダーインタラクション。
エディトリアルタイポグラフィ
Playfair Display（斜体）× Noto Serif JPの組み合わせで世界観を細部まで表現。