TOUAN

灯庵

古民家和カフェ / 自主制作

Live Site

古民家を活用した和カフェ・茶房の静けさと季節感を、写真と余白で伝えるサイト。

灯庵のWebサイト画面
01

PROJECT OVERVIEW

制作概要

古民家を活用した和カフェ・茶房を想定した自主制作サイトです。

甘味や飲み物を紹介するだけではなく、庭、縁側、囲炉裏、障子など、「その場所で過ごす時間」そのものが伝わるWebサイトを目指しました。

古民家ならではの静けさや季節感を感じながら、実際に訪れてみたいと思えるサイトを意識して制作しています。

02

INFORMATION DESIGN

情報設計

来店前に知りたい情報を、「お品書き」「空間」「季節」「店舗案内」に整理しました。

甘味や飲み物を目的に訪れる人だけでなく、古民家の雰囲気や庭、季節の景色を楽しみたい人にも店舗の魅力が伝わる構成にしています。

情報量を増やしすぎず、写真を見ながら自然に店舗について知ることができる流れを意識しました。

03

VISUAL DIRECTION

ビジュアル設計

木、苔、障子、庭、自然光など、古民家らしい素材感が主役になるよう、写真を大きく使用しています。

落ち着いた自然色と広い余白をベースに、和の雰囲気を残しながらも古く見えすぎないデザインを意識しました。

装飾を増やすのではなく、写真・文字・余白のバランスによって静かな空気感を表現しています。

04

SPACE EXPERIENCE

空間体験の表現

このサイトでは、料理だけではなく「灯庵で過ごす時間」を伝えることを重視しています。

庭を眺める縁側や囲炉裏のある室内など、空間そのものをコンテンツとして見せることで、来店前から店舗で過ごす時間を想像できる構成にしました。

Webサイトを店舗案内だけで終わらせず、実際の空間体験につながる入り口として設計しています。

05

SEASONAL EXPERIENCE

季節の見せ方

古民家や庭の魅力は季節によって変化するため、春・夏・秋・冬それぞれの景色や甘味を意識した見せ方を取り入れています。

一度訪れて終わりではなく、季節が変わったときにもう一度訪れたくなるような店舗の魅力をWeb上でも表現することを意識しました。

06

CUSTOMER JOURNEY

来店までの導線

サイトを見た人が、「店舗の雰囲気を知る → 甘味や飲み物を見る → 季節の魅力を知る → 営業時間・場所を確認する → 実際に訪れる」という流れで自然に情報を確認できるよう設計しました。

世界観を見せるだけではなく、最終的に店舗への来店につながることも意識しています。

07

RESPONSIVE DESIGN

PC・スマホ設計

PCでは写真と余白を大きく使い、古民家の空間や庭の雰囲気をゆったりと見せています。

スマートフォンでは、写真の存在感を残しながら、お品書き・営業時間・店舗情報などを短いスクロールでも確認しやすい構成に調整しています。

画面サイズが変わっても、静かな世界観と情報の読みやすさの両方が崩れないよう設計しています。

Screenshots

PC / スマホでの見え方

Desktop — MacBook Air 13"
灯庵 PC表示
Mobile — iPhone 15 Pro
灯庵 スマホ表示
08

Tech

使用技術

  • HTML
  • CSS
  • JavaScript

Live Site を見る

Webサイトについて、
まずは相談してみませんか。

まだ依頼内容が完全に決まっていなくても大丈夫です。