ホーム
ごあいさつ、標準仕様の3つのこだわり、素材のご案内、ご相談から引き渡しまでの流れ、施工事例、お客様の声、お知らせ、モデルハウスの案内。ご相談から引き渡しまでは、スクロールすると左の写真が画面に止まり、段階が変わると写真がふわっと切り替わります。
<< デモ一覧に戻る
工務店のデモ（自然素材の注文住宅）
- このページでは、Frames CMS の製品版で実際に作った工務店のサイトをご紹介します。無垢材と漆喰の家を年に20棟ほど建てる、地域の工務店を想定した6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ17種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- ヘッダーに電話番号と受付時間、メニューに英語の小さな表記が入るフレームを使っています。メイン画像は、写真ごとに文字の位置や見せ方を変えています。
実際に動くサイトです。施工事例・費用の目安・お問い合わせフォームまでご覧いただけます。
まずは全体像から
このデモの構成
6つのページで構成しています。注文住宅の工務店なら、これで足ります。
01
02
施工事例
6件をカードで。1件だけ「工事の概要」を数字つきの表で出しています。
03
家づくりのこだわり
素材・断熱・構造の3つ（写真の横に文章を置き、写真の左右を交互に）と、標準仕様の表。「何が最初から入っているか」を書いたページです。
04
家づくりの流れ
8段階のタイムライン、費用の目安の表、よくあるご質問。「いつ、いくら払うのか」を書いたページです。
05
会社案内
事務所の写真、会社概要（許可番号まで）、沿革、アクセス、地図。
06
お問い合わせ
ご相談の種類・築年数・ご予算に加えて、現況の写真や図面を添付できる相談フォームを実際に組んでいます。触ってみてください。
同じ工務店でも、見せ方がまったく違うデモがもう1つあります。工務店のデモは、リフォームやビフォーアフターも扱う会社を想定し、フレームの初期状態を大きく作り替えたものです。こちらは新築の注文住宅が中心で、フレームの色はそのまま使っています。見比べてみてください。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「komuten1（ヘッダーに電話番号・メニューに英語表記）」 です。
komuten1 は、ヘッダーの右に電話番号と受付時間、その下に日本語と英語の2段のメニューが並ぶフレームです。メイン画像はスライドショー。「まず電話で相談したい」というお客様が多い業種と相性がよいレイアウトです。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
ヘッダーに、電話番号と受付時間
管理画面の「サイト基本設定」で「電話番号（任意）」と「受付時間（任意・ヘッダーに表示）」を入れると、ヘッダーの右上に出ます。どのページを見ていても、電話番号が目に入る形です。
「受付時間」の欄は、ヘッダーに受付時間を出すフレームを選んでいるときだけ表示されます。関係のないフレームでは出ないので、迷うことはありません。電話番号だけ入れて、受付時間は空のままでも大丈夫です。
メニューに、英語の小さな表記
「施工事例」の下に「WORKS」、「会社案内」の下に「COMPANY」。管理画面の「メニュー」で、項目ごとに「サブ表記」を入れると2段で出ます。
サブ表記は、空のままでも構いません。空の項目は1段で出ます。英語でなく、「家づくりのこだわり」の下に「標準仕様」のような日本語の補足を入れる使い方もできます。この欄も、2段のメニューを持つフレームのときだけ表示されます。
メイン画像は、1枚ごとに見せ方を変えています
スライドショーの3枚は、写真によって明るい場所も、人がいる位置も違います。同じ設定のままだと、どこかで文字が読みにくくなります。そこで1枚ずつ変えました。
01
1枚目：文字を左に
写真の左側は壁とキッチンで、文字を置いても邪魔になりにくいので、キャッチコピーを左寄せに。
02
2枚目：右に＋背景を付ける
家が左にあるので文字を右寄せにして、「キャッチの背景」で黒の半透明を付けました。右側は明るい空と木々なので、背景がないと白い文字が溶けてしまいます。
03
3枚目：中央＋写真を少し暗く
人物が中央にいる写真なので、背景は付けずに「画像の明るさ」で少し暗くするに。写真の雰囲気を残したまま、白い文字が浮きます。
「キャッチの背景」と「画像の明るさ」は、どちらか1つで足りることがほとんどです。両方使うと、写真が暗く沈みすぎることがあります。まずは「画像の明るさ」を試して、それでも読みにくければ背景を付けてみてください。
色は、フレームの初期状態のままです
komuten1 の標準の配色は、深い緑のメインカラーに、オレンジのアクセント。木の家の写真とよく合うので、このデモでは色を1つも変えていません。
変えたい場合は、メインカラー・アクセントカラー・薄い色（差し色）・背景色・文字色の5つを管理画面から変更できます。変えた色だけが保存される仕組みなので、あとから別のフレームに切り替えても、変更していない色はそのフレーム本来の配色が生きます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「komuten1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
建築設計事務所
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ごあいさつ | 基本セット（見出し＋本文＋画像） | |
| 標準仕様の3つのこだわり | 特徴・ステップ（アイコン＋番号・枠つき） | |
| 素材は、さわって選んでください | コラージュ（写真2枚＋テキスト） | |
| ご相談から引き渡しまで | 写真が止まるブロック（ふわっと切り替え） | |
| 施工事例 | 横スクロールのカード（手で動かす） | |
| お客様の声 | お客様の声（星評価） | |
| お知らせ | 手入力の簡易版お知らせ | |
| モデルハウス | アクセス（案内＋地図）（地図のかわりに写真） |
施工事例／家づくりのこだわり／家づくりの流れ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 事例6件のカード | カラムリスト（画像・見出し・本文） | |
| こだわり3つ | 写真に文章が回り込む横長ブロック | |
| 工事の概要・標準仕様 | 表（項目と内容） | |
| 流れ（8段階） | 沿革・年表（タイムライン） | |
| 費用の目安 | 多列テーブル（自由な列数） | |
| よくあるご質問 | FAQ（Q&Aマーク付き・カード型） |
会社案内
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 事務所の写真 | 画像（1枚） | |
| 会社概要 | 表（項目と内容） | |
| 沿革 | 沿革・年表（タイムライン） | |
| アクセス | 箇条書き（中黒・番号） | |
| 地図 | 埋め込み（YouTube・地図・iframe） |
全17種類のパーツのうち、13種類は製品版でのみ使えるものです。とくに特徴・ステップ（アイコン＋番号・枠つき）は、「自然素材・高断熱・耐震等級3」のように会社の強みを3つに絞って見せるのに向いています。製品版では70種類以上のパーツが使えます。
フォームで、写真や図面を受け取れます
このデモの「お問い合わせ」は、工務店のデモと同じ現況の写真や図面を1点まで添付できる相談フォームです。ご相談の種類（複数選択）・築年数（数値）・ご予算の目安（ドロップダウン）も先に伺う形にしています。
Free（無料版）のフォームは、お名前・メールアドレス・お問い合わせ内容の3項目で固定です。項目を増やしたり、添付ファイルを受け取ったりするには製品版が必要です。
パーツの小ワザ
① 事例はカード、こだわりは横長のブロックで見せています。
施工事例ページでは家の写真＋間取りのひとことをカラムリストで並べ、家づくりのこだわりページでは素材や断熱の写真＋説明を「写真に文章が回り込む横長ブロック」にしました。説明が長くなっても、文章が写真の下に回り込みます。
② 「表（項目と内容）」を3か所で使っています。
工事の概要、標準仕様、会社概要。どれも「左に項目、右に内容」の形です。数字が入る情報は、文章で書くより表にしたほうが比べやすくなります。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
注文住宅のサイトで迷いやすいところ
- 電話番号は、ヘッダーに出したほうがいいですか
- 電話での相談が多い業種なら、出したほうがいいです。家づくりの相談は、年配の方やご夫婦で「まず話を聞いてみたい」という方が多く、フォームより電話を選ぶ人が少なくありません。
受付時間も一緒に書いておくと、「かけたのに誰も出ない」を防げます。定休日があるなら、ここに入れておくのがいちばん目に入ります。 - メニューの英語表記は必要ですか
- なくても困りません。英語が付くと、メニューが少し整って見えるという、見た目のための表記です。
入れるなら全部の項目にそろえて入れるのがおすすめです。一部だけ空いていると、そこだけ段がずれて見えます。 - 標準仕様は、どこまで書けばいいですか
- 数字で書けるものは、数字で書いてください。「高断熱」より「断熱等級6・UA値0.46」、「地震に強い」より「耐震等級3・全棟で構造計算」。
比べる人は、他社のサイトと並べて見ています。数字があると、その比べる作業がしやすくなります。このデモの「家づくりのこだわり」ページは、標準仕様をそのまま表にしています。 - 金額を出すべきでしょうか
- 「坪〇万円〜」だけでも出したほうがいいです。このデモでは、家づくりの流れのページに本体・付帯・外構・設計・諸費用の5項目を並べ、契約時・着工時・上棟時にいくら払うかもタイムラインに書きました。
考え方は工務店のデモのページでも詳しくご説明しています。 - メイン画像の文字が読みにくいのですが
- まず、管理画面の「メイン画像」で「画像の明るさ」を「少し暗くする」にしてみてください。たいていはこれで読めるようになります。
それでも読みにくいときは、文字の位置を写真の暗い側に寄せるか、「キャッチの背景」を付けます。写真ごとに設定できるので、読みにくい1枚だけ変えれば十分です。 - スマホでの見え方が心配
- すべてのパーツが、画面の幅に合わせて自動的に並び替わります。スマホ用に別のページを作る必要はありません。こだわりのカードは列の数が少なくなり、費用の表は横スクロールに切り替わります。
メイン画像は、スマホ用に縦長の写真を別に登録できます。横長の写真はスマホだと左右が切れるので、人物が端にいる写真は、縦長版を用意しておくと安心です。
この構成で作れるサイト
注文住宅の工務店以外にも
このデモは自然素材の注文住宅を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
ハウスメーカーの地域店／設計事務所／リノベーション会社／ログハウス・平屋専門店／造園・外構／太陽光・蓄電池の施工会社／家具の工房 など、「仕様と価格を比べて選ばれる」仕事であれば、そのまま当てはまります。
業種によって変えたほうがよいのは、「家づくりのこだわり」の中身くらいです。素材や断熱の代わりに、自社の強みを3つ選んで書き替えてください。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る