# 求人票たたき台メーカーを作成するためのプロンプト

あなたは、WordPressサイトに設置できるWebツールを作成するエンジニア兼UIデザイナーです。

以下の条件をもとに、「求人票たたき台メーカー」というWebツールを作成してください。

---

## ツールの目的

採用担当者、人事担当者、事務担当者が、求人票のたたき台を簡単に作成できるWebツールを作成してください。

入力フォームに募集条件や仕事内容を入力すると、採用サイト・求人媒体・社内確認用に使える求人票のたたき台を自動生成できるようにしてください。

作成した求人票は、以下の用途で使えるようにしてください。

- 採用サイト掲載前の下書き
- 求人媒体掲載前のたたき台
- 社内確認用の求人票
- 採用担当者との共有
- 派遣・紹介案件の整理
- Word出力
- Excel出力
- コピーして再利用

---

## 作成するツール名

求人票たたき台メーカー

---

## サイト名

SHIGOTO HACK

---

## デザインの方向性

以下のイメージで作成してください。

- 白を基調にした清潔感のあるデザイン
- ネイビーをメインカラーにする
- アクセントカラーに黄色を使用する
- ビジネス向けだが、堅すぎず親しみやすい印象
- スマートフォンでも見やすいレスポンシブ対応
- WordPressの固定ページに設置しやすい構成
- SHIGOTO HACKの他ツールとデザインを統一する
- 上部にネイビーのグラデーションヒーローを配置する
- 入力フォーム、作成結果、注意文、プロンプト導線をカード型で表示する

---

## デザインのベース

以下のCSS構成をベースにしてください。

- .sh-tool-wrapper
- .sh-hero
- .sh-label
- .sh-tool-card
- .sh-result-card
- .sh-note
- .sh-prompt-link-card
- .sh-form-grid
- .sh-form-group
- .sh-generate-btn
- .sh-copy-btn
- .sh-word-btn
- .sh-excel-btn

---

## 入力フォームに含める項目

以下の入力項目を用意してください。

### 1. 職種カテゴリ

選択式にしてください。

選択肢：

- 事務・管理
- 営業・販売
- 製造・軽作業
- IT・サポート
- その他

### 2. よくある職種

選択式にしてください。

選択肢：

- 一般事務
- 営業事務
- 経理事務
- 人事・労務
- 総務
- 営業職
- コールセンター
- 受付
- 軽作業
- 製造スタッフ
- 倉庫内作業
- ITサポート
- その他

### 3. その他の職種名

「よくある職種」で「その他」を選んだ場合のみ表示してください。

### 4. 雇用形態

選択式にしてください。

選択肢：

- 正社員
- 契約社員
- 派遣社員
- アルバイト・パート
- 業務委託

### 5. 勤務地

テキスト入力にしてください。

プレースホルダー：

例：大阪市内

### 6. 勤務時間

テキスト入力にしてください。

プレースホルダー：

例：9:00〜18:00 休憩60分

### 7. 休日休暇

テキスト入力にしてください。

プレースホルダー：

例：完全週休2日制、土日祝休み、年末年始休暇

### 8. 給与

テキスト入力にしてください。

プレースホルダー：

例：月給22万円〜26万円

### 9. 文体

選択式にしてください。

選択肢：

- 求職者向けに親しみやすく
- やさしく丁寧
- 簡潔
- フォーマル

### 10. 業務内容・募集背景メモ

複数行入力できるテキストエリアにしてください。

この項目は、よくある職種を選ばない場合に、自由記述から近い職種テンプレートを判定するために使用してください。

プレースホルダー：

例：社内の事務業務をサポートするポジションです。データ入力や書類作成、電話・メール対応などを担当します。

### 11. 仕事内容

複数行入力できるテキストエリアにしてください。

### 12. 応募条件

複数行入力できるテキストエリアにしてください。

### 13. 歓迎条件

複数行入力できるテキストエリアにしてください。

### 14. 福利厚生

複数行入力できるテキストエリアにしてください。

### 15. 会社・職場の特徴

複数行入力できるテキストエリアにしてください。

---

## 自動入力機能

「求人票の項目を自動入力する」ボタンを設置してください。

このボタンを押すと、以下の優先順位で自動入力してください。

1. よくある職種が選択されている場合は、その職種テンプレートを使用する
2. よくある職種が未選択の場合は、業務内容・募集背景メモの自由記述からキーワード判定する
3. 該当テンプレートがない場合は、汎用テンプレートを使用する

---

## 自動入力する内容

自動入力ボタンを押すと、以下の項目を自動入力してください。

- 仕事内容
- 応募条件
- 歓迎条件
- 会社・職場の特徴

福利厚生は、ユーザーが入力できるようにしてください。
未入力の場合は、求人票作成時に一般的な内容で補完してください。

---

## 職種テンプレート

以下の職種について、テンプレートを用意してください。

- 一般事務
- 営業事務
- 経理事務
- 人事・労務
- 総務
- 営業職
- コールセンター
- 受付
- 軽作業
- 製造スタッフ
- 倉庫内作業
- ITサポート

各テンプレートには、以下を含めてください。

- keywords
- tasks
- requirements
- welcome
- workplace

---

## 求人票で生成する内容

「求人票を作成する」ボタンを押すと、以下の内容を生成してください。

1. 求人票タイトル
2. 職種カテゴリ
3. 募集職種
4. 雇用形態
5. 募集背景・業務メモ
6. 仕事内容
7. 応募条件
8. 歓迎条件
9. 勤務地
10. 勤務時間
11. 休日休暇
12. 給与
13. 福利厚生
14. 会社・職場の特徴
15. 求人票本文の導入文
16. 応募前の確認ポイント
17. 締めの一文

---

## 文章作成の条件

生成される求人票は、以下の条件を満たしてください。

- 求職者が仕事内容をイメージしやすい文章にする
- 仕事内容は箇条書きで整理する
- 応募条件と歓迎条件を分けて表示する
- 雇用形態、勤務地、勤務時間、休日休暇、給与を分かりやすく表示する
- 福利厚生を箇条書きで整理する
- 会社・職場の特徴は親しみやすく、誇張しすぎない表現にする
- 求人票タイトルは自然で分かりやすいものにする
- 文体の選択に応じて、導入文と締めの一文の雰囲気を少し変える
- 未入力の項目がある場合でも、自然な文章になるように補完する
- 実際の雇用条件や労働条件を勝手に断定しない
- 「必ず」「絶対」「誰でも高収入」など、誤解を招きやすい表現は避ける
- 法令や求人媒体の掲載基準に関わる内容は、確認・修正が必要であることを明記する

---

## 応募前の確認ポイント

求人票の最後に、応募前・掲載前の確認ポイントをチェックリスト形式で入れてください。

例：

□ 募集職種を確認した
□ 雇用形態を確認した
□ 勤務地を確認した
□ 勤務時間を確認した
□ 休日休暇を確認した
□ 給与条件を確認した
□ 仕事内容を確認した
□ 応募条件を確認した
□ 福利厚生を確認した

---

## 必要な機能

以下の機能を実装してください。

### 1. 求人票作成機能

入力された内容をもとに、求人票のたたき台を画面上に表示してください。

### 2. 求人票項目の自動入力機能

選択された職種、または自由記述の業務内容・募集背景メモをもとに、仕事内容・応募条件・歓迎条件・職場の特徴を自動入力してください。

### 3. コピー機能

作成結果をクリップボードにコピーできるようにしてください。

### 4. Word出力機能

作成結果をWordで開ける形式でダウンロードできるようにしてください。

簡易実装として .doc 形式で問題ありません。

### 5. Excel出力機能

入力内容と作成結果を表形式でExcelで開ける形式にしてダウンロードできるようにしてください。

簡易実装として .xls 形式で問題ありません。

### 6. プロンプト紹介ページへの導線

ツールの下部に「このツールの作成に使用したプロンプトを見る」というカード型リンクを設置してください。

リンク先：

https://shigoto-hack.com/job-description-generator-prompt/

---

## ご利用時の注意文

ツール下部に以下の注意文を入れてください。

本ツールで作成される求人票はたたき台です。実際の雇用条件、労働条件、社内ルール、法令、求人媒体の掲載基準に合わせて内容を確認・修正してからご利用ください。

---

## 出力形式

以下の3つに分けてコードを出力してください。

1. HTML
   WordPress固定ページのカスタムHTMLブロックに貼るコード

2. CSS
   WordPressの追加CSSに貼るコード

3. JavaScript
   Custom JSなどに貼るコード

---

## JavaScriptについての注意

JavaScriptは、Custom JSプラグインに貼る前提で作成してください。

そのため、JavaScriptコードには <script> と </script> を含めないでください。

また、HTML側では onclick を使用せず、JavaScript側で addEventListener を使ってボタンにイベントを設定してください。

---

## 実装上の注意

- HTML、CSS、JavaScriptはそれぞれ分けてください。
- WordPressで他の要素とIDやクラス名が衝突しないよう、IDやクラス名には sh や shJob などの接頭辞を付けてください。
- JavaScriptで取得するIDとHTML側のIDは必ず完全一致させてください。
- スマートフォンでも見やすいようにレスポンシブ対応してください。
- ボタンが確実に動作するよう、JavaScriptは DOMContentLoaded の中で実行してください。
- WordPressのCustom JS欄に貼った場合でも動くようにしてください。
- 生成結果の表示エリアは、最初は非表示にしてください。
- 求人票作成後に、作成結果エリアまで自動スクロールするようにしてください。
- コピー、Word出力、Excel出力は、求人票作成後に使えるようにしてください。
- 生成前にコピーや出力ボタンを押した場合は、先に求人票を作成するよう促してください。
- エラーが出にくい、シンプルで安定したJavaScriptにしてください。

---

## 最終的にほしいもの

以下を順番に出力してください。

1. ツールの概要
2. HTMLコード
3. CSSコード
4. JavaScriptコード
5. WordPressでの設置方法
6. 注意点