ホーム
器・ガラス・キッチン道具と、暮らしの小物のお店。店頭とオンラインで。
<< デモ一覧に戻る
雑貨店のデモ
- このページでは、Frames CMS の製品版で実際に作った雑貨店のサイトをご紹介します。器・ガラス・キッチン道具と暮らしの小物を扱う、店頭とオンラインのお店を想定した、8ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ19種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、メニューの「商品」を見出しにして、その下に3つの商品ページをまとめています。広い画面では、プルダウンメニューになります。
まずは全体像から
このデモの構成
8つのページで構成しています。商品のページを種類ごとに分け、メニューの「商品」の下にまとめるのがポイントです。
01
02
器とガラス
作家ものの器と、吹きガラスのグラス。
03
キッチンの道具
木のカトラリー、鍋、保存びんなど、長く使えるキッチンの道具。
04
香りと暮らし
キャンドル・石けん・額など、部屋に置く小物。
05
お店について
店の成り立ちと、スタッフ・店舗のご案内。
06
ご利用ガイド
送料・お支払い・お届けまでの日数・返品について。
07
お知らせ
Sample Kurashi Store からのお知らせ一覧です。
08
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「linemenu1（文字サイズ切り替え・下線のメニュー）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
ヘッダーに文字サイズの切り替えがあり、メニューは下線の入ったタブのような形で並ぶフレームです。メニューの名前の下に、小さな英語（サブ表記）が入ります。
メニューを「見出し」でまとめる
メニュー編集で、リンクの種類を「見出し（リンクなし）」にした「商品」の下に、「器とガラス」「キッチンの道具」「香りと暮らし」の3ページを入れています。1カラムのフレームでは、見出しがプルダウンの親になります。
商品ごとに、並べ方を変える
器はサムネイルで大きな写真を切り替え、キッチンの道具は縦線で区切ったカード、香りの小物は横スクロールのカード。同じ「商品の一覧」でも、パーツを変えるとページごとに表情が変わります。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「linemenu1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
インテリアショップ
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 取り扱っているもの | 縦線で区切ったカード | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| 流れる英文字 | 横流れテキスト（マーキー） | |
| 今月の新入荷 | 横スクロールのカード（手で動かす） | |
| お問い合わせへの誘導 | CTA（大きなアイコン＋テキスト＋ボタン） | |
| お知らせ | お知らせ一覧（自動） |
器とガラス／キッチンの道具／香りと暮らし
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 器とガラス | サムネイルギャラリー（クリックで大画像切替） | |
| 画像（1枚） | 画像（1枚） | |
| 定番の器 | カタログ（写真＋価格ラベル） | |
| キッチンの道具 | カラムリスト（画像・見出し・本文） | |
| スタジオのこと | 横幅いっぱいレイアウト（テキスト＋写真） | |
| 香りと暮らし | 自動スライド（写真の横流れ） |
お店について／ご利用ガイド
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| お店について | コラージュ（写真2枚＋テキスト） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| スタッフ | スタッフ紹介 | |
| 店舗のご案内 | 表（項目と内容） | |
| ご利用ガイド | 見出しが追いかけてくるブロック | |
| 送料（税込） | 多列テーブル（自由な列数） | |
| よくあるご質問 | FAQ（クリックで開閉）（デザイン：線で区切る・右に＋） |
全19種類のパーツのうち、15種類は製品版でのみ使えるものです。サムネイルギャラリーや見出しが追いかけてくるブロック、送料の多列テーブルは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
雑貨店のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- ネットショップがあるときは、サイトに何を載せればいいですか
- サイトには「どんなお店か」と「定番の商品」を載せ、買うのはネットショップへ、と役割を分けるのがおすすめです。ボタンのリンク先をネットショップにするだけでつながります。
- 送料や返品のルールは、どこに書けばいいですか
- このデモのように「ご利用ガイド」のページを1つ作ると、よくある質問がぐっと減ります。送料は表にすると、地域ごとの違いがひと目で分かります。
- 商品が増えたら、ページを増やすべきですか
- 種類が3つを超えたら、ページを分けるのがおすすめです。メニューの見出しの下に足していけば、メニューが長くなりすぎません。
この構成で作れるサイト
雑貨店以外にも
このデモは雑貨店を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
セレクトショップ／器のギャラリー／古道具店／書店／文房具店／ハンドメイド作家のお店 など、「商品の種類が多く、ページを分けたい」お店であれば、そのまま当てはまります。
文字サイズの切り替えは、年配のお客さまの多いお店にも喜ばれます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る