ホーム
〇〇市の花屋。花束、アレンジメント、鉢植え、お供えの花。配達もします。
<< デモ一覧に戻る
花屋のデモ
- このページでは、Frames CMS の製品版で実際に作った花屋のサイトをご紹介します。花束・アレンジメント・鉢植えを扱い、配達もする町の花屋を想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ14種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、トップに大小2枚の写真を重ね、その上の縦書きの一文（フレーム専用の「文字の素材」）を花屋の言葉に差し替えています。
まずは全体像から
このデモの構成
6つのページで構成しています。「何を」「いくらで」「どう頼むか」をページで分けています。
01
02
花束とアレンジ
花束・アレンジメント・鉢植えと、価格の目安。
03
ご注文
ご注文の流れと、配達について。
04
お店について
お店のこと、アクセス。
05
お知らせ
はなや さんぷるからのお知らせ一覧です。
06
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「collage1（写真2枚のコラージュ）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
左にキャッチ、右に大小2枚の写真を重ねたフレームです。写真の上に縦書きの短い一文、キャッチの下に手書き風のイラストが入ります。メイン画像は静止画2枚です。
縦書きの一文とイラスト
「デザイン → このフレーム専用の素材」で、写真の上の縦書きの一文を書き換えられます。このデモでは「贈る人の顔を、思いうかべて。」にしました。キャッチの下のイラストは、花屋の雰囲気に合わせて「この素材を使わない」にしています（差し替えもできます）。
花束とアレンジは「カタログ」
写真と価格のラベルを並べるパーツです。「〇〇円〜」の目安を書いておくと、注文の相談がしやすくなります。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ロゴが小さく見えたので、「ロゴの大きさ」を「大きめ（120%）」にしています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「collage1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
パン教室
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 今週の花 | 横長レイアウト（テキスト＋写真） | |
| こんなときに | 横スクロールのカード（手で動かす） | |
| はなや さんぷるの花 | 写真が止まるブロック（順に重なる） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| LINEのご案内 | LINE誘導セクション（QR＋ボタン） | |
| お知らせ | お知らせ一覧（自動） |
花束とアレンジ／ご注文
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 花束とアレンジ | カタログ（写真＋価格ラベル） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| よくあるご質問 | FAQ（クリックで開閉）（デザイン：枠つき・開くとアイコンが×に） | |
| ご注文の流れ | 特徴・ステップ（アイコン＋番号・枠つき） | |
| 配達について | 表（項目と内容） |
お店について
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| お店について | コラージュ（写真2枚＋テキスト） | |
| 画像（1枚） | 画像（1枚） | |
| アクセス | 店舗情報（写真＋情報＋地図） |
全14種類のパーツのうち、11種類は製品版でのみ使えるものです。カタログや写真が止まるブロック、店舗情報（写真＋情報＋地図）は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
花屋のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- その日の花で作るので、写真と同じものは作れません
- 「写真は一例です。その日の花でお作りします」と一言添えておけば大丈夫です。
- 配達料は、どう書けばいいですか
- 地域ごとの料金を表にするのがおすすめです。このデモでは「5,500円以上で無料」も一緒に書きました。
- LINEで注文を受けたいのですが
- このデモのように、LINE誘導セクションでご案内できます。できあがりの写真を送れるのも、LINEのいいところです。
この構成で作れるサイト
花屋以外にも
このデモは花屋を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
雑貨店／ギフトショップ／ハンドメイド作家／カフェ／ケーキ屋／アトリエ など、「やさしい雰囲気で、商品を写真と価格で見せたい」お店であれば、そのまま当てはまります。
縦書きの一文とイラストは、「デザイン → このフレーム専用の素材」で、差し替えも非表示もできます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る