# 社内案内文メーカーを作成するためのプロンプト

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

以下の条件をもとに、「社内案内文メーカー」というWebツールを作成してください。

## ツールの目的

従業員向けの社内案内文を、入力フォームの内容をもとに自動生成できるツールを作成してください。

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

- 社内メール
- 社内掲示板
- チャット投稿
- Word出力
- Excel出力
- コピーして再利用

## 作成するツール名

社内案内文メーカー

## サイト名

SHIGOTO HACK

## デザインの方向性

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

- 白を基調にした清潔感のあるデザイン
- ネイビーをメインカラーにする
- アクセントカラーに黄色を使用する
- ビジネス向けだが、堅すぎず親しみやすい印象
- スマートフォンでも見やすいレスポンシブ対応
- WordPressの固定ページに設置しやすい構成

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

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

1. 案内の種類  
   選択式にしてください。

   選択肢：
   - 年次有給休暇の取得促進
   - 健康診断のお知らせ
   - 年末調整の案内
   - 勤怠提出のお願い
   - 社内研修のお知らせ
   - 休業日・営業時間変更のお知らせ
   - 書類提出のお願い
   - 社内ルール変更の案内
   - その他のお知らせ

2. 対象者  
   初期値は「全従業員」にしてください。

3. 実施日・期限  
   プレースホルダーは「例：2026年7月31日まで」にしてください。

4. 問い合わせ先  
   初期値は「人事労務担当」にしてください。

5. 伝えたい内容  
   複数行入力できるようにしてください。

6. 提出物・対応事項  
   複数行入力できるようにしてください。

7. 文体  
   選択式にしてください。

   選択肢：
   - やわらかく丁寧
   - 簡潔
   - フォーマル
   - 親しみやすい

## 生成する文章

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

1. 件名
2. 社内メール向け案内文
3. 掲示板向け案内文
4. チャット投稿向け短文

## 文章作成の条件

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

- 従業員に伝わりやすい文章にする
- 命令口調になりすぎない
- 必要な対応事項が分かるようにする
- 社内メールや掲示板でそのまま使いやすい形にする
- 文体の選択に応じて、文章の雰囲気を少し変える
- 労務・社内ルールに関する内容は、最終確認が必要であることを前提にする

## 必要な機能

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

1. 案内文作成機能  
   入力された内容をもとに、案内文を画面上に表示する。

2. コピー機能  
   作成結果をクリップボードにコピーできるようにする。

3. Word出力機能  
   作成結果をWordで開ける形式でダウンロードできるようにする。  
   簡易実装として .doc 形式で問題ありません。

4. Excel出力機能  
   入力内容と作成結果を表形式でExcelで開ける形式にしてダウンロードできるようにする。  
   簡易実装として .xls 形式で問題ありません。

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

   リンク先：
   https://shigoto-hack.com/internal-notice-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 や shNotice などの接頭辞を付けてください。
- スマートフォンでも見やすいようにレスポンシブ対応してください。
- ボタンが確実に動作するよう、JavaScriptはDOMの読み込み後に実行されるようにしてください。
- WordPressのCustom JS欄に貼った場合でも動くようにしてください。
- 生成結果の表示エリアは、最初は非表示にしてください。
- 案内文作成後に、作成結果エリアまで自動スクロールするようにしてください。
- コピー、Word出力、Excel出力は、案内文作成後に使えるようにしてください。

## 最終的にほしいもの

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

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