珈琲と菓子 アオイ舎

落ち着きが、伝わる前に届く。

Overview

喫茶店がもつ「安心する空間」を、Web上でも感じられることを目指して制作しました。
情報を詰め込むよりも、余白・文字・写真のトーンを整えることで、静かな時間が伝わる設計にしています。

Challenge

落ち着いた雰囲気を作ろうとすると、情報不足で「何ができる店か分からない」状態になりやすいのが課題です。
必要情報は押さえつつ、空気感を壊さない見せ方のバランスが求められました。

Solution

• 見出し・本文・ボタンの階層を明確にし、少ない情報でも迷わず理解できる構造に整理しました。
• 行間と余白を大きめに取り、読むスピードを自然に落とすことで「落ち着き」を体験として作っています。
• 写真のトーンを揃え、視覚的なノイズを減らすことで、静かな印象を保つ設計にしました。

Highlights

• 余白と行間を広く取り、読むスピードを自然に落とす設計。
• 写真のトーンを揃え、静かな世界観を壊さないビジュアル構成。
• 雰囲気 → メニュー → 来店 の順で理解できる導線設計。

Design

白を基調に、柔らかい影と丸みで「安心できる距離感」を作りました。
派手な動きは入れず、タイポグラフィと余白のリズムで居心地を表現しています。

Result

訪れる前から喫茶店の空気感が伝わり、安心して来店を想像できるサイトになりました。
“足し算ではなく引き算”で目的を達成した制作事例です。

Role & Deliverables

• 情報設計：落ち着いた体験を壊さない構造整理
• UI設計：余白・行間・タイポグラフィ設計
• 実装：HTML / CSS