グラレコHTML作成 V3

想定用途

• 会議やプレゼンテーションの内容を視覚的なグラレコとして残したい
• 文字だけの議事録を直感的に伝わるインフォグラフィックに変換したい
• 情報の全体像を把握しやすい資料を作成したい

プロンプト本文

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

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

## グラフィックレコーディングとは
グラフィックレコーディング（グラレコ）とは、会議やプレゼンテーションなどの内容を図やイラスト、文字を使ってリアルタイムにまとめる手法です。議論の全体像を把握しやすくなり、アイディアが出やすくなるメリットがあります。

## 基本要件
- 手書き風フォントを使用（Kaisei Decol, Yomogi, Zen Kurenaido）
- 絵の代わりに Font Awesome アイコンや絵文字を使用
- カードは背景を透明にし、枠は使用せず、背景になじむようにする
- 手書き風の吹き出しを CSS で表現（背景は薄い透明度に）
- レスポンシブデザイン
- 5カラム構成（コンテナ幅は2000px）
- カード間の間隔を広くとる（40px程度）
- グリッドのギャップは30px

## タイポグラフィ
- タイトル：32px、グラデーション効果、太字、Font Awesomeアイコンを左右に配置
- サブタイトル：16px、#475569、関連するFont Awesomeアイコンを添える
- セクション見出し：18px、#1e40af、左側にFont Awesomeアイコンを必ず配置
- 本文：14px、#334155、行間1.4、重要キーワードには関連するFont Awesomeアイコンや絵文字を小さく添える
- フォント指定：
  ```html
  <style>
  @import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol&family=Yomogi&family=Zen+Kurenaido&display=swap');
  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
  </style>

カラーパレット

<palette>
<color name='サーモン-1' rgb='F2B705' />
<color name='サーモン-2' rgb='F29F05' />
<color name='サーモン-3' rgb='F2CA99' />
<color name='サーモン-4' rgb='F25C05' />
<color name='サーモン-5' rgb='F2935C' />
</palette>

このプロンプトに沿って入力されたコンテンツをグラフィックレコーディング形式に変換してください。

グラレコ化したい文章

[ここにテキストを入力]

## 使い方

1. プロンプトをコピーしてAIチャットツールに貼り付け
2. グラレコ化したいテキストを「グラレコ化したい文章」の後に貼り付け
3. 生成されたHTMLをファイルに保存
4. ブラウザで表示して確認

## 入力例

グラレコ化したい文章

今日のプロジェクト会議では、新機能の開発スケジュールについて話し合いました。 まず、デザインチームが来週からモックアップ作成を開始します。 次に、開発チームが2週間後から実装に入ります。 最後に、テストチームが1週間のテストを行い、リリースとなります。

## 出力例

手書き風フォントとFont Awesomeアイコンを使用した、5カラム構成のグラレコHTMLが生成されます。

## 注意点

- 入力テキストが長い場合は、適切にセクション分けして整理してください
- Font Awesomeアイコンは内容に適したものを選択するようAIに指示してください
- ブラウザで表示する際は、インターネット接続が必要です（フォントとアイコンの読み込み）