【改】タイムライン付のグラフィックレコーディング (グラレコ) HTML 作成プロンプト

## 🌟 洗練＆汎用化されたプロンプト：Graphic Recording Timeline HTML Generator (JP Ver.)

---

### 🎯 目的（Purpose）

以下の `{{content}}` に含まれる日本語の文章・記事・ノート等を、タイムライン付きの**グラフィックレコーディング風HTMLインフォグラフィック**として出力してください。
一流デザイナーによる視覚表現のように、**手書き風**で親しみやすく、かつ**情報設計の視点からも整理された美しいHTML出力**を行います。

---

### 📦 入力変数（Input Variables）

| 変数名 | 内容 |
|--------|------|
| `{{content}}` | グラレコ変換したい文章や記事、メモなど |
| `{{title}}` | グラフィックレコーディングのタイトル（任意） |
| `{{date}}` | 表示したい日付（任意） |
| `{{source}}` | 情報の出典（任意） |
| `{{steps}}` | ステップ形式で分割された内容（省略可。自動抽出も可能） |

---

### 🎨 デザイン仕様（Design Specs）

#### ■ フォントと手書き風要素
- 日本語手書きフォント（ ）を使用
- 囲み線、吹き出し、矢印、アイコンで構成

#### ■ カラーパレット（Palette）

```xml
<palette>
<color name='イラスト-1' rgb='027333' />
<color name='イラスト-2' rgb='4E7329' />
<color name='イラスト-3' rgb='F2B705' />
<color name='イラスト-4' rgb='F29F05' />
<color name='イラスト-5' rgb='D97904' />
</palette>
```

#### ■ タイムライン構造（必須）

- 縦中央タイムラインで左右交互にステップを配置
- 各ステップに：
- 丸型サークル + Font Awesome アイコン
- 日付フラップ装飾
- タイトル・説明文・オプションでコードブロック
- アクセントカラーによる区別
- 大きな背景アイコン（視覚補強）

---

### 🧩 出力仕様（HTML + CSS）

- 出力形式：HTML + 内部CSS
- 各セクションはカード型コンポーネントで構成
- カスタマイズ可能なコードブロックスタイル（YAML、JSON、Bash 等）
- CSSクラスやアニメーションは再利用可能な構造で
- 必要に応じてFont AwesomeアイコンのCSS読み込みを含める

---

### ✅ 必須条件（Must-Have）

- タイムライン要素には必ず「丸とフラップ装飾」が含まれていること
- `ul.timeline` 構造を使用すること
- サークルにはFont Awesomeアイコンを配置すること
- 各ステップにアクセントカラーを割り当てること
- コードブロックがある場合は、指定されたスタイルを使うこと

---

### 🧪 変換対象例（例示）

```text
{{content}}

例：
「プロジェクトAにおける課題解決の流れは以下の通りです。
まず、dockerイメージを更新し、次に設定ファイルを編集。
その後、チームメンバーと連携し、最後に本番環境に反映します。」
```

---

### 🧠 補足ヒント（Tips）

- キーワードは色付き下線やマーカーで強調
- 情報の関係性は接続線や矢印で明示
- アニメーションやホバー効果で動きと没入感を追加
- 大きなアイコンや吹き出しで視覚的なインパクトを演出

---

---

### 🚀 プロンプトの使い方

このテンプレートを使って、どんな日本語記事やメモも**視覚的にわかりやすいHTMLタイムライン**に変換可能です。
必要に応じて変数部分（`{{title}}`, `{{content}}`, `{{steps}}` など）を差し替えるだけで、多用途に使えます！

---

もし特定のユースケース（たとえば「会議記録」「教育資料」「ブログ記事まとめ」など）があれば、さらにカスタマイズもできますよ。
どうします？もう少し応用的なバリエーションも作ってみましょうか？ 😊