AIで不動産サイトを作る方法

AIビルダーに指示を出す前に、そのサイトの最小限で役立つ形を決めておきましょう。

不動産サイトなら、通常は次のような構成になります。

• ホームページ
• フィルター付きの物件一覧ページ
• 物件詳細ページ
• 問い合わせフォーム
• 代理店またはエージェントの紹介ページ

次に、各物件にどんなデータが必要かを決めます。できるだけ具体的にしましょう。

• 物件名
• 価格
• 住所またはエリア
• ベッドルーム数、バスルーム数、広さ
• 簡単な説明
• 画像ギャラリー
• 物件タイプ
• 販売中、賃貸中などのステータス

誰がサイトを使うのかも決めてください。

• 物件を閲覧する購入希望者や入居希望者
• 物件情報を更新するエージェント
• コンテンツを管理する管理者

一覧の少ないマーケティングサイトだけでよければ、静的なサンプルデータから始められます。エージェントがログインして物件を管理する必要があるなら、データベースとサインインを前提にしましょう。Moremadeはデータベース、サインイン、ファイル保存に Supabase をサポートしているので、実データ管理が必要になったら次の自然なステップになります。

生成を始める前に、これらをメモしておきましょう。構成が明確なほど、最初の結果は良くなります。

最初のプロンプトでは、サイト、ページ、スタイル、基本的な動作を、自然な言葉で説明します。レイアウトとコンテンツは具体的に。完璧さではなく、まず動く初版を依頼しましょう。

良い出発点の例はこちらです。

地域の不動産会社向けに、モダンな物件一覧サイトを作ってください。ヒーローセクション、注目物件、検索バー、周辺エリアの紹介、問い合わせセクションを備えたホームページを作成してください。価格、ベッドルーム数、物件タイプ、所在地で絞り込めるフィルター付きの物件一覧ページを追加してください。画像ギャラリー、価格、主要情報、説明、地図のプレースホルダー、問い合わせフォームを備えた物件詳細ページも追加してください。クリーンな React + Tailwind コンポーネント、ニュートラルな配色、サンプル物件データを使ってください。レスポンシブで、モバイルでも見やすいレイアウトにしてください。

Moremade は Webサイト向けに実際の React + Tailwind コードを生成するので、単なるモックアップを並べるだけではありません。ライブプレビューの確認、チャットでの修正、ビジュアルインスペクターの利用、必要ならコードビューでの確認もできます。

最初の生成後は、ユーザーの目線でライブプレビューを確認しましょう。

まず次の点をチェックしてください。

• ホームページの最初の画面で内容が伝わるか
• 物件一覧が見やすいか
• 物件カードに必要な情報が正しく表示されているか
• フィルターが市場に合って見えるか
• 問い合わせまでの導線が分かりやすいか

次の指示でアプリ全体を書き直すのは避けましょう。代わりに、焦点を絞った変更を依頼します。

役立つフォローアップの例:

• 「物件カードの写真をもっと大きくして、価格をより強調し、ベッド数、バス数、広さを住所の下に1行で表示してください。」
• 「フィルターに販売/賃貸、最小ベッドルーム数、所在地のドロップダウンを追加してください。デスクトップでは上部に固定表示し、モバイルでは折りたたみ式にしてください。」
• 「物件詳細ページを再設計して、画像ギャラリーを最初に、次に価格と主要情報、その次に説明、最後に問い合わせフォームを配置してください。デスクトップでは固定表示の問い合わせカードを追加してください。」

ここで Moremade のビジュアルインスペクターが役立ちます。特定の要素を指して、変更内容を説明し、少しずつ調整しましょう。バージョン履歴も重要です。変更でサイトが悪くなっても、最初から作り直さずに戻せます。

多くの不動産サイトは、複雑なバックエンドなしでも公開できます。目的が物件掲載と問い合わせ獲得なら、最初の版はサンプルデータや手動更新のコンテンツで十分なことも多いです。

次のような場合に Supabase を追加しましょう。

• 物件データベースが必要
• エージェントや管理者のサインインが必要
• 画像やファイルの保存が必要
• 問い合わせを保存するフォームが必要

おすすめの構成は次の通りです。

• 物件データ用の properties テーブル
• 複数人が物件を管理するなら agents テーブル
• 問い合わせ送信用の enquiries テーブル

有料相談、申込手数料、プレミアム掲載枠の決済を受け付けたい場合は、Stripe が関係してきます。Moremade には、設定した価格でチェックアウトできる Stripe コネクターが含まれています。一般的な物件検索サイトなら、公開時点では Stripe は不要なことが多いです。

最初の版は狭く絞って作りましょう。半分だけできたポータルを直すより、シンプルに動くサイトを改善していくほうがずっと楽です。

不動産サイトはモバイル流入が多いため、モバイル確認は必須です。

生成されたサイトを小さな画面で確認し、実用上の問題を探してください。

• ヒーロー文言が長すぎる、または曖昧すぎる
• フィルターが画面を占有してしまう
• カードの重要情報が折りたたみ下に押し出される
• 問い合わせフォームの入力欄が窮屈
• 画像ギャラリーがスワイプやタップしづらい

修正は具体的に依頼しましょう。例えば:

• 「モバイルではヒーローの高さを下げて、検索フォームがスクロールなしで見えるようにしてください。」
• 「物件カードをタブレットでは2列、小さいスマホでは1列にしてください。」
• 「モバイルではフィルターのサイドバーをスライドオーバーパネルにしてください。」

問い合わせ導線もテストしてください。フォームを送信し、ラベルを確認し、ボタンの文言が分かりやすいか確かめます。Supabase でサインインや保存済み物件を入れている場合は、その状態もモバイルで確認しましょう。

基本的な流れが動いたら、サイトを公開します。

Moremade なら、無料の yourname.moremade.ai サブドメインへワンクリックで公開できます。これは社内レビュー、クライアント確認、初期テストに便利です。有料プランではカスタムドメインに対応しており、ドメインも Moremade 内で購入できます。

実際のドメインを向ける前に、最後にもう一度確認しましょう。

• 仮の代理店情報を本物に差し替える
• 不要なサンプルの口コミ風テキストを削除する
• 各物件ページに不足項目がないか確認する
• 問い合わせ先が正しいか確認する
• 周辺名や住所の表記を見直す

後でプラットフォーム外に移したいなら、ソース全体を ZIP でエクスポートするか GitHub に push できます。Moremade は閉じたシステムではありません。サイトのコードは実際の React + Tailwind コードなので、必要なら外部でもそのまま作業を続けられます。

最大の失敗は、「不動産サイトを作って」といった曖昧なプロンプトから始めることです。これだと、物件構成が弱い一般的なレイアウトになりがちです。

ほかにもよくある問題があります。

• 機能を最初から増やしすぎる。 まずは閲覧、詳細表示、問い合わせに絞りましょう。ダッシュボードや保存検索は後から追加します。
• データモデルがない。 実際の物件を扱うなら、データベース接続の前に項目を定義しましょう。
• モバイルレイアウトが弱い。 大きなデスクトップ向けフィルターや画像中心のセクションは、スマホで崩れやすいです。
• 対象ユーザーが混在している。 購入者向けサイトと社内エージェントポータルは別製品です。
• エクスポート確認を省く。 所有権が重要なら、コードビュー、ZIP 出力、GitHub push を早めに確認しましょう。
• 理由なく決済を入れる。 多くの不動産サイトは、初日から Stripe を必要としません。

良い基準は、実ユーザーの課題を1つ解決する最小版を出すことです。つまり、「物件を探して問い合わせる」ことができれば十分です。