大阪府堺市の七条通、仁徳天皇陵の森からほど近い場所にあるカフェ、茶房 梟亭（さぼう ふくろうてい）様のホームページを制作させていただきました。
梟亭様は、レコード・書物・美術に囲まれて、自家焙煎の珈琲とともにゆっくり過ごすことができる「ライブラリー＆ミュージアムカフェ」です。大きなスピーカーから流れるジャズ、自由に席へ持っていける書架の本、少しずつ掛け替えられる映画ポスターや絵画。お店が大切にしているのは、堺の茶人たちが育てた「市中の山居（まちなかに居ながら、山あいの庵に身を置くように）」という考え方です。
空間・音響・珈琲・ブランディング・デザインと、それぞれの分野のつくり手が集まって生まれたお店で、当社は Web 制作を担当しました。
デザインの考え方
- 紙面のような静けさ … 生成り色の背景と細い明朝体、ゆったりとした余白で、図録や古い書物をめくるような落ち着いた画面にしました。派手な動きは使わず、写真がゆっくり切り替わるだけにしています
- 縦書きのことば … トップページは店内や外観の写真に「堺、七条通。ジャズに包まれる市中の山居。」の一文を縦書きで重ね、お店の佇まいを最初の画面で伝えています
- 英字と和文の見出し … 「CONCEPT 市中の山居」「HOW TO ENJOY 梟亭の過ごし方」のように、英字の見出しと和文を組み合わせ、梟のロゴや和と洋を行き来するお店のブランディングと揃えました
ページ構成
ページ | 内容 |
|---|---|
当店について | コンセプト「市中の山居」、店名の由来、空間と音響、音盤・書物・美術、店主の想い、運営者情報 |
梟亭のこころ | 空間・音響・珈琲・蒐集・デザインそれぞれの考え方と、お店をつくったクリエイティブチームの紹介 |
お品書き | 珈琲・アレンジ珈琲・お飲みもの・お食事・甘いもの・モーニングを、写真と説明つきで掲載（税込価格） |
在店カレンダー | 店主が在店してレコードをかける日、ライブ・イベント、臨時休業を月ごとのカレンダーで表示 |
梟亭日録 | お店の日々の記録（お知らせ・ブログ） |
よくあるご質問 | 「ジャズに詳しくなくても入れますか？」など、過ごし方・お席・音楽と蔵書・お支払いの質問 |
ご案内・アクセス | 営業時間・お支払い方法、堺東駅・三国ケ丘駅からの道順、駐車場、仁徳陵の散策コース |
お問い合わせ | ご来店・営業、貸切・イベント、コレクションについてなど、種類を選べるフォーム |
来店前の「知りたい」に先回りする
はじめて訪れる方が気になることを、来店前に確かめられるようにしました。
- 在店カレンダー … 店主が在店してアナログレコードをかける日や、ライブ・イベントの予定を色分けして表示します。トップページにも直近の予定を出し、「レコードを聴きに行くならこの日」と選べるようにしています
- 梟亭の過ごし方とよくある質問 … 会話や撮影、パソコン作業、子ども連れ、レコードのリクエストなど、静かなお店ならではの「行っても大丈夫？」に答えるページを用意しました
- 散歩道としての道案内 … 駅からの道順を目印つきで説明し、三国ケ丘駅から仁徳天皇陵（百舌鳥・古市古墳群）を散策してお店に着くコースも紹介しています。お店に来ること自体を、小さな旅として楽しんでいただけるようにしました
日々の発信と運用
- 日々の営業情報や「本日の一枚」は Instagram で発信されているため、トップページに Instagram の最新の投稿を表示し、サイトと SNS を行き来できるようにしました
- お店の日録やお知らせ、お品書きは、お店の方が更新しやすい仕組みにしています
- お問い合わせは種類（ご来店・営業／貸切・イベント／コレクション／その他）を選べるフォームにし、急ぎの用件は Instagram の DM やお電話へ案内しています
制作内容
- サイト構成の設計と原稿の整理
- デザイン（PC・スマートフォン）。お店のロゴ・ブランディングのトーンに合わせた画面設計
- WordPress でのサイト構築（オリジナルテーマ、お品書き、在店カレンダー、日録、よくある質問、アクセス、お問い合わせフォーム、Instagram の表示）
- 公開作業