インフォグラフィック

編集用インフォグラフィック

参考スタイル：「Anthropicがコンサルティングに参入」の投稿。その投稿には以下の要素があります：

• 2行の太字見出し（2行目はアクセントカラー）
• デック：何が起こったかを説明する1つの平易な文
• パーツで構成された大きなヒーローオブジェクト（番号付きラベルが各パーツを指す）
• サイドファクト
• 「なぜそれが起こっているのか」という3つのアイコンカラム行
• 著者行とソース行

ポイントは、1つのアイデアを約10秒で説明することです。

フォーマット

• デフォルト：単一のスタンドアロン画像、1080×1350（4:5）。LinkedInやInstagramのフィードに適しており、保存性に優れています。
• カルーセルスライドとして： サイズがカルーセルに合致するため、PNGを{"type": "photo", "image": "images/x.png", "fit": "contain"}としてドロップインするか、カバーとしてコピーできます。
• デッキスライドとして： 4:5のレイアウトは16:9に合いません。ユーザーが必要とする場合は、別途16:9のレイアウトを作成してください。

構成要素：

• テンプレート：pipeline/remotion/src/Infographic.tsx
• ビルド：pipeline/build_infographic.py
• 各インフォグラフィックは独自のフォルダinfographics/<slug>/に、infographic.jsonとオプションのimages/サブフォルダと共に配置されます。
• 出力：out/infographics/<slug>.png

1. パーツのあるアイデアを選ぶ

適した例：

• 2～4の構成要素を持つ動き：「Anthropicがコンサルティングに参入」（戦略、運用、テクノロジー）
• アーキテクチャ：Morning Loopのソース、コネクタ、スケジュール、アウトプット
• フレームワークまたはBefore → After

アイデアが1つの数字だけの場合は、代わりにカルーセル「グラフィック」スライドまたはショート動画を使用してください。4つ以上のパーツが必要な場合は、カルーセルを作成してください。

2. コピーを書く（簡潔に）

• ヘッドライン： 2行、各行2～4ワード、行末にピリオド。2行目が見せ場です。
  • 例：["Anthropic enters", "consulting."]、["Your AI chief", "of staff."]
• デック： 1文、最大25ワード：誰が何をしたか、そしてなぜそれが重要なのか。
• コールアウト： 2～4項目。各項目は1～2ワードのtitleと最大12ワードのtextを持ちます。
  • 上から下に読むため、順番はシーケンスまたはレイヤーとして並べてください（上＝最も戦略的）。
• サイド： オプション。最大22ワードの印象的な事実（例：「2027年までに1万人のエンジニアを養成…」）。
• なぜ： 「なぜ彼らはそれをしているのか」や「なぜ作るのか」などのタイトルと、正確に3つの項目。各項目は2～3ワードのtitleと最大7ワードのtextを持ちます。
• 著者行： {"name", "org"}。ソース： 出版物、エピソード、または「Fringe Linesポッドキャスト、<日付>」。

誠実さ：

• すべての事実には、sourcesに記載できるソースが必要です。
• ソースが明記していない数字は追加しないでください。
• 1つのメディアだけが報じている場合は、曖昧な表現（「伝えられるところによると」、「S-1によると」）を使用してください。

3. ヒーロービジュアル

• デフォルト：組み込みのブロックスタック（"hero": {"label": "Anthropic"}）。コールアウトごとに1つのアイソメトリックアクセントカラーブロックを描画し、交互にオフセットして各ブロックに引き出し線が着地し、最上部のブロックにラベルが表示されます。画像ファイルは不要です。
• イメージヒーロー： "hero": {"image": "images/hero.png", "fit": "contain"}。製品のスクリーンショット、エピソードの画面共有からのチャートやスライド、または提供されたオブジェクト/場所の画像を使用します。ホストや実在の人物は絶対に使用しないでください。 カメラフレームや顔写真は禁止です。
• AI生成画像（参考資料のコンクリートレンダリングのようなもの）：ユーザーが明示的に要求した場合のみ、例えばCanvaコネクタを通して使用します。実在の人物は使用せず、実際のイベントの偽の「写真」も使用しないでください。

4. infographics/<slug>/infographic.json

{
  "headline": ["Your AI chief", "of staff."],
  "dek": "Quinnの「Morning Loop」エージェントは、毎週平日の午前8時に彼の仕事用ツールを読み取り、ラップトップを開く前に彼にブリーフを渡します。",
  "hero": {"label": "Morning Loop"},
  "callouts": [
    {"title": "ソース", "text": "Outlookメール、カレンダー、To-Do、Slack、Asana、SharePoint。"},
    {"title": "コネクタ", "text": "承認済みのエンタープライズコネクタが各ソースにアクセスします。"}
  ],
  "side": {"title": "ループを閉じる", "text": "一日の終わりに彼はブリーフに返信します…"},
  "why": {"title": "なぜ作るのか", "items": [
    {"icon": "clock", "title": "先行スタート", "text": "トリアージは9時前に完了。"},
    {"icon": "check", "title": "漏れなし", "text": "見逃したものを通知。"},
    {"icon": "plug", "title": "新ツール不要", "text": "既存のスタックを活用。"}
  ]},
  "byline": {"name": "Fringe Lines", "org": "2026年10月30日のエピソード"},
  "sources": "Fringe Linesポッドキャスト、2026年10月30日。",
  "accent": "#FF5A1F"
}

• アイコン： chart rings target users bolt shield dollar clock globe check mail calendar plug brain。必要に応じてInfographic.tsxのIconマップに新しいアイコンを追加します（36×36のストロークパス）。
• アクセント： デフォルトはFringe Linesのオレンジ。参考資料の赤は#C8231Bです。

5. レンダリングと品質確認

~/.shorts-skill/bin/python pipeline/build_infographic.py infographics/<slug>

レンダリングには約20秒かかります。PNGを開いて以下を確認してください：

• ヘッドラインが2行に収まっていること。収まらない場合は、フォントを縮小せずに短くしてください。
• デックが3行以内に収まっていること。
• コールアウトのテキストが重なっていないこと。4つのコールアウトの場合、各テキストは2行以内に収める必要があるため、語数を削ってください。
• 各引き出し線が該当のブロックで終わっていること。
• サイドノートが「なぜ」のボックスに干渉していないこと。
• 3つの「なぜ」のカラムがバランスよく（テキストの長さが似ていること）。
• ソース行が2行に収まっていること。
• どこにもホスト、ゲスト、実在の人物が登場していないこと。

PNGのパス、使用したソース、およびファクトチェックが必要な事項を報告してください。