AIを使って求人ボードを作る方法

プロンプトを書く前に、最小限で役立つ版を定義しましょう。ほとんどの求人ボードは、初日から複雑な企業側ダッシュボードを必要としません。

実用的な初期版には、通常次のものが含まれます。

• 検索と注目求人を含むホームページ
• フィルター付きの一覧ページ
• 求人詳細ページ
• 応募フォームまたは外部応募リンク
• 将来的に企業へ課金するなら、会社情報ページや料金ページ

ユーザーを明確に決めます。

• 求人を探して応募する候補者
• 後でセルフ投稿を入れるなら求人を掲載する企業
• 提出内容を確認したい場合の管理者

次に、各求人投稿に必要なデータを列挙します。よくある項目は次のとおりです。

• 求人タイトル
• 会社名
• 勤務地
• リモート／出社の区分
• 給与レンジ
• 雇用形態
• カテゴリまたはチーム
• 説明文
• 応募URLまたは応募フォーム
• 投稿日

キュレーション型のボードだけにしたいなら、最初はサインイン不要でもかまいません。企業が自分で求人を投稿する必要があるなら、後から Supabase でデータベースとサインインを追加しましょう。

最初のプロンプトは、短い仕様書のように書きましょう。必要なページ、項目、レイアウト、操作を具体的にします。Moremade は、自然な言葉の説明をライブアプリのプレビューに変え、そのソースコードも生成します。

最初のプロンプトで明確にする内容は次のとおりです。

• サイトの種類
• 必要なページ
• 求人データの項目
• フィルターと検索の挙動
• 見た目のスタイル
• 誰かが「応募」を押したときに何が起きるか

プロンプト例:

テック職とデザイン職向けの求人ボードサイトを作成してください。シンプルで見やすいレイアウトにし、ホームページ、求人一覧ページ、求人詳細ページを用意してください。各求人には、タイトル、会社名、勤務地、リモート状況、給与レンジ、雇用形態、カテゴリ、投稿日、短い要約を表示してください。キーワード検索と、勤務地、カテゴリ、リモート状況、雇用形態で絞り込めるフィルターを追加してください。詳細ページには、完全な説明文と「応募」ボタンを入れてください。今は、応募ボタンは外部リンクではなく応募フォームページを開くようにしてください。読みやすいタイポグラフィを使い、モバイル対応のカードとフォームにしてください。

Moremade が最初のバージョンを生成したら、完成品ではなく動くプロトタイプとして確認します。各ページをクリックし、余白を見て、フィルターを試し、求人情報が素早く読み取れるか確認しましょう。

全体を書き直すのではなく、小さく具体的な追加依頼を出す方が、きれいに改善しやすくなります。

追加入力の例を3つ挙げます。

• 「一覧ページをデスクトップでは2カラムにして、左のサイドバーにフィルター、右に結果を表示してください。モバイルではフィルターをドロワーにしてください。」
• 「各求人カードに Remote、Full-time、給与レンジのバッジを追加し、会社名と投稿日はタイトルより目立たないようにしてください。」
• 「求人詳細ページでは応募ボタンを上部に移動し、デスクトップでは固定の要約パネルを追加し、勤務地、雇用形態、給与をコンパクトなメタデータ行で表示してください。」

特定の要素に問題があるなら、ビジュアルインスペクターでその箇所を指して変更を説明できます。実装の細かい部分を直接確認・調整したい場合は、コードビューを使いましょう。

静的なサンプルボードはデザインや構造の確認には十分ですが、実運用のボードには保存された求人データが必要になることが多いです。Moremade では、Supabase がデータベース、サインイン、ファイル保存の標準オプションです。

Supabase を使うとよいのは、次のような場合です。

• 企業が求人を投稿する必要がある
• 管理者が一覧を確認または編集する必要がある
• 候補者がアカウントを作成する必要がある
• ロゴや添付ファイルをアップロードしたい

次の一歩としては、jobs テーブルとシンプルな投稿フローを依頼するのが自然です。たとえば、Supabase を接続し、新しい求人投稿をデータベースに書き込むフォームを作るよう Moremade に依頼できます。

企業が掲載料を支払う場合を除き、決済は不要です。無料で使う求人ボードなら、Stripe は当面スキップしてかまいません。

Stripe を追加するのは、次のような有料掲載フローを作りたい場合だけです。

• 企業が掲載プランを選ぶ
• 設定した価格でチェックアウトする
• 支払い後に投稿フォームへアクセスできる

最初のリリースはシンプルに保ちましょう。初期の求人ボードの多くでは、アカウント機能よりも、検索、フィルター、信頼できる応募フローの方が重要です。

求人ボードはモバイル流入が多いので、小さい画面での体験を丁寧に確認しましょう。デスクトップでは問題なさそうに見えるレイアウトでも、フィルター、長いタイトル、フォームが競合すると崩れやすくなります。

次の点を確認してください。

• 検索入力とフィルター操作が親指で使いやすい
• カードが縦に長くなりすぎず、視覚的にうるさくならない
• 給与、勤務地、リモート状況が狭い画面でも読める
• 詳細ページで応募ボタンが分かりやすい
• 応募フォームが短く、モバイルでも使いやすい

窮屈に感じる部分があれば、具体的な修正を依頼しましょう。たとえば次のようにします。

• 「モバイルの求人カードの上下余白を減らし、メタデータを2行のコンパクト表示にしてください。」
• 「デスクトップのフィルターチップを、モバイルではスライドオーバーのフィルターパネルにしてください。」
• 「応募フォームをすべての画面サイズで1カラムにし、タッチしやすいよう入力欄の高さを大きくしてください。」

空状態もテストしましょう。求人ボードには、十分な内容の該当なしメッセージと、フィルターをリセットする明確な操作が必要です。

ボードが動作したら公開します。Moremade では、yourname.moremade.ai の無料サブドメインにワンクリックで公開できます。レビュー、社内テスト、初期ローンチに便利です。

有料プランなら、独自ドメインも接続できます。ドメイン自体を Moremade 内で購入することも可能です。

実用的な進め方は次のとおりです。

• Moremade のサブドメインに公開する
• ライブサイトをデスクトップとモバイルでテストする
• フォーム、リンク、ページ読み込みを確認する
• 構成が固まったら独自ドメインを接続する

このプロジェクトは実際の React + Tailwind コードなので、いつでも完全なソースを ZIP で書き出したり、GitHub に push したりできます。これは、ホスティングを移したい、開発者にコードを渡したい、あとでエディタの外で拡張したい場合に重要です。

問題の多くは、最初の段階で詰め込みすぎることや、まだ必要でないシステムを先に追加することから起こります。

次のような失敗に注意してください。

• ユーザー種別を増やしすぎる。 候補者、企業、管理者を一度に始めると、アプリはすぐ複雑になります。
• プロンプトが曖昧。 「モダンな求人ボードを作って」だけでは不十分です。ページ、項目、操作を明記しましょう。
• 決済を作り込みすぎる。 まだ誰も支払っていないなら、掲載フローが検証されるまで Stripe は追加しないでください。
• 求人データの構造を無視する。 勤務地、雇用形態、カテゴリのような項目が一貫して定義されていないと、フィルターはうまく動きません。
• モバイル確認を省く。 情報量の多いメタデータやフィルターは、スマホでは扱いにくくなりがちです。
• 一度に編集しすぎる。 毎回の全体改修より、小さな変更の方が検証しやすいです。

最初の公開では、明快さを重視しましょう。良い検索、役立つフィルター、読みやすい詳細ページ、きちんと動く応募フローが目標です。