スケッチインフォグラフィック
あなたは1つの情報源を説明する1ページを作成します。タイトル、パネルのグリッド、出典を示すフッターで構成されます。各パネルは、小さな図と1〜2文で1つのポイントを伝えます。このページは JSON 仕様として記述し、scripts/build.mjs がグリッドをレイアウトし、Excalidraw のレンダラーで描画し、チェックを行い、PNG と編集可能な .excalidraw ファイルを書き出します。
描画自体は簡単です。このページが公開する価値があるのは、すべてのパネルが情報源について真実を語り、情報源よりも少ない言葉でそれを表現している場合のみです。
1. 情報源を読み、ページを計画する
情報源をすべて読みます。そして、JSON の前に、以下の計画を回答に記述します。
- タイトル: 2語から5語でトピックを表します。サブタイトル: 誰が何について述べたかを1行で表します（「小さな都市でなぜバスが新しい鉄道路線より優れているのか、交通計画者が語る」など）。
- 形状: 特に指定がない限り、またはユーザーの例示ページが別の形状をとっていない限り、3:4 の縦向き（1500×2000）とします。その他のフォーマットは references/spec.md を参照してください。
- 6つまたは7つのパネル。ページを埋めるのに十分な数です。 3:4 のページには約4列のパネルが収まります。つまり、3列のハーフパネル（2つのパネルを横に並べたもの）と1つのフルワイドパネルです。各パネルには、ポイントを伝える見出し（トピックラベルではありません）、図のアイデア、最大2文・約30語の要点が含まれます。フルワイドパネルには最も豊富な例を配置します。
- フッター: 出典（著者、タイトル、日付）と、情報源に含まれる注意書き（例：「設計ノートおよびプロトタイプであり、製品版ではありません」）。
情報源が長い場合や角度が不明確な場合は、計画の承認をユーザーに求めます。それ以外の場合は、直接次のステップに進みます。
ユーザーが共有した例示ページから作業する場合: まずそのパネルをすべてリストアップし、ユーザーが削減を依頼しない限り、すべてのパネルを計画に含めます。例示ページの外観に合わせようとしてパネルを削ることが、期待を下回る最も一般的な原因です。
情報源に忠実であること。 ページ上のすべての数字、名前、主張は情報源に存在しなければなりません。意見は帰属を示します（「著者は～と主張している」）。ポイントを説明するために独自の図を追加する場合は、その旨をページに明記します（「これが起こり得る方法の作り話の例」）。正直に描けないものは、数値をでっち上げずに省略します。
2. 各パネルの図を選ぶ
各パネルに1つの図を使用します。図は references/patterns.md のパターンから構築します。すなわち、ステップの連鎖、ビフォーアフター、多対一、源泉へのループバック、オプションの比較、棒グラフ、タイムラインです。最も賑やかに見えるパターンではなく、主張に合致するパターンを選択します。ポイントがリストであるパネルは、3つのラベル付きボックスで構成できます。図内のテキストは数語にとどめ、文にしないでください。
色は意味を持ち、ページ全体で一貫して使用します。緑は良好またはデフォルトの経路、オレンジはリスクまたは変化したもの、赤は失敗、青は操作対象、紫はエージェントまたはモデル、黄色はページ上で最も重要な1つのコールアウトです。グレーはニュートラルです。色名については references/spec.md を参照してください。
3. 仕様を記述してビルドする
各ページを独自のフォルダに page.json として保存します。ユーザーが指定していない場合は、保存場所を尋ねます。フォーマットとすべての要素タイプは references/spec.md にあります。assets/example.json は完全なページの例です。次に、このスキルのフォルダから以下を実行します。
node scripts/build.mjs <folder>/page.json
スクリプトは各パネルの描画領域の幅を表示し（その中に描画します。高さは自動調整されます）、仕様ファイルと同じ場所に page.png と page.excalidraw を書き出します。ランタイムが不足している場合は、インストール方法が表示されます。
4. 確認して修正する
- すべての警告を修正します。 終了コード 3 は、ページが警告付きでビルドされたことを意味します。コンテンツがページより高い（何ピクセル削減すべきか表示されます）、要素がパネルの外にはみ出している、他の要素と重なっている、矢印がテキストを通っている、矢印が短すぎて矢印として読めない、ラベルが収まらずボックスが拡大した、Excalifont が持たない文字（→、✓、絵文字など）を使用している（システムフォントでレンダリングされます）、といった問題があります。矢印やチェックマークは要素として描画します。
- 次に PNG を確認します（画像ファイルを開きます）。各パネルについて、目の動きが矢印の方向に沿っているか、すべての矢印と線が何かから始まり何かで終わっているか、矢印の頭同士が干渉していないか、テキストが境界線に詰まっていないか、同じ行のパネルがバランスよく見えるか、見出しが図と一致しているかを確認します。ページが埋まっているか、パネルがほとんど空ではないか？ 仕様を修正して再度ビルドします。2〜3ラウンドの修正が普通です。
- 例示ページがある場合、2つを並べて比較します。 パネルごとに、同じパネル、同じ種類の図、同様の密度であることを確認します。まだ違いがある場合はそれを指摘します。
- 描画されたページのテキストを、情報源（ステップ1）と照らし合わせてもう一度読みます。
5. 納品する
ユーザーに PNG と .excalidraw ファイルのパス、および計画の1行サマリーを提供します。.excalidraw ファイルは excalidraw.com または Excalidraw アプリで開いて手動編集できること、また手動編集後はそのファイルがページであり、page.json ではないこと（再度ビルドすると上書きされる）を伝えます。
他人が公開したページを再現することは、個人学習やテストとしては問題ありませんが、公開用として提供しないでください。それらのレイアウト、表現、ブランドは作成者のものです。