ホーム
〇〇市の家具工房。無垢材のオーダー家具と、一枚板のテーブル。
<< デモ一覧に戻る
家具工房のデモ
- このページでは、Frames CMS の製品版で実際に作った家具工房のサイトをご紹介します。無垢材のオーダー家具と一枚板のテーブルを作る、職人3人の家具工房を想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ19種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、ページを開いたときに、写真が中央から左右に開くオープニング演出が入るフレームを、見本と同じブラウンとベージュの配色で使っています。
まずは全体像から
このデモの構成
6つのページで構成しています。「作ったもの」「頼み方」「作っている人」を、それぞれ1ページにしています。
01
02
作品
これまでに作った家具。
03
オーダーの流れ
ご相談から納品まで。木の種類と価格の目安。
04
工房のこと
工房と、職人のこと。
05
お知らせ
木工房 さんぷるからのお知らせ一覧です。
06
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「kagu1（スライド＋オープニング演出）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
メイン画像はスライドショーで、ページを開いたときに写真が中央から左右に開く演出が入るフレームです。ヘッダーは白で、ロゴの右にメニューが並びます。ブラウンとベージュの、落ち着いた配色です。
トップは「ようこそ」から始めて、工房の考えを伝える
メイン画像のすぐ下に、中央寄せの見出しと本文で工房の想いを置き、続けて「無垢の木だけを使う」「寸法は1cm単位で」「何年たっても直せる」の3つの約束をアイコンつきで並べました。作品を見る前に、どんな考えで作っている工房かが伝わります。
写真を大きく見せるブロックを、トップに2つ
工房のことは、写真2枚を重ねるコラージュで。一枚板のテーブルは、スクロールに合わせて背景の写真がゆっくり動くパララックスで、文字を読みやすく暗くして重ねています。作品の縦線で区切ったカードは、「列の並べ方」を「4列」にして、4点を1行にそろえました。
オーダーの流れは、トップと下層で見せ方を変える
トップでは横4列のアイコンのステップで流れをひと目で、「オーダーの流れ」のページでは番号と写真の入った縦のステップで、ひとつずつ詳しく説明しています。下層には、木の種類と価格の表、よくあるご質問も入れました。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。フッターは濃い茶色なので、「フッター用ロゴ（任意）」に白いロゴを入れています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 毎日さわるものだから、木でつくる。 | 基本セット（見出し＋本文＋画像） | |
| 画像（1枚） | 画像（1枚） | |
| 家具づくりの3つの約束 | 特徴・サービス（アイコン3列） | |
| 工房のこと | コラージュ（写真2枚＋テキスト） | |
| 作品 | 縦線で区切ったカード | |
| 一枚板のテーブル | パララックス背景（写真／動画） | |
| オーダーの流れ | ステップ案内（横4列・アイコン） | |
| お客さまの声 | お客様の声（星評価） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| 工房見学のご案内 | CTA（大きなアイコン＋テキスト＋ボタン） | |
| お知らせ | お知らせ一覧（自動） |
作品／オーダーの流れ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 作品 | ギャラリー（複数画像） | |
| 今月の一枚板 | ピックアップギャラリー（大1枚＋小2枚） | |
| オーダーの流れ | ステップ案内（縦・番号＋画像） | |
| 木の種類と価格の目安（ダイニングテーブル 幅1800mm） | 表（項目と内容） | |
| よくあるご質問 | FAQ（Q&Aマーク付き・カード型） |
工房のこと
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 工房のこと | 横幅いっぱいレイアウト（テキスト＋写真） | |
| 一枚板のテーブル | パララックス背景（写真／動画） | |
| これまでのこと | 沿革・年表（タイムライン） | |
| 工房へのアクセス | アクセス（案内＋地図） |
全19種類のパーツのうち、16種類は製品版でのみ使えるものです。コラージュやパララックス背景、縦線で区切ったカードは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
家具工房のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- オーダー家具の価格は、どう載せればいいですか
- 基準の大きさを1つ決めて、木の種類ごとに「〇〇万円〜」と載せるのがおすすめです。このデモでは、幅1800mmのダイニングテーブルを基準にした表にしました。
- 納品した家具の写真を載せてもいいですか
- お客さまの許可をもらったものだけにします。このデモの作品のページにも、その一文を入れました。
- 工房見学は、どこで案内すればいいですか
- トップの最後と、お知らせのページに誘導のブロックを置くのがおすすめです。このデモでは、大きなアイコンとボタンのCTAで「土日・予約制」と書き添えました。
この構成で作れるサイト
家具工房以外にも
このデモは家具工房を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
木工・陶芸の工房／革小物の工房／工務店／設計事務所／インテリアショップ／ギャラリー など、「手仕事の作品と、注文の流れを見せたい」ところであれば、そのまま当てはまります。
左右に開く演出は、ページを開いたときに1回だけ入ります。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る