不動産サイトのデモ｜100件の物件を条件でしぼり込む

<< デモ一覧に戻る

不動産のデモ

このページでは、Frames CMS の製品版で実際に作った不動産サイトをご紹介します。地域密着の不動産会社を想定した、7ページ構成です。
売買50件・賃貸50件、あわせて100件の物件が登録してあります。データが増えたときに一覧がどう動くのか、絞り込みは実用になるのか。そこを確かめていただくためのデモです。
使っているフレーム（デザインの枠）1種類とパーツ15種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。

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

実際に動くサイトです。価格や面積でしぼり込んで、詳細ページの問い合わせフォームまでご覧いただけます。

求人のデモも同じ仕組みで作っていますが、一覧ページのレイアウトと色を変えています。後の「一覧の並べ方は選べます」の項で見比べてみてください。

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

7つのページで構成しています。すべて管理画面から作れるもので、HTMLを書いた箇所はひとつもありません。

ホーム

メイン画像のすぐ下に検索フォーム、その下に新着物件。取扱いサービス、お客様の声、お知らせ、地図と続きます。探しに来た人が、いちばん短い道で一覧にたどり着ける順番にしています。

売買物件

50件をカード並びで。マンション・一戸建て・土地のタブで切り替え、価格・間取り・面積・築年数でしぼり込めます。

賃貸物件

50件。アパート・マンション・テナントのタブ。賃料・設備でのしぼり込みを加えています。

ご購入の流れ

お問い合わせからお引き渡しまでを6ステップで。諸費用の表と、よくあるご質問。

会社案内

会社概要の表、沿革、アクセス。不動産は「どこの誰か」が特に見られます。

お知らせ

新着物件のご案内や休業日。記事を追加すると一覧と詳細が自動で作られ、トップにも最新3件が出ます。

お気に入り

訪問者が♡を押した物件が並びます。売買と賃貸をタブで切り替え。会員登録は要りません。

このほかに、物件の詳細ページが自動で作られます。100件あれば100ページ。1件ずつページを作る必要はありません。

ここが製品版の見どころです
100件のデータが、こう動きます

物件を1件登録すると、一覧のカード・詳細ページ・検索の選択肢が、すべて自動でできあがります。
やることは「物件を登録する」だけです。

1｜条件でしぼり込む

このデモの検索フォームでは、次のしぼり込みができます。

しぼり込みの種類	このデモでの使い方
キーワード	物件名・所在地・本文から探します
カテゴリ	マンション／一戸建て／土地（タブでも切り替えられます）
範囲でしぼる	価格・面積・築年数を「〇〇以上〜〇〇以下」で
ひとつ選ぶ	間取り（1K・2LDK…）
いくつでも選ぶ	設備・条件（駐車場・南向き・角部屋・ペット可・オートロックなど10種）
並び替え	新着順／価格の安い順・高い順／面積の広い順

選択肢は、こちらで用意するものではありません。「設備・条件」に何を並べるかは、管理画面で自由に決められます。中古車なら「ボディタイプ」、貸し会議室なら「設備」というように、扱うものに合わせて作ってください。

2｜一覧の並べ方は選べます

同じ「一覧（記事）」パーツですが、並べ方を3つから選べます。このデモでは、トップも一覧ページもカード並びを使いました。

物件は、写真の印象が先に来ます。間取りや価格を読む前に、まず「いい感じかどうか」を見られます。だから写真を大きく見せるカード並びが向いています。

いっぽう求人のデモでは、一覧ページに写真リスト（横並び）を使っています。求人は給与・勤務地・雇用形態と比べたい情報が多いので、横並びにして1件あたりの情報量を増やしたほうが読みやすくなります。扱うものによって、向いている見せ方が違います。

3｜詳細ページ

一覧のカードをクリックすると、その物件のページに移ります。このページも自動です。

写真を切り替えて見られます

大きな写真の下に小さな写真が並び、クリックで切り替わります。動画も混ぜられます。このデモでは、新しい物件ほど写真を多く入れてあります。

物件情報が表で出ます

価格・所在地・間取り・面積・築年数・最寄駅・設備。登録した項目が、そのまま表になります。

その物件専用の問い合わせフォーム

ページの下にフォームが付いています。送信されたメールの件名に、物件名が自動で入ります。「どの物件についての問い合わせか」を聞き返す必要がありません。

似ている物件・最近見た物件

同じカテゴリの物件と、その人がさっきまで見ていた物件が下に並びます。1件見て終わり、になりにくくなります。

4｜お気に入り（♡）

一覧カードの右上と詳細ページに♡があります。押すと「お気に入り」ページに集まります。会員登録もログインも要りません。

♡は、訪問者のブラウザの中にだけ記録されます。サーバーには送られないので、個人情報を預かることになりません。そのかわり、別の端末やブラウザとは共有されません。

Free（無料版）との違い

一覧の機能は、Free版にも入っています。ただし、このデモと同じものは作れません。
Free版でできないことは、次のとおりです。

	Free（無料版）	製品版
一覧の項目数	6つまで	制限なし
CSVの取り込み	書き出しのみ	取り込みもできる
記事の複製	できない	できる
詳細ページのフォーム	置けない	置ける
フォームの項目	お名前・メール・内容の3つ固定	11種類から自由に
フォームの数	1つ	制限なし

このデモは、売買と賃貸で「8項目」使っています。価格・所在地・間取り・面積・築年数・最寄駅・設備・写真。Free版の6つでは、2つ削ることになります。

リストも2本使っています。売買と賃貸で項目が少し違う（「価格」と「賃料」、「面積」と「専有面積」）ためです。リストは何本でも作れますので、ここはFree版でも同じようにできます。

そしてフォームです。このデモの物件用フォームは8項目で、ご見学の希望日（カレンダー）とご希望の時間帯が入っています。会社案内の相談フォームには図面の添付もあります。Free版の3項目固定では作れません。
また、Free版のフォームは、物件の詳細ページに置くことができません。物件ごとの「この物件について問い合わせる」は、製品版の機能です。

逆に言えば、機能そのものは Free版でも試せます。絞り込み・詳細ページ・お気に入り・似ている記事は、Free版でも同じように動きます。まず無料版で使い勝手を確かめて、項目が足りなくなったら製品版へという進め方ができます。作ったデータはそのまま引き継がれます。

Free版と製品版の違いをくわしく見る

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

このデモで使っているフレームは 「seikotsu1（全面1枚ビジュアル・テキスト重ね）」 です。

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

seikotsu1 は、画面いっぱいの写真1枚に、テキストを重ねるフレームです。写真が大きく出るので、「どんな街に住むか」を先に見せられます。物件検索サイトは情報が細かくなりがちなので、入り口だけは広く取る、という考え方です。

メイン画像を選ぶときのコツ。文字を重ねる位置は、管理画面から「左・中央・右」で選べます。このデモは左に寄せているので、左半分が空いている写真を使っています。空の広い住宅街の写真です。

このデモでは、色を2つ変えています

メインカラーを濃い青（#1f5c8b）、アクセントカラーを金茶（#c9974a）にしました。変更したのは管理画面の「デザイン → テーマカラー」で、カラーピッカーから色を選んだだけです。

不動産は「信頼できそうか」を先に見られる業種なので、落ち着いた青を土台にして、ボタンや見出しの装飾に金茶を差しています。

同じフレームでも、求人のデモは赤にしています。まったく同じ枠なのに、色を変えるだけで別のサイトに見えます。並べて見比べてみてください。

20種類以上のフレームを見る

使用したパーツ

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

ホーム

セクション	使ったパーツ	Free版
物件をさがす（検索）	一覧の検索フォーム
新着の売買物件・賃貸物件	一覧（記事）
ごあいさつ	基本セット（見出し＋本文＋画像）
取扱いサービス（3列）	特徴・サービス（アイコン3列）
お客様の声	お客様の声（星評価）
お知らせ	お知らせ一覧（最新記事）
アクセス（地図）	埋め込み（YouTube・地図・iframe）

売買物件・賃貸物件・お気に入り

セクション	使ったパーツ	Free版
ページ冒頭の説明	基本セット（見出し＋本文＋画像）
物件一覧（50件ずつ）	一覧（記事）
♡を押した物件	お気に入り一覧

物件の詳細ページ（自動で作られる部分）

セクション	使ったパーツ	Free版
似ている物件	似ている記事（※詳細ページ専用）
最近見た物件	最近見た一覧

詳細ページの下に出す内容は、「〇〇：詳細ページの下に出す内容」というページを作って、そこにパーツを置くだけです。100件すべてに同じものが出ます。1件ずつ設定する必要はありません。

ご購入の流れ・会社案内

セクション	使ったパーツ	Free版
ご購入の流れ（6ステップ）	沿革・年表（タイムライン）
諸費用の目安（3列の表）	多列テーブル（自由な列数）
よくあるご質問	FAQ（クリックで開閉）
会社概要の表	表（項目と内容）
沿革	沿革・年表（タイムライン）
アクセス（箇条書き）	箇条書き（中黒・番号）

全15種類のパーツのうち、5種類は製品版でのみ使えるものです。ただし前の項でお伝えしたとおり、一覧まわりのパーツは Free版にもありますが、項目が6つまでという制限があります。表の「○」は「パーツとして入っている」という意味とお考えください。製品版では約50種類のパーツが使えます。

パーツの一覧を見る

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

製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、ご購入後にお問い合わせください。

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

作るときの参考に
物件サイトで迷いやすいところ

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

100件も登録するのは大変では？: 正直なところ、最初の登録には時間がかかります。ただ、大変なのは1件目だけです。
2件目からは複製して書き換えるのがおすすめです。項目の構成は同じなので、価格と所在地と写真を替えれば終わります。
また、全部を一度に入れる必要はありません。10件でも一覧は成立します。取扱いが増えたら足していけば大丈夫です。
項目は、あとから増やせますか: 増やせます。ただ、先に決めておくほうが断然ラクです。
たとえば50件登録したあとで「駐車場台数」を足すと、50件ぶん、その欄を埋めていくことになります。
おすすめは、最初に3〜5件だけ登録して、一覧と詳細ページの見え方を確かめること。「この項目、カードに出さなくてよかった」といったことが、そこで分かります。
成約した物件は、どうすればいいですか: 2つのやり方があります。
ひとつは、非公開にする。一覧からも検索からも消えます。
もうひとつは、「成約済み（SOLD）」のチェックを入れる。公開したまま「成約済み」のバッジが付きます。「この会社は実際に成約している」と伝わるので、あえて残す会社もあります。
このデモでは、100件のうち6件を「成約済み」にしてあります。一覧でも詳細ページでも、同じように出ます。
このバッジの言葉は、リストごとに決められます。管理画面の「リスト管理」に「「成約済み」バッジの文言」という欄があり、空欄なら「成約済み」。求人のデモでは「募集終了」に変えてあります。講座なら「満席」、中古車なら「商談中」というように、扱うものに合わせて変えられます。
写真は1件に何枚まで入れられますか: 枚数の制限はありません。ただ全部の物件に10枚ずつ入れる必要はないと思います。
このデモでは、新しい物件ほど写真を多くしています。一覧の上のほうがよく見られるので、そこに力を入れる、という配分です。古い物件は1〜2枚でも成立します。
なお動画も混ぜられます。内見動画を1本入れておくと、遠方の方に喜ばれます。
押していないのに、お気に入りに物件が入っています: 作り替えのときに起こります。先にお伝えしておきます。
♡は訪問者のブラウザに「記事の番号」だけを記録しています。サイトのデータを入れ替えても、ブラウザ側の記録はそのまま残ります。そのため、テスト中に押した♡が、本番のデータに切り替えたあとも残り、まったく別の物件が入っているように見えることがあります。
ご自身の画面で気づいたときは、ブラウザの閲覧データ（サイトデータ）を消せば直ります。
ただ、すでに公開していたサイトを作り替える場合は、訪問者のブラウザにも古い記録が残っています。訪問者にデータを消してもらうことはできません。どうしても残したくないときは、新しいリストの名前を変えてください。たとえば以前が「bukken」なら「bukken2」にする。記録はリストの名前ごとに分かれているので、名前が変われば古い♡は読み込まれません。
少し強引な方法ですが、確実です。新しく作る場合は気にしなくて大丈夫です。
売買と賃貸を、1つのリストにまとめてもいいですか: まとめられます。カテゴリで「売買マンション」「賃貸アパート」と分ければ、1本でも運用できます。
このデモを2本に分けたのは、項目名を変えたかったからです。売買は「価格・面積」、賃貸は「賃料・専有面積」。同じ欄に両方を入れると、どちらかで不自然な言葉になります。
項目名が同じでいいなら1本、変えたいなら2本とお考えください。
スマホでの見え方が心配: すべてのパーツが、画面の幅に合わせて自動的に並び替わります。スマホ用に別のページを作る必要はありません。横に並んだカードは縦に、検索フォームは折りたたまれ、表は横スクロールに切り替わります。
物件サイトはスマホで見られることが多いので、お手持ちの端末でもこのデモを開いてみてください。

この構成で作れるサイト
不動産以外にも

このデモは不動産会社を想定していますが、「たくさんの中から条件で選んでもらう」サイトであれば、同じ構成がそのまま使えます。

中古車販売／店舗・テナント物件／貸し会議室・レンタルスペース／トランクルーム／中古機械・農機具／不動産投資物件／リフォームの施工事例／宿の部屋タイプ紹介など。

変えるのは項目の名前と、しぼり込みの選択肢だけです。「価格・面積・築年数」を「価格・走行距離・年式」に置き換えれば、中古車サイトになります。パーツもフレームも、そのまま使えます。

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

Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
一覧・しぼり込み・詳細ページ・お気に入りは、無料版でも動きます。項目数の上限（6つ）はありますが、使い勝手はそのまま確かめられます。

不動産向けの無料版（siyou-fudosan）は、最初から物件データが入った状態で届きます。設置してすぐ、しぼり込みや詳細ページを触っていただけます。

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

製品版は買い切りです。1サイト分で 44,000円（税込）、月額はかかりません。制作会社様向けに、継続して納品できるプランもあります。プラン別の機能比較をみる

一覧・詳細プラグイン入りの Free(無料版) をダウンロード

このデモをもう一度見る

製品版を購入する