ガイド

WordPressで不動産サイトを構築する

不動産サイトには四つの役割があります。物件を見せる、購入希望者が条件で絞り込めるようにする、物件情報に関する疑問に答える、そして問い合わせを受け付けることです。本ガイドではこの四つすべてを扱い、空のWordPressインストールから始めて、購入希望者が絞り込める物件一覧ページの完成までを解説します。テーマにはMLSやIDXのフィード、CRMが含まれていないため、本ガイドは、担当エージェント、小規模な仲介会社、自社物件を掲載する開発者を対象としています。

ステップ1:WordPressの準備

最初の物件を掲載する前に、3つの設定を決めておきましょう。いずれも後から変更しにくい箇所に反映されるためです。

  • サイトのタイトルとキャッチフレーズ。「設定」、次に「一般」を開きます。タイトルには不動産会社名を入れ、キャッチフレーズには何を、どこで扱っているか(例:ある地区の一戸建て住宅)を書きます。検索結果と共有リンクには、この2行がそのまま引用されます。
  • パーマリンク。設定、パーマリンク、投稿名の順に選びます。これで各物件に読みやすいアドレスが付きます。物件のリンクはパートナーや親、友人の間で転送されることが多いため、この設定は重要です。
  • タイムゾーン。 再度、一般設定画面で確認してください。問い合わせにはこの設定を基にタイムスタンプが付くため、どの購入者が先に問い合わせたかは、このタイムスタンプでわかります。

掲載物件は写真が多く、物件ごとにギャラリーが付くため、インポートがメディアの途中で止まる典型的な原因は PHP のメモリ上限が低いことです。現在の上限値をホスティング会社に確認してください。バージョン要件とバックアップの手順はすべての Canvas サイトで共通なので、インポートガイドに記載しています。

バージョン、バックアップ、ホスティングの余力

問い合わせが1日未読のまま放置されると、購入希望者を逃してしまうことがあります。WordPressは、別途設定しない限りメールをサーバーに渡しますが、多くのホスティング会社はそれを黙って破棄します。そのため、物件掲載を公開する前に、メール配信サービスかSMTPプラグインを接続してください。

手順2:Canvasをインストールし、セットアップウィザードを実行

テーマのzipファイルをダッシュボードからアップロードしてください(外観 > テーマ > 新規追加 > テーマのアップロード)。有効化するとセットアップウィザードがすぐに始まります。求められたらライセンスキーを貼り付けてください。このキーにより、ウィザードは Real Estate パッケージを取得できます。デモのステップでは Real Estate を検索してください。このデザインはサードパーティ製プラグインを使用しないため、プラグインのステップではインストールするものがなく、自動的に次へ進みます。

ウィザードの最後では、サイト名も設定します。サイト全体をインポートした場合、この手順は自動で入力されます。すべての手順はスキップでき、後からCanvasメニューで再開できます。

セットアップウィザードのデモ一覧。各カードには、インポート前にデモが追加するコンテンツの数が表示されます
デモの選び方。カードには、Real Estate デモをインポートする前に追加される内容が数で示されます。

セットアップウィザードの手順を順番に解説します

ライセンスの料金と、カバーするサイト数

ステップ3:不動産デモをインポート

インポートする前に、購入者と同じようにライブプレビューを使ってみてください。検索を実行し、価格で絞り込み、物件を開いてみます。これは、これからインストールするテーマ上で動作しているReal Estate デモそのものです。

対象範囲の選び方

新しい不動産会社のサイトでは、デザイン一式を取り入れるのがおすすめです。サイト全体にインポートすると、デモのテーマオプション、フォント、カラー、メニューがそのまま使えるようになります。すでにサイトを運営していて、見た目はそのままに物件掲載の仕組みだけを取り入れたい場合は、既存のウェブサイトにインポートしてください。ページと物件データが追加され、お使いのデザインはそのまま残ります。

含まれる内容

  • 9ページ:ホームページのデザイン3種、物件一覧ページ、サービス、ビルダー、会社概要、お問い合わせ、ブログ
  • 10件の物件があり、それぞれ Properties コンテンツタイプのレコードで、価格、寝室数、浴室数、面積、ギャラリー、地図を含みます。
  • ヴィラ、アパート、オフィス、邸宅、商業用・住宅用の物件タイプと、各物件を分類する所在地
  • ブログ記事5件があるので、初日からマーケットニュースのセクションが空になりません
  • 10件のフォーム:物件検索4件、お問い合わせフォーム、クイック見積もりフォーム2件、予約フォーム、購読フォーム
  • ヘッダー、フッター、トップバー、サイドパネル、4種類のヒーローデザイン。いずれも編集可能なレコードです。
Canvas Real Estate デモの一覧ページ。ヒーローの上に物件検索バーがあり、その下に物件カードのグリッドが並んでいます。
インポート後の一覧ページです。検索バーが、実際の物件情報のグリッドの上に配置されています。

デザインを変えたくなりましたか?Canvasの「デモのインポート」から、このインポートを元に戻せます。物件レコードもすべて含めて元に戻り、以前の設定も復元されます。

デモのインポートの仕組みを詳しく解説します

手順4:デモの文章と画像を差し替え

そのまま使うホームページを固定ページから開きます。エディターでは、実際のヘッダー、検索バンド、フッターの中に表示されるため、編集中のページが購入者の最初に目にするページになります。

3つのホームデザインから1つを選びましょう

デモには3種類のホームページが含まれています。標準のホーム、スライダー付きのホーム、売買・賃貸向けのホームです。売買・賃貸向けのホームでは、検索がこの2種類をタブで提供します。「設定」→「表示設定」で使いたいものをフロントページに指定し、決めたら残りの2つは削除してください。3つのホームページを管理し続ける必要はありません。

まず文章、次に写真

見出しや段落は、そのまま上から入力して書き換えてください。続いて画像を差し替えます。画像を選択し、メディアライブラリから別の画像に置き換えてください。外観の写真は、デモの縦横比に近いものを使うと、ヒーロー画像がずれにくくなります。色、リンク、サイズは、各ブロックを開くと右側に表示される設定パネルで変更できます。

デモのコピーを、あなただけが語れる内容に置き換えてください。実際に担当しているエリア、その地域での経験年数、手数料に含まれる内容などです。2人のエージェントで迷っている購入者は、細部まで読み込みます。合わないセクションは削除し、代わりにパターンを挿入できます。Canvasには183件のパターンと314個のブロックが同梱されています。パターンは通常のブロックとして追加され、他のブロックと同じように並べ替えられます。

コンテンツの周囲にヘッダー、ヒーロー、フッターが表示された Canvas ページを示す WordPress ブロックエディター
その場で編集。 作業中はヘッダーとフッターがページを囲むように表示されます。

ステップ5:物件をレコードとして入力

ここはサイトを保守しやすいかどうかを左右する重要なステップです。不動産デモにある物件は、レイアウトを組む対象のページではありません。物件は「Properties」コンテンツタイプのレコードであり、投稿と同様に管理画面に一覧表示されます。すべてのカード、一覧の各行、そして物件ごとのページは、このレコードから情報を読み込みます。

1件の物件データに含まれる項目

  • 価格とその期間は、見積もりでの伝え方どおりに記載します:$1.2m(Leasehold付き)、または$799(月額)。
  • 数字のみで入力した価格と面積をその横に入力します。これらは検索範囲フィルターが比較する値なので、空欄のままのレコードは価格や面積のフィルターからは外れますが、絞り込みなしの検索には表示され続けます。
  • バッジ(「販売中」「長期賃貸」「特価」など)。レコード上の項目として設定するため、グラフィックを作り直す必要はありません。
  • 寝室数、浴室数、床面積、所在地は、購入希望者がカードを見て真っ先に確認する項目です。
  • ギャラリー、動画リンク、マップの埋め込みに加えて、統計ストリップ、仕様リスト、設備リスト(1行に1項目ずつ記入)があります。
  • 物件掲載に表示される担当者。名前、役職、写真を含みます。

すべての物件を2回登録する

各物件に、物件種別と所在地を設定してください。この2つの分類は、検索ドロップダウンの元になり、一覧ブロックの絞り込みにも使われます。そのため、どちらにも分類されていない物件は、誰も見つけられない物件になってしまいます。デモには、ヴィラ、アパート、オフィス、邸宅、商業、住宅の各種類と、4つのエリアが最初から用意されています。これらを実際のエリア名などに変更し、必要に応じて追加してください。

10件のデモレコードを一通り確認してください。最初の1件を編集してフィールドを把握し、残りを削除して自分のレコードを追加します。最初の数件は時間がかかりますが、その後はデータ入力の作業になり、物件ページのレイアウトについて改めて考える必要はありません。

スマートフォンで表示したCanvas不動産デモの物件ページ。物件名、種別、ギャラリーと動画のボタン、価格と期間が表示されています。
1つのレコード、スマートフォンの画面で。 名前、種類、ギャラリー、動画、価格はすべて、レコードのフィールドから読み込まれます。

物件ページは、それぞれ記録の一部を表示するブロックで構成されています。ヒーローバナー、統計バー、仕様表、設備リスト、地図の埋め込み、動画の埋め込み、類似物件の一覧などです。並べ替えたり、不要なものを削除したりできます。

ステップ7:フォームで問い合わせを受け付ける

問い合わせに対応できない物件情報は、ただのパンフレットに過ぎません。このデモには問い合わせフォームが設定済みで含まれています。各フォームはフォームレコードとして登録され、Form Embedブロックを使えば任意のページに配置できます。

デモに付属する3つ

  • お問い合わせフォームは、お問い合わせページにある一般的な問い合わせ用です。
  • 2種類の簡単な査定フォーム、ダークとライトの各1つで、物件一覧の横に配置する短い査定依頼用です。
  • 予約フォーム、特定の物件の内覧や押さえの申し込みに使用します。

一度だけ設定します

3つのフォームはいずれも問い合わせを保存し、メールで送信します。各フォームを開き、通知先のアドレスを実際に確認する人のものに変更してください。件名には、物件種別など後で絞り込みに使える言葉を入れておきましょう。

お問い合わせはすべて、お使いのサイトにも保存され、WordPress管理画面の「Submissions」で確認できるため、受信箱がいっぱいでもリードが失われることはありません。保持期間を設定すると、古いエントリは定期的に削除または匿名化されます。これにより、購入者の名前と電話番号を保存する期間が決まります。CRMはテーマの外に置くべきものです。フォームのwebhookアクションが、各問い合わせを使用中のCRMに引き渡します。Canvasは、CRMを装うことはありません。

ステップ8: ヘッダー、連絡先、フッターを設定

購入意欲の高い買い手は、数字を探すためにページ上部を、住所を探すためにページ下部を見ます。Canvasでは、ページの両端はどちらもブロックで構成されたレコードであり、ページを編集するのと同じ方法で編集できます。

ヘッダー

ヘッダーはゾーン単位で構成します。ロゴは左側、ナビゲーションは中央に配置し、右側には訪問者にいちばんしてほしい操作(査定の予約など)用の Header Button を置きます。その隣には、電話番号を載せた Header Icon Link を配置します。デモのヘッダーは、ヒーローの写真の上では背景が透明で、ページをスクロールすると不透明になります。どちらも設定で切り替えられ、ページ単位でサイト全体のヘッダーを上書きすることもできます。

その上にトップバーが配置され、その背後ではサイドパネルが待機しています。トップバーは独立したレコードとして管理されるため、今週末のオープンハウスを告知する場所に適しています。

フッターと詳細情報

オフィスの住所と電話番号はFooter Contactsブロックに入っています。デモの電話番号は、お問い合わせページ、フッター、各フォームの通知設定など、すべての箇所を見つけ出して差し替えてください。デモの番号に電話をかけてきた見込み客は、その後の連絡を受け取れないまま失われてしまいます。

プラグインを使わずに、ステップごとにヘッダーを作成する

2つの物件デモを比較

ステップ9:確認してから公開

最初の購入希望者がサイトを目にする前に、次のチェックを行ってください。いずれもそれほど時間はかかりません。

  • ご自身で検索を実行してください。 一致する結果があるとわかっている場所、物件タイプ、価格帯を選び、次に結果が一つもないとわかっている条件を選んで、どちらも期待どおり動作するか確認してください。
  • 3件の物件ページを開き、価格、寝室数、浴室数、面積を、お手元の資料と照らし合わせて確認してください。
  • スマートフォンのモバイルデータ通信を使って実際のテスト問い合わせを送信し、届いたメールと保存された登録内容の両方を確認します。
  • スマートフォンで確認してください。物件探しは、ソファで、電車の中で、そして家の前の歩道で行われます。
  • 写真を説明しましょう。代替テキストはスクリーンリーダーで読み上げられ、検索エンジンが部屋の見た目を理解する主な手段の一つです。
  • SEO画面を確認してください。タイトル、説明文、共有カード、構造化データは、16種類のスキーマタイプにわたって、各物件情報から生成されます。そのため、個々の物件情報がそれぞれ固有の検索結果を生み出します。
  • パフォーマンスのスイッチを選択してください。Canvasには35件の最適化があり、それぞれ後からオフにできます。いずれも、ページが使っていないものを読み込むことを防ぎます。

あとは公開するだけです。ここからサイトは、物件が掲載されたり商談が入ったりするたびに更新する物件レコードの集まりになり、作り直すプロジェクトではありません。

出典

このガイドでCanvas以外の内容に触れる場合は、その内容を説明している公式ページを以下に掲載しています。

  • 一般設定画面wordpress.org · WordPressでサイトタイトルとキャッチフレーズを設定する画面。タイムゾーンも同じ画面にあります
  • 「設定」の「パーマリンク」画面wordpress.org · 「投稿名」パーマリンク構造(各ページに読みやすいアドレスを付けます)
  • wp_mail()developer.wordpress.org · WordPressは初期設定でメール送信をPHPのmail()関数に委ねており、送信が成功しても配信された証拠にはなりません
  • 画像チュートリアルw3.org · スクリーンリーダーは、画像の代替テキストを読み上げます
  • テーマとは?developer.wordpress.org · テーマは見た目を制御し、サイトが依存する機能はプラグインに含まれるべきものです
よくある質問

よくある質問

FAQ全体で残りの疑問にお答えし、ドキュメントですべての設定を詳しく解説しています。

MLSやIDXフィードから物件情報を取り込めますか?

いいえ、CRMも含まれていません。Canvasには MLS や IDX の連携、リードパイプラインはありません。Canvasは、自分のWebサイトで公開する物件を掲載し、それらの掲載から生まれる問い合わせを保存します。配信型のフィード、リードパイプライン、内覧スケジューラーはプラグインの領域です。Real Estate デモのフォームはWebhookに送信できるため、普段お使いのツールにリードを届けられます。業界団体の物件フィードがサイトの主な目的であれば、専門の物件掲載プラグインが適しています。

物件を追加するにはどうすればよいですか?

「物件」から「新規追加」の順に進みます。投稿を書く場合と同じです。タイトルには物件名、アイキャッチ画像にはカード用の写真を設定します。エディター下のフィールドで、価格と支払い期間、バッジ、所在地、寝室数、浴室数、床面積、ギャラリー、統計ストリップ、仕様リスト、設備リスト、掲載する担当者、動画リンク、地図の埋め込みを入力します。物件タイプと所在地を設定すると、一覧、検索、個別ページに表示されます。

物件検索は、自分の物件情報を本当に絞り込めますか?

はい、不動産デモの物件検索は、お客様のサイトに公開した物件情報を絞り込むもので、外部から情報を取得することはありません。この検索は検索モードに設定したCanvas Formで、物件一覧ページを指定しています。そのページの物件一覧ブロックが条件を読み取り、検索結果を絞り込みます。条件は、購入か賃貸か、所在地、物件種別、寝室数、浴室数、価格帯、床面積の範囲です。条件はURLに含まれるため、絞り込んだ一覧もリンクやブックマークで保存したり、共有したりできます。

お問い合わせはどこに届きますか?

お問い合わせは、ご自身のWebサイト上のテーブルに保存されてWordPress管理画面に一覧表示されるほか、フォームで設定したメールアドレス宛てにも届きます。デモ内のお問い合わせフォーム、簡単な見積もり依頼フォーム、予約フォームはすべてこの両方に設定されているため、受信トレイがいっぱいでも問い合わせが失われません。各フォームには、目に見えない罠の入力欄であるハニーポットも備わっており、利用者に手間をかけることなくほとんどのスパムを防ぎます。

デモには物件が10件含まれています。200件ある場合はどうなりますか?

200件すべてを物件レコードとして追加してください。デモの10件の物件は例示であり、上限ではありません。一覧ブロックでは、1ページに表示する件数、表示する物件タイプ、並び順を設定できます。検索の所在地と物件タイプのドロップダウンは項目をリアルタイムで読み込むため、来月追加した所在地も、フォームを編集することなく検索に表示されます。

Canvasで次のウェブサイトを構築しましょう

初心者でも、フリーランサーでも、エージェンシーでも、同じブロックとデモを利用できます。まずは1つのサイトから始めて、同じライセンスで必要な数だけサイトを構築できます。