# 議事録たたき台メーカーを作成するためのプロンプト

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

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

---

## ツールの目的

会議メモや決定事項、ToDoを入力すると、社内共有しやすい議事録のたたき台を自動作成できるWebツールを作成してください。

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

- 社内会議の議事録作成
- 定例ミーティングの記録
- 打ち合わせ内容の整理
- 決定事項の共有
- ToDo・担当者・期限の整理
- 次回確認事項の整理
- 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. 開催日時

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

プレースホルダー：

例：2026年7月2日 10:00〜11:00

### 3. 開催場所・形式

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

プレースホルダー：

例：会議室A / オンライン

### 4. 文体

選択式にしてください。

選択肢：

- 簡潔
- 丁寧
- フォーマル
- 共有しやすく

### 5. 参加者

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

プレースホルダー：

例：
山田
佐藤
田中

### 6. 議題

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

プレースホルダー：

例：
今月の進捗確認
新規案件の共有
次回までの対応事項

### 7. 会議メモ・話し合った内容

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

プレースホルダー：

例：
・今月の売上は前月比で増加
・新規問い合わせが増えている
・資料作成の担当を決める必要あり
・次回までに各自で進捗を整理する

### 8. 決定事項

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

プレースホルダー：

例：
来週までに提案資料を作成する
新規案件の対応方針を営業部で確認する

### 9. ToDo・担当者・期限

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

プレースホルダー：

例：
山田：提案資料の作成：7月5日まで
佐藤：見積内容の確認：7月4日まで
田中：次回会議の日程調整：今週中

### 10. 次回確認事項

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

プレースホルダー：

例：
提案資料の完成状況
新規案件の進捗
次回会議の日程

---

## 生成する内容

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

1. 議事録タイトル
2. 会議名
3. 開催日時
4. 開催場所・形式
5. 参加者
6. 議題
7. 会議概要
8. 話し合った内容
9. 決定事項
10. ToDo・担当者・期限
11. 次回確認事項
12. 共有時の補足
13. 注意書き

---

## 議事録本文の条件

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

- 会議内容を社内共有しやすい形で整理する
- 参加者は箇条書きで表示する
- 議題は番号付きリストで表示する
- 会議メモは箇条書きで整理する
- 決定事項は箇条書きで整理する
- ToDoは「担当者 / 内容 / 期限」が分かる形式で整理する
- 次回確認事項は箇条書きで整理する
- 未入力の項目がある場合でも自然な文章になるように補完する
- 実際の発言内容や決定事項を勝手に追加しない
- 曖昧な内容は断定しない
- 社内共有しやすい、読みやすい文章にする

---

## ToDo整理の条件

ToDo・担当者・期限欄に以下のような形式で入力された場合：

山田：提案資料の作成：7月5日まで

以下のように整理してください。

・担当者：山田 / 内容：提案資料の作成 / 期限：7月5日まで

担当者や期限が不明な場合は、無理に補完せず「未定」と表示してください。

---

## 文体別の調整

選択された文体に応じて、共有時の補足文を調整してください。

### 簡潔

必要に応じて内容を確認し、関係者へ共有してください。

### 丁寧

内容に相違がないか確認のうえ、関係者へ共有してください。

### フォーマル

関係者に共有する際は、必要に応じて表現や記載内容を確認してください。

### 共有しやすく

関係者が確認しやすいよう、決定事項とToDoを中心に整理しています。

---

## 必要な機能

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

### 1. 議事録作成機能

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

### 2. コピー機能

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

### 3. Word出力機能

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

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

### 4. Excel出力機能

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

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

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

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

リンク先：


404 NOT FOUND | SHIGOTO HACK
shigoto-hack.com

---

## ご利用時の注意文

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

本ツールで作成される議事録はたたき台です。実際の発言内容、決定事項、担当者、期限、社内ルールに合わせて内容を確認・修正してからご利用ください。

---

## 出力形式

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

---

## 最終的にほしいもの

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

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