はじめに
・運用フローやシーケンス図をChatGPTに書かせるのはなかなか面倒です。
・きれいで分かりやすい図を書くためのプロンプトをご紹介します。
・ChatGPTではデザインがきれいにならないので一度Claudeで出力をして改善しています。
プロンプト文
・生成AIにそのまま貼り付けてください。
あなたはプロジェクトマネージャーです。
以下のテンプレートを使ってシーケンス図の処理フローを完成させてください。
## 概要
- **目的**: 統一デザインの業務フローHTML出力を、複数業務（例: 100個）に対応して自動生成するための汎用テンプレートを提供
- **デザイン**: 青、白、紺、緑を基調とした洗練された配色。各フェーズに意味を持たせる（各業務で用途を自由に割り当て可能）
- **青**: フェーズ1（例: 初期、申請、報告）
- **灰**: フェーズ2（例: 確認、検証）
- **紺**: フェーズ3（例: 実行、処理）
- **緑**: フェーズ4（例: 完了、承認）
- **凡例/注釈**: 各フェーズの色と意味を明示（アクターの凡例は省略）
## 出力形式
- **ファイル形式**: HTML
- **文字コード**: UTF-8
## HTMLテンプレート基本構造
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[業務名] フロー</title>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<style>
:root {
--phase-blue: rgba(135,206,250,0.4); /* フェーズ1 */
--phase-gray: rgba(211, 211, 211, 0.4); /* フェーズ2 */
--phase-navy: rgba(0,0,128,0.2); /* フェーズ3 */
--phase-green: rgba(144,238,144,0.4); /* フェーズ4 */
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.container { width: 95vw; }
body { font-size: 16px; }
}
body {
margin: 20px;
font-family: 'Yu Gothic UI', sans-serif;
background: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: #fff;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.header { margin-bottom: 20px; }
.legend {
margin-top: 40px;
border-top: 1px solid #ccc;
padding-top: 10px;
font-size: 14px;
}
.legend ul { list-style: none; padding: 0; }
.legend li {
margin-bottom: 5px;
line-height: 1.5;
}
.color-box {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
margin-right: 5px;
border: 1px solid #ccc;
}
</style>
<script>
mermaid.initialize({
theme: 'neutral',
sequence: {
showSequenceNumbers: false,
actorMargin: 100,
messageFont: 'Yu Gothic UI',
fontSize: 18
}
});
</script>
</head>
<body>
<div class="container">
<!-- ヘッダー -->
<div class="header">
<h1>[業務名] フロー</h1>
<p>Version: 2.2</p>
<p>最終更新日: [作成日]</p>
</div>
<!-- フローチャート本体 -->
<div class="mermaid">
sequenceDiagram
participant A as アクター1
participant B as アクター2
rect var(--phase-blue)
Note left of A: フェーズ1
A->>B: [アクション1]
end
rect var(--phase-white)
Note right of B: フェーズ2
B->>B: [内部アクション]
end
rect var(--phase-navy)
Note left of B: フェーズ3
B->>A: [アクション2]
end
rect var(--phase-green)
Note right of A: フェーズ4
A->>B: [アクション3]
end
</div>
<!-- 凡例 -->
<div class="legend">
<h2>凡例・注釈</h2>
<ul>
<li>
<span class="color-box" style="background-color: var(--phase-blue);"></span>
<strong>青 - フェーズ1:</strong> 初期、申請、報告など
</li>
<li>
<span class="color-box" style="background-color: var(--phase-white);"></span>
<strong>白 - フェーズ2:</strong> 確認、検証など
</li>
<li>
<span class="color-box" style="background-color: var(--phase-navy);"></span>
<strong>紺 - フェーズ3:</strong> 実行、処理など
</li>
<li>
<span class="color-box" style="background-color: var(--phase-green);"></span>
<strong>緑 - フェーズ4:</strong> 完了、承認など
</li>
</ul>
<p>※ 各フェーズの役割・意味は、業務ごとに適宜定義してください。</p>
</div>
</div>
</body>
</html>
### 品質チェック項目
- [ ] 文字化けが発生しないこと
- [ ] レスポンシブ対応が正しく動作すること
- [ ] 各フェーズの色と意味が統一されていること
- [ ] デザイン全体が洗練され、プレゼン資料のような見栄えであること
----
■今回のインプット
（次のチャットで指示をします。お待ちください）
指示用プロンプト例
・具体的な資料があればテキストで貼り付けてください。
・特になければ下記のようなざっくりとした指示をしてから会話をして拡張してください
地震などの災害が起きた場合の区の対応フローを考えてください。
市民の安全確保、県、市、町の連携、各所の連携など実施することを想定で書いてください。
IT保守運用のインシデント対応フロー図を書いてください
出力例
・とてもきれいなシーケンス図ができました
・ご参考になるようでしたら「❤いいね」を押してください
・皆さまの仕事の生産性が少しでも向上することを心よりお祈りしています
