ホーム
〇〇市の和菓子屋。季節の上生菓子、団子、羊羹、干菓子。贈答用の詰め合わせも。
<< デモ一覧に戻る
和菓子屋のデモ
- このページでは、Frames CMS の製品版で実際に作った和菓子屋のサイトをご紹介します。季節の上生菓子と、団子・羊羹などの定番の菓子をつくる老舗の和菓子屋を想定した、7ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ17種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、トップの縦書きのメッセージ（フレーム専用の「文字の素材」）を、和菓子屋の言葉に差し替えています。
まずは全体像から
このデモの構成
7つのページで構成しています。「季節のもの」と「いつもあるもの」をページで分けるのが、和菓子屋のサイトの基本の型です。
01
02
季節の上生菓子
月ごとに替わる練り切りと、夏の葛菓子。
03
お菓子
団子・羊羹・最中など、毎日つくっている定番の菓子。
04
贈り物
箱と詰め合わせのえらび方、のし・発送のご案内。
05
店のこと
店のあゆみと、店舗・喫茶のご案内。
06
お知らせ
菓子処 さんぷる からのお知らせ一覧です。
07
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「tategaki1（縦書きメッセージ・縦長の写真）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
暗い紺の背景に、縦書きのメッセージと縦長の写真が並ぶフレームです。背景には、水引のような飾りの画像が入ります。
縦書きのメッセージを差し替える
トップの縦書きの文章は、管理画面の「デザイン → このフレーム専用の素材」で書き換えられます。このデモでは「創業より百二十年、同じ場所で菓子をこしらえております。」としました。改行もそのまま縦書きに反映されます。
季節の上生菓子は「かわいい形のカラム」
練り切りの写真を、やわらかい形に切り抜いて並べるパーツです。和菓子のやさしい雰囲気と、よく合います。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ヘッダーが濃い色なので、白いロゴを使っています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「tategaki1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
着物レンタル
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ご挨拶 | 基本セット（見出し＋本文＋画像） | |
| ページへの入口 | オーバーレイ（画像リンク・横並び） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| お客さまより | お客様の声（横スクロール・文字だけ） | |
| お知らせ | お知らせ一覧（自動） |
季節の上生菓子／お菓子
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 季節の上生菓子 | かわいい形のカラム（自動幅・マスク選択） | |
| 画像（1枚） | 画像（1枚） | |
| スタジオのこと | テキスト＋写真2枚（角丸と丸） | |
| お菓子 | コース・クラス紹介（色の帯つきカード） | |
| お品書き（税込） | メニュー名と価格（2列） | |
| 喫茶でも | 横並び（写真＋文章） |
贈り物／店のこと
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 贈り物 | スポット紹介（テキスト＋段違いカード） | |
| ご注文の流れ | 特徴・ステップ（アイコン＋番号・枠つき） | |
| お知らせボックス | アラート（お知らせボックス） | |
| 店のあゆみ | 沿革・年表（タイムライン） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| 店舗と喫茶 | アクセス（案内＋地図） |
全17種類のパーツのうち、15種類は製品版でのみ使えるものです。かわいい形のカラムや沿革（タイムライン）、文字だけのお客さまの声は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
和菓子屋のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 月ごとに替わる菓子は、毎月更新しないといけませんか
- 1年分を最初に載せておく方法もあります。このデモの「季節の上生菓子」のように、月ごとの菓子を並べておけば、毎月の更新はお知らせ1本で済みます。
- 贈答品の注文方法は、どう書けばいいですか
- 「ご注文の流れ」を手順で見せるのがおすすめです。箱の種類・のし・発送の可否を、ページの上から順に読めば分かるようにしました。
- 暗い背景で、写真は見えにくくなりませんか
- むしろ菓子の色が引き立ちます。白い皿や明るい器に載せて撮ると、暗い背景の上でもくっきり見えます。
この構成で作れるサイト
和菓子屋以外にも
このデモは和菓子屋を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
茶舗／酒蔵／老舗の旅館／料亭／呉服店／伝統工芸の工房 など、「歴史のあるお店の、落ち着いた雰囲気」を出したいところであれば、そのまま当てはまります。
縦書きのメッセージは、「デザイン → このフレーム専用の素材」で、文の書き換えも非表示もできます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る