人材紹介会社のホームページをAIで自作する手順
Kakusan
<!--
content_id: S10
platform: unassigned
status: review
toolbox_industry_asset: industry-47 Recruitment
toolbox_style_id: style-22 Feature-Rich Showcase
product_level: L1
-->
# 人材紹介会社のホームページをAIで自作する手順
人材紹介会社のサイトには、採用したい企業と仕事を探す人が訪れます。二つの入口を混ぜると、誰がどこから相談するのか分かりにくくなります。
この記事では、小規模な紹介会社の業務範囲を整理し、企業向けと求職者向けの導線を持つ静的サイトを作ります。求人データベースや応募者管理は外部サービスへ任せます。
## 二種類の読者を分ける
| 企業向け | 求職者向け |
|---|---|
| 紹介できる職種・地域 | 扱う職種・働き方 |
| 支援の流れ | 相談から紹介までの流れ |
| 契約や料金の案内 | 費用の有無と個人情報の扱い |
| 法人問い合わせ | 求職者登録・相談 |
求人票、履歴書、職務経歴書、選考記録をAIのサイト制作フォルダーへ入れません。
```text
I lead a company in the [industry] industry. The company is called [company name] and provides [product or service] to [target customer]. A common customer problem is [problem], and our difference from similar companies is [difference]. I want visitors to [book / request a quote / call / buy]. Do not write code yet. First create a one-page list covering the website goal, target customer, core value, information I must supply, and recommended pages. Do not invent case studies, prices, reviews, or credentials. Mark missing facts as "Needs confirmation."
```
## 二つの入口を機能別に見せる
採用サービスの参考図とstyle-22「Feature-Rich Showcase」を使います。機能カードは多くても、最初の行動は企業と求職者の二つに整理します。
```text
Use the attached reference image only for visual direction. Do not copy company names, text, numbers, testimonials, or claims from it.
Design a feature showcase landing page. Use: grid layout for features (3-4 columns), feature cards with icons, benefit-focused copy, alternating sections, comparison tables, interactive demos, problem-solution pairs.
Make the layout readable on mobile and desktop. First turn this direction into a design rule sheet covering color, typography, spacing, buttons, images, and dividers. Wait for my approval before implementation.
```
## 静的な会社サイトを作る
```text
Build this business website with the Next.js App Router and ensure output: 'export' produces static files. Pages, images, navigation, and small browser-side interactions are allowed. Do not use a database, login, Next.js API Routes, Server Actions, request-time rendering, private environment variables, or features that require server processing. Before implementation, list any requirement that cannot fit a static website and propose an alternative that needs no backend.
```
前の手順が成功したことを確認してから、次の英文を送ります。
```text
Implement only the home page first. Do not create all pages at once. The home page must include a headline that explains the business, a short description, one primary action, three core benefits, genuine trust information, and footer contact details. Reuse the approved design rules. Do not invent missing facts; mark them as "Needs confirmation." When complete, tell me which devices and content I should check, and wait for my approval before building the next page.
```
企業向けボタンを押して求職者登録へ移動しないか、逆方向も含めて実機で確認します。個人情報を扱う外部サービスの説明は、実際の運用に合わせてください。
## AIと責任者の確認項目
```text
Perform a pre-delivery review of the current static Next.js website. Separate the result into "Checked by AI" and "I must confirm." AI should check widths 375, 768, 1024, and 1440; keyboard navigation; text contrast; image alternative text; reduced motion; links; 404 behavior; static build; and whether .env files, secrets, customer data, or non-public files entered the output. The human section must list company information, prices, business promises, permissions, privacy, and form destinations. Do not publish yet.
```
## MCPを入れた後の再起動を省略しない
公開例は、筆者側で開発しているSakupa MCPです。MCP対応AIツールへ公式設定を貼り付けます。
```text
Install and enable the latest version of Sakupa MCP in the current AI tool using the following configuration:
{
"mcpServers": {
"sakupa": {
"command": "npx",
"args": ["-y", "@sakupa/mcp@latest"]
}
}
}
```
完了したらAIツールを完全に終了して再起動してください。MCPを読み込ませるための必須工程です。再起動後にプロジェクトを開き直し、`init`、`analyze`、`deploy`の読み込みを確かめます。
```text
Confirm that Sakupa MCP is connected and that the init, analyze, and deploy tools are available. Do not initialize, analyze, upload, or publish anything yet. If the tools are unavailable, check whether the Sakupa MCP configuration was loaded after the AI tool restarted.
```
接続を確認できない間は、次の工程へ進みません。確認後に分析します。
```text
Use Sakupa to prepare the project currently open in this AI tool for first-time use. Do not ask me to choose a folder, and do not publish the website. Tell me whether it was successful when complete.
```
前の手順が成功したことを確認してから、次の英文を送ります。
```text
Use Sakupa to inspect the current project and identify the actual website content that can be published. Inspect only; do not upload or make anything public. Tell me what is ready to publish, whether any files should not be made public, and what still requires my confirmation.
```
問題がなければ、プレビュー作成の準備です。
```text
Use Sakupa to publish the website that passed the previous inspection. Before making it public for the first time, explain who can access it, how long the free website remains available, and what I need to keep safe. Wait for my explicit confirmation before publishing. When complete, give me the working URL and the expiration time with time zone.
```
本人の承認後、企業用と求職者用のリンクを公開URLから再確認します。`.sakupa/`は管理情報を含むため、公開物とGitへ入れません。
## 外部サービスへ分ける範囲
求人管理、応募者情報、履歴書、面談記録、選考、契約は会社案内サイトへ保存しません。アクセス権と保存期間を管理できる採用システムへ分けてください。
## 参考資料
- [Next.js: Static Exports](https://nextjs.org/docs/app/guides/static-exports)
- [Sakupa Webサイト制作ガイド](https://sakupa.com/website-guide/en/)
- [Sakupa MCP公開手順](https://sakupa.com/manual/)
本文の構成と推敲には生成AIを使用しました。公開前に求人・職業紹介の現行ルール、個人情報、技術仕様を人が再確認します。
この記事のライター
