グラレコHTML作成 V4 アイコン強調版
想定用途
- Font Awesomeアイコンを最大限に活用したグラレコを作りたい
- アイコンを中心にした視覚的インパクトのある表現を行いたい
- テキストよりもアイコンで情報を伝えたい
プロンプト本文
text
``` # グラフィックレコーディング風インフォグラフィック変換プロンプト（V4：アイコン強調版）
## 目的
以下の内容を、**大きなFont Awesomeアイコン**を最大限に活用した日本語のグラフィックレコーディング風HTMLインフォグラフィックに変換してください。手書きイラストの代わりに大型Font Awesomeアイコンで概念を視覚的にインパクトのある形で表現します。
## デザイン仕様
### 1. カラースキーム（UI/UXテーマ）2. グラフィックレコーディング要素（アイコン重視）
- 全体を白背景（#FFF8F5）のキャンバス上に配置
- 中央に特大サイズのテーマ/タイトルアイコンを配置（fa-5x〜fa-7x）
- 内容を複数のセクションに分け、手書き風の吹き出しや丸枠で囲む
- Font Awesomeアイコンをキーワードごとに超大きく配置（fa-4x〜fa-6x）
- アイコンを中心にしたレイアウトで、テキストは補足的に配置
- 関連する概念をつなぐ太い矢印や線（→ は fa-arrow-right-longなど）を大きめに配置
- キーワードを色付きマーカーや下線で強調（背景色で強調）
- 重要ポイントには特大サイズのアイコン（fa-star、fa-lightbulbなど）をfa-5x以上で配置
- 感情表現には大きなemoji風アイコン（fa-face-smile、fa-face-sadなど）をfa-4x以上で使用
- 質問には大きな fa-circle-question を配置（fa-4x以上）
- 人物表現には特大の fa-user、fa-person などのアイコンを活用（fa-5x）
- 各概念をfa-circle-dotなどのアイコンで箇条書き（通常より大きめに）
3. タイポグラフィ
- タイトル：36px、太字、特大関連アイコン付き（fa-6x以上）
- サブタイトル：24px、大きめアイコン付き（fa-4x）
- キーワード：20px、太字、背景色付き、大きなアイコン（fa-3x〜fa-5x）を併置
- 本文：16px、行間1.5（アイコンに対してテキスト量を減らす）
- フォント指定：Kaisei Decol, Yomogi, Zen Kurenaido
4. レイアウト（アイコン中心）
- 全体：アイコン中心のレイアウト、視覚的インパクトを重視
- ヘッダー：超大型アイコン付きタイトル（fa-7x）＋日付
- 各セクション：大型アイコン（fa-4x〜fa-6x）＋吹き出し
- 吹き出し内もアイコンを積極的に配置（fa-lg〜fa-2x）
5. アイコン活用ガイドライン
- セクション見出しアイコン：fa-5x〜fa-7x
- キーワードアイコン：fa-3x〜fa-5x
- 箇条書きアイコン：fa-2x〜fa-3x
- インラインアイコン：fa-lg
- 感情表現：fa-face-smile, fa-face-sad-tear, fa-face-angry（fa-4x以上）
- 重要ポイント：fa-star, fa-lightbulb, fa-circle-check（fa-5x以上）
- 疑問・質問：fa-circle-question, fa-magnifying-glass（fa-4x以上）
変換する文章/記事
[ここにグラレコ化したいテキストコンテンツを入力]
## 使い方
1. プロンプトをコピーしてAIチャットツールに貼り付け
2. 変換する文章/記事部分にグラレコ化したいテキストを入力
3. 生成されたHTMLをブラウザで表示・保存
## 入力例変換する文章/記事
プログラミング学習の3つのステップ
- 基礎を学ぶ（文法、基本的な概念）
- 実践する（小さなプロジェクトを作成）
- 発展させる（新しい技術を学び続ける）
## 出力例
UI/UXカラーパレットを使用し、大型アイコン（fa-4x〜fa-7x）を中心に配置した視覚的インパクトのあるグラレコHTMLが生成されます。
## 注意点
- アイコンサイズが非常に大きいため、視覚的インパクトが強いです
- テキスト量は最小限にし、アイコンで情報を伝えます
- 各キーワードに大型アイコンが配置されます