# ビジネス向けグラフィックレコーディング風インフォグラフィック生成プロンプト

infographic_generator:
purpose: “冒頭に記載された内容を、ビジネスプロフェッショナル向けのグラフィックレコーディング風HTMLインフォグラフィックに変換する”

design_specifications:
color_scheme:
primary: “#2563EB”          # 鮮明なブルー
secondary: “#06B6D4”        # シアンブルー
accent: “#FF6B35”           # 温かみのあるオレンジ
success: “#059669”          # グリーン
text: “#374151”             # 濃いグレー（可読性重視）
background: “#FFFFFF”       # 純白
light_bg: “#F3F4F6”         # 明るいグレー
border: “#E5E7EB”           # 境界線グレー

typography:
fonts:
– “Yomogi”                # 日本語手書き風
– “Zen Kurenaido”         # 日本語モダン
– “Kaisei Decol”          # 日本語セリフ
usage:
main_title: “Yomogi”
section_titles: “Zen Kurenaido”
body_text: “Kaisei Decol”

essential_elements:
– name: “ヘッダーセクション”
features:
– “中央配置レイアウト”
– “大型アイコン2個（絵文字）”
– “グラデーションタイトル”
– “アニメーション効果（浮遊・バウンス）”

– name: “メインコンテンツセクション”
features:
– “3つのカード型セクション”
– “アイコン+タイトル+内容構成”
– “グラデーション境界線”
– “ホバーエフェクト”

– name: “統計データ可視化”
features:
– “グリッドレイアウト”
– “数値アニメーション”
– “視覚的強調”

– name: “キーワードタグクラウド”
features:
– “クリック可能タグ”
– “アイコン付き”
– “グラデーション背景”
– “インタラクション効果”

– name: “プロセスフロー図”
features:
– “円形アイコン”
– “矢印接続”
– “ステップ表示”

– name: “接続線要素”
features:
– “グラデーション効果”
– “中央アイコン配置”

layout_structure:
sections:
1:
name: “ヘッダー”
elements:
– “アイコンペア”
– “メインタイトル”
– “サブタイトル”
2:
name: “メインコンテンツ”
elements:
– “3カラムカードレイアウト”
– “機能リスト”
– “視覚的アイコン”
3:
name: “統計データ”
elements:
– “数値表示”
– “ラベル説明”
– “グリッド配置”
4:
name: “キーワードセクション”
elements:
– “タグクラウド”
– “中央配置”
5:
name: “プロセスフロー”
elements:
– “ステップ表示”
– “矢印接続”
6:
name: “フッター”
elements:
– “出典情報”
– “クレジット”

technical_specifications:
responsive_design:
breakpoint: “768px”
mobile_behavior: “1カラムレイアウトに変更”

css_framework:
– “CSS Grid”
– “Flexbox”
– “カスタムCSS変数”

animations:
– name: “スクロールアニメーション”
method: “Intersection Observer API”
– name: “数値カウントアップ”
method: “JavaScript setInterval”
– name: “ホバーエフェクト”
method: “CSS Transitions”

interactions:
– “キーワードタグクリック効果”
– “カードホバー効果”
– “フェードインアニメーション”

content_transformation_rules:
input_analysis:
– “冒頭に記載された内容から主要カテゴリの識別（3-4個）”
– “統計データの抽出”
– “キーワードの特定”
– “プロセスの可視化”

content_mapping:
header:
title_generation: “冒頭コンテンツの核心を表現する日本語タイトル”
subtitle_generation: “詳細説明や補足情報”
icon_selection: “冒頭内容に関連する絵文字2個”

main_sections:
section_count: 3
structure:
– icon: “セクション内容を表す絵文字”
– title: “カテゴリ名”
– features: “箇条書きリスト（アイコン付き）”

statistics:
data_extraction: “冒頭内容から数値データを統計表示用に変換”
visualization: “パーセンテージや評価値として表現”

keywords:
extraction: “冒頭内容から重要キーワード6-8個選定”
tagging: “アイコン付きタグとして表示”

process_flow:
step_identification: “冒頭内容の主要プロセスを4ステップに整理”
visualization: “円形アイコン→矢印→次ステップの流れ”

output_format:
file_type: “HTML”
structure:
– “HTML5準拠”
– “内部CSS（<style>タグ）”
– “内部JavaScript（<script>タグ）”
– “単一ファイル完結”

fonts:
loading_method: “Google Fonts CDN”
fallback: “system fonts”

compatibility:
browsers:
– “Chrome/Edge 90+”
– “Firefox 88+”
– “Safari 14+”

devices:
– “デスクトップ”
– “タブレット”
– “スマートフォン”

# 使用方法
usage_instructions: |
【使用手順】
1. 変換したいコンテンツを冒頭に記述
2. その下にこのYAMLプロンプト全体をコピー&ペースト
3. Claudeに送信

【入力形式例】
“`
[変換したい内容]
– 新商品マーケティング戦略の概要
– ターゲット顧客の分析結果
– 販売チャネルの戦略
– 予算配分と期待効果

# 以下、プロンプト内容を貼り付け
infographic_generator:
purpose: “提供された内容を…”
[以下省略]
“`

# 品質チェックリスト
quality_checklist:
design:
– “色彩のコントラスト比が適切”
– “フォントが読みやすい”
– “アイコンが内容と一致”
– “レイアウトがバランス良い”

functionality:
– “レスポンシブ対応”
– “アニメーションが滑らか”
– “インタラクションが動作”
– “ブラウザ互換性”

content:
– “情報が整理されている”
– “視覚的階層が明確”
– “キーメッセージが伝わる”
– “データが正確に表現”