リフォーム会社のサイトデモ｜使用フレーム・パーツをすべて公開

<< デモ一覧に戻る

リフォーム会社のデモ

このページでは、Frames CMS の製品版で実際に作ったリフォーム会社のサイトをご紹介します。水まわりから内装・間取りの変更までを手がける、地域のリフォーム会社を想定した、8ページ構成です。
使っているフレーム（デザインの枠）1種類とパーツ21種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
このデモは、横の列のメニューを「リフォーム」「会社のこと」の見出しでグループに分け、その下の「サイドバー」に相談会の案内と見積りのボタンを置いています。

このデモを見る（別ウィンドウ）

まずは全体像から
このデモの構成

8つのページで構成しています。「何ができるか（水まわり・内装）」「どんな仕上がりか（施工例）」「どう進むか（流れ）」をページで分けています。

ホーム

〇〇市のリフォーム会社。キッチン・お風呂・トイレの水まわりから、内装・外壁まで。見積り無料。

水まわり

キッチン・お風呂・洗面・トイレのリフォーム。

内装・間取り

床・壁紙・間取りの変更・断熱。

施工例

これまでのリフォームのビフォーアフター。

ご相談の流れ

お問い合わせから工事の完了まで。

会社案内

ごあいさつ・会社概要。

お知らせ

さんぷるリフォームからのお知らせ一覧です。

お問い合わせ

入力項目を自由に作れるフォーム。

デザインの土台
使っているフレーム

このデモで使っているフレームは 「mix5-c2（ヘッダーに電話番号・横の列にメニューとサイドバーの2カラム）」 です。

フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。

ヘッダーの右に電話番号と受付時間、本文の横の列にメニューとサイドバーが入る2カラムのフレームです。メニューは日本語の下に小さな英語が並び、見出しでグループに分けられます。画面幅900px未満では、メニューは開閉式に、サイドバーは本文の下に並びます。

メニューを見出しでグループ分け、下に「サイドバー」

メニュー管理で、リンクの種類を「見出し（リンクなし）」にした「リフォーム」「会社のこと」の下に、それぞれのページを入れています。その下には、管理画面の「サイドバー」で相談会の案内と「無料見積りを申し込む」のボタンを並べ、どのページを見ていても、相談のきっかけが目に入るようにしました。

トップは「選ばれる理由」から「施工例」まで

「ようこそ」の文章のあとに、選ばれる理由・リフォームの種類・施工例のビフォーアフター・相談会・お客さまの声を並べ、最後に街並みの写真を背景にした見積りへの誘導を置きました。リフォームの種類は縦線で区切ったカードを「列の並べ方」で「4列」に、相談会は角丸と丸の写真2枚を重ねるレイアウトで見せています。

施工例はビフォーアフターと横スクロール

施工例のページでは、工事の前と後を矢印でつないだ画像比較で大きな工事を見せ、水まわりの小さな工事は手で動かす横スクロールのカードにまとめました。例が増えても、ページが縦に長くなりすぎません。

ロゴは「画像」で入れています

このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。フッターは濃い緑なので、「フッター用ロゴ（任意）」に白いロゴを入れ、ヘッダーは色つきのロゴ、と2枚を使い分けています。

ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。

ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。

約50種類のフレームを見る

同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります

Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「mix5-c2」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。

インテリア
このデモの作り方

使用したパーツ

セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。

ホーム

セクション	使ったパーツ	Free版
直してからが、おつきあいの始まりです。	基本セット（見出し＋本文＋画像）
選ばれる理由	特徴・サービス（アイコン3列）
リフォームの種類	縦線で区切ったカード
横スクロールギャラリー（スクロール連動）	横スクロールギャラリー（スクロール連動）
施工例	ビフォーアフター（画像比較）
リフォーム相談会	テキスト＋写真2枚（角丸と丸）
お客さまの声	お客様の声（星評価）
画像（1枚）	画像（1枚）
無料見積りへの誘導	CTAセクション（背景写真）
お知らせ	お知らせ一覧（自動）

水まわり／内装・間取り／施工例

セクション	使ったパーツ	Free版
水まわり	コース・メニュー一覧
工事の日程（キッチンの入れ替えの例）	ステップ案内（横4列・アイコン）
内装・間取り	多列テーブル（自由な列数）
無料相談への誘導	パララックス背景（写真／動画）
こんなご相談も	横並び（写真＋文章）
施工例	ビフォーアフター（画像比較）
水まわりの施工例	横スクロールのカード（手で動かす）

ご相談の流れ／会社案内／お知らせ

セクション	使ったパーツ	Free版
ご相談の流れ	ステップ案内（縦・番号＋画像）
よくあるご質問	FAQ（クリックで開閉）（デザイン：線で区切る・右に＋）
ごあいさつ	汎用レイアウト（画像＋テキスト・配置選択）
会社概要	表（項目と内容）
お知らせ	お知らせ一覧（自動）

サイドバー（全ページ共通）

セクション	使ったパーツ	Free版
リフォーム相談会	基本セット（見出し＋本文＋画像）
ボタン	ボタン（単体）

全21種類のパーツのうち、15種類は製品版でのみ使えるものです。施工例のビフォーアフター（画像比較）や縦線で区切ったカード、価格の目安の多列テーブルは製品版のパーツです。製品版では70種類以上のパーツが使えます。

パーツの一覧を見る

ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です

製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。

このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。

作るときの参考に
リフォーム会社のサイトで迷いやすいところ

このデモを作るときに考えたことを、いくつか書いておきます。

工事の価格は、家ごとに違うのに載せてもいいですか: 「〇〇万円〜」の目安と、その条件を書けば大丈夫です。このデモでは「I型 2550mm」「6畳の部屋の場合」のように条件を添え、「商品・工事費込み」も明記しました。
施工例の写真は、どう撮ればいいですか: 工事の前と後を、同じ場所・同じ向きから撮っておくのがいちばんです。ビフォーアフターのパーツで並べると、変化がひと目で伝わります。お施主さまの許可も忘れずに。
工事中の暮らしのことは、書いたほうがいいですか: 書いておくと、相談のハードルが下がります。このデモでは、水まわりのページにキッチンの工事の日程を4日分のステップで載せ、よくある質問で「住みながら工事できますか？」に答えました。

この構成で作れるサイト
リフォーム会社以外にも

このデモはリフォーム会社を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。

工務店／外壁・屋根の塗装店／水道工事店／不動産会社／設計事務所／ハウスクリーニングなど、「ページが多く、いつも相談の窓口を見せておきたい」会社であれば、そのまま当てはまります。

サイドバーは、2カラムのフレームで使えます。1カラムのフレームに切り替えても、中身は消えません。

まずは無料で試せます
Free（無料版）のご案内

Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。

無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。

Free(無料版)をダウンロード

このデモをもう一度見る

製品版を購入する