タイムライン付きグラレコ V2 イラストカラーパレット

想定用途

• イラストカラーパレットの暖色系でタイムラインを作成したい
• タイムライン表示で情報の流れを視覚化したい
• 手書き風フォントと囲み線を活用したい

プロンプト本文

# タイムライン付きグラフィックレコーディング (グラレコ) HTML 作成プロンプト V2

## 目的
以下の内容を、超一流デザイナーが作成したような、日本語で完璧なグラフィックレコーディング風のHTMLインフォグラフィックに変換してください。情報設計とビジュアルデザインの両面で最高水準を目指します。手書き風の図形やアイコンを活用して内容を視覚的に表現します。

## デザイン仕様
### 1. カラースキーム（イラスト）

```

2. グラフィックレコーディング要素

• 日本語の手書き風フォントの使用（Yomogi, Zen Kurenaido, Kaisei Decol）
• 手描き風の囲み線、矢印、バナー、吹き出し
• テキストと視覚要素（アイコン、シンプルな図形）の組み合わせ
• キーワードの強調（色付き下線、マーカー効果）
• 関連する概念を線や矢印で接続
• Font Awesome アイコンを効果的に配置
• タイムライン表示を使用して情報の流れを視覚化

3. タイポグラフィ

• タイトル：32px、グラデーション効果、太字
• サブタイトル：16px、#475569
• セクション見出し：18px、アイコン付き
• 本文：14px、#334155、行間1.4
• フォント指定：Kaisei Decol, Yomogi, Zen Kurenaido

グラフィックレコーディング表現技法

• テキストと視覚要素のバランスを重視
• キーワードを囲み線や色で強調
• 簡易的なアイコンや図形で概念を視覚化
• 大きな背景アイコンで視覚的なインパクトを追加
• 接続線や矢印で情報間の関係性を明示
• 余白を効果的に活用して視認性を確保
• アニメーションやホバーエフェクトで動きを表現

---

変換するコンテンツ

[ここにタイムライン化したいテキストコンテンツを入力]

## 使い方

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

## 入力例

変換するコンテンツ

プロジェクト履歴

2020年10月: プロジェクトキックオフ 2021年3月: 最初のプロトタイプ完成 2021年9月: ベータ版リリース 2022年4月: 正式版リリース

## 出力例

イラストカラーパレット（緑#5BA67B、黄#F2BB13、クリーム#F2DB94、オレンジ#BF8665、赤#BF190A）を使用したタイムライン形式のグラレコHTMLが生成されます。

## 注意点

- 暖色系のカラーパレットで統一感があります
- 手書き風の囲み線と吹き出しが効果的に配置されます
- タイムライン表示で情報の流れが明確になります