ホーム
〇〇県の住宅メーカー。木の家、平屋、二世帯住宅。モデルハウス見学受付中。
<< デモ一覧に戻る
住宅メーカーのデモ
- このページでは、Frames CMS の製品版で実際に作った住宅メーカーのサイトをご紹介します。地元の木を使った家を建てる、地域の住宅メーカーを想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ12種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、メイン画像のスライドを「施工事例」として使っています。正面の写真の左右に、写真が斜めに並んで流れる3Dのスライドです。
まずは全体像から
このデモの構成
6つのページで構成しています。「建てた家」「建てるまで」「見に行ける家」を、それぞれ1ページにしています。
01
02
施工事例
これまでにお引き渡しした家。
03
家づくりの流れ
ご相談からお引き渡し、アフターサービスまで。
04
モデルハウス
モデルハウスの見学と、アクセス。
05
お知らせ
サンプルホームからのお知らせ一覧です。
06
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「3d1-coverflow（3Dカルーセル・カバーフロー）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
正面の写真の左右に、写真が斜めに並んで流れる3Dのスライドのフレームです。各写真の見出し・説明・ボタンは写真の下に出ます。上の大きな見出しとキャッチも、差し替えられます。
スライドのキャッチが、事例の名前になる
メイン画像の1枚ごとの「キャッチ」「サブ」「ボタン」が、写真の下のキャプションになります。このデモでは「木と白壁の2階建て／〇〇市・延床 34坪・4人家族」のように、施工事例の紹介として使いました。
上の大きな見出しを差し替える
「デザイン → このフレーム専用の素材」で、上の大きな見出し・英語のキャッチ・小さな一行を書き換えられます。このデモでは「家族の時間が、いちばん長い場所へ。」にしました。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ロゴが小さく見えたので、「ロゴの大きさ」を「大きめ（120%）」にしています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 数字で見るサンプルホーム | 実績カウンター（数字） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| 3つの約束 | 見出しが追いかけてくるブロック | |
| 暮らしの写真 | 自動スライド（写真の横流れ） | |
| お知らせ | お知らせ一覧（自動） |
施工事例／家づくりの流れ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 施工事例 | カラムリスト（画像・見出し・本文） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| 家づくりの流れ | 沿革・年表（タイムライン） | |
| 画像（1枚） | 画像（1枚） | |
| 打ち合わせのようす | 横並び（写真＋文章） |
モデルハウス
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| モデルハウス | 店舗情報（写真＋情報＋地図） | |
| お問い合わせへの誘導 | CTA（大きなアイコン＋テキスト＋ボタン） |
全12種類のパーツのうち、10種類は製品版でのみ使えるものです。実績カウンターや見出しが追いかけてくるブロック、タイムラインは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
住宅会社のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 施工事例の写真は、どう集めればいいですか
- お引き渡しのときに、お施主さまの許可をもらって撮るのがいちばんです。外観と、リビング・キッチンの3枚があれば十分です。
- 価格は載せたほうがいいですか
- 「坪単価〇〇万円〜」の目安だけでも載せると、問い合わせの質が上がります。
- 資料請求と見学予約、どちらを目立たせればいいですか
- このデモでは、メニューのボタンを「資料請求」、モデルハウスのページで「見学予約」と分けています。
この構成で作れるサイト
住宅メーカー以外にも
このデモは住宅メーカーを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
工務店／リフォーム会社／設計事務所／家具店／不動産会社／ホテル・旅館 など、「写真で実績を見せたい」ところであれば、そのまま当てはまります。
3Dのスライドは、写真3枚以上で回ります。ほかにも、らせん・リング・カードスタックなど7種類の動きがあります。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る