AIでディレクトリーサイトを作る方法

ビルダーを開く前に、サイトの最小限で役立つ版を先に書き出しておきましょう。

多くのディレクトリーサイトでは、以下が基本になります。

• ニッチを説明するホームページ
• カード一覧のリストページ
• 検索といくつかのフィルター
• 各項目の詳細ページ
• 人が掲載候補を提案できる送信・問い合わせページ
• 基本的なナビゲーションとフッターページ

あわせてデータ構造も決めます。ディレクトリーは基本的にレコードの集まりなので、項目を具体的にしましょう。例：

• name
• category
• city or region
• short description
• website URL
• image
• pricing tier
• tags
• contact email

次に、誰が何をできるかを決めます。

• 訪問者は閲覧と検索ができる
• 編集者は掲載情報を追加・更新できる
• 事業者は自分の掲載を送信できる

最初の版が厳選済みのディレクトリーだけなら、今すぐサインインは不要かもしれません。アカウント、保存機能、掲載申請が必要なら、作成前にその前提を固めておきましょう。

最初のプロンプトは、構成、技術選定、プロジェクトのトーンを決めるので重要です。Moremadeでは、自然な言葉でサイトを説明すると、AIエージェントがソースコードを書き、そのあとライブプレビューを表示します。

良い最初のプロンプトには、次の内容を含めましょう。

• ディレクトリーの種類
• 必要なページ
• 各掲載情報の主要フィールド
• デザインの雰囲気
• コンテンツを今は静的にするか、あとでデータ接続するか
• モバイル要件

具体的に書くことが大切です。まだ運用フローを決めている途中なら、一度に全部を頼まないようにしましょう。

React + Tailwindで、リスボンの独立系コーヒーショップ向けディレクトリーサイトを作成してください。ホームページ、検索可能なカード一覧のブラウズページ、地域名と価格帯のフィルター、各ショップの詳細ページを含めてください。各掲載情報には、name、photo、short description、address、opening hours、website、wifiやbrunchのようなtagsを表示してください。ナビゲーションはシンプルで、モバイル対応のカードグリッドを持つクリーンな編集風レイアウトにしてください。まずはサンプルデータで始めてください。submit-a-shopページをフォームレイアウト付きで追加してください。ただし、バックエンドはまだ不要です。

最初の作成が終わったら、同僚からフロントエンドの下書きを受け取ったときのように、ライブプレビューを確認しましょう。ページ階層、余白、フィルターの動作、カードの読みやすさ、詳細ページで必要な情報がきちんと出ているかをチェックします。

Moremadeではチャットで変更でき、ビジュアルインスペクターとコードビューも使えます。大きく書き換えるのではなく、短く具体的に依頼するのがコツです。

役立つ追加プロンプトの例を3つ挙げます。

• 「掲載カードの画像を4:3にして、tagsを説明文の下に移動し、websiteリンクをセカンダリーボタンにしてください。」
• 「browseページに、search、neighbourhood、priceのフィルターを備えた固定フィルターバーを追加してください。モバイルではフィルターをドロワーに折りたたんでください。」
• 「ホームページのheroとintroのコピーを、より中立的で実用的な表現に書き直してください。掲載基準の説明セクションも追加してください。」

この段階では、通常は数回やり取りします。1回の変更では1種類に集中しましょう。

• レイアウトとナビゲーション
• フィルターロジックとカード内容
• コピーとラベル
• モバイルの余白
• ボタン文言やコントラストなどのアクセシビリティ

あるページがうまくいったら、そのパターンを他のページにも展開するように依頼しましょう。

多くのディレクトリーは、まずサンプルや厳選済みのコンテンツで公開できます。バックエンド要素は、実際の必要性が出たときだけ追加しましょう。

次のような場合はSupabaseを使います。

• 掲載情報用のデータベースが必要
• 管理者またはユーザーのサインインが必要
• 画像用のファイル保存が必要
• ユーザーが掲載を送信する

使用例：

• 編集者がデータベースにレコードを追加する地域ビジネスディレクトリー
• ユーザーがログインしてプロフィールを管理する会員ディレクトリー
• 送信ワークフローのあるディレクトリー

次のような課金がある場合はStripeを使います。

• 有料の掲載申請
• スポンサード枠
• プレミアムデータへのサブスクリプションアクセス

スコープは小さく保ちましょう。最初の版が公開ブラウズだけなら、アカウントシステムや決済はまだ追加しないでください。MoremadeにはSupabaseとStripeのコネクターがあるので、プロダクトモデルが明確になった段階で接続できます。

よくある流れは次の通りです。

• まず公開ブラウズ体験を作る
• 掲載情報と管理編集のためにSupabaseを接続する
• 有料の送信フローが必要になったらStripeを後から追加する

ディレクトリーサイトは、デスクトップでは問題なく見えても、スマホでは扱いづらいことがよくあります。典型的な問題は、カードが長すぎる、フィルターが窮屈、詳細ページのセクションが多すぎて崩れている、などです。

プレビューで次の点を確認しましょう。

• 検索バーの幅とタップしやすさ
• フィルターが適切に折りたたまれるか
• カード画像のトリミング
• address、tags、メタデータの読みやすさ
• ボタンやフォーム周りの余白
• 詳細ページで最も重要な情報が上部近くにあるか

必要なら、次のような具体的なモバイル調整を依頼します。

• カード本文を2行に減らす
• 補助メタデータを折り返しより下へ移動する
• フィルターチップを横スクロール行にする
• 小さい画面ではCTAボタンを全幅にする

このタイミングで、ビジュアルインスペクターを使って要素をクリックし、直接調整するのも有効です。

構成とコンテンツが安定してきたら、公開しましょう。Moremadeはワンクリックで無料のyourname.moremade.aiサブドメインに公開できます。有料プランでは独自ドメインを接続でき、ドメインもMoremade内で購入できます。

実用的な公開手順は次の通りです。

• まず無料サブドメインで公開する
• リンク、フォーム、ページタイトルを確認する
• 何人かに見てもらってフィードバックを得る
• サイトが整ったら独自ドメインを接続する

プラットフォーム外にコピーを残したい場合は、完全なソースをZIPで書き出すか、GitHubへプッシュできます。サイトは本物のReact + Tailwindコードで作られるので、独自形式に縛られることはありません。

問題の多くは、ビルダーそのものではなく構成の不明確さから起こります。

次の失敗は避けましょう。

• フィルターを最初から増やしすぎる。 実際に人が絞り込みに使う2〜3項目から始めましょう。
• データモデルがない。 掲載フィールドが曖昧だと、各ページの整合性が取れません。
• キュレーションと送信をルールなしで混ぜる。 掲載を編集部主体にするのか、ユーザー投稿にするのか、両方にするのか決めましょう。
• 必要になる前にサインインを入れる。 公開ディレクトリーは、公開時点ではアカウントなしでも十分成立することが多いです。
• 機能を全部一気に入れた長文プロンプトを書く。 まずは核となる流れを作り、その後で小さく改善しましょう。
• モバイル確認を無視する。 ディレクトリー閲覧の多くはスマホで行われます。
• 引き継ぎ計画なしで公開する。 後できれいに引き継ぐ可能性があるなら、コードを書き出すかGitHubへプッシュしておきましょう。

バージョン履歴も役立ちます。1回の変更で悪くなったら、戻してからより狭い指示でやり直せます。