From Scratch

-0から1へ-

ご相談内容

Project Brief

和とモダンを融合させたカフェブランド「cafe 茶室」を新しくオープンすることを想定し、ブランドの立ち上げからWebサイトまでを一貫して設計したサンプルプロジェクトです。

日本の伝統的な茶室文化が持つ「静けさ」と、現代のカフェが持つ「心地よさ」。

その二つを掛け合わせ、単にメニューや店舗情報を伝えるだけではなく、訪れる前からその場所で過ごす時間を感じられるブランドサイトを目指しました。

課題

Challenges

・新しいブランドのため、まだ認知やイメージが形成されていない
・商品だけでは、店舗ならではの価値を伝えにくい
・和の表現に寄せすぎると、伝統的で敷居の高い印象になりやすい
・SNSだけでは、ブランドの世界観やストーリーを体系的に伝えにくい
・興味を持った人を、来店や予約まで自然につなげる導線が必要

新しいブランドだからこそ、最初から完成されたイメージがあるわけではありません。

「どのようなお店なのか」だけではなく、

「なぜ、この場所を選びたくなるのか」

という理由から考える必要がありました。

ブランドコンセプト

Brand Concept

「伝統を纏い、現代へ届ける癒しの時間。」

日本の茶室文化が持つ静けさと、現代のカフェ文化が持つ心地よさを融合。

目指したのは、単なる「和風カフェ」ではありません。

忙しい日常から少し離れ、自分と向き合うための時間を過ごせる場所。

それをCafe茶室が提供する価値として定義しました。

空間、商品、言葉、写真、Webサイト。

それぞれを別々に考えるのではなく、すべての接点から同じ空気を感じられるようにブランド全体の世界観を設計しています。

デザイン戦略

Design Strategy

01｜世界観を最初の3秒で伝える

Webサイトを開いた瞬間に伝えたいのは、詳しい店舗情報ではありません。

まず感じてもらいたいのは、

「Cafe茶室とは、どのような場所なのか。」

というブランドの空気です。

ファーストビューには、茶室と現代的なカフェを融合した空間を大胆に配置。

深い木の色、庭の緑、柔らかな自然光、余白を活かしたタイポグラフィによって、静けさと上質さを表現しました。

そして、

「伝統を纏い、現代へ届ける癒しの時間。」

というブランドコンセプトを重ねることで、写真と言葉の両方からCafe茶室の存在価値を伝えています。

説明を読んで理解する前に、まず世界観を感じてもらう。

そのためのファーストビューを設計しました。

02｜商品ではなく「過ごす時間」を伝える

Cafe茶室で提供するのは、

抹茶、珈琲、抹茶菓子、和菓子。

しかし、ブランドとして伝えたい価値は商品そのものだけではありません。

大切にしたのは、

・どんな空間で過ごすのか
・どんな時間を味わえるのか
・その時間によって、どんな気持ちになれるのか

という体験です。

そのため、Webサイトでも商品説明だけを前面に出すのではなく、

「ここで時間を過ごしてみたい。」

と思ってもらえることを基準に情報を設計しました。

商品を選ぶためだけのWebサイトではなく、Cafe茶室で過ごす時間を想像するためのWebサイト。

ブランドコンセプトを、実際のユーザー体験へつなげています。

03｜スクロールそのものをブランド体験にする

Cafe茶室が大切にするのは、ゆっくりと流れる時間です。

その感覚を、Webサイトの動きにも取り入れました。

GALLERYでは、

庭 → 店内 → 一杯の抹茶と和菓子

という順番で景色が変化します。

最初に見せるのは、画面いっぱいに広がる日本庭園。

そこから店内へ入り、最後は一杯の抹茶と和菓子へ。

視点が、

世界 → 空間 → 一杯

へと徐々に近づいていく構成です。

さらに、3枚の写真をすべて同じ大きさにはせず、スクロールするほど少しずつ写真のサイズを小さくしています。

これは単なる装飾ではありません。

大きな景色から、目の前にある一杯へ。

Cafe茶室で過ごす時間へ意識が集中していく感覚を、Webサイトのレイアウトそのものによって表現しています。

また、PARALLAXによって写真と文字を異なる速度で動かし、静かな奥行きを演出。

派手なアニメーションではなく、

ブランドが持つ時間の流れを感じてもらうための動き

として設計しました。

04｜情報ではなく、物語として導線を設計する

Webサイト全体の構成は、あえてシンプルにしています。

TOP
↓
CONCEPT
↓
MENU
↓
GALLERY
↓
ACCESS
↓
RESERVATION

ただし、それぞれのセクションを単独の情報として並べているわけではありません。

最初にブランドの存在を知り、

コンセプトに触れ、

商品を知り、

写真を通して空間を体験し、

「行ってみたい」と感じたところで店舗情報へ。

そして最後に予約へつなげる。

つまり、

知る → 共感する → 感じる → 行ってみたい → 行動する

という気持ちの変化に沿って設計しています。

ユーザーに「次はここを見てください」と強く誘導するのではなく、自然にスクロールしているだけで次の情報へ進めることを大切にしました。

Design System

ブランドの世界観をWebサイト全体で統一するため、色・書体・写真・余白・動きにも共通したルールを設けています。

Color Palette

Ivory

静けさと余白を表現するベースカラー。

白ではなく、わずかに温度を感じる色を使うことで、茶室の柔らかな空気を表現しています。

Dark Brown

木や茶室を想起させ、ブランド全体に落ち着きを与える色。

Charcoal Black

写真や文字を引き締めながら、伝統的な和の世界に現代的な印象を加えます。

Moss Green

庭や植物など、Cafe茶室と自然とのつながりを感じさせる色。

Gold Accent

伝統、品格、上質さを表現するアクセントとして使用しています。

Typography

Heading

Noto Serif JP

日本的な品格と静けさを感じさせる明朝体を中心に使用。

大きな見出しにも十分な余白を与え、文字そのものが空間の一部になるよう設計しています。

Body

Noto Sans JP

本文には読みやすさを重視したゴシック体を採用。

世界観だけを優先するのではなく、必要な情報が自然に読めることも大切にしています。

English

Cormorant Garamond

日本的な世界観の中に、現代的な上質さを加える欧文書体として使用しています。

UI Design

Cafe茶室のUIでは、装飾を増やすことよりも、

写真・文字・余白・動きそのものをデザインすること

を重視しました。

・空間を大胆に見せる大きなビジュアル
・余白を活かした静かなレイアウト
・和とモダンをつなぐタイポグラフィ
・世界観を邪魔しない最小限のナビゲーション
・写真と文字に奥行きを与えるPARALLAX
・スクロールによって変化するGALLERY
・PC / MOBILEそれぞれに合わせたレスポンシブ設計

アニメーションや装飾を目立たせることが目的ではありません。

すべてのUIを、

Cafe茶室というブランドを感じてもらうための要素

として設計しています。

Wireframe

情報量を増やすのではなく、ひとつのブランドストーリーとして自然に読み進められる構成を目指しました。

HERO  ↓CONCEPT  ↓MENU  ↓GALLERY  ├─ GARDEN  ├─ CAFE  └─ TEA  ↓ACCESS  ↓RESERVATION

ユーザーが迷わず進めるシンプルな構造と、スクロールすることで徐々にブランドへの理解が深まる体験を両立しています。

Completed Website

コンセプトやデザイン戦略を、実際のWebサイトへ落とし込みました。

単に決めた色やフォントを配置するのではなく、

ブランドコンセプト → ビジュアル → UI → 動き → 導線

まで、一貫した考え方で構築しています。

HERO

最初に見せるのは、商品ではなくCafe茶室という「場所」。

茶室と現代的なカフェを融合した空間を大きく使用し、

「伝統を纏い、現代へ届ける癒しの時間。」

というブランドコンセプトを、視覚と言葉の両方から伝えています。

CONCEPT

Cafe茶室が提供する価値を、単なる飲食ではなく、

「忙しい日常から少し離れ、自分と向き合うための時間」

として表現。

ブランドの世界観を、訪問者が理解するためのセクションです。

GALLERY

GALLERYでは、言葉だけでは伝えきれないCafe茶室の空気を、写真とスクロールによって体験できるようにしました。

GARDEN

「静けさは、時間を忘れることから始まる。」

大きな庭の景色から、Cafe茶室の静かな世界へ入っていきます。

CAFE

「茶室の静けさと、カフェの心地よさを。」

庭から店内へ。

ブランドの世界から、実際に過ごす空間へと視点を移します。

TEA

「一杯の余韻が、心をほどいていく。」

最後は一杯の抹茶と和菓子へ。

大きな世界から目の前の一杯へ視点を絞ることで、Cafe茶室が提供する「時間」そのものへ意識を導きます。

Responsive Design

PCとモバイルでは、単純に同じデザインを縮小して表示するのではなく、それぞれの画面に合わせて見せ方を調整しています。

PCでは、大きな画面と余白を活かし、Cafe茶室の空間へ入り込むような没入感を重視。

モバイルでは、縦方向にスクロールする行動そのものを活かし、ブランドの物語を順番に体験できる構成にしています。

画面サイズが変わっても同じレイアウトを維持するのではなく、

同じブランド体験を、それぞれのデバイスに適した方法で届ける。

それをCafe茶室のレスポンシブデザインの基準としました。

ACCESS

世界観を十分に体験したあと、最後に現実の店舗情報へつなげます。

店舗情報、MAP、店舗外観をひとつのセクションにまとめ、

〒106-0032
東京都港区六本木4-2-35

OPEN　10:00–18:00（L.O. 17:30）
CLOSE　水曜日

という来店に必要な情報をシンプルに提示。

そして、そのままRESERVATIONへ。

ブランドサイトのゴールを「見てもらうこと」で終わらせず、

ブランドを知る → 世界観を体験する → 行ってみたい → 予約する

という行動までをひとつの導線として設計しています。

Project Summary


Project	cafe 茶室
Industry	Cafe
Service	Brand Design / Website Design
Scope	Concept / UI Design / Responsive
Deliverables	Website / Brand Design

Final Thoughts

ブランドは、ロゴや商品だけでつくられるものではありません。

そのブランドが持つ想いや世界観を、どのように伝えるか。

そして、その世界観に触れた人に、どのような時間や感情を残すのか。

Cafe茶室では、コンセプトを起点に、言葉、写真、色、余白、UI、導線、そしてスクロールの動きまでをひとつのブランド体験として設計しました。

まだ何もないところから、

「どんなブランドにするのか」を考え、
「どう見せるのか」をつくり、
「どう伝えるのか」を設計する。

それが、0から1のブランドデザインだと考えています。

wiuapでは、見た目を整えることだけではなく、

「選ばれる理由」をつくり、それを一貫した体験として伝えるブランドデザイン

を大切にしています。

NEXT PROJECT

CASE 02

MONTAGNE

Outdoor Brand Website

Continue Reading

MONTAGNE　BEFORE/AFTER

CASE 01【制作事例】

cafe 茶室

Brand Website Design