グラレコHTML作成 V1 トラベルブルーカラーパレット

想定用途

• トラベルブルーカラーパレットの爽やかなグラレコを作成したい
• 基本的なグラレコHTML生成のベースとして使用したい
• 手書き風フォントとFont Awesomeアイコンを活用したい

プロンプト本文

# グラフィックレコーディング (グラレコ) HTML 作成プロンプト V1

以下の要件に従って、グラフィックレコーディングを HTML で再現してください。

## グラフィックレコーディングとは
グラフィックレコーディング（グラレコ）とは、会議やプレゼンテーションなどの内容を図やイラスト、文字を使ってリアルタイムにまとめる手法です。議論の全体像を把握しやすくなり、アイディアが出やすくなるメリットがあります。文字だけの議事録と比べて直感的に伝わりやすく、視覚的な記録は情報の記憶に残りやすいという特徴があります。

## 基本要件
- 手書き風フォントを使用（Kaisei Decol, Yomogi, Zen Kurenaido）
- 絵の代わりに Font Awesome アイコンを大きく使用
- カードは使用しても枠は使用せず、背景になじむようにする
- 手書き風の吹き出しを CSS で表現
- レスポンシブデザイン
- 5カラム構成にして

## タイポグラフィ
- タイトル：32px、グラデーション効果、太字、Font Awesomeアイコンを左右に配置
- サブタイトル：16px、#475569、関連するFont Awesomeアイコンを添える
- セクション見出し：18px、#1e40af、左側にFont Awesomeアイコンを必ず配置し、アイコンにはアニメーション効果
- 本文：14px、#334155、行間1.4、重要キーワードには関連するFont Awesomeアイコンを小さく添える
- フォント指定：Kaisei Decol, Yomogi, Zen Kurenaido

## カラーパレット（トラベルブルー）

```

レイアウト指示

• 手書き風の雰囲気を出す
• セクション間を矢印や線でゆるく繋ぐ
• 重要なキーワードは大きく、補足説明は小さいフォントで
• Font Awesome アイコンを大きく使用して視覚的興味を引く
• カードは背景になじむよう、枠線を使わず透明度を調整する

---

変換するコンテンツ

[ここにグラレコ化したいテキストコンテンツを入力]

## 使い方

1. プロンプトをコピーしてAIチャットツールに貼り付け
2. 変換するコンテンツ部分にグラレコ化したいテキストを入力
3. 生成されたHTMLをブラウザで表示・保存

## 入力例

変換するコンテンツ

今日の会議の要点

• 新プロジェクトの開始が決定
• 担当者を3名任命
• 期限は来月末まで

## 出力例

トラベルブルーカラーパレット（青#308AD9、緑#4AD97C、オレンジ#F2BC57）を使用した5カラムのグラレコHTMLが生成されます。

## 注意点

- 手書き風フォントが使用されます
- カードは枠線なしで背景に馴染むデザインです
- レスポンシブ対応で画面サイズに応じてカラム数が変化します