# メール文面整えツールを作成するためのプロンプト

あなたは、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. メールの用途

選択式にしてください。

選択肢：

- 依頼
- お礼
- お詫び
- 日程調整
- 確認
- 報告
- 断り
- 催促
- その他

### 2. 相手

選択式にしてください。

選択肢：

- 社外
- 社内
- 上司
- 取引先
- お客様
- 採用応募者
- その他

### 3. 文体

選択式にしてください。

選択肢：

- やわらかく丁寧
- 丁寧
- 簡潔
- フォーマル
- 親しみやすく

### 4. 件名

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

未入力の場合は、メールの用途に応じて自然な件名を自動補完してください。

例：

- 依頼：ご対応のお願い
- お礼：ご対応のお礼
- お詫び：お詫び
- 日程調整：日程調整のご相談
- 確認：確認のお願い
- 報告：ご報告
- 断り：ご相談への回答
- 催促：ご確認のお願い
- その他：ご連絡

### 5. 元のメール文・伝えたい内容

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

プレースホルダー：

例：
明日の会議ですが、時間を変更できますか？
都合のいい時間を教えてください。

### 6. 補足したい内容

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

プレースホルダー：

例：
候補時間は13時、15時、16時です。
急ぎではありませんが、今日中に分かると助かります。

### 7. 署名・差出人名

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

プレースホルダー：

例：
株式会社〇〇
営業部　山田

---

## 生成する内容

「メール文面を整える」ボタンを押すと、以下の内容を生成してください。

1. 件名
2. メール本文
3. 短め版
4. チャット向け短文

---

## メール本文の条件

メール本文は、以下の構成で作成してください。

1. 宛先に応じた自然な挨拶
2. 用途に応じた導入文
3. 元のメール文・伝えたい内容を自然なビジネス文に整えた本文
4. 補足したい内容がある場合は、自然に追記
5. 用途に応じた締めの一文
6. 署名・差出人名が入力されている場合は最後に追加

---

## 用途別の表現ルール

メールの用途に応じて、以下のような表現を使用してください。

### 依頼

- 恐れ入りますが
- お手数をおかけいたしますが
- ご対応いただけますでしょうか
- 何卒よろしくお願いいたします

### お礼

- ご対応いただきありがとうございます
- 誠にありがとうございます
- 今後ともよろしくお願いいたします

### お詫び

- ご迷惑をおかけし申し訳ございません
- 誠に申し訳ございません
- 今後このようなことがないよう注意いたします

### 日程調整

- 日程についてご相談があり、ご連絡いたしました
- ご都合のよい日時をご教示いただけますと幸いです
- 候補日時をご確認いただけますでしょうか

### 確認

- 下記内容について確認させていただきたく
- ご確認のほどよろしくお願いいたします
- 念のため確認のご連絡です

### 報告

- 下記の件についてご報告いたします
- 進捗について共有いたします
- 以上、ご確認のほどよろしくお願いいたします

### 断り

- 恐れ入りますが
- ご期待に沿えず恐縮ですが
- 今回は見送らせていただきます
- 何卒ご理解いただけますと幸いです

### 催促

- 念のため確認のご連絡です
- お忙しいところ恐れ入りますが
- お手すきの際にご確認いただけますと幸いです

---

## 相手別の表現ルール

相手に応じて挨拶や表現を調整してください。

### 社外・取引先・お客様

- 「お世話になっております。」から始める
- 丁寧で失礼のない表現にする
- 断定的・命令的な表現を避ける

### 社内・上司

- 「お疲れさまです。」から始める
- 丁寧だが、長くなりすぎない表現にする
- 要点が伝わりやすい文章にする

### 採用応募者

- 「お世話になっております。」から始める
- 丁寧で安心感のある表現にする
- 選考や日程に関する内容は誤解が出ないようにする

---

## 文体別の調整

選択された文体に応じて、文章の雰囲気を調整してください。

### やわらかく丁寧

- 丁寧だが堅すぎない文章
- 相手に配慮した表現
- 読みやすく自然な言い回し

### 丁寧

- 一般的なビジネスメールとして自然な文章
- 敬語を適切に使用

### 簡潔

- 文章を短く
- 要点がすぐ分かる構成
- 社内メールやチャットでも使いやすい表現

### フォーマル

- 社外・取引先向けに使いやすい丁寧な表現
- かしこまった印象
- 失礼のない表現

### 親しみやすく

- 丁寧さを保ちながら、やや柔らかい文章
- 堅すぎず、読みやすい文面

---

## 短め版の条件

短め版は、メール本文よりも簡潔にしてください。

- 挨拶
- 要件
- 必要に応じた補足
- 締めの一文

を含めてください。

---

## チャット向け短文の条件

チャット向け短文は、社内チャットやビジネスチャットで使いやすい短文にしてください。

- 長すぎない
- 失礼にならない
- 要点が分かる
- 用途に応じた締め文を入れる

---

## 文章作成の条件

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

- 元の文章の意図を勝手に変えない
- 事実関係を勝手に追加しない
- 相手との関係性に応じて丁寧さを調整する
- 命令口調にならない
- 過度にへりくだりすぎない
- 読みやすい段落構成にする
- 件名は自然で分かりやすいものにする
- 未入力の項目がある場合でも、自然な文章になるように補完する
- 不明点や確認が必要な内容は断定しない
- 法律判断や契約判断など、専門的な内容を勝手に断定しない

---

## 必要な機能

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

### 1. メール文面作成機能

入力された内容をもとに、件名・メール本文・短め版・チャット向け短文を画面上に表示してください。

### 2. コピー機能

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

### 3. Word出力機能

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

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

### 4. Excel出力機能

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

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

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

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

リンク先：

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

---

## 最終的にほしいもの

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

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