ホーム
ごあいさつ・新入荷・コーディネート・アフターサービス・一枚板・お客さまの声。
<< デモ一覧に戻る
インテリアショップのデモ
- このページでは、Frames CMS の製品版で実際に作ったインテリアショップのサイトをご紹介します。国内の工房の家具と、暮らしの道具を扱うインテリアショップを想定した、5ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ15種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、雑貨店のデモと同じフレームを、テラコッタのメインカラーからチャコールブラウンに、アクセントをゴールドに変えています。メイン画像はキャッチ入りの静止画1枚、メニューはサブ表記なしで、「商品」「お店のこと」の下に、ページ内の各セクションへ飛ぶプルダウン（子メニュー）を入れています。
まずは全体像から
このデモの構成
5つのページで構成しています。「何が置いてあるか」「どんなお店か」の2つのページと、トップページの新入荷・コーディネート・一枚板で、お店に行ってみたくなる構成です。
01
02
商品
4つの商品のジャンルと、お届けについて。
03
お店のこと
お店の写真と、住所・営業時間・地図。
04
お知らせ
SAMPLE LIVING からのお知らせ一覧です。
05
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「linemenu1（文字サイズ切り替え・下線のメニュー）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
画面の一番上にメインカラーの線、ロゴの右に「文字サイズ 小・大」の切り替えが付くフレームです。メニューは同じ幅で並び、表示中のページに線が付きます。メイン画像は左右に余白のある横長です。
メインカラーをチャコールブラウンに、メイン画像は静止画1枚
「デザイン → テーマカラー」で、メインカラーをチャコールブラウン（標準はテラコッタ）、アクセントカラーをゴールド、薄い色（差し色）をごく淡いベージュに変えています。上の線・表示中のメニューの線・フッターがチャコールブラウンになり、木の家具の写真が引き立ちます。メイン画像は、「メイン画像のタイプ」で静止画（標準はスライドショー）にして、キャッチとボタンを載せました。
新入荷は「横スクロールのカード」、コーディネートは「コラージュ」
新しく入った商品は、指やトラックパッドで横に動かして見るカードです。数が増えても、トップが長くなりません。コーディネートは、大小2枚の写真と文章を重ねるコラージュを、写真を右にして使っています。
一枚板は「テキスト＋写真2枚」、声は横スクロール
一枚板のテーブルは、角を大きく丸めた写真と、丸い写真を重ねるパーツで、テーブルと木目のアップを並べました。お客さまの声は、横にスクロールする文字だけのカード。最後は木目の写真の上に、お問い合わせへの誘導を重ねています。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ヘッダーは白なので色つきのロゴ、フッターはチャコールブラウンなので、「フッター用ロゴ（任意）」に白いロゴを入れています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「linemenu1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
雑貨店
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 長く使うほど、好きになる家具。 | 基本セット（見出し＋本文＋画像） | |
| 画像（1枚） | 画像（1枚） | |
| 新しく入ったもの | 横スクロールのカード（手で動かす） | |
| コーディネート | コラージュ（写真2枚＋テキスト） | |
| 買ったあとも、ずっと | 特徴・サービス（アイコン3列） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| 一枚板のテーブル | テキスト＋写真2枚（角丸と丸） | |
| お客さまの声 | お客様の声（横スクロール・文字だけ） | |
| お問い合わせへの誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
商品／お店のこと
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 商品 | 縦線で区切ったカード | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| お届けについて | 表（項目と内容） | |
| お店のこと | ピックアップギャラリー（大1枚＋小2枚） | |
| 店舗情報 | 店舗情報（写真＋情報＋地図） |
全15種類のパーツのうち、12種類は製品版でのみ使えるものです。横スクロールのカードやコラージュ（写真2枚＋テキスト）、テキスト＋写真2枚（角丸と丸）は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
家具・インテリアのお店のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 在庫が入れ替わるので、商品をぜんぶ載せられません
- 商品はジャンルごとに見せて、「在庫はお問い合わせください」と添えるのがおすすめです。新しく入ったものだけ、トップの横スクロールのカードで入れ替えます。
- 値段は載せたほうがいいですか
- 「〇〇円〜」と目安だけでも載せておくと、問い合わせのハードルが下がります。このデモでは、新入荷のカードに素材と価格を一行で入れました。
- 配送や修理のことは、どこに書けばいいですか
- トップに「買ったあとも、ずっと」のような3つのアイコンで短く書き、くわしい料金は商品のページの表にまとめます。
この構成で作れるサイト
インテリアショップ以外にも
このデモはインテリアショップを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
家具店／雑貨店／器のお店／照明のお店／古道具店／工房のショールーム など、「実物を見に来てほしい、落ち着いた雰囲気のお店」であれば、そのまま当てはまります。
「文字サイズ 小・大」の切り替えは、フレームに付いているもので、どのページにも出ます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る