Purpose & feeling
静かな店の魅力を、来店前の迷いを減らす情報へ変える
個人店の魅力は、商品一覧だけでは伝わりません。どんな時間を過ごせるか、初めてでも入りやすいか、今日営業しているかという判断が重なって来店につながります。
そこで、店主の考えを長く語る前に、第一画面で空気と行動を同時に提示しました。「メニューを見る」「店のことを知る」から始まり、季節の一杯、席の雰囲気、アクセスへ自然に進む順番です。小さな店が大切にしている余白を壊さず、必要な情報は見つけやすくすることへ最も注意しました。
- 想定する店
- 地域で営業する小規模なカフェ
- 主な目的
- 店の雰囲気を伝え、メニュー確認と来店へつなぐ
- 主要な人
- 初めて来店する人、季節メニューを探す人
- 第一画面
- 店の空気、メニュー、店の考えを一度に判断
- 制作上の思い
- 静けさと分かりやすさを対立させない
Information architecture
来店情報と、店を好きになる読みものを分けて設計する
「メニュー」「季節のおすすめ」「店舗案内」「アクセス」「よくある質問」は、来店前に短時間で確認するページです。一方、「私たちについて」「読みもの」「抽出の話」は、急がず店の背景へ触れるページとして文章と写真の比率を変えました。
お知らせには営業時間などの更新情報、読みものにはコーヒーや席にまつわる記事を掲載し、同じ一覧へ混ぜていません。更新頻度や読む目的の違いをURLとナビゲーションにも反映しています。
- 全16ページ
- トップ、考え、メニュー一覧・詳細、季節、店舗、アクセスほか
- お知らせ
- 営業日や提供情報の一覧・詳細
- 読みもの
- 一覧と2本の記事で情報発信を実装
- 店舗情報
- 営業時間、席、交通手段をまとまりで表示
- 回遊
- 記事から関連メニューや店舗案内へ接続
Visual direction
写真を大きく置くだけでなく、余白そのものを店の個性にする
深い緑、生成り、赤茶を基調に、和文の明朝体と小さな英文を組み合わせました。第一画面では写真と文章を半分ずつ置き、写真だけに印象を任せず、店の言葉が風景の一部になるようにしています。
下層ページでは、メニューは比較しやすいカード、読みものは長く読める紙面、アクセスは要点を先に探せる配置へ切り替えました。同じ装飾を繰り返すのではなく、情報の目的に合わせながら一つの店らしさを維持しています。
- 配色
- 深緑、生成り、珈琲色、季節の橙
- 写真
- 窓辺、抽出、商品、店内の4系統
- 文字
- 大きな明朝見出しと読みやすいゴシック本文
- スマートフォン
- 文章と写真を一列化し、操作領域を広く確保
- 差別化
- 静かな紙面と来店行動を同じ画面で両立
Interaction & implementation
見た目の外側に、更新・検索・相談を想定した状態をつくる
メニューの一覧と詳細、お知らせと記事、よくある質問、アクセス、問い合わせを別ページとして実装しています。問い合わせは入力確認と完了まで体験できますが、自主制作サンプルのため外部送信と保存は行いません。
パソコンとスマートフォンでナビゲーションを切り替え、キーボード操作、フォーカス表示、画像の説明、横スクロール防止も確認しました。運用を始めた後にニュースや記事を追加しやすいページ単位の構成です。
- 問い合わせ
- 入力、エラー、確認、完了を画面内で再現
- 送信
- 自主制作のため外部送信・保存なし
- 操作
- PC、スマートフォン、キーボードに対応
- 更新想定
- お知らせ・読みものを記事単位で追加可能
- 技術
- HTML、CSS、Vanilla JavaScript
Actual screens
実際の3画面で、雰囲気と情報設計の両方を確認する
第一印象だけでなく、商品を選ぶ場面と記事を読む場面まで、実装済みの画面をそのまま掲載しています。
全16ページの構成
トップ ／ 私たちの考え ／ メニュー一覧 ／ 朝のブレンド詳細 ／ 季節のおすすめ ／ お知らせ一覧 ／ 営業時間変更のお知らせ ／ 読みもの一覧 ／ 「朝の一杯」 ／ 「窓辺の席」 ／ ギャラリー ／ 店舗案内 ／ アクセス ／ よくある質問 ／ お問い合わせ ／ プライバシー
Continue exploring
ほかのWebサイト作品も見る
業種や利用する人が変わると、情報の順番や見せ方も変わります。