ホーム
ごあいさつ、承っていること3つ、ご相談から引き渡しまでの流れ、お客様の声、お知らせ、地図。
<< デモ一覧に戻る
工務店のデモ
- このページでは、Frames CMS の製品版で実際に作った工務店のサイトをご紹介します。創業42年・社員12名の、地域の工務店を想定した6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ15種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、フレームの初期状態を大きく作り替えています。「気に入った形だけど、色や飾りが業種に合わない」というときにどうするか。その手順もまとめました。
実際に動くサイトです。施工事例・費用の目安・お問い合わせフォームまでご覧いただけます。
まずは全体像から
このデモの構成
6つのページで構成しています。工務店なら、これで足ります。
01
02
施工事例
4件をカードで。1件だけ「工事の概要」を数字つきの表で出しています。
03
家づくりの流れ
8段階のタイムライン、費用の目安の表、よくあるご質問。「いつ、いくら払うのか」を書いたページです。
04
リフォーム
ビフォーアフター3件、工事別の費用と工期の表、補助金についてのお知らせボックス。
05
会社案内
事務所の写真、会社概要（許可番号まで）、沿革、アクセス、地図。
06
お問い合わせ
ご相談の種類・築年数・ご予算に加えて、現況の写真や図面を添付できる相談フォームを実際に組んでいます。触ってみてください。
このデモには「お知らせ」ページがありません。更新の回数が少ない業種を想定して、トップページに直接お知らせを書く形にしました。詳しくは、この下の「パーツの小ワザ」でご説明します。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「frame11（正方形画像＋左テキスト）」 です。
frame11 は、左にキャッチコピーとボタン、右に正方形の写真を置くフレームです。余白が大きく、写真が正方形なので、家の外観やインテリアのように「全体を見せたい」写真と相性がよいレイアウトです。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では20種類以上から選べます。
初期状態のままでは、業種に合いませんでした
frame11 は、そのままだとサロン向けの見た目です。標準ではメインカラーがくすんだピンクベージュ、アクセントカラーがサーモンピンク。そしてトップページの左上に、水彩画のような花の飾りが入ります。
骨格そのものは、余白の取り方も文字の置き方も洗練されていて、工務店にぴったりでした。そこで「飾りを消して、色を変える」という2つの操作だけで、まったく違う見え方にしています。
01
飾りを「使わない」にした
frame11 の左上の飾りは、管理画面から差し替えることも、「使わない」こともできます。このデモでは、使わない設定にして余白だけを残しました。
02
色を3つ変えた
メインカラーを深い緑、アクセントカラーを木の色に近い茶、薄い色を生成りのベージュに。ピンクの気配がなくなります。
フレームを選ぶときは、初期状態の見た目だけで判断しないでください。「レイアウトは好きだけど、色と飾りが合わない」というときは、たいていそこだけを変えれば解決します。逆に、レイアウトそのものが合わないときは、別のフレームを選んだほうが早いです。
変えられるのは、メインカラー・アクセントカラー・薄い色（差し色）・背景色・文字色の5つ。変えた色だけが保存される仕組みなので、あとから別のフレームに切り替えても、変更していない色はそのフレーム本来の配色が生きます。
なお、その下にはテーマCSSを直接編集できる欄もあります。余白や角の丸み、フォントサイズなど、色以外も細かく調整したい方向けです（CSSの知識がある方向けの機能なので、通常はカラーピッカーだけで十分です）。
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ごあいさつ | 基本セット（見出し＋本文＋画像） | |
| 承っていること3つ | 特徴・サービス（アイコン3列） | |
| ご相談から引き渡しまで | ステップ案内（縦・番号＋画像） | |
| お客様の声 | お客様の声（星評価） | |
| お知らせ | 手入力の簡易版お知らせ | |
| 地図・アクセス | 埋め込み（YouTube・地図・iframe） |
施工事例／家づくりの流れ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 事例4件のカード | カラムリスト（画像・見出し・本文） | |
| 工事の概要 | 表（項目と内容） | |
| 流れ（8段階） | 沿革・年表（タイムライン） | |
| 費用の目安 | 多列テーブル（自由な列数） | |
| よくあるご質問 | FAQ（クリックで開閉） |
リフォーム／会社案内
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ビフォーアフター3件 | ビフォーアフター（画像比較） | |
| 補助金についての注意 | アラート（お知らせボックス） | |
| 事務所の写真 | 画像（1枚） | |
| アクセス | 箇条書き（中黒・番号） |
全15種類のパーツのうち、10種類は製品版でのみ使えるものです。とくにビフォーアフター（画像比較）は、リフォームを扱う業種では効きます。文章で「明るくなりました」と書くより、2枚並べたほうが早いからです。製品版では約50種類のパーツが使えます。
フォームで、写真や図面を受け取れます
このデモの「お問い合わせ」は、現況の写真や図面を1点まで添付できる相談フォームです。ご相談の種類（複数選択）・築年数（数値）・ご予算の目安（ドロップダウン）も先に伺う形にしています。
写真が1枚あるだけで、話がまるごと変わります。「浴室をリフォームしたい」という文章だけでは、在来なのかユニットなのか、広さも分かりません。写真が届けば、伺う前におおよその見当がつきます。訪問前の往復が減るのは、工事の仕事では大きいはずです。
添付できるのはJPEG・PNG・WebP・PDFで、1点まで。実行ファイルなどは受け付けない作りになっています。
使える項目は11種類。1行テキスト／複数行テキスト／メール／電話・郵便番号／ドロップダウン／ラジオ／複数選択／日付／数値／同意チェック／添付ファイル。これを組み合わせて、用途ごとにフォームをいくつでも作れます。
日付やラジオを使った予約型のフォームは、美容室のデモでご覧いただけます。2本あわせて、11種類すべてが実際に動いています。
Free（無料版）のフォームは、お名前・メールアドレス・お問い合わせ内容の3項目で固定です。項目を増やしたり、添付ファイルを受け取ったりするには製品版が必要です。
パーツの小ワザ
① お知らせには、2つのやり方があります。
ひとつは「お知らせ一覧（自動）」。記事を1本追加すると、一覧ページと詳細ページが自動で作られます。美容室やカフェのデモはこちらです。
もうひとつが、このデモで使っている「手入力の簡易版お知らせ」。日付とひとことを、パーツの中に直接書き込む形です。詳細ページは作られません。
更新が月に1回あるかどうか、という業種なら、こちらのほうが向いています。お知らせのページを作らずに済むので、メニューもすっきりします。「1本ずつ記事を書くほどではないけれど、動いていることは見せたい」というときにお使いください。
② 同じタイムラインのパーツを、2つの意味で使っています。
「沿革・年表（タイムライン）」は、会社案内で「沿革」として（1984年→2026年）、家づくりの流れで「手順」として（1.ご相談→8.その後）使っています。
左に短い見出し、右に説明が並ぶ形なので、年でも番号でも成立します。手順のほうはアクセントカラーの見た目に切り替えて、沿革と印象を変えました。パーツ名に引っ張られず、形で選んでみてください。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、ご購入後にお問い合わせください。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
工務店のサイトで迷いやすいところ
- 金額を出すべきでしょうか
- 「坪〇万円〜」だけでも出したほうがいいです。問い合わせが減るのではと心配になりますが、実際に減るのは「予算が合わない問い合わせ」のほうです。
このデモでは、家づくりの流れのページに本体・付帯・外構・設計・諸費用の5項目を並べました。総額のイメージが持てると、相談する側も話を切り出しやすくなります。「いつ、いくら払うのか」を先に書いておくのが、いちばん親切です。 - ビフォーアフターの写真がうまく撮れません
- コツはひとつだけ、同じ場所から、同じ画角で撮ることです。
工事前に撮る位置を決めて、立った場所に印をつけておいてください。完成後に同じ場所から撮れば、それだけで比較になります。角度がずれていると、どんなによい仕上がりでも伝わりません。
工事前を撮り忘れるのが、いちばん多い失敗です。見積りに伺ったその場で、1枚撮っておくのをおすすめします。 - 施工事例が少ないのですが
- 3〜4件で十分です。数を並べるより、1件を深く見せるほうが効きます。
このデモでは、事例4件のうち1件だけ「工事の概要」を表で出しました。坪数・工期・本体工事費・断熱の数値まで書いています。1件でも数字が出ていると、他の事例の見え方まで変わります。 - 施工事例の掲載許可は必要ですか
- 必要です。お住まいは、施主にとって完全なプライベートです。外観だけでも、場所が分かる形なら許可を取ってください。
このデモでは、施工事例ページの冒頭に「掲載の許可をいただいたお宅だけを載せています」と書いています。地名も「〇〇市」までにとどめました。 - お知らせは、何を書けばいいですか
- 見学会と、お休みの案内だけで十分です。このデモのお知らせも4本だけ、内容は夏季休業・完成見学会・補助金の受付開始・サイトを作りました、です。
更新が止まっているように見えることのほうが、書かないことより問題です。だからこのデモでは、記事を書く形ではなくトップページに直接書き込む簡易版を選んでいます。年に数回の更新なら、こちらのほうが続きます。 - 補助金の情報は載せていいですか
- 載せて構いませんが、金額や締切を具体的に書くと、すぐ古くなります。制度は毎年変わるからです。
このデモでは「補助金が使える場合があります／申請のお手伝いもしています」とだけ書き、金額は書いていません。お問い合わせにつながればよいので、これで足ります。 - スマホでの見え方が心配
- すべてのパーツが、画面の幅に合わせて自動的に並び替わります。スマホ用に別のページを作る必要はありません。3列のカードは1列に、費用の表は横スクロールに切り替わります。
ビフォーアフターも、スマホでは上下に並びます。だからこそ、同じ画角で撮っておくことが効いてきます。
この構成で作れるサイト
工務店以外にも
このデモは工務店を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
リフォーム会社／外壁塗装・屋根工事／内装・クロス／電気・水道工事／造園・エクステリア／解体／ハウスクリーニング／不用品回収／建築設計事務所 など、「現場に行って、直して帰ってくる」仕事であれば、そのまま当てはまります。
業種によって変えたほうがよいのは、「家づくりの流れ」の段数くらいです。1日で終わる工事が中心なら、8段階のタイムラインを3〜4段階のステップ案内に置き換えると、ちょうどよくなります。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る