ホーム
〇〇市のパン屋。国産小麦と自家製酵母のパンを、毎日40種類。
<< デモ一覧に戻る
パン屋のデモ
- このページでは、Frames CMS の製品版で実際に作ったパン屋のサイトをご紹介します。国産小麦と自家製酵母のパンを毎日40種類焼く、町のパン屋を想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ14種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、メイン画像の左上がロゴの形に欠け、右下で円形の英文が回るフレームを使っています。回る英文は、パン屋の言葉に差し替えています。
まずは全体像から
このデモの構成
6つのページで構成しています。「何時に何が焼けるか」を1ページにしているのが、このデモのポイントです。
01
02
パン
パンの種類と価格。
03
焼き上がり時間
パンの焼き上がり時間と、取り置きのご予約。
04
お店について
お店の話、これまでのこと、アクセス。
05
お知らせ
BAKERY SAMPLE からのお知らせ一覧です。
06
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「notch1（ロゴの欠けがあるメイン画像・回る文字）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
メイン画像は角丸で、左上がロゴの大きさに合わせて欠けるフレームです。右下では円形の文字がゆっくり回り、右端に縦書きのボタンが出ます。
焼き上がり時間は「スケジュール」
時刻とアイコンを縦に並べるパーツで、1日の焼き上がりの時間を見せています。「この時間に行けば焼きたてが買える」が伝わると、来店のきっかけになります。
人気のパンは「ランキング」
写真に順位の数字が付くパーツです。初めての人が「何を買えばいいか」迷わずに済みます。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。トップの写真の上にも、同じ色つきのロゴを使っています。ロゴが小さく見えたので、「ロゴの大きさ」を「大きめ（120%）」にしています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「notch1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
社会保険労務士事務所
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 人気のパン | ランキング | |
| 画像（1枚） | 画像（1枚） | |
| わたしたちのパン | 写真が止まるブロック（ふわっと切り替え） | |
| ピックアップ | ピックアップギャラリー（大1枚＋小2枚） | |
| お知らせ | お知らせ一覧（自動） |
パン／焼き上がり時間
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| パン | 縦線で区切ったカード | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| 価格（税込） | メニュー名と価格（2列） | |
| 焼き上がり時間 | スケジュール・1日の流れ | |
| お問い合わせへの誘導 | CTA（大きなアイコン＋テキスト＋ボタン） |
お店について
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| お店について | 写真に文章が回り込む横長ブロック | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| これまでのこと | 沿革・年表（タイムライン） | |
| アクセス | アクセス（案内＋地図） |
全14種類のパーツのうち、13種類は製品版でのみ使えるものです。ランキングや写真が止まるブロック、スケジュールは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
パン屋のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 売り切れることが多いのですが、価格を載せてもいいですか
- 載せて大丈夫です。「売り切れしだい終了」とフッターに書いておくと、トラブルになりません。
- 取り置きは、どう案内すればいいですか
- このデモのように、大きなアイコンのCTAで「取り置きできます」と見せ、電話番号を添えるのがいちばん伝わります。
- 毎日替わるパンは、どう載せればいいですか
- 定番のパンだけをサイトに載せ、季節のパンはお知らせで、と分けておくと更新が楽です。
この構成で作れるサイト
パン屋以外にも
このデモはパン屋を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
洋菓子店／カフェ／ベーグル専門店／コーヒースタンド／お惣菜屋／ジェラート店 など、「毎日来てもらいたい、町の小さなお店」であれば、そのまま当てはまります。
回る円形の文字は、「デザイン → このフレーム専用の素材」で、文の書き換えも非表示もできます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る