グラレコHTML作成 V5 UI/UXテーマ
想定用途
- UI/UXテーマのカラーパレットを使用したグラレコを作りたい
- 大型アイコンとリスト形式で情報を視覚的に整理したい
- 手書き風吹き出しでポイントを強調したい
プロンプト本文
text
``` # グラフィックレコーディング風インフォグラフィック変換プロンプト V5
## 目的
以下の内容を、**大きなFont Awesomeアイコン**と**手書き風の吹き出し**を活用した日本語のグラフィックレコーディング風HTMLインフォグラフィックに変換してください。各カードに1つの大きなアイコンを配置し、小さなインラインアイコンを積極的に活用して情報を視覚的にわかりやすく表現します。
## デザイン仕様
### 1. カラースキーム（UI/UXテーマ）2. グラフィックレコーディング要素
- 全体を白背景（#FFF8F5）のキャンバス上に配置
- 各カードに1つの特大サイズのテーマアイコンを配置（fa-5x程度）
- カード内のコンテンツは小さなアイコン付きリスト形式で構造化
- 手書き風の吹き出しでポイントや補足情報を追加
- 内容を複数のセクションに分け、カード形式で整理
- キーワードをタグ形式で視覚的に強調
- コードサンプルはプレビュー形式で表示
3. タイポグラフィ
- タイトル：36px、太字、特大関連アイコン付き（fa-6x以上）
- カードタイトル：24px、大きめアイコン付き（fa-5x）
- リスト項目：16px、小さなアイコン付き
- 吹き出し内テキスト：手書き風フォント、15px
- フォント指定：Kaisei Decol, Yomogi, Zen Kurenaido
4. レイアウト
- 全体：4カラム構成（レスポンシブ対応）
- ヘッダー：超大型アイコン付きタイトル（fa-7x）＋日付
- 各カード：1つの大きなアイコン＋リスト形式のコンテンツ＋吹き出し
- カード内部：構造化されたリスト形式で情報を整理
5. アイコン活用ガイドライン
- カードごとの大型アイコン（1つのみ）：fa-5x〜fa-7x
- リスト項目の小型アイコン：fa-lg
- 概念別推奨アイコン：
- 思考・アイデア：fa-brain, fa-lightbulb, fa-thought-bubble
- プログラミング：fa-code, fa-terminal, fa-file-code
- 情報：fa-info-circle, fa-circle-info, fa-book
- ポジティブ要素：fa-thumbs-up, fa-check, fa-circle-check
変換する文章/記事
[ここにグラレコ化したいテキストコンテンツを入力]
## 使い方
1. プロンプトをコピーしてAIチャットツールに貼り付け
2. 変換する文章/記事部分にグラレコ化したいテキストを入力
3. 生成されたHTMLをブラウザで表示・保存
## 入力例変換する文章/記事
プログラミング学習のポイント
- 実践的なプロジェクトを作成する
- コードレビューを受ける
- コミュニティに参加する
- 最新技術をキャッチアップする
## 出力例
UI/UXカラーパレット（青#1B6C8C、オレンジ#BF8136、クリーム#F2E8E4、赤#260101、ピンク#BF5656）を使用した、4カラムレイアウトのグラレコHTMLが生成されます。
## 注意点
- 各カードに1つの大型アイコン（fa-5x〜fa-7x）が配置されます
- リスト形式で情報が構造化されます
- 手書き風吹き出しで補足情報が追加されます
- レスポンシブ対応で画面サイズに応じてカラム数が変化します