カフェのサイトデモ｜使用フレーム・パーツをすべて公開

<< デモ一覧に戻る

カフェのデモ

このページでは、Frames CMS の製品版で実際に作ったカフェのサイトをご紹介します。朝8時から開いている、モーニング・ランチ・おやつのある駅前のカフェを想定した、5ページ構成です。
使っているフレーム（デザインの枠）1種類とパーツ15種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
このデモは、赤いメインカラーのフレームを深い緑に、キャッチの帯をクリーム色に変え、メイン画像を静止画1枚にした「こんな使い方もできる」の見本です。

このデモを見る（別ウィンドウ）

まずは全体像から
このデモの構成

5つのページで構成しています。トップでお店の1日・パン・メニュー・席まで伝え、下のページは「何があるか」と「どこにあるか」の2つに分けています。

ホーム

ごあいさつ・カフェの1日・パンのこと・人気のメニュー・お客さまの声・席のこと・テラス席の案内・お知らせ。

メニュー

モーニング・ランチ・おやつの写真つきメニューと、ドリンク・おやつの価格。

お店のこと

住所・営業時間・電源の案内と地図、よくあるご質問。

お知らせ

SAMPLE CAFE からのお知らせ一覧です。

お問い合わせ

入力項目を自由に作れるフォーム。

デザインの土台
使っているフレーム

このデモで使っているフレームは 「pop1（丸い背景・帯キャッチ）」 です。

フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。

ヘッダーからメイン画像の上半分まで、下の角が大きく丸いメインカラーの背景が入るフレームです。キャッチは1行ずつ帯付きで、広い画面でも右上に丸い開閉ボタンが出ます。

フレームの見本から変えたところ

「デザイン → テーマカラー」で、メインカラーを赤から深い緑に、キャッチの帯の色（アクセントカラー）を黒からクリーム色に、薄い色（差し色）を生成り色にしています。さらに「メイン画像のタイプ」を「静止画」にしました。同じ丸い背景でも、にぎやかな印象から、落ち着いたカフェの印象に変わります。

本文の背景は白のままにして、色を付けたのは「カフェの1日」の帯だけです。緑はヘッダーとフッター、ボタンだけに出るので、写真の色がきれいに見えます。

写真の大きいパーツで、お店の空気を伝える

近所のパン屋さんのことは、写真2枚を重ねたコラージュ、窓ぎわの席のことは横幅いっぱいの写真と文章で見せています。最後は背景写真のCTAで、テラス席の案内からお問い合わせへつなげました。

「カフェの1日」は、時間・アイコン・説明を縦に並べるスケジュールのパーツです。「何時に行けば何があるか」がひと目で分かります。

ロゴは「画像」で入れています

このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ヘッダーとフッターが深い緑なので、白いロゴを使っています。

ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。

ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。

約50種類のフレームを見る

同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります

Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「pop1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。

夏祭り（実行委員会）
このデモの作り方

使用したパーツ

セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。

ホーム

セクション	使ったパーツ	Free版
朝ごはんを、ちゃんと食べてほしくて。	基本セット（見出し＋本文＋画像）
カフェの1日	スケジュール・1日の流れ
無料相談への誘導	パララックス背景（写真／動画）
お店のこと	コラージュ（写真2枚＋テキスト）
人気のメニュー	カタログ（写真＋価格ラベル）
お客さまの声	お客様の声（星評価）
スタジオのこと	横幅いっぱいレイアウト（テキスト＋写真）
サムネイル横スライド（写真の流れ）	サムネイル横スライド（写真の流れ）
ご予約・お申し込みへの誘導	CTAセクション（背景写真）
お知らせ	お知らせ一覧（自動）

メニュー／お店のこと

セクション	使ったパーツ	Free版
メニュー	コース・メニュー一覧
画像（1枚）	画像（1枚）
ドリンク	メニュー名と価格（2列）
おやつ	メニュー名と価格（2列）
お店のこと	アクセス（案内＋地図）
よくあるご質問	FAQ（クリックで開閉）（デザイン：枠つき・開くとアイコンが×に）

全15種類のパーツのうち、12種類は製品版でのみ使えるものです。スケジュール（1日の流れ）やコラージュ（写真2枚＋テキスト）、カタログ（写真＋価格ラベル）は製品版のパーツです。製品版では70種類以上のパーツが使えます。

パーツの一覧を見る

ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です

製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。

このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。

作るときの参考に
カフェのサイトで迷いやすいところ

このデモを作るときに考えたことを、いくつか書いておきます。

時間帯でメニューが変わるときは、どう見せればいいですか: このデモのように、トップに「カフェの1日」をスケジュールのパーツで置くのがおすすめです。モーニングの時間に行きたい人にも、すぐに伝わります。
メニューは全部、写真つきで載せるべきですか: 写真は人気の4品くらいで十分です。このデモでは、トップのカタログに4品、メニューのページは写真つき3品と、「メニュー名と価格」の2列で並べました。
Wi-Fiや電源のことは、書いたほうがいいですか: 書いておくと喜ばれます。このデモでは、トップで窓ぎわの席を写真つきで紹介し、「お店のこと」でも住所・営業時間と並べて案内しました。

この構成で作れるサイト
カフェ以外にも

このデモはカフェを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。

喫茶店／ベーカリーカフェ／ブックカフェ／コーヒースタンド／定食屋／キッチンカーなど、「毎日来てもらいたい、町の飲食店」であれば、そのまま当てはまります。

メインカラーを変えると、丸い背景とヘッダー、ボタン、フッターの色がまとめて変わります。

まずは無料で試せます
Free（無料版）のご案内

Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。

無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。

Free(無料版)をダウンロード

このデモをもう一度見る

製品版を購入する