グラレコHTML作成 V2 シューティングスターカラーパレット
想定用途
- シューティングスターカラーパレットの華やかなグラレコを作成したい
- 赤・青・ベージュの落ち着いた配色で情報を整理したい
- 手書き風フォントと吹き出しを活用したい
プロンプト本文
text
``` # グラフィックレコーディング (グラレコ) HTML 作成プロンプト V2
以下の要件に従って、グラフィックレコーディングを HTML で再現してください。
## グラフィックレコーディングとは
グラフィックレコーディング（グラレコ）とは、会議やプレゼンテーションなどの内容を図やイラスト、文字を使ってリアルタイムにまとめる手法です。議論の全体像を把握しやすくなり、アイディアが出やすくなるメリットがあります。文字だけの議事録と比べて直感的に伝わりやすく、視覚的な記録は情報の記憶に残りやすいという特徴があります。
## 基本要件
- 手書き風フォントを使用（Kaisei Decol, Yomogi, Zen Kurenaido）
- 絵の代わりに Font Awesome アイコンや絵文字を大きく使用（サイズは70px程度）
- カードは背景を透明にし、枠は使用せず、背景になじむようにする
- 手書き風の吹き出しを CSS で表現（背景は薄い透明度に）
- レスポンシブデザイン
- 5カラム構成（コンテナ幅は2000px）
- カード間の間隔を広くとる（40px程度）
- グリッドのギャップは30px
## タイポグラフィ
- タイトル：32px、グラデーション効果、太字、Font Awesomeアイコンを左右に配置
- サブタイトル：16px、#475569、関連するFont Awesomeアイコンを添える
- セクション見出し：18px、#1e40af、左側にFont Awesomeアイコンを必ず配置し、アイコンにはアニメーション効果
- 本文：14px、#334155、行間1.4、重要キーワードには関連するFont Awesomeアイコンや絵文字を小さく添える
- フォント指定：Kaisei Decol, Yomogi, Zen Kurenaido
## カラーパレット（シューティングスター）変換するコンテンツ
[ここにグラレコ化したいテキストコンテンツを入力]
## 使い方
1. プロンプトをコピーしてAIチャットツールに貼り付け
2. 変換するコンテンツ部分にグラレコ化したいテキストを入力
3. 生成されたHTMLをブラウザで表示・保存
## 入力例変換するコンテンツ
プロダクトロードマップ
- Q1: 基盤システム開発
- Q2: UI/UX改善
- Q3: モバイル版リリース
- Q4: グローバル展開
## 出力例
シューティングスターカラーパレット（赤#A61B40、青#012840、ベージュ#A66A5D）を使用した5カラムのグラレコHTMLが生成されます。
## 注意点
- 手書き風グリッドライン背景が適用されます
- 透明カードで背景に馴染むデザインです
- レスポンシブ対応で画面サイズに応じてカラム数が変化します