ホーム
〇〇市の洋菓子店。生ケーキ・焼き菓子・デコレーションケーキ。
<< デモ一覧に戻る
洋菓子店のデモ
- このページでは、Frames CMS の製品版で実際に作った洋菓子店のサイトをご紹介します。生ケーキと焼き菓子、デコレーションケーキの予約を受ける洋菓子店を想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ15種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、メイン画像も、パーツの写真も、ふんわりした形に切り抜いて並べる、かわいい雰囲気のフレームを使っています。
まずは全体像から
このデモの構成
6つのページで構成しています。「毎日のケーキ」と「予約のケーキ」をページで分けるのが、洋菓子店のサイトの基本の型です。
01
02
ケーキと焼き菓子
毎日のケーキと、日持ちのする焼き菓子。
03
デコレーションケーキ
お誕生日や記念日のケーキ。サイズと価格、ご予約の流れ。
04
お店について
パティシエのご紹介と、店舗・イートインのご案内。
05
お知らせ
Pâtisserie Sample からのお知らせ一覧です。
06
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「dotblob1（ふんわり形の写真と点線の枠・角丸の箱）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
メイン画像がふんわりした形に切り抜かれ、その外側をずらした点線の枠が囲むフレームです。メニューは丸いボタンの形で並びます。
ケーキは「かわいい形のカラム」と「丸く流れる写真」
ショーケースのケーキは、やわらかい形に切り抜いたカラムと、丸い写真が横に流れるパーツで見せています。フレームの形と合わせると、ページ全体がかわいくまとまります。
デコレーションケーキは、サイズ別のプラン比較表
4号・5号・6号をプラン比較表で並べ、人数の目安と価格を1つの表にしています。「何号を頼めばいいか」が、ひと目で分かります。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。トップの写真の上にも、同じ色つきのロゴを重ねています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「dotblob1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
パンケーキ店
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 今日のおすすめ | かわいい形のカラム（自動幅・マスク選択） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| お客さまの声 | お客様の声（星評価） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| お知らせ | お知らせ一覧（自動） |
ケーキと焼き菓子／デコレーションケーキ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ケーキ | カタログ（写真＋価格ラベル） | |
| 焼き菓子（日持ち 7〜14日） | メニュー名と価格（2列） | |
| 季節のケーキ | ピックアップギャラリー（大1枚＋小2枚） | |
| デコレーションケーキ | 料金表（プラン比較） | |
| 画像（1枚） | 画像（1枚） | |
| ご予約の流れ | ステップ案内（横4列・アイコン） | |
| お知らせボックス | アラート（お知らせボックス） |
お店について
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| お店について | コラージュ（写真2枚＋テキスト） | |
| 店舗のご案内 | 店舗情報（写真＋情報＋地図） | |
| LINE友だち追加ボタン（単体） | LINE友だち追加ボタン（単体） |
全15種類のパーツのうち、14種類は製品版でのみ使えるものです。かわいい形のカラムやサムネイル横スライド、プラン比較表は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
洋菓子店のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 毎日替わるケーキは、どう載せればいいですか
- 定番のケーキだけを載せ、季節のケーキはお知らせで、と分けると更新が楽です。「本日のラインナップはSNSで」と書き添えるのもおすすめです。
- 予約の締め切りは、どこに書けばいいですか
- デコレーションケーキのページの、いちばん上に書きます。このデモでは、メイン画像のキャッチにも「お誕生日のケーキは、3日前までに。」と入れました。
- アレルギーの表示は必要ですか
- 店頭で表示しているなら、「アレルギーについては店頭でお尋ねください」と一言入れておくと安心です。
この構成で作れるサイト
洋菓子店以外にも
このデモは洋菓子店を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
パン屋／カフェ／チョコレート専門店／アイスクリーム店／キッチンカー／子ども向けの教室 など、「かわいい雰囲気で、写真をたくさん見せたい」お店であれば、そのまま当てはまります。
点線の枠の色は、テーマカラーに合わせて変わります。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る