ホーム
ハーブティーと精油のお店。ブレンドのワークショップも。
<< デモ一覧に戻る
ハーブ＆アロマショップのデモ
- このページでは、Frames CMS の製品版で実際に作ったハーブ＆アロマショップのサイトをご紹介します。ハーブティーと精油を量り売りし、ワークショップも開く小さなお店を想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ17種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、フレームの見本の明るい緑のメインカラーを、ハーブの写真になじむ深いセージグリーンに変え、メイン画像を静止画からスライドショーにしています。キャッチの上の飾り文字は「使わない」にしました。
まずは全体像から
このデモの構成
6つのページで構成しています。トップでお店の想いから商品・ワークショップまでを一通り見せ、「商品」「ワークショップ」「お店」でそれぞれをくわしく伝える構成です。
01
02
商品
ハーブティー・精油・キャンドル。
03
ワークショップ
ブレンドと、キャンドルづくり。
04
お店
お店とアクセス。
05
お知らせ
herb shop SAMPLE からのお知らせ一覧です。
06
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「arch1（曲線の写真＋飾り文字）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
右に下辺がゆるやかな曲線の写真、左にキャッチが入るフレームです。見出しの上の小さな英語（装飾テキスト）は、アーチ状に出ます。
フレームの見本から変えたところ
管理画面の「デザイン → テーマカラー」で、メインカラーを明るい緑から深いセージグリーンに、アクセントカラーをやわらかい金色に、薄い色（差し色）を淡い緑に、背景色をほんのり温かい白にしています。「トップの大きな画像 → メイン画像のタイプ」は「スライドショー」にして、ハーブと精油の写真3枚が切り替わるようにしました。キャッチの上の手書き風の飾り文字は、「デザイン → このフレーム専用の素材」で「この素材を使わない」にしています。
写真の大きいセクションで、お店の空気を伝える
トップの中ほどに、テキスト＋写真2枚（角丸と丸）で店主のブレンドを、オーバーレイ（写真＋テキスト＋ボタン）で横幅いっぱいの写真にワークショップとおうちでの楽しみ方を重ねています。小さな商品カードだけでは伝わらない「行ってみたい」気持ちを、写真で引き出す並びです。
商品は「カタログ」と「メニュー名と価格」
トップの人気の商品は、写真に価格のラベルが付くカタログを4列で、商品のページは定番の3つをコース・メニュー一覧で、すべての商品は「メニュー名と価格」の2列で並べています。
写真の代わりに「動画」も置けます
トップの中ほどの、スクロールに合わせて背景が動くブロック（effects-bg-slideup）には、写真の代わりにMP4の動画を入れています。湯気がハーブの花の絵に変わっていく動画で、ページに動きが出ます。管理画面では、写真と同じ欄に動画をアップするだけです。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。背景が明るいので、色つきのロゴを使っています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「arch1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
ネイルサロン
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 一杯のお茶から、香りのある毎日を。 | 基本セット（見出し＋本文＋画像） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| お店のこと | 特徴・サービス（アイコン3列） | |
| 店主のブレンド | テキスト＋写真2枚（角丸と丸） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| 人気の商品 | カタログ（写真＋価格ラベル） | |
| ワークショップ・おうちで | オーバーレイ（写真＋テキスト＋ボタン） | |
| お客さまの声 | お客様の声（横スクロール・文字だけ） | |
| ワークショップの予約への誘導 | CTA（大きなアイコン＋テキスト＋ボタン） | |
| お知らせ | お知らせ一覧（自動） |
商品
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 商品 | 基本セット（見出し＋本文＋画像） | |
| 定番の3つ | コース・メニュー一覧 | |
| 価格表 | メニュー名と価格（2列） |
ワークショップ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ワークショップ | 横並び（写真＋文章） | |
| 画像（1枚） | 画像（1枚） | |
| 当日の流れ | ステップ案内（縦・番号＋画像） | |
| よくあるご質問 | FAQ（クリックで開閉） |
お店
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| お店 | 基本セット（見出し＋本文＋画像） | |
| アクセス | 店舗情報（写真＋情報＋地図） |
全17種類のパーツのうち、14種類は製品版でのみ使えるものです。オーバーレイ（写真＋テキスト＋ボタン）やカタログ（写真＋価格ラベル）、店舗情報（写真＋情報＋地図）は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
小さなお店のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 精油やハーブの効き目は、どこまで書いていいですか
- 「〇〇に効く」のような効果・効能の表現は避けるのが安全です。このデモでも、商品は名前・量・価格と、香りの特徴や飲むタイミングだけにしました。詳しくは、薬機法の広告のルールをご確認ください。
- ワークショップの予約は、どう受ければいいですか
- このデモでは、メニューの「ご予約」をボタンにし、トップの最後にも予約への誘導を置いて、どちらもお問い合わせフォームにつないでいます。ワークショップのページには、当日の流れとよくある質問を書いておくと、申し込む前の不安がなくなります。
- ネットショップがないのですが、価格は載せたほうがいいですか
- 載せたほうが、来店のきっかけになります。このデモでは「価格はすべて税込です」と一言添えて、商品と価格を2列で並べました。
この構成で作れるサイト
ハーブ＆アロマショップ以外にも
このデモはハーブ＆アロマショップを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
雑貨店／お茶の専門店／花屋／石けん・コスメの工房／キャンドルの教室／量り売りの食料品店 など、「商品を売りながら、ワークショップも開いている」お店であれば、そのまま当てはまります。
メイン画像のタイプを切り替えても、入力した写真や文章はそのまま残ります。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る