「うちはカフェだから、メニューと場所さえ載っていればいい」。そう思ってホームページを後回しにしているお店は少なくありません。ですが、カフェを探している人が本当に知りたいのはメニュー表ではなく、「自分がその店で過ごしている時間」を想像できるかどうかです。この記事では、ラタトスクが制作したカフェ向けデモサイト「ぬくもりカフェ」を題材に、配色・コピー・構成をどんな意図で設計したのかを、制作者の目線でそのままお見せします。
この記事について
この記事で扱うのは、ラタトスクが技術力の証明として制作した架空のデモサイトです。実在の店舗・実際の案件ではありません。登場する店名・店主・数字はすべて架空の設定です。
カフェのホームページで一番大事なこと
飲食店のなかでも、カフェは少し特殊です。ラーメン店なら「何を食べるか」で選ばれますが、カフェは「どう過ごせるか」で選ばれるお店だからです。静かに本を読めるか。打ち合わせに使えるか。一人でも気まずくないか。長居しても大丈夫か——。来店を決める判断材料の多くが、味や値段ではなく「居心地」に関わることなのです。
だからカフェのホームページは、メニューと価格の一覧表である前に、画面を見ただけで店内の空気感が伝わる「疑似体験の場」である必要があります。写真の明るさ、色づかい、言葉のトーン、情報を出す順番。そのすべてが「この店は自分に合いそうか」の判断材料になります。逆に言えば、どれだけコーヒーが美味しくても、サイトの画面がうるさければ「落ち着けない店かもしれない」と思われてしまう。カフェのホームページ制作とは、居心地そのものをデザインする仕事だと考えています。
デモサイト「ぬくもりカフェ」ではこう設計した
デモサイト「ぬくもりカフェ」は、福岡・天神の自家焙煎コーヒー店という架空の設定で制作しました。ここからは、実際のページを見ながら設計意図を解説します。
配色：コーヒーとミルクの色だけで作る
このデモの配色は、主役の焦げ茶（#7B4F2C）、背景の生成りに近いクリーム色（#FBF8F3）、アクセントの淡い金茶（#C49A6B）の3色が軸です。つまり「コーヒー」「ミルク」「カフェラテ」の色だけで画面を構成しています。赤や青のような彩度の高い色は1色も使っていません。
理由はシンプルで、派手な色は「静かな店」という印象と矛盾するからです。セール告知のような原色のボタンを置けばクリックは目立ちますが、その瞬間に「落ち着いた隠れ家」の空気は壊れます。英数字の見出しには、あえて細身のセリフ体（Cormorant Garamond）を使い、喫茶店の手書き黒板メニューのような柔らかさを足しました。色数を絞り、書体で表情をつける——カフェらしさは、この引き算から生まれます。
コピー：商品ではなく「時間」を約束する
ぬくもりカフェのメインコピーは「一杯のコーヒーで、暮らしに余白を。」としました。「自家焙煎の美味しいコーヒーがあります」と商品を説明するのではなく、来店したあとに手に入る時間を約束する言葉です。カフェのお客様が買っているのはコーヒーそのものではなく、コーヒーを飲みながら過ごす30分だからです。
もうひとつ意図があるのは、画面最上部の小さなタグに置いた「自家焙煎 ／ ペット同伴OK ／ 静かな時間」という一行です。これは来店判断に直結する条件を、スクロールさせる前に先出しするための場所です。「犬を連れて行けるか」「静かに過ごせるか」は、メニューより先に知りたい人が確実にいる情報。探させずに最初に見せることで、「この店は自分向きだ」と数秒で判断してもらえます。
構成：メニューより先に「人」と「過ごし方」
ページの流れは、こだわり3つ（自家焙煎の一杯・手作りのおやつ・居心地のいい時間）→ 数字の紹介 → お品書き → 店主紹介 → 店内ギャラリー → アクセス・営業時間 → よくある質問、という順番にしました。ポイントは2つあります。
1つめは、店主紹介を独立したセクションにしたことです。個人経営のカフェは、最終的に「人」で選ばれます。デモでは架空の店主のプロフィールに、経歴や資格、店を始めた理由の語りを置きました。「どんな人が淹れているのか」が見えるだけで、初めての店に入る心理的なハードルは下がります。
2つめは、よくある質問に「電話で聞くほどではないけれど、行く前に知りたいこと」を集めたことです。デモでは「予約はできますか？」「ペット同伴は可能ですか？」「コーヒー豆は購入できますか？」「Wi-Fi・電源はありますか？」の4つ。特にWi-Fi・電源の有無は、パソコン作業したい人にとって来店を左右する情報なのに、載せていないお店が本当に多い項目です。
予約導線もカフェ仕様に
カフェの連絡手段は、予約システムよりも電話とInstagramが主戦場です。そこでデモのボタンは「予約フォーム」ではなく、電話とInstagramの2つに絞りました。業種によって最適な導線は変わります——これも設計のうちです。
カフェの集客でよくある失敗
制作のご相談を想定して、カフェのホームページでよく見かけるつまずきを挙げておきます。
- メニューと値段の羅列だけで「過ごし方」が見えない——品名と価格の表だけでは、居心地は1ミリも伝わりません。写真と言葉で「その店の時間」を見せる必要があります。
- 写真が暗い・少ない——カフェ選びは第一印象がほぼ写真で決まります。暗い写真は「暗い店」に見えてしまい、実際の雰囲気より損をします。
- 営業時間・定休日が古いまま——「行ったら閉まっていた」は一度で信頼を失う失敗です。ぬくもりカフェのデモでは営業時間表を大きく載せたうえで、「臨時の営業情報はInstagramで告知」と補足する形にしています。更新しやすい場所と役割分担を決めておくのがコツです。
- SNSアカウントだけで公式サイトがない——Instagramは投稿が流れていくため、初めての人が営業時間・場所・雰囲気・FAQをまとめて確認できる「受け皿」になりません。SNSで見つけてもらい、ホームページで安心してもらう。この2段構えが基本です。
まとめ：実際のデモを見てみてください
- カフェは「何を食べるか」ではなく「どう過ごせるか」で選ばれる。ホームページの役割は居心地の疑似体験
- デモ「ぬくもりカフェ」は、コーヒーとミルクの色だけの配色と、時間を約束するコピー「一杯のコーヒーで、暮らしに余白を。」で空気感を設計した
- 店主紹介・Wi-Fiやペット同伴のFAQなど、行く前に知りたい情報を先回りして置く
- 連絡導線は予約フォームではなく電話とInstagramに絞るなど、業種に合わせて個別設計する
文章で読むより、実物を見ていただくのが一番早いと思います。ヒーローの写真の重ね方、スクロールに合わせたふわっとした動き、FAQの開閉まで、すべて実際に動くデモです。
※ 架空の店舗のサンプルサイトです。実在しません。
ラタトスクでは、このデモと同じ品質のホームページを、初期費用¥0＋月額¥5,000（税込）の「サブスクプラン」、または ¥50,000（税込・一括）の「買い切りプラン」で制作しています。着手金なし・公開後のお支払いで、公開前のキャンセルは¥0です。「うちの店ならどんなデザインになる？」という段階のご相談も歓迎です。