ホーム
コンセプト、新しく入荷した家具（価格つき）、家具と道具のページへの入口、暮らしの道具のおすすめ（横スクロール）、オーダー家具の案内、お客様の声、お知らせ、来店予約。
<< デモ一覧に戻る
インテリア雑貨・家具店のデモ
- このページでは、Frames CMS の製品版で実際に作ったインテリア雑貨・家具店のサイトをご紹介します。無垢材の家具と、器や花瓶などの暮らしの道具を扱うお店を想定した、7ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ20種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、本文の横の列にメニューとサイドバーを置いた2カラムです。メニューを見出しでグループ分けし、その下に全ページ共通の「サイドバー」（相談会の案内・来店予約・営業時間）を置いています。
まずは全体像から
このデモの構成
7つのページで構成しています。「売っているもの」「つくれるもの」「お店のこと」をページで分けるのが、お店のサイトの基本の型です。
01
02
家具
ソファ・チェア・テーブル・ベッドを写真と価格で。コーディネート例の写真、木の種類とお手入れの表、よくあるご質問。
03
暮らしの道具
器・花瓶・額などを写真と価格で。店内の様子のギャラリーと、在庫についてのお知らせボックス。
04
オーダー家具
ご相談から納品までの流れ（写真つき）、木の種類ごとの価格の目安の表、よくあるご質問。
05
店舗案内
お店の写真、営業時間の曜日表、スタッフからのひとこと、店舗情報（写真・情報・地図を1つに）。
06
お知らせ
入荷のご案内や、相談会・展示のお知らせなど。記事を追加すると一覧と詳細が自動で作られます。
07
お問い合わせ
入力項目を自由に作れるフォーム。来店予約の日時や、オーダーしたい家具の寸法を書いてもらう欄を足すと、話が早く進みます。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「mix5-c2（ヘッダーに電話番号・横の列にメニューとサイドバーの2カラム）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
ヘッダーの右に電話番号と受付時間を出し、メイン画像の下は本文と、横の列の2カラムになるフレームです。横の列の上にメニュー、その下にサイドバーが並びます。スマホでは、メニューは開閉式に、サイドバーは本文の下に並びます。
メニューを「見出し」でグループ分け
このデモのメニューは、「商品」「サービス」「お店について」の3つにグループ分けしています。管理画面のメニュー編集で、リンクの種類を「見出し（リンクなし）」にすると作れます。見出しの下に入れたいページは、そのページの「親メニュー」で見出しを選びます。
メニューの名前の下には、「FURNITURE」「ORDER」のような英語の小さな表記も入れています。メニュー編集の「サブ表記」に入れるだけです。
1カラムのフレームに切り替えると、見出しはプルダウンメニューの親になり、下のページはプルダウンの中に入ります。どちらのフレームでも、メニューの中身はそのまま使えます。
メニューの下の「サイドバー」
メニューの下には、全ページ共通で出る「サイドバー」を置いています。このデモでは「インテリア相談会」の案内（写真を押すと店舗案内のページへ）、来店予約のボタン、営業時間の3つ。どのページを見ている人にも、来店のきっかけが目に入るようにしました。
中身は、管理画面の「サイドバー」で、ふだんのページと同じようにパーツを並べるだけです。サイドバーの位置は、管理画面の「デザイン」で左・右を切り替えられます。
サイドバーは、2カラムのフレームで使えます。1カラムのフレームに切り替えると表示されなくなりますが、中身は消えません。2カラムに戻せば、また表示されます。
メイン画像は3枚。1枚ごとに見せ方を変えています
メイン画像はスライドショーにして、3枚それぞれでキャッチの位置（左・右・中央）や、キャッチの背景、画像の明るさを変えています。写真の明るい場所・暗い場所に合わせて、文字が読みやすい置き方を1枚ずつ選べます。
このデモでは、色を3つ変えています
mix5-c2 の標準の配色は緑とオレンジですが、木の家具の写真に合うようにチャコール（メインカラー）・ウォルナットのような茶色（アクセントカラー）・生成り（薄い色）に変更しました。変更したのは管理画面の「デザイン → テーマカラー」で、カラーピッカーから色を3つ選んだだけです。
見出しの下線、カタログの価格ラベル、ボタンやフッターがチャコールに、価格の目安の表の見出しが茶色に、背景つきのセクションが生成りになっています。写真の色に合わせて、色数を絞ると、商品が引き立ちます。
変えた色だけが保存される仕組みになっています。あとから別のフレームに切り替えても、変更していない色はそのフレーム本来の配色が生きます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「mix5-c2」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
リフォーム会社
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| コンセプト | 基本セット（見出し＋本文＋画像） | |
| 新しく入荷した家具 | カタログ（写真＋価格ラベル） | |
| 家具・暮らしの道具への入口 | オーバーレイ（写真＋テキスト＋ボタン） | |
| 暮らしの道具から | 横スクロールのカード（手で動かす） | |
| 流れる英文字 | 横流れテキスト（マーキー） | |
| オーダー家具の案内 | テキスト＋写真2枚（角丸と丸） | |
| お客様の声 | お客様の声（星評価） | |
| お知らせ | お知らせ一覧（自動） | |
| 来店予約 | CTAセクション（背景写真） |
家具／暮らしの道具
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 商品の一覧（写真と価格） | カタログ（写真＋価格ラベル） | |
| コーディネート例 | サムネイルギャラリー（クリックで大画像切替） | |
| 木の種類とお手入れ | 表（項目と内容） | |
| よくあるご質問（家具） | FAQ（クリックで開閉）（デザイン：線で区切る・右に＋） | |
| 店内の様子 | ギャラリー（複数画像） | |
| 在庫についてのお知らせ | アラート（お知らせボックス） |
オーダー家具／店舗案内
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ご相談から納品まで | ステップ案内（縦・番号＋画像） | |
| 価格の目安（4列の表） | 多列テーブル（自由な列数） | |
| よくあるご質問（オーダー家具） | FAQ（クリックで開閉）（デザイン：枠つき・開くとアイコンが×に） | |
| 営業時間 | 営業時間・曜日表（デザイン：枠線・角丸） | |
| スタッフより | 汎用レイアウト（画像＋テキスト・配置選択） | |
| 店舗情報（写真＋情報＋地図） | 店舗情報（写真＋情報＋地図） |
サイドバー（全ページ共通）
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| インテリア相談会・営業時間 | 基本セット（見出し＋本文＋画像） | |
| 来店予約のボタン | ボタン（単体） |
全20種類のパーツのうち、14種類は製品版でのみ使えるものです。とくにカタログ（写真＋価格ラベル）は、商品を写真と価格で並べたいお店のサイトに欠かせません。製品版では70種類以上のパーツが使えます。
パーツの小ワザ
「カタログ（写真＋価格ラベル）」は、列の数を選べるパーツです。このデモでは、ホームの新着を4列、家具のページを3列にしています。商品の数を、列の数の倍数にそろえる（4列なら4つ・8つ、3列なら3つ・6つ）と、最後の段に空きができず、きれいに並びます。
サイドバーの「インテリア相談会」は、基本セットの「画像のリンク先」に店舗案内のページを入れて、写真を押すとページへ移るバナーにしています。サイドバーの小さな写真は、押したくなる場所に置くと効果的です。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
家具・雑貨のお店のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 価格はサイトに載せるべきでしょうか
- 載せた方が、来店につながりやすくなります。家具は高い買い物なので、「行ってみたら予算と合わなかった」を避けたい方が多いからです。
このデモでは、家具は1点ずつの価格を、器や花瓶は「〜」をつけた目安の価格を載せました。オーダー家具は「大きさの例」と木の種類ごとの価格の目安を表にしています。 - 一点ものや、売り切れた商品はどうすればいいですか
- 在庫が入れ替わる商品は、サイトに「在庫はお問い合わせください」と書いておくのがおすすめです。このデモでは、暮らしの道具のページにアラート（お知らせボックス）で一言置きました。
売り切れのたびにサイトを直さなくて済むように、サイトには「定番」を載せ、入荷のお知らせはお知らせ記事で、と分けておくと更新が楽です。 - ネットショップとは何が違いますか
- このデモは、お店に来てもらうためのサイトです。カートや決済はありません。
家具は「座ってみたい」「色を見たい」という方が多いので、来店予約やインテリア相談会への誘導をサイドバーとホームの最後に置いています。ネットショップをお持ちの場合は、ボタンのリンク先をネットショップにすることもできます。 - 商品の写真は、どう撮ればいいですか
- 同じ商品群は、同じ背景・同じ明るさで撮るのがいちばん大事です。カタログのように並べたとき、写真の雰囲気がそろっているだけで、ぐっとお店らしくなります。
もう一つは、実際の部屋に置いた写真。このデモの「コーディネート例」のように、使っている様子が分かる写真があると、自分の部屋に置いたときを想像しやすくなります。 - 配送エリアや送料は、どこに書けばいいですか
- よく聞かれることなので、商品のページのよくあるご質問に入れておくのがおすすめです。このデモでは、家具のページのご質問に「〇〇市内と近隣は、配送と組み立て・梱包材の引き取りまで無料」と書きました。
大きな家具は、配送や組み立てまで頼めるかどうかで選ぶ方も多いので、無料の範囲と、それ以外の地域の扱いを一緒に書いておくと安心してもらえます。
この構成で作れるサイト
家具・雑貨のお店以外にも
このデモはインテリア雑貨・家具店を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
器のギャラリー／花屋／セレクトショップ／古道具店／木工房・家具工房／ハンドメイド作家のお店／カフェ併設の雑貨店 など、「商品を写真と価格で見せて、お店に来てもらいたい」ところであれば、そのまま当てはまります。
横の列にメニューとサイドバーを置く2カラムのフレームは、商品の種類やページが多いお店に向いています。1カラムのフレームに切り替えることも、あとからいつでもできます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
Free版にも、2カラムのフレームと「サイドバー」を試せる「司法書士事務所」があります。メニューの見出しとサイドバーが最初から入っているので、使い勝手を確かめるのにおすすめです。
<< デモ一覧に戻る