図解はプロンプトで頼まない。作法をスキルに固定してSVGで量産する

未分類

税理士向けの生成AI活用をまとめた書籍を読んだ。 AIに画像や図解を作らせる事例が載っていて、スタイルをプロンプトの制約条件で細かく指定するのがコツだと紹介されている。 同じ課題を自分はどう回しているか棚卸ししてみたら、出発点から違っていた。 画像を1枚ずつ上手に頼むのではなく、図解の作法をファイルに固定している。

この記事は、その書籍の事例をお題に借りて、自分の実運用とそこからもう一段の引き上げ方を書くシリーズの1本目である。

図解の作法をスキルに固定する

自分の環境には svg-diagram という名前のスキルがある。 スキルとは、Claude Code のようなAIエージェントが作業のたびに参照するルールファイルのことだ。 「図解して」と言うだけでこのファイルが読み込まれ、配色もレイアウトも毎回同じ規律で図が出てくる。 プロンプトに書くのは図の中身だけで、見た目の指示はしない。

ファイルに書いてあるのは、たとえばこんな作法だ。

  • 色はグレー8段階と、強調のマゼンタ4段階だけ。原色を混ぜない
  • 領域は枠線で囲まず、塗りの濃淡で分ける。構造はグレー、内容は白
  • 1枚の図に主張は1つ。タイトルは「◯◯の比較」ではなく結論の一文にする
  • チャートの数値は図の中に直接描く。マウスを乗せないと見えないツールチップに逃がさない

このやり方で作った図解は、サイトの図解ディレクトリだけで690本になった。

作法には失敗も書き足していく。 SVGは特殊文字が1つ混ざるだけで図全体が白紙になる。 カードの高さ計算を間違えると、文字が箱の下端に張り付く。 踏んだ事故はその場でスキルに注意書きとして追記するので、同じ事故は次から起きにくくなる。 頭で覚えたコツと違って、ファイルに書いた作法は消えない。

出口が3つあるからSVGを選ぶ

図解の形式にSVGを選んでいるのには理由がある。

まず、SVGの実体はテキストファイルなので、AIが直接書けるし、直接直せる。 「3枚目のカードの文言だけ変えて」という修正が、画像の再生成ではなくテキストの書き換えで済む。 何をどう変えたかも、文字の差分としてそのまま残る。

そして出口が広い。

図解の作法をスキルファイルに固定し、SVGとして生成すると、HTMLとIllustratorとPowerPointの3つの出口へ同じファイルが流れることを示す図
図1: 作法をスキルに固定すると、1つのSVGが3つの出口に流れる

ブログ記事にはそのまま埋め込める。 Illustratorで開けば、印刷物用にそのまま編集できる。 PowerPointにも図として挿入できるから、スライドにもなる。 実際、セミナーの告知チラシも当日のスライドもこの記事の図解も、同じ作法から出てきた同じ形式のファイルで作っている。 1つの作法と1つの形式で、Webと紙とスライドの3つがまかなえる。

プロンプトのコツは個人に残り、スキルは組織に残る

書籍のようにプロンプトの書き方を身につける道もある。 ただ、プロンプトは使うたびに貼り直すもので、上達は頼んだ本人の手元にしか残らない。 スキルは置いておけば毎回勝手に効くし、失敗を書き足せば次の作業から賢くなる。

会計事務所に置き換えるなら、事務所の資料の配色、レイアウト、使ってはいけない表現を1つのスキルに書いておく、ということになる。 そうすれば、誰がAIに作らせても事務所の見た目で揃う。 「上手に頼める人」を育てるのではなく、事務所の作法をファイルにする。 図解にかぎらず、このシリーズで書いていく話の背骨はすべてこれである。