ホーム
ごあいさつ・ふわふわの理由・人気のメニュー・モーニング・お客さまの声・店内・アクセス・予約の案内・お知らせ。
<< デモ一覧に戻る
パンケーキ店のデモ
- このページでは、Frames CMS の製品版で実際に作ったパンケーキ店のサイトをご紹介します。注文を受けてから焼く、ふわふわのパンケーキの専門店を想定した、5ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ16種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、ピンクのメインカラーのフレームをキャラメル色に、箱の中をクリームがかった白に変え、メイン画像を静止画1枚にした「こんな使い方もできる」の見本です。
まずは全体像から
このデモの構成
5つのページで構成しています。トップでこだわり・メニュー・店内・アクセスまで伝え、下のページは「何があるか」と「どこにあるか」の2つに分けています。
01
02
メニュー
写真つきのパンケーキ3品と、そのほかのパンケーキ・ドリンクの価格。
03
お店のこと
住所・営業時間・ベビーカーの案内と地図、よくあるご質問。
04
お知らせ
pancake SAMPLE からのお知らせ一覧です。
05
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「dotblob1（ふんわり形の写真と点線の枠・角丸の箱）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
メイン画像がふんわりした形に切り抜かれ、その外側をずらした点線の枠が囲むフレームです。本文のブロックは角の丸い箱に入り、メニューは中央に並びます。メインカラーが、そのままページの背景の色になります。
フレームの見本から変えたところ
「デザイン → テーマカラー」で、ページの背景になるメインカラーをピンクからキャラメル色に、アクセントカラーを赤みのある茶色に、背景色（角の丸い箱の中と点線の枠）をクリームがかった白にしています。さらに「メイン画像のタイプ」を「静止画」にしました。同じかわいい形でも、焼き菓子のようなあたたかい印象になります。
このフレームはメインカラーがページ全体の背景になるので、あざやかな色より、やわらかい色が合います。
こだわりは番号つきの枠、店内は大きな写真で
「ふわふわの理由」は、アイコンと番号の入った枠を3つ並べています。モーニングは横幅いっぱいの写真と文章、店内は大きい写真1枚と小さい写真2枚のピックアップギャラリーで見せました。
アクセスは、写真・表・地図をまとめて出すパーツです。トップだけで、来店に必要なことがそろいます。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ヘッダーとフッターはキャラメル色の上なので色つきのロゴ、トップは写真の上に重なるので、「メイン画像の上に重ねるロゴ（任意）」に白いロゴを入れています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「dotblob1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
洋菓子店
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ひと皿ずつ、焼きあがるまで20分。 | 基本セット（見出し＋本文＋画像） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| ふわふわの理由 | 特徴・ステップ（アイコン＋番号・枠つき） | |
| 人気のメニュー | カタログ（写真＋価格ラベル） | |
| スタジオのこと | 横幅いっぱいレイアウト（テキスト＋写真） | |
| お客さまの声 | お客様の声（星評価） | |
| 店内 | ピックアップギャラリー（大1枚＋小2枚） | |
| 画像（1枚） | 画像（1枚） | |
| アクセス | 店舗情報（写真＋情報＋地図） | |
| お問い合わせへの誘導 | CTA（大きなアイコン＋テキスト＋ボタン） | |
| お知らせ | お知らせ一覧（自動） |
メニュー／お店のこと
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| パンケーキ | コース・メニュー一覧 | |
| そのほかのパンケーキ | メニュー名と価格（2列） | |
| ドリンク | メニュー名と価格（2列） | |
| お店のこと | アクセス（案内＋地図） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| よくあるご質問 | FAQ（クリックで開閉） |
全16種類のパーツのうち、13種類は製品版でのみ使えるものです。特徴・ステップ（アイコン＋番号・枠つき）やピックアップギャラリー、店舗情報（写真＋情報＋地図）は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
パンケーキ店のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 焼き上がりまで時間がかかることは、書いたほうがいいですか
- 書いておくほうが安心してもらえます。このデモでは、「ひと皿ずつ、焼きあがるまで20分。」をトップのごあいさつにして、待ち時間をお店のこだわりとして伝えています。
- 子ども連れのお客さまが多いのですが
- ベビーカーで入れるかどうかを、店内の紹介や「お店のこと」に書いておくのがおすすめです。来る前にいちばん気になるところです。
- 予約できる日とできない日があるときは
- このデモのように、トップの最後に「土日は予約できます」と誘導を置き、平日は予約なしで来られることも一緒に書いておくと迷われません。
この構成で作れるサイト
パンケーキ店以外にも
このデモはパンケーキ店を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
カフェ／洋菓子店／ジェラート店／クレープ店／フルーツパーラー／焼き菓子の店 など、「やわらかい雰囲気で、写真と価格を見せたい」お店であれば、そのまま当てはまります。
このフレームでは、メインカラーがページの背景の色になります。点線の枠の色は、背景色に合わせて変わります。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る