infocard

インフォカードジェネレーター

クイックスタート： コンテンツを分析します（密度 × 構造 × ムード）→ トーンを自動判定してカラーパレットを選びます → レイアウトの骨組みを選びます → <style scoped> を使って HTML を Markdown に直接埋め込みます。

重要なルール

ルール 1：HTML の直接埋め込み

重要： インフォカードは Markdown に HTML を直接記述してください。コードブロック（```html）は絶対に使用しないでください。HTML はフェンスで囲まず、ドキュメントに直接埋め込んでください。

ルール 2：HTML 構造に空行を入れない

最重要： HTML のインフォカード構造内には、空行を入れないでください。解析エラーを防ぐため、HTML ブロック全体を途切れなく記述してください。

ルール 3：レイアウトの前にコンテンツを分析する

必須： デザインする前に、次の 3 つの観点からコンテンツを分析してください。

密度（呼吸のリズムを決定します）：

密度	コンテンツ量	視覚的な表現
低	中核となる内容が ≤ 50 語	「大きな文字」の構成です。特大の要素を 1 つ配置して際立たせます。余白を十分に取ります。
中	50～200 語	ヒーロー要素＋補助パネルです。明確な階層を持つ主要ブロックを 2～3 個配置します。
高	200 語以上	非対称の複数列グリッドです。主要・副次・補助ブロックを配置します。同じ比重のタイルは使いません。

構造（レイアウトの幾何学的な構成を決定します）：

構造	特徴	レイアウトパターン
単一の要点	核となる概念が 1 つ	1 つのアンカー要素を際立たせ、その他は控えめにします
対比	A 対 B、新旧	分割パネル、2 つの対極
階層	層が積み重なる	モジュールの積み重ね、ピラミッド
流れ	順序のあるステップ	縦方向の連なり、番号付き項目
放射状	中核＋派生要素	周囲にパネルを配置したハブ
並列	複数の同等な概念	非対称グリッド（列を均等にしない）

ムード（色温度を決定します）：

ムード	視覚的な印象
内省的	余白を多く取り、セリフ体を多用し、コントラストを抑えます
シャープ	強いコントラスト、太字の書体、鮮やかなアクセント
温かみ	アースカラー、丸みのある印象、穏やかなリズム
技術的	等幅フォントのアクセント、グリッドのような密度

ルール 4：トーンの自動判定

必須： コンテンツのトピックに基づいてカラーパレットを自動選択してください。コンテンツ内のキーワードを確認し、最も近いトーンに合わせます。

コンテンツのトーン	背景	アクセント	トリガーとなるキーワード
哲学的	#FAF8F4	#7C6853	認知、思考、意味、哲学、本質
技術的	#F5F7FA	#3D5A80	アーキテクチャ、アルゴリズム、システム、API、コード
文学的	#FBF9F1	#6B4E3D	物語、ナラティブ、執筆、詩、登場人物
科学的	#F4F8F6	#2D6A4F	実験、データ、研究、論文、発見
ビジネス	#F4F3F0	#2D6A4F	市場、戦略、成長、金融、投資
クリエイティブ	#F6F3F2	#B8432F	デザイン、アート、美学、ひらめき、創作
デフォルト	#FAFAF8	#4A4A4A	明確に一致するものがない場合。誤ったトーンよりデフォルトを優先します

スタイルテンプレートが明示的に選ばれている場合は、その色をトーン判定より優先します。スタイルが指定されていない場合は、トーン判定をデフォルトとして使用してください。

ルール 5：タイトルの保持

ユーザーがタイトルを明示した場合は、メインの見出しにそのタイトルをそのまま使用してください。編集上の解釈は、サブタイトル、要約、またはサイドモジュールに記載します。ユーザーのタイトルを黙って書き換えないでください。

ルール 6：タイポグラフィの階層

明確な文字サイズの段階を維持し、一貫して使用してください。

• ヒーロータイトル：32px–48px、ウェイト 700–900、詰めた字間（-0.02em）
• サブタイトル／要約：16px–20px、ウェイト 400–500
• 本文：14px–16px、ウェイト 400、行の高さ 1.6–1.7
• メタ情報／タグ／キャプション：11px–13px、ウェイト 500–700、大文字表記で字間を広げます
• 本文の色：純粋な黒は使わず、#1a1a1a、#333、#4a4a4a を使用します

ルール 7：視覚的な重みの配分

少なくとも 1 つのモジュールは、ほかより視覚的に重く感じられるようにしてください。すべてのパネルをまったく同じ見せ方にするのは避けてください。サイズ、背景色のトーン、文字のウェイト、アクセントの罫線などで差をつけます。

ルール 8：デザインの勘所（AI らしさを避けるチェックリスト）

カードを完成させる前に、よくある AI 生成ビジュアルのパターンに当てはまっていないか確認してください。

レイアウト：

• 中央揃えのヒーローは使わない — タイトルをデフォルトで中央揃えにしないでください。左揃えまたは非対称なレイアウトを優先します
• 幅が同じタイルは使わない — 横並びの幅が同じ 3 列は、AI らしさが最も表れやすいパターンです。2fr 1fr、非対称グリッド、または段違いのレイアウトを使います
• 均一なパネルは使わない — 少なくとも 1 つのパネルは、サイズ、ウェイト、または表現を変えます

タイポグラフィ：

• 純粋な黒 #000000 は使わない — オフブラック（#1a1a1a、#2d2a26）または暖色系／寒色系のダークカラーを使います
• サイズだけで階層を作らない — フォントサイズの拡大縮小だけでなく、ウェイトと色でも階層を作ります

色：

• アクセントカラーは最大 1 色、彩度は 80% 未満
• ネオンのグラデーションは使わない — 紫と青の AI 風の輝きや、グラデーションで塗りつぶした見出しは使いません
• 色温度を統一する — 1 つのカードに暖色系グレーと寒色系グレーを混在させないでください

コンテンツ：

• 埋め草のデータは使わない — 99.99%、50%、1234567 は避けます。実感のある数値（47.2%、3.8M）を使います
• AI らしい言い回しは使わない — 「empower」、「seamless」、「unleash」、「next-generation」は避けます

間隔：

• パディングとマージンは数学的に正確に設定し、不自然な隙間を作らないでください
• 隣接する要素は視覚的に揃えてください

スタイルの例

まずビジュアルの系統を選び、その系統の中から具体的なテンプレートを選んでください。これにより、毎回 29 種類のスタイルを一律に確認しなくても、ライブラリの幅を広く保てます。

スタイルの系統

温かみのあるエディトリアルとストーリーテリング

カードに、内省的で人間味があり、物語性や文化的な奥行きを感じさせたいときに使います。

スタイル	ファイル	適した用途
Editorial Warm	styles/editorial-warm.md	ナレッジの要約、読書メモ、エッセイ、分析レポート
Customer Spotlight	styles/customer-spotlight.md	顧客のストーリー、ケーススタディ、成功事例の振り返り、ブランドの物語、導入事例
Sunset Warm	styles/sunset-warm.md	コミュニティの振り返り、イベントメモ、ライフスタイルの要約、前向きなストーリーテリング
Midcentury	styles/midcentury.md	ブランドの物語、レトロモダンなキャンペーン、文化に関するメモ、デザインの物語

ソフトなライフスタイルと学び

カードに、落ち着きがあり、親しみやすく、気負わない印象を持たせたいときに使います。

スタイル	ファイル	適した用途
Soft Neutral	styles/soft-neutral.md	ライフスタイル関連コンテンツ、ウェルネス、教育、やさしいブランディング、クリエイティブワークショップ
Slate Chalk	styles/slate-chalk.md	教育コンテンツ、レッスン、概念の解説、ワークショップのメモ
Education Studio	styles/education-studio.md	指導メモ、コースのモジュール、学習の要約、ワークショップガイド

ペーパー、研究、ガバナンス

カードをメモ、レポート、ブリーフ、またはエビデンスの要約のように見せたいときに使います。

スタイル	ファイル	適した用途
Paper Minimal	styles/paper-minimal.md	製品メモ、タスクの要約、会議メモ、簡潔なドキュメント
Lab Journal	styles/lab-journal.md	研究の要約、科学的な解説、医療コンテンツ、学術論文
Academic Paper	styles/academic-paper.md	研究の抄録、論文の要約、文献レビュー、エビデンスを重視した解説
Policy Paper	styles/policy-paper.md	ガバナンスに関するメモ、ポリシーの解説、法律に関連する要約、社内ルール
Navy Formal	styles/navy-formal.md	投資家向け資料、経営幹部向けブリーフ、四半期レポート、企業提案書
Japanese Minimal	styles/japanese-minimal.md	ブランドの物語、文化に関するメモ、静かな製品エッセイ、内省的なお知らせ
Clinical Brief	styles/clinical-brief.md	医療の要約、医療メモ、患者向け教育、臨床スナップショット

ビジネス、金融、信頼

カードに実務的、経営層向け、または商業的な信頼感を持たせたい場合に使用します。

スタイル	ファイル	適した用途
Corporate Clean	styles/corporate-clean.md	製品発表、B2B向け概要資料、経営層向け要約、正式なレポート、投資家向け資料
Pitch Deck VC	styles/pitch-deck-vc.md	資金調達用カード、市場機会のスナップショット、スタートアップの成長実績の要約
Sales Room	styles/sales-room.md	パイプラインレビュー、アカウント概要、商談戦略メモ、収益状況の報告
Trust Center	styles/trust-center.md	セキュリティ関連メモ、コンプライアンスの要約、監査の最新情報、信頼性に関するレポート
Partner Channel	styles/partner-channel.md	パートナー向け概要資料、アライアンスの最新情報、チャネル施策、共同販売の要約

技術と運用

正確性、システム関連の表現、または実装の詳細を重視する場合に使用します。

スタイル	ファイル	適した用途
Tech Blueprint	styles/tech-blueprint.md	技術仕様、システム設計ドキュメント、アーキテクチャの概要、エンジニアリング計画
Engineering Whiteprint	styles/engineering-whiteprint.md	アーキテクチャメモ、API概要資料、実装計画、技術ホワイトペーパー
Terminal Green	styles/terminal-green.md	インフラ状況カード、CLIガイド、インシデントメモ、レトロコンピューティングの話題

放送、声明、ハイコントラスト

カードで告知したり、緊急性を伝えたり、強い視覚的インパクトを与えたりする場合に使用します。

スタイル	ファイル	適した用途
Bold Contrast	styles/bold-contrast.md	データのハイライト、KPIダッシュボード、イベント告知
News Broadcast	styles/news-broadcast.md	速報、レポートの注目箇所、メディア向け説明資料、一般向け告知
Incident Desk	styles/incident-desk.md	インシデントレビュー、障害メモ、事後分析、信頼性に関する最新情報
Neo Brutalism	styles/neo-brutalism.md	大胆なキャンペーンカード、マニフェスト風の要約、スタートアップの立ち上げ、印象的な声明
Swiss Grid	styles/swiss-grid.md	構成を重視したエディトリアルレイアウト、デザイン性の高いレポート、タイポグラフィを前面に出した声明

独自のビジュアルアイデンティティ

ビジュアルアイデンティティ自体がメッセージの一部となる場合に使用します。

スタイル	ファイル	適した用途
Deep Night	styles/deep-night.md	エンターテインメント、クリエイティブな作品紹介、製品発表、ゲームコンテンツ
Glassmorphism	styles/glassmorphism.md	プレミアム製品の発表、機能の紹介、イベントへの招待、未来志向のショーケース

レイアウトの基本構成

まずコンテンツ構成のファミリーを選び、次に具体的なワイヤーフレームを選択します。レイアウトはスタイルに依存しません。

レイアウトファミリー

基本的な単一トピックのカード

1つの主題を際立たせ、補足コンテンツを控えめにしたい場合に使用します。

レイアウト	ファイル	最適な用途
Hero Card	layouts/hero-card.md	タイトル、要約、補足パネル1つで構成する単一トピック
Quote Card	layouts/quote-card.md	引用文、ミッションステートメント、出典付きの基調講演の引用
Split Panel	layouts/split-panel.md	2列レイアウト：メインコンテンツとサイドバー、または左右の比較
Stacked Modules	layouts/stacked-modules.md	重要度の異なるブロックを組み合わせた、複数セクションの縦型フロー

メトリクスと運用上の読み取り値

数値、ステータス、運用シグナルを素早く確認する必要がある場合に使用します。

レイアウト	ファイル	最適な用途
メトリクスボード	layouts/metric-board.md	KPI カード、パフォーマンスダッシュボード、四半期レビュー、ヘルスチェック、メトリクス駆動のアナウンス
財務スナップショット	layouts/financial-snapshot.md	売上サマリー、キャッシュ状況、パフォーマンススナップショット、ユニットエコノミクス
セールスブリーフ	layouts/sales-brief.md	パイプレビュー、ディール戦略、地域別売上アップデート、レベニューオペレーション
ターミナルウィンドウ	layouts/terminal-window.md	ステータススナップショット、コマンドのウォークスルー、インシデントアップデート、運用サマリー

シーケンス、ロードマップ、進行

読者に段階、ステップ、方向性のある動きを示す必要がある場合に使用します。

レイアウト	ファイル	最適な用途
タイムラインフロー	layouts/timeline-flow.md	連続するステップ、マイルストーン、垂直タイムライン付きのプロセス段階
ステーションワークフロー	layouts/station-workflow.md	各ステップが構造化された属性（入力/プロセス/出力/ゲート/所要時間）を持つ詳細なワークフロー分解
ロードマップボード	layouts/roadmap-board.md	NOW / NEXT / LATER の計画、戦略的シーケンス、段階的ロールアウト
階段状の進行	layouts/staircase-progression.md	成熟度曲線、段階的なスコープの積み上げ、ステップ状のビルドアップストーリー
ファネルスタック	layouts/funnel-stack.md	セールスファネル、コンバージョンフロー、採用パイプライン、意思決定の絞り込み
インシデントレビュー	layouts/incident-review.md	ポストモーテム、障害レビュー、信頼性インシデント、修復スナップショット

比較と意思決定

カードに明確なトレードオフ、優先順位付け、または並列的なフレーミングが必要な場合に使用します。

レイアウト	ファイル	最適な用途
長所と短所	layouts/pros-cons.md	トレードオフ分析、意思決定のフレーミング、リスクとアップサイド、バランスの取れた評価
クアドラントマトリクス	layouts/quadrant-matrix.md	優先順位マッピング、リスクリターンのフレーミング、ポートフォリオビュー、2x2 分類
マトリクステーブル	layouts/matrix-table.md	2 つの意味のある軸を持つ MxN 分類グリッドとアーキタイプでラベル付けされたセル
比較	layouts/comparison.md	並列の対比、オプションのフレーミング、ビフォー/アフターまたは A/B 比較
原則グリッド	layouts/principle-grid.md	番号付きの信条と、カードごとのアンチパターンおよび適用の対比
グリッドとインベントリ	layouts/grid-inventory.md	繰り返しモジュール、混合サイズのタイル、スキャンしやすいインベントリが必要なカード

グリッドとインベントリ

カードに繰り返しモジュール、混合サイズのタイル、またはスキャンしやすいインベントリが必要な場合に使用します。

レイアウト	ファイル	最適な用途
ベントグリッド	layouts/bento-grid.md	マルチトピックの概要、機能ショーケース、混合サイズのグリッドセル
バッジグリッド	layouts/badge-grid.md	機能リスト、ケイパビリティカタログ、スキルインベントリ、ベネフィットショーケース
チェックリストボード	layouts/checklist-board.md	実行トラッキング、ローンチ準備、QA ゲート、運用チェックリスト

システムと関係のマッピング

順序よりも構造、隣接関係、ネットワーク関係が重要な場合に使用します。

レイアウト	ファイル	最適な用途
アーキテクチャマップ	layouts/architecture-map.md	レイヤードシステム、プラットフォーム概要、サービス境界、技術ブループリント
レイヤードサイドバーマップ	layouts/layered-sidebar-map.md	横断的なスレッド、KPI、バリューチェーンのアンカーを載せたコンテキストレールに挟まれたレイヤードスタック
ラジアルハブ	layouts/radial-hub.md	エコシステム概要、コア＋機能、ハブアンドスポーク関係

ドキュメントとメモのロジック

カードが明示的なセクションを持つ構造化されたブリーフのように読めるべき場合に使用します。

レイアウト	ファイル	最適な用途
リサーチアブストラクト	layouts/research-abstract.md	アブストラクト要約カード、調査結果、エビデンスの統合、論文スナップショット
ボードメモ	layouts/board-memo.md	経営層向けアップデート、意思決定メモ、四半期ボードノート、リーダーシップサマリー
ポリシーメモ	layouts/policy-memo.md	社内ポリシー変更、ガバナンスの決定、プロセスルール、ガイダンスノート
教育モジュール	layouts/education-module.md	レッスンサマリー、学習パス、ワークショップモジュール、教材カード
ヘルスケアサマリー	layouts/healthcare-summary.md	臨床概要、患者サマリー、ケアスナップショット、健康教育

ガバナンス、リスク、監査

オーナーシップ、統制状況、緩和の詳細を明示する必要がある場合に使用します。

レイアウト	ファイル	最適な用途
リスク登録簿	layouts/risk-register.md	リスクの追跡、緩和計画、コンプライアンスレビュー、プログラムガバナンス
コンプライアンス監査	layouts/compliance-audit.md	監査サマリー、統制レビュー、セキュリティ態勢のチェック、コンプライアンスの追跡

ナラティブとステークホルダー向けアップデート

内容が人、チーム、顧客、パートナーの動きに関するものである場合に使用します。

プリミティブに関する注記: org-update、customer-story、partner-brief は現在、軽量な card-brief-* の外側のリズムを共有しています。news-bulletin は、見出しのリズムではなく実際に構造が関係やステークホルダーの動きに関するものでない限り、分離したままにしてください。

レイアウト	ファイル	最適な用途
ニュース速報	layouts/news-bulletin.md	速報アップデート、ダイジェストカード、ステータス速報、プレス風のまとめ
組織アップデート	layouts/org-update.md	チームの変更、採用アップデート、オーナーシップの移行、リーダーシップコミュニケーション
顧客ストーリー	layouts/customer-story.md	ケーススタディ、ビフォーアフターの成果、顧客の成功、導入ナラティブ
パートナーブリーフ	layouts/partner-brief.md	アライアンスアップデート、共同販売ノート、パートナーサマリー、チャネルレビュー

ファミリー整合性に関する注記

• 新しいクラス名を発明する前に、既存のファミリープリミティブを優先してください。現在整合しているレイアウトファミリーには、card-doc-*、card-kpi-*、card-sequence-*、card-tile-*、card-map-*、card-compare-*、card-review-*、card-topic-*、card-brief-* があります。
• 新しいレイアウトが明らかにこれらのファミリーのいずれかに属する場合は、まずジオメトリとモディファイアを変化させてください。同じ役割に対して並行するプリミティブの語彙を作成しないでください。
• 明示的な特殊ケースは意図的に分離したままにします: quote-card、terminal-window、news-bulletin、および deep-night や glassmorphism のような最も強いアイデンティティ駆動のスタイルテーマ。
• レイアウトやスタイルが構造ではなく雰囲気のみを共有している場合は、追加のプリミティブの収束を強制するのではなく、ファミリーの関係を文章で記述してください。

設計原則

余白と呼吸のスペース

• カードのパディング: 端から 32px–48px
• モジュール間の余白: 16px–24px
• タイトル領域はゆとりのある行間(1.1–1.3)とし、本文との明確な分離を設ける
• コンテンツをカードの端に詰め込まない

視覚的なアクセント

• 4px–6px の太さの罫線をセクションの区切りやアクセントのボーダーとして使用する
• 二次的なパネルには控えめな淡い背景(rgba(0,0,0,0.03) またはスタイル固有の淡い色)を使用する
• アクセントカラーは抑制すること: 罫線、タグ、重要な数値のいずれかに1つのハイライトカラーを使用する
• オプション: 紙の質感を出すための 4% のノイズオーバーレイ(スタイルテンプレートを参照)

コンテンツのリズム

• 高密度のカード: 概要 → 核心的な判断 → 補足モジュール → 結論の順にグループ化する
• ランキングコンテンツ: 非対称なヒーロー + 構造化されたリスト(均等なタイルは避ける)
• チュートリアル/分析コンテンツ: 概要 → 核心的な洞察 → 詳細ブロック → 境界/注意事項 → まとめ

スタイリングリファレンス

共通クラス(すべてのスタイルで共有)

• .card-frame — 最大幅とパディングを持つ外側のコンテナ
• .card — 背景、パディング、オプションのノイズオーバーレイを持つメインカードの表面
• .card-meta — 小さい大文字のメタ行(カテゴリ、日付、バージョン)
• .card-title — メインの見出し
• .card-subtitle — 二次的な見出しまたは要約
• .card-bar — 太いアクセント罫線の区切り
• .card-body — 本文の段落
• .card-body.dropcap — 冒頭の文字をドロップキャップにした最初の段落(編集的な導入)
• .card-highlight — 重要な洞察のための、左側にアクセントボーダーを持つ独立した短い文(25文字未満)
• .card-grid — グリッドコンテナ。2カラムには .card-grid-2
• .card-panel — 上部にアクセントボーダーを持つコンテンツパネル
• .card-panel.heavy — パディングが多い、より重いパネル
• .card-panel.light — ボーダーが細い、より軽いパネル
• .card-panel-title — 小さい大文字のパネル見出し
• .card-panel-text — パネルの本文テキスト
• .card-item — タイトル付きのコンテンツブロック(ラベル + 説明のペア)
• .card-item-label — 項目のタイトル/ラベル
• .card-tag — インラインのタグ/バッジ
• .card-stat — 特大の数値/指標の表示
• .card-stat-label — 指標の下のラベル
• .card-divider — セクション間の細い水平罫線
• .card-footer — 出典、帰属、注記のための下部ストリップ
• .card-endmark — 編集的な締めくくりを示すコンテンツ終端のマーク(∎)

リッチテキスト要素

ドロップキャップ(最初の段落のみ — 編集的な冒頭の演出を作る):

<p class="card-body dropcap">First paragraph text...</p>

ハイライト引用(独立した洞察、25文字未満、左側にアクセントボーダー付き):

<p class="card-highlight">Key insight phrase</p>

タイトル付き項目(構造化されたリストのための、ラベル + 説明のペア):

<div class="card-item">
  <p class="card-item-label">Item Title</p>
  <p class="card-panel-text">Item description text.</p>
</div>

セクション区切り:

<div class="card-divider"></div>

終端マーク(編集的な締めくくり、コンテンツの最後に配置):

<span class="card-endmark">∎</span>

ベストプラクティス

コンテンツのガイドライン

1. 直接埋め込みのみ — 常に HTML を Markdown に直接埋め込み、```html コードブロックは決して使用しない
2. 構造内に空行を入れない — HTML ブロック全体を連続して保つ
3. まず密度を判断する — レイアウトを選ぶ前に低/中/高を決める
4. ユーザーのタイトルを保護する — ユーザーが指定した見出しを無断で書き換えない
5. 視覚的な重みのバランスを取る — 少なくとも1つの重いブロック、1つの中程度、1つの軽いブロックを用意する
6. タイプスケールを一貫して使用する — 上記で定義されたサイズ階層に従う
7. アクセントは抑制をもって — 罫線とハイライトに1つのアクセントカラーを控えめに使用する
8. 意図をもってスペースを埋める — セクションが空に見える場合は、埋め草のコンテンツを追加する前に階層を再構成する