架空

web design

抹茶カフェ 茶音 HP

静けさが主役になる抹茶カフェのブランドサイト。
深い緑と余白で、“整う時間”をそっと引き立てるデザインに。

Instagramでは伝わりきらなかった茶音の世界観と“整う時間”の価値をオンラインで補完した。
看板メニュー3種を軸に、来店したくなる理由がひと目で伝わるデザインへ再構築した。

課題

Instagram依存で情報が流れてしまい、営業時間・メニュー・場所が探しにくい。
外国人客の増加に対して、英語表記の情報が不足している。
ブランドイメージ・世界観が統一されておらず、「Chanonに来る理由」が伝わりにくい。

目的

「忙しい大人が、日常を整えるために訪れたくなる抹茶カフェ」として、
独自の価値を確立する。
世界観・言葉・UIを統一し、“ここでしか体験できない時間”を視覚的に伝える。
来店動機となる 看板メニュー3種を中心にブランドの強みを明確化する。

ターゲット

30〜40代 / 仕事帰りに静かに整う時間を求める大人。
流行よりも上質・丁寧さ・落ち着きを好む。
SNS映えよりも、“自分が心地良い場所で過ごすこと”を重視。
渋谷の喧騒から距離を置きたいビジネスパーソン。

情報設計

FV→Aboutでまず「Chanonが提供する価値」を明確に伝える導線を設計。
ブランドの核となるおすすめ3商品を視線の中心に配置し、来店動機を強化。
文章・写真・余白の使い方を統一し、“静けさ”をUIとして表現。
不要な情報を排除し、「整う時間」が感じられる余白と構成を意識。

デザイン

「Chanonが提供する価値」を再定義し、“抹茶の味”ではなく“忙しい大人が整う時間”を体験価値として設定。
ペルソナ分析を行い、整う・静けさ・余白をデザインテーマに統一。
ポップさや情報過多を排除し、写真・色・余白・タイポ・言葉のすべてを大人が深呼吸できる雰囲気に最適化。
“操作のしやすさ” だけを追求するのではなく、“Chanonに行きたい・飲みたいと思わせる体験” を最優先に設計した。

制作期間

企画 / 情報設計 / WF
デザイン

2週間
2週間

使用ツール

Illustrator / Figma