カフェ・喫茶店
コーヒー、焼き菓子、ランチなどをやさしい雰囲気で見せたいお店に。
TYPECafeカフェ・飲食店向け
LEVEL★☆☆初心者向け
PAGES7店舗サイト構成
STYLEResponsivePC / Tablet / Mobile
RECOMMENDED FOR
こんなお店におすすめ
写真と雰囲気を大切にしたい店舗向けです。カフェ以外でも、ナチュラルな世界観のお店に使いやすい構成です。
ベーカリー・スイーツ
商品写真や季節メニューを主役にしたページづくりに向いています。
小さなレストラン
コンセプト、メニュー、店内写真をバランスよく掲載できます。
自然派ブランド
オーガニック、素材重視、丁寧な暮らしを感じさせるサイトにも。
ABOUT TEMPLATE
写真が変われば、
写真が変われば、
お店の空気も変わる。
Natural Cafeは、文章を詰め込むのではなく、写真・余白・タイポグラフィで店舗の雰囲気を伝えるテンプレートです。
まずはデモを見てみる →写真を主役に
メイン画像、料理、店内写真を大きく配置。差し替えるだけで印象が大きく変わります。
店舗情報を整理
営業時間・定休日・席数・支払い・アクセスなどを読みやすく整理できます。
メニューを追加しやすい
HTMLの同じブロックをコピーして商品名と価格を書き換える基本構造です。
暖色系CSS変数
オリーブ・ブラウン・ベージュをCSS冒頭で一括変更できます。
DESIGN PREVIEW
写真と余白で、お店の雰囲気をやさしく見せる。
実際のテンプレート画像を大きく見せることで、「どんな写真が入るのか」「どう見えるのか」が直感的に伝わります。
SHOP PREVIEW
Coffee, food,
Coffee, food,
quiet time.
ナチュラルな配色と余白で、メニューや空間の魅力をやさしく伝えるテンプレートです。
- 店内写真や料理写真を主役にしやすい
- メニュー・営業時間・アクセスの導線が自然
- 色を少し変えるだけでも別のお店の雰囲気に
Natural Cafe preview
PAGE STRUCTURE
店舗サイトに必要な
店舗サイトに必要な
7ページ。
不要なページは削除しても構いません。初心者ガイドの「ページを追加・削除する」も利用できます。
トップページ
メイン写真、コンセプト、人気メニュー、ギャラリー、店舗情報。
コンセプト
開業ストーリー、素材、空間へのこだわり。
メニュー
ドリンク・フードの名称、説明、価格を掲載。
ギャラリー
店内、料理、スタッフ、季節の写真を掲載。
店舗情報
営業時間、席数、支払い方法、設備など。
アクセス
住所、最寄り駅、駐車場、Googleマップ。
お問い合わせ
メール・外部フォーム等への導線とフォーム見本。
EASY CUSTOMIZE
まず写真と色を
まず写真と色を
変えてみる。
Natural Cafeは、初心者でも変化を実感しやすいテンプレートです。
メイン写真
店内や料理の横長写真へ差し替え。
images/hero-cafe.svgメインカラー
オリーブ系カラーを一括変更。
--main-color: #6f7a5b;メニューと価格
dtとddの文章だけ変更。
<dt>Cafe Latte</dt>店舗情報
住所・営業時間・電話番号を書き換え。
shop.html / access.html
CUSTOMIZE LEVEL
どこまで変更するかは、自分次第。
変更内容難易度触る場所初心者向け
文章・見出し★☆☆HTMLおすすめ
画像の差し替え★☆☆img / imagesおすすめ
配色変更★☆☆CSS変数おすすめ
カード追加★★☆HTML慣れたら
レイアウト変更★★★CSS中〜上級
DOWNLOAD
Template 002
Template 002
Natural Cafe
HTML 7ページ、CSS、デモ用画像、README、利用条件をまとめたZIPです。無料利用時はMACHIKA WEBのテンプレートクレジットとリンクを残してご利用ください。
READY TO USE
初心者ガイドへ
色や写真の変え方も、サイト内で学べます。
初めてHTMLを触る場合は初心者ガイドから順番に進めてください。