ホーム
ごあいさつ、今日のコーヒー、焼き菓子、焙煎のこと、営業時間、お知らせ、地図。ここだけ見れば用が足りる構成です。
<< デモ一覧に戻る
カフェのサイトデモ
- このページでは、Frames CMS の製品版で実際に作ったカフェのサイトをご紹介します。自家焙煎の珈琲店を想定した、7ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ16種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- 文章が少なくても成立する形になっています。飲食店のサイトは、長い説明より写真と余白のほうが伝わります。このデモは、そこを意識して組み立てています。
まずは全体像から
このデモの構成
7つのページで構成しています。すべて管理画面から作れるもので、HTMLを書いた箇所はひとつもありません。
01
02
メニュー
コーヒーを写真と価格つきで3種。その他のドリンク・フードは表に。最後によくあるご質問。
03
豆の販売
豆4種類を写真＋価格ラベルで。焙煎度の目安と保存方法の表もつけています。
04
お店について
店主の話、店内の写真3枚、お願いしていること。人が見えると、行ってみようと思ってもらえます。
05
アクセス
所在地・営業時間・席数・駐車場・支払い方法の表と、地図。
06
お知らせ
臨時休業や新しい豆の入荷。記事を追加すると一覧と詳細が自動で作られ、トップにも最新3件が出ます。
07
お問い合わせ
入力項目を自由に作れるフォーム。豆の取り置きや発送のご相談窓口として使えます。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「portfolio1（中央配置1枚ビジュアル・左下テキスト）」 です。
portfolio1 は、写真を1枚だけ中央に置いて、左下に小さく文字を重ねるフレームです。まわりの余白が広いので、写真がよければ、それだけで成立します。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では20種類以上から選べます。
メイン画像を選ぶときのコツ。文字は写真の左下に重なりますので、左下がごちゃごちゃしていない写真を選んでください。人や物が写り込んでいると、キャッチコピーが読みづらくなります。
このデモでは、色を1つだけ変えています
portfolio1 の標準のメインカラーはくすんだベージュですが、珈琲店に合わせて焙煎した豆の色（濃い茶）に変更しました。変更したのは管理画面の「デザイン → テーマカラー」で、カラーピッカーから色を選んだだけです。
変えられるのは、メインカラー・アクセントカラー・薄い色（差し色）・背景色・文字色の5つ。フレームを選んだあとで、お店の雰囲気に寄せることができます。
なお、その下にはテーマCSSを直接編集できる欄もあります。余白や角の丸み、フォントサイズなど、色以外も細かく調整したい方向けです（CSSの知識がある方向けの機能なので、通常はカラーピッカーだけで十分です）。
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ごあいさつ | 基本セット（見出し＋本文＋画像） | |
| 大きく流れる英字 | 横流れテキスト（マーキー） | |
| 今日のコーヒー | かわいい形のカラム（自動幅・マスク選択） | |
| 焼き菓子 | 自動スライド（写真の横流れ） | |
| 焙煎のこと | 汎用レイアウト（画像＋テキスト・配置選択） | |
| 営業時間 | 営業時間・曜日表 | |
| お知らせ | お知らせ一覧（自動） | |
| アクセス（地図） | 埋め込み（YouTube・地図など） |
メニュー・豆の販売
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| コーヒー（写真＋価格） | コース・メニュー一覧 | |
| 豆4種（写真＋価格ラベル） | カタログ（写真＋価格ラベル） | |
| ドリンク・フード／焙煎度の目安 | 表（項目と内容） | |
| 通販のご案内（帯） | アラート（お知らせボックス） | |
| よくあるご質問 | FAQ（クリックで開閉） |
お店について・アクセス
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 店主の話（写真＋テキスト） | 横長レイアウト（テキスト＋写真） | |
| 店内の写真3枚 | ギャラリー（複数画像） | |
| お願いしていること | 箇条書き（中黒・番号） | |
| 店舗情報の表 | 表（項目と内容） |
全16種類のパーツのうち、11種類は製品版でのみ使えるものです。Free（無料版）でも同じ構成を作ろうとすることはできますが、かわいい形のカラム・自動スライド・カタログ・営業時間の表・ギャラリーは入っていないため、見え方はかなり変わります。製品版では約50種類のパーツが使えます。
パーツの小ワザ
①「かわいい形のカラム」のマスクは、混ぜても揃えてもいい。
このデモでは、6種類ぜんぶを1つずつ使って並べています。座布団・なめらかな角丸・崩れた円・お花・角丸六角形・ギザギザ。カフェらしい、にぎやかな見え方になります。
いっぽうポートフォリオのデモでは、まったく同じパーツを「なめらかな角丸」1種類だけで統一しています。落ち着いた、上品な見え方になります。同じパーツでも、揃えるか混ぜるかで印象がここまで変わります。並べて見比べてみてください。
②「カタログ（写真＋価格ラベル）」は横4列。
項目が3つだと、右端の1マスが空いて背景色（濃い色）がそのまま出てしまいます。4の倍数で組むのがきれいですが、どうしても3つのときは、4つ目を追加して見出しか本文に半角スペースを1つだけ入れてください。空白のカードとして白く収まります。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、ご購入後にお問い合わせください。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
飲食店のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 写真がうまく撮れません
- 飲食店のサイトで、いちばん多い悩みだと思います。コツは2つだけです。
ひとつは、窓際の明るいところで撮ること。店内の照明は色がつくので、日中の自然光がいちばんきれいに写ります。
もうひとつは、寄って撮ること。テーブル全体より、カップ1つに寄ったほうがおいしそうに見えます。このデモの「今日のコーヒー」は、まさに寄った写真を想定した形（正方形に近い切り抜き）になっています。 - メニューが季節で変わります。そのたびに直すのは大変では？
- 全部を載せる必要はありません。変わらないものだけをサイトに置いて、変わるものはお知らせに書くのがおすすめです。
このデモでも、焼き菓子は「その日にあるものだけ」と書いて、具体的な品名は4つに絞っています。季節のものはお知らせで「レモンケーキを始めました」と1本書けば十分です。 - Instagramをやっているので、ホームページは要らない気がします
- 確かに新しい情報を出す力ではSNSのほうが上です。
ホームページが強いのは「変わらない情報」のほうです。営業時間、定休日、場所、席数、駐車場、支払い方法。これらは検索で探されますし、SNSの投稿は流れて見つからなくなります。
このデモも、営業時間の表と店舗情報の表をはっきり置いて、日々の話はお知らせに寄せる形にしています。SNSとホームページは、役割が違うものだとお考えください。 - 臨時休業をどう伝えればいいですか
- お知らせに1本追加すれば、トップページにも自動で出ます。
急ぎのときはアラート（帯）のパーツを使う方法もあります。このデモでは「豆の販売」ページで通販の案内に使っていますが、ホームの一番上に置けば、目立つお知らせの帯になります。不要になったら文章を空にすれば消えます。 - スマホでの見え方が心配
- すべてのパーツが、画面の幅に合わせて自動的に並び替わります。スマホ用に別のページを作る必要はありません。
この構成で作れるサイト
カフェ以外にも
このデモは自家焙煎の珈琲店を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
パン屋／洋菓子・和菓子店／ラーメン・定食屋／バー・居酒屋／お弁当・惣菜／雑貨店／花屋／酒屋 など、「何を出しているか」「いつ開いているか」「どこにあるか」を伝えたいお店であれば、そのまま当てはまります。
業種によって変えたほうがよいのは、「豆の販売」のページくらいです。取り扱っている商品に置き換えてください。パーツはそのまま使えます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る