Case Study / 03 — Cafe / Self-produced
実在しない架空のカフェを題材に、ブランドの世界観をゼロから設計した自主制作です。デザインだけでお店の雰囲気を作れるかを試すために作りました。
実際のサイトを見る →千葉・柏の街で、忙しい毎日の合間に、ひと息つきたい人。「早く・安く」より「ゆっくり・丁寧」に価値を感じる、20〜40代。
ターゲットをこう定めたことが、そのままデザインの判断基準になりました。急かさない相手に向けるサイトなので、情報を詰め込まず、間(ま)を大きくとる。読み手が急がなくていいと感じられる速さで、画面を設計しています。
ゆとり=間(ま)と、余白。
「急がない、という贅沢を。」
タグラインを縦書きで置いて、日本的な間(ま)で世界観を出しました。スクロールの途中に全幅の写真をはさむと、読む手がふっと一拍おく。このひと呼吸こそ、このサイトで一番大事にした部分です。余白は空きスペースではなく、コンセプトそのものだと考えています。
クリーム、エスプレッソ、キャラメルの3色にしぼって、ドリンクの温かみが伝わる配色にしました。サイトの色とお店の雰囲気がつながって、画面を見た瞬間に居心地が想像できるように。
見出しに明朝(Shippori Mincho B1)を使い、所作の丁寧さと落ち着きを出しました。機能的なゴシックより、余韻のある佇まいを優先しています。
全幅の写真をコンセプトとメニューの間にはさんで、スクロールに一拍の余白をつくりました。情報の密度ではなく、読むテンポで世界観を出しています。
「ゆとりとは何か」を言葉にするところから始めました。ターゲットを定め、間と余白というコンセプトと、縦書きタグラインの核を固めています。
配色とタイポグラフィ、余白のリズムを設計しました。明朝を主役に、トップからコンセプト、メニュー、アクセスまでの流れを組み立てています。
縦書き、全幅の写真、レスポンシブを、フレームワークに頼らず手書きで実装しました。間が崩れないよう、余白の値を細かく詰めています。
実際の画面で世界観の一貫性を確認しながら、文言や余白、写真の見え方を微調整しました。急かさないテンポになっているかを、最後の判断基準にしています。
情報を減らすほど、
伝わるものがあった。
説明やメニューを最小限にして、余白に語らせる。普段の実務なら物足りないと感じるくらいまで削る判断が、このサイトで一番の挑戦でした。引き算でブランドの雰囲気をつくる感覚を、自主制作でつかめたのが収穫です。