# 業務マニュアルメーカーを作成するためのプロンプト

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

以下の条件をもとに、「業務マニュアルメーカー」という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. 業務カテゴリ

選択式にしてください。

選択肢：

- 経理
- 労務
- 人事
- 総務
- 営業事務
- その他

### 2. よくある業務

選択式にしてください。

選択肢：

- 請求書発行業務
- 勤怠確認業務
- 経費精算業務
- 入社手続き
- 退職手続き
- 年末調整業務
- 健康診断案内業務
- 備品発注業務
- 契約書管理業務
- 社内研修準備業務
- その他

### 3. その他の業務名

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

### 4. 対象者

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

初期値：

担当者・引き継ぎ担当者

### 5. 実施タイミング

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

プレースホルダー：

例：毎月25日〜月末まで

### 6. 文体

選択式にしてください。

選択肢：

- やさしく丁寧
- 簡潔
- フォーマル
- 新人向けにわかりやすく

### 7. 業務内容

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

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

プレースホルダー：

例：毎月末に社員の勤怠データを確認し、打刻漏れや残業申請の漏れをチェックして、給与計算担当に共有する業務です。

### 8. 業務の目的

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

### 9. 使用するツール・システム

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

### 10. 作業手順

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

作業手順は、以下のようなSTEP形式で表示できるようにしてください。

STEP 1｜事前確認
1-1. 対象データを確認する
1-2. 必要な資料を準備する

STEP 2｜作業実施
2-1. 内容を確認する
2-2. 必要事項を入力する

### 11. 注意点

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

### 12. 完了条件

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

---

## 自動入力機能

「作業手順を自動入力する」ボタンを設置してください。

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

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

---

## 自動入力する内容

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

- 業務の目的
- 使用するツール・システム
- 作業手順
- 注意点
- 完了条件

---

## 業務テンプレート

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

- 請求書発行業務
- 勤怠確認業務
- 経費精算業務
- 入社手続き
- 退職手続き
- 年末調整業務
- 健康診断案内業務
- 備品発注業務
- 契約書管理業務
- 社内研修準備業務

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

- keywords
- purpose
- timing
- tools
- steps
- notes
- completion

---

## 作業手順の条件

作業手順は、単なる番号付きリストではなく、以下のようなSTEP形式で細分化してください。

例：

STEP 1｜事前確認
1-1. 対象情報を確認する
1-2. 対象期間を確認する
1-3. 必要な資料を準備する

STEP 2｜作業準備
2-1. 使用するシステムを開く
2-2. 前回資料や過去の対応履歴を確認する
2-3. 必要な入力項目を確認する

STEP 3｜実作業
3-1. 手順に沿って作業を進める
3-2. 入力内容や作業結果を確認する
3-3. 判断に迷う内容があれば担当者へ確認する

STEP 4｜確認・修正
4-1. 作業内容に誤りがないか確認する
4-2. 必要に応じて関係者へ確認する
4-3. 修正がある場合は修正後に再確認する

STEP 5｜完了処理
5-1. 作業結果を保存する
5-2. 必要に応じて関係者へ共有する
5-3. 完了状況や対応履歴を記録する

---

## 生成する内容

「マニュアルを作成する」ボタンを押すと、以下の内容を生成してください。

1. マニュアルタイトル
2. 業務カテゴリ
3. 入力された業務内容
4. 業務概要
5. 業務の目的
6. 対象者
7. 実施タイミング
8. 使用ツール・システム
9. 作業手順
10. 注意点
11. 完了条件
12. チェックリスト
13. 新人向け補足コメント

---

## チェックリストの条件

作業手順がSTEP形式の場合は、STEP単位でチェックリストを作成してください。

例：

□ STEP 1｜事前確認が完了している
□ STEP 2｜作業準備が完了している
□ STEP 3｜実作業が完了している
□ STEP 4｜確認・修正が完了している
□ STEP 5｜完了処理が完了している

---

## 文章作成の条件

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

- 読んだ人が業務の流れを理解できる文章にする
- 初めて担当する人にも分かりやすい表現にする
- 作業手順はSTEP形式で順番が分かるようにする
- 注意点は箇条書きで整理する
- チェックリストは確認しやすい形にする
- 命令口調になりすぎない
- 社内共有や引き継ぎでそのまま使いやすい形にする
- 文体の選択に応じて、文章の雰囲気を少し変える
- 未入力の項目がある場合でも、自然な文章になるように補完する
- 会社独自のルールや法令判断を勝手に断定しない

---

## 必要な機能

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

### 1. マニュアル作成機能

入力された内容をもとに、業務マニュアルを画面上に表示してください。

### 2. 作業手順の自動入力機能

選択された業務、または自由記述の業務内容をもとに、作業手順・注意点・完了条件などを自動入力してください。

### 3. コピー機能

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

### 4. Word出力機能

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

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

### 5. Excel出力機能

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

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

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

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

リンク先：

https://shigoto-hack.com/business-manual-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 や shManual などの接頭辞を付けてください。
- JavaScriptで取得するIDとHTML側のIDは必ず完全一致させてください。
- スマートフォンでも見やすいようにレスポンシブ対応してください。
- ボタンが確実に動作するよう、JavaScriptは DOMContentLoaded の中で実行してください。
- WordPressのCustom JS欄に貼った場合でも動くようにしてください。
- 生成結果の表示エリアは、最初は非表示にしてください。
- マニュアル作成後に、作成結果エリアまで自動スクロールするようにしてください。
- コピー、Word出力、Excel出力は、マニュアル作成後に使えるようにしてください。
- 生成前にコピーや出力ボタンを押した場合は、先にマニュアルを作成するよう促してください。
- エラーが出にくい、シンプルで安定したJavaScriptにしてください。

---

## 最終的にほしいもの

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

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