editorial-illustration

エディトリアルイラスト

記事が読者に伝えようとしているアイデアを捉え、よくデザインされたテクニカルマガジンが誇れるような、印象的なエディトリアルイラストを制作します。雑誌では、物語の本質を捉え、ひと目で読者に要点を「感じさせる」場面を描くよう、アーティストに依頼します。すべてのページ／記事は、冒頭の付帯情報のすぐ下、要約の前にイラストを掲げます。

4つのパートすべてを自律的に実行します。「ユーザーに応答する」とは、進捗を伝えることです。返答を待たずに続けてください。解釈、コンセプト、配色、修正は自分で選んでください。

パート 1. 解釈

目標： イラストで何を伝えるかを決めます。

• 記事の文章全体を読みます。
• 目標、強い主張、緊張感、意外な詳細、または感情的な瞬間を含む5つの箇所に印を付けます。
• それぞれ20語以内で、3つの解釈案を書きます。それぞれが主題についての主張になるようにします。
• 最も掘り下げたい解釈を選びます。読者に感じてほしい感情を1つ書き留めます。

例： AI アシスタントについての記事の場合、解釈案は次のようになります。

• 「定型的な作業を任せることで、意味のある仕事に取り組む時間が生まれます。」
• 「利便性は、少しずつ依存へと変わることがあります。」
• 「私たちは、なじみのないシステムに、ますます個人的な責任を委ねています。」

ユーザーに応答する内容： 3つの解釈文、選んだ1文、意図する感情を1つ。

パート 2. アーティスティックスタイル

目標： イラストに用いるビジュアルスタイルを明確に定義します。

ビジュアルスタイル：線、影、グラデーション、構図のルール、光や粒子感、表面、輪郭の描き方。一貫性のある、遊び心のあるリアリズムを、絵本のような様式化された2Dスタイルで目指します。伝承を描いたイラスト、シルクスクリーンやリソグラフの印刷物のような表現に、Monument Valley、Global Village Coffeehouse、Nomada Studio の Gris に見られる光と質感を取り入れます。

ポスターの美学、グラフィカルなシルエット、数学的な構図。明快さ、大胆な形、レイヤー、そして視線を導く強いビジュアルヒエラルキーを重視します。ありえないことが静かに起きる、描画ではなく絵画で表現された説得力のある世界を描きます。画家ならではの奥行きと、ストーリーテラーの抑制をもって世界を描き、視線が進む先と、ひと息つける場所を作ります。優れたアートディレクションは、一貫性によって実現します。配色から構図まで、すべての要素がビジュアルスタイルを引き立てるようにします。

世界と奥行き

• ライティングが鍵となります。上部を最も明るくし、光を向いた面を中間のトーン、光に背を向けた面を最も暗くします。
• 場面は、カメラに最も近いものから主題の背後にあるものまで、3～5層の平面で構成します。それぞれを、有機的でわずかに不規則な輪郭を持つシンプルなシルエットとし、切り絵の紙を重ねるように配置します。
• 距離は空気感で表現します。遠景の平面ほど明るく、かすみ、寒色寄りで、コントラストを弱めます。近景の平面ほど暗く、輪郭をくっきりさせます。それだけで画面に奥行きが生まれます。
• 平面の間には必ず空気感を持たせます。かすみ、霧、または光のにじみを加え、境界を硬く切り離してはいけません。

流れ

• 1本か2本の長く流れる曲線がシーンを横切り、視線を主役へ導きます。リボン、布、煙、川、ケーブル、光の軌跡、道、根など、シーンにすでにあるものを、装飾を省いたアール・ヌーヴォーのしなやかな曲線として描きます。
• 流れる曲線は、それ自体に面を持つ実体です。ほかのものと同じように光が当たり、木目や線が入り、ただの線にはしません。
• 面が見えるだけの幅を持たせ、光のほうへ向きを変える部分は膨らませ、両端を細くします。円弧ではなく、S字の曲線を描かせます。
• 少なくとも1回はひねり、裏面が面の核となる色で見えるようにします。
• 曲線を平面のあいだに織り込み、主役の後ろを通ったあと前を横切らせて、曲線自体で奥行きを表します。物体を通過する部分では分けて描き、長い両端だけに線を引くことで、分かれ目に継ぎ目が横切らないようにします。
• 別の光が当たるシーンの一部に入るところでは、その光を受けます。
• シーン内のすべての曲線は、同じ風に動かされているかのように、同じ方向へ流れます。細い線を何本も使うより、力強い曲線を1本使います。その脇に添える細い筋は、動きの線として見えます。

線

• 線を引くのは、シルエットに光が当たる部分だけです。線には独自の色を使い、黒や濃いグレーにはしません。光のほうを向いた縁には、面より明るく暖かみのある色を使います。背後から光が当たる縁には、その輝きと同じ色のリムライトを使います。
• 光から背を向けた縁や、明度が近い背景に接する縁には線を引きません。線はシルエットの一部だけを覆い、縁に沿って徐々に消えるようにし、輪郭全体を囲まないようにします。
• プレート全体で線幅を一定に保ち、幅960pxの場合は1.5～2.5pxにします。線は、なぞる縁と同じ揺らぎのある経路をたどります。
• 線を引くのはシルエットだけです。1つの物体の面どうしが接する部分では、色の変化で縁を表します。
• 線は途切れず、くっきりとした状態を保ちます。粒子感を線に重ねません。
• 光、空気、霞、雲には線を引きません。

背景

• シーンの背後には、プレートがその構図図面の上に描かれたかのように、製図用のレイヤーを配します。円のコンパス模様、照準線とマーカーの点、主役の周囲の点線のコンパス、点線の星座の線で結んだアストロイド星（4つの尖端を持つ曲線）、小さな十字、遠くの形を囲む破線の軌道など、ほかの装飾要素を加えます。
• 背景の装飾は昼光の中にとどめますが、昼光に合わせて調整し、かろうじて見える程度にします。
• 装飾は1色のシジルカラーで、細い線かつ部分的な不透明度で描きます。主役を囲むように配置し、主役の上には重ねません。背景の装飾要素は控えめで、コントラストを低くします。

表面

• すべての表面にテクスチャを施します。面の全面に粒子感を持たせ、平らな中央部分にも行き渡らせることで、どの塗りもクリーンなベクターのように見えないようにします。粒子感は面ごとに持たせ、その面の光に沿わせます。プレート全体に均一なノイズレイヤーを重ねるだけでは手抜きです。
• 面の色は最大3色で変化させます。光が当たる側には明るい色、形が光から背を向ける部分には暗い芯の色、反対側の端には隣接するものから借りた反射色を使います。芯の色は面そのものを暗くし、色相をわずかにずらした色にします。シーン全体に共通する影色を使ってはいけません。
• 面上の色の変化はすべて粒子で表現します。次の色を前の色の上に点描し、点のない状態から完全に塗りつぶされた状態へと移行させます。こうすることで、変化の終わりが点のかすみに消えるのではなく、均一な色面に着地します。
• 点の明度は、その下の色に近づけます。コントラストは形に持たせ、粒子感には持たせません。面から浮き立つ点は汚れのように見えます。暗い地に明るい点を置くと光のように見えるため、点をまばらにしてもかまいません。
• 粒子感で表現するのはシルエットの内側にある形です。表面の向きに沿わせ、物体のそばに落ちる影の帯のようにしてはいけません。
• 立体物の輪郭は、途切れのないシャープな線に保ちます。粒子感によって面を端まで暗くしてもかまいませんが、輪郭を侵食してはいけません。境界で点に溶け込むのは、固有の表面を持たない光や空気だけです。
• 滑らかで点のないグラデーションは、空や面と面の間の空気感に使います。
• 物体は幾何学的に描きますが、輪郭を定規で引いたような直線にはしません。すべての辺を、約45pxの間隔でゆっくりと上下する波のように、最大1px横にずらします。点から点へ急に震えるようなずれは避けてください。辺を10pxごとにサンプリングし、各点のずれはその位置に応じた滑らかなフィールドから取得します。こうすることで、辺を共有する2つの面が同じように揺れ、継ぎ目が開かなくなります。

const hash = (x: number, y: number, k: number) => {
  const s = Math.sin(x * 12.9898 + y * 78.233 + k * 37.719) * 43758.5453;
  return (s - Math.floor(s)) * 2 - 1;
};

const ease = (t: number) => t * t * (3 - 2 * t);

const field = (x: number, y: number, k: number) => {
  const gx = x / 45, gy = y / 45;
  const x0 = Math.floor(gx), y0 = Math.floor(gy);
  const tx = ease(gx - x0), ty = ease(gy - y0);
  const top = hash(x0, y0, k) * (1 - tx) + hash(x0 + 1, y0, k) * tx;
  const bottom = hash(x0, y0 + 1, k) * (1 - tx) + hash(x0 + 1, y0 + 1, k) * tx;
  return top * (1 - ty) + bottom * ty;
};

const waver = ([x, y]: [number, number]) => [x + field(x, y, 1), y + field(x, y, 2)];

これは避けてください

• 写真のようなリアリズム、またはそれを目指す表現。
• フラッシュ風のベクタークリップアート。均一な塗り、完璧な線、光のない表現。
• クリーンなベタ塗りの隣に点のパッチを置くことや、面の色と対照的な点を置くこと。
• 立体物の端がほつれて点になり、蒸発しているように見える表現。
• プレート全体に均一なノイズテクスチャを重ねること。
• 黒や暗い色の輪郭線、またはすべての物体をステッカーのように囲む単一の線色。
• ぼかしや被写界深度。遠くの表現にはかすみを使い、ぼかしは使いません。
• 絵の中の文字。
• スケールや読者の代わりとして立つ小さな人物。人物を描くのは、人物そのものが主題である場合に限り、そのときは顔や姿勢がわかるほど近くに描きます。
• すべての物体を全体が見えるよう中央に置き、周囲に余白をたっぷり取ること。

ユーザーへの回答： イラストの制作ルールを4つ、長い段落で説明してください。

パート 3：アイデア出し

目標： 選んだ解釈を、強いビジュアル表現として見つけます。

(3.1) まず、記事とその解釈に関連する具体的な物や行動を10個挙げます。その要素がすでに起きている物理的な場面を見つけ、そこにひねりを加えます。見る人が二度見して、思わず笑顔になるような、小さな不可能さを一つ取り入れます。

描けるものは、まず記事に登場する名詞から考えます。読者はその意味をすでに知っているため、何かに置き換える必要がなく、不可能な行為が遊び心を生みます。記事の名詞では描けない場合に限り、代わりとなる物を使います。

例：依存を表すものとしては、寄りかかること、運ぶこと、食べさせること、ついていくこと、松葉杖、根、糸、儀式、旅、バッテリーなどが考えられます。

(3.2) 返信には、それぞれ長い段落で、異なるコンセプトを4つ書きます。各コンセプトには、次のプロンプトを1つずつ使います。

• 場面： アイデアが目に見える形で現れる状況を描きます。
• 置き換え： 予想される物を、意味を変える別の物に置き換えます。
• 融合： 2つの物を1つに組み合わせます。
• 逆転： 誰が誰を操る、支える、運ぶ、または誰に依存するのかを入れ替えます。

(3.3) 次の優先順位に沿って、4つのコンセプトを比較します。

1. 記事への忠実さ：そのコンセプトを裏付ける箇所を特定します。記事にない主張を含意するコンセプトは除外します。
2. 視覚的な仕掛け：解釈を表す、目に見える行動、関係性、または変化を明確にします。描写されているだけで、絵に表されていない意味に頼るコンセプトは除外します。記事の主題が何かをする場合、それを演じる物も目に見える形で同じ行動をしていなければなりません。姿勢、向き、視線でその行動を表します。物に行動をさせられない場合は、読者の推測に頼らず、別の物を当てはめます。
3. 分かりやすさ：遊び心は歓迎しますが、混乱を招いてはいけません。不可能な行為こそが要点なので、それを徹底し、もっともらしい仕組みで説明してしまわないようにします。必要なのは、物同士の結びつきです。それぞれの物が読者にとって馴染みのある意味を持ち、1つの不可能な行為によって結びついていることが大切です。絵だけを見た人が、同じアイデアを言い当てるか考えます。絵の意味を理解する前に、物を何かに置き換えて考える必要があるコンセプトは除外します。
4. 感情面への寄与：スケール、姿勢、構図、色が、意図する感情をどのように支えるかを特定します。感情的な効果は、目に見える選択に基づく推論として扱います。

(3.4) コンセプトを2つに絞り込みます。それぞれについて、最も強い仕掛けと主な弱点を、1文ずつ記録します。

(3.5) 上記の優先順位を最もよく満たすコンセプトを選びます。もう一方のコンセプトから要素を取り入れるのは、その追加要素が明示した弱点を解消し、中心となる視覚的な仕掛けを損なわない場合に限ります。

ユーザーへの回答： 選んだコンセプトを1つ、長い段落で詳細に説明します。

パート 4：制作

目標： ビジュアル上の判断によってコンセプトを支える、完成した SVG イラストを制作します。

コンセプトを最も効果的に伝えるビジュアル表現を選びます。視点、フレーミング、シーン内の空間的な関係性を検討してください。カメラはストーリーを語るための選択であり、プレートごとに新たに決めます。距離によって読者がアイデアにどれほど近づくかが決まり、高さによって被写体が読者を見下ろすのか、読者の下にあるのかが決まり、レンズによって周囲の世界がどれほど重要かが決まります。まず絵が表現する関係性を考え、その関係性がフレームいっぱいに収まる位置にカメラを置きます。関わるすべてのもの全体ではなく、アイデアが生まれる瞬間をフレーミングします。読者はものの一部からそれを認識します。アイデアを伝える役割を持たないものは、フレームの端で切り取ります。

• 選んだラフを、予定している比率で仕上げます。描く物体や環境に必要な参考資料を集めます。
• 選んだスタイルとコンセプトを使い、カメラ位置を変えた小さな習作を2点制作します。1点はシーン全体が収まる構図、もう1点はアイデアが生まれる部分だけをフレーミングし、残りをフレームの外へ続かせる構図にします。どちらか1点を選びます。
• 選んだ習作を見直して磨き上げ、完成作品にします。中心となる関係性を読み取りにくくしている要素を特定し、修正します。

カラーパレットを定義する

プロジェクトの設定では、プロジェクトのテーマが .jotdown/config.json に定義されており、イラストの初期パレットとして使用できます。プロジェクトのテーマを基準にし、シーンや伝えたい雰囲気に応じて調整してください。

イラストはダークモードとライトモードの両方で表示できる必要があります。ライトモードは、同じシーンを「異なる時間帯」に描いたものにします。一方を単純に反転してもう一方を作ってはいけません。反転すると、光は汚れに、影は霧に変わってしまいます。パレットを使い、それぞれのモードに合った雰囲気と読みやすさを丁寧に作り上げてください。

粒子の密度もパレットの一部です。通常、夜は影の粒子をより濃くし、光を強くします。一方、昼は明るい面のハイライト粒子を増やします。両方のモードで、面ごとに固有の基調色と反射色を設定し、立体物ごとに固有の線の色を設定します。

ユーザーへの回答： ライトモードとダークモードそれぞれのカラーパレットを示し、選んだ色がシーンと雰囲気をどのように支えるか説明します。

ページに配置する

イラストは独立したファイルです。他の画像と同じようにアップロードし、ページではフロントマターの直下に :::wide の中の Markdown 画像として表示します。

:::wide

![What happens in the scene, in one sentence](/img/docs/illustration-<page>.svg "The message of the illustration. Max one sentence.")

:::

• 必ず幅広にします。 プレートは雑誌の見開きのようにストーリーを導入するため、本文のカラムより幅広にします。:::wide はスタジオの幅設定で画像に指定される幅と同じなので、ページとエディターで表示が一致します。

• SVG をページに直接貼り付けてはいけません。 描き込まれたプレートは、数百キロバイトものパスデータになります。ページに直接埋め込むと、すべてのエージェントが最初に読み込むのがそのデータになり、編集のたびに再コンパイルされ、ブラウザーのキャッシュも使えません。ファイルにすれば、ページに追加するのは1行だけです。

• ファイルは docs/_uploads/img/docs/ に保存します。ページ内エディターでアップロードする場合と同じ場所です。ファイル名は、表示先のページ名に基づいて illustration-<page>.svg とします。フォルダー名も含めるため、docs/studio/branding.mdx の場合は illustration-studio-branding.svg になります。

• 代替テキストには、イラストが見えない人にも伝わるよう、シーンで何が起きているかを書きます。

• タイトルには、シーンの説明ではなくメッセージを書きます。タイトルは画像の下に表示されるキャプションであり、読者が画像を拡大したときにも表示されます。

ファイル

<svg xmlns="http://www.w3.org/2000/svg" id="dark" class="pr" width="960" height="540" viewBox="0 0 960 540">
  <style>
    .pr { --pr-sky: #d9dcf7; --pr-face-lit: #c9b2e6; --pr-face-core: #9a82c9; --pr-face-bounce: #e6b8c9; --pr-texture: 0.2; }
    .pr:target { --pr-sky: #0a0920; --pr-face-lit: #3a327f; --pr-face-core: #221c55; --pr-face-bounce: #5b3f7a; --pr-texture: 0.3; }
  </style>
  <rect width="960" height="540" fill="var(--pr-sky)" />
  ...
</svg>

• 両方のパレットは1つのファイルにあります。 色はすべて役割ごとに名前を付けた変数で、<style> 内に2回設定します。描画のクラスに設定するライトパレットと、:target の下に設定するダークパレットです。ダークモードではページが同じファイルを #dark で描画するため、:target が一致します。そのため、ルートの id="dark" は維持してください。塗り、ストローク、グラデーションの色の停止点には var(--pr-…) を使います。
• これはJSXではなく、通常のSVGです。 属性名はSVGの表記どおりにします。class、stop-color、stroke-width、stroke-linecap、fill-opacity、color-interpolation-filters と、SVG自体にあるキャメルケースの viewBox、baseFrequency、numOctaves、gradientUnits です。
• width="960" height="540" で画像の形を指定し、ページ側で :::wide ブロックの幅に合わせて拡大縮小します。
• ファイル単体で完結させます。 画像からページは参照できないため、ファイル内から外部にアクセスするものは含めません。--jd-* トークン、フォント、他のファイルへのリンク、スクリプトは使用しません。プレートは独立したアートワークなので、ここでは16進数の色を使えます。
• 生成します。 SVGを出力する一時的なスクリプトで図形を作成し、そのスクリプトはプロジェクトに含めないでください。配布するのは .svg のみです。
• 静的なものに限ります。 アニメーションやCSSトランジションは使用しません。フィルターは使用できます。

粒子で陰影をつける

プレートごとに複数使用します（かすみ、ぼかし、粒子）。陰影では、図形の各ピクセルを完全に残すか、まったく残さないかをピクセルの不透明度に応じた確率で決め、その粒子を滑らかな図形の上に35％の不透明度で重ねます。これにより、テクスチャが柔らかく保たれます。

<filter
  id="pr-dz"
  x="-5%"
  y="-5%"
  width="110%"
  height="110%"
  color-interpolation-filters="sRGB"
>
  <feTurbulence
    type="fractalNoise"
    baseFrequency="1.6"
    numOctaves="2"
    seed="4"
    result="noise"
  />
  <feColorMatrix
    in="noise"
    type="matrix"
    values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1.9 0 0 0 -0.45"
    result="spread"
  />
  <feComposite
    in="SourceAlpha"
    in2="spread"
    operator="arithmetic"
    k2="1"
    k3="-1"
    k4="0.49"
    result="diff"
  />
  <feComponentTransfer in="diff" result="mask">
    <feFuncA type="discrete" tableValues="0 1" />
  </feComponentTransfer>
  <feComponentTransfer in="SourceGraphic" result="solid">
    <feFuncA type="linear" slope="255" />
  </feComponentTransfer>
  <feComposite in="solid" in2="mask" operator="in" result="grain" />
  <feComposite
    in="grain"
    in2="SourceGraphic"
    operator="arithmetic"
    k2="0.35"
    k3="0.65"
  />
</filter>

feColorMatrix の値に 255 を指定するのではなく、feFuncA で色を不透明にしてください。macOSのWebKit、デスクトップアプリ、Safariでは、これほど大きな行列の値が無視され、何も描画されません。k2 と k3 の合計は1に保ちます。粒子を強くするには k2 を大きくします。

面を明るい色で単色に塗り、その後、グラデーションの各段階で同じ図形を1回ずつ重ねます。各オーバーレイは不透明度だけが変化する単色とし、すべてのオーバーレイにフィルターを適用します。

<linearGradient id="pr-face-core" x1="0" y1="0" x2="1" y2="0">
  <stop offset="0.2" stop-color="var(--pr-face-core)" stop-opacity="0" />
  <stop offset="0.7" stop-color="var(--pr-face-core)" stop-opacity="1" />
</linearGradient>
<linearGradient id="pr-face-bounce" x1="1" y1="0" x2="0" y2="0">
  <stop offset="0" stop-color="var(--pr-face-bounce)" stop-opacity="1" />
  <stop offset="0.3" stop-color="var(--pr-face-bounce)" stop-opacity="0" />
</linearGradient>

<polygon points="…" fill="var(--pr-face-lit)" />
<polygon points="…" fill="var(--pr-face-core)" fill-opacity="var(--pr-texture)" filter="url(#pr-dz)" />
<polygon points="…" fill="url(#pr-face-core)" filter="url(#pr-dz)" />
<polygon points="…" fill="url(#pr-face-bounce)" filter="url(#pr-dz)" />

• 最初のオーバーレイは面のテクスチャです。コアカラーを均一かつ低い不透明度（0.15～0.3）で重ねます。
• オーバーレイで変えるのは不透明度だけで、色は変えません。色の停止点の不透明度は、そこで残るドットの数を表します。0なら何も残らず、1なら完全に残ります。
• 各色の移り変わりは、次の色に達するよう必ず不透明度1まで設定します。不透明度を半分で止めたオーバーレイでは、粒子がかすんで見えます。
• オーバーレイはグラデーションの順に重ねます。テクスチャ、コアカラー、反射色、続いてハイライトやグローです。
• k4 は0.5をわずかに下回る値にします。そうしないと、グラデーションの完全に透明な部分から余計なドットが漏れます。

レンダリングして確認する

export AGENT_BROWSER_SESSION="$(agent-browser session id --scope worktree --prefix task)"
bun .agents/skills/editorial-illustration/scripts/render.ts docs/_uploads/img/docs/illustration-<page>.svg

このスクリプトは、ページ上での表示どおりにファイルを、昼間と #dark の2回描画し、それぞれのスクリーンショットのパスを出力します。各パスについて、エージェントの view_image ツールをそのパスで呼び出してください。返された画像を以下の基準に照らして評価します。 必要に応じて SVG を修正し、再度描画して確認してください。

観察できる問題や記事との不一致を解消する場合に修正を行います。修正版の構図をもう一度、最初から最後まで描画して確認してください。批評と修正のラウンドは最大2回までとし、その後は最も優れたバージョンで続行し、未解決の懸念事項があれば報告してください。雑な仕上がりの兆候がないか確認し、必要ならやり直してください。

• 選択した解釈を伝える、目に見える関係や動作を特定します。ページ幅で意味が伝わるか確認してください。画像に見えていないことを説明しなければ意味が通じない場合は、画像を修正してください。
• 影の向きは光源と一致していますか？
• 不可能な形状は意図的に見え、その周囲の空間的な論理は一貫していますか？
• 構図は見る人の視線を効果的に導いていますか？
• 中心となる関係性がフレームのどれくらいを占めていますか？対象全体が余裕をもって収まるなら、カメラが遠すぎます。その考えを伝える要素を失わずに、もっと近づけますか？可能なら、もっと近づいてください。
• 物体は、似た形の別のものではなく、意図したものとして認識できますか？
• 配色は調和がとれており、場面に適していますか？
• 場面は意図した雰囲気を効果的に伝えていますか？
• 余白は構図のバランスをとるために効果的に使われていますか？
• 明るいバージョンは、ネガのようではなく、同じ場面の別の時間帯として見えますか？
• 輪郭は形状を保ったまま揺らぎ、面同士の境目に継ぎ目がありませんか？
• 流れるような曲線が視線を対象へ導き、各平面の間を縫うように通っていますか？
• 線はシルエットが光に接する部分にだけ現れ、輪郭に沿って薄れていきますか？黒い線がなく、物体全体を一周するように縁取られていませんか？
• 粒子を拡大して確認します。すべての面にテクスチャがあり、点の色は塗りの色に近く、各色の切り替わりは単色の領域に収まっていますか？すべての単色のオブジェクトで輪郭が保たれていますか？