Claude Media
Claude canvas-designスキルでポスターをPNG・PDFで作る手順
Claude CodeClaudeチュートリアル

Claude canvas-designスキルでポスターをPNG・PDFで作る手順

Anthropic公式のcanvas-designスキルは、デザイン哲学を書いてから描く2段構成でポスターや一枚絵をPNG・PDFにします。導入、頼み方、日本語フォントの注意点を扱います。

読了目安 約8分

canvas-designは、Anthropicが公開しているサンプルスキルの1つです。ポスターや一枚絵のような静的なデザインを、PNGまたはPDFのファイルとして作らせるための指示書(SKILL.md)が入っています。

特徴は、いきなり描かせない点です。先に「デザイン哲学」をMarkdownで書かせ、その哲学を使ってキャンバスに描く、という2段構成になっています。この記事では、導入方法、頼み方、日本語を載せるときのフォントの扱い、向かない図の見分け方を順に説明します。

canvas-designスキルとは何か

canvas-designは、anthropics/skillsリポジトリのskills/canvas-designフォルダにあるAgent Skillです。SKILL.mdのdescriptionには、ポスター・アート作品・デザインなど静的な作品を頼まれたときに使うこと、既存作家の作品を写さず独自に作ることが書かれています。

フォルダの中身は3つです。

  • SKILL.md: 作業手順の本体
  • LICENSE.txt: ライセンス文書
  • canvas-fonts: キャンバスで使えるフォント一式

出力はMarkdown(デザイン哲学)とPDF、PNGに限られます。SKILL.mdの冒頭に「Output only .md files, .pdf files, and .png files」とあり、HTMLやSVGを成果物にする設計ではありません。

リポジトリのREADMEには、これらのスキルは実演と学習が目的で、Claudeが実際に返す挙動は異なることがある、と明記されています。業務で使う前に自分の環境で試すのが前提です。

導入手順:Claude CodeとClaude.aiの違い

Claude Codeでは、リポジトリをプラグインのマーケットプレイスとして登録します。canvas-designはexample-skillsというプラグインに含まれています。

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

document-skillsの側にはPDFやExcelなどの文書系スキルが入っており、canvas-designの入口はexample-skillsです。導入後は、スキル名を文中に出すだけで使われます。READMEは「PDFスキルを使って〜」のような頼み方を例にしています。スキルの置き場所や仕組みの全体像はClaude Code Skills完全ガイドにまとめています。

Claude.aiでは、READMEによるとこれらのサンプルスキルは有料プランで最初から使えます。組織で配る場合はSkillsの組織配布を参照してください。Claude.aiで作ったファイルの受け取り方はSkillsの生成ファイルをダウンロードする手順が参考になります。

2段構成の中身:哲学を書いてから描く

SKILL.mdは作業を2段階に分けています。第1段が「Design Philosophy Creation」、第2段が「Canvas Creation」です。

手順

canvas-designが踏む順序

  1. 1

    デザイン哲学を書く

    依頼内容を土台にして、美学の方向性を1〜2語の名前と4〜6段落の文章で書き、Markdownで出力します。

  2. 2

    隠れた主題を決める

    依頼の主題を、作品の中に埋め込む控えめな参照として定めます。文字どおりに描かない前提です。

  3. 3

    キャンバスに描く

    哲学を使って、1ページのPDFかPNGを作ります。ページ数を頼めば複数ページも作れます。

  4. 4

    仕上げを1回やり直す

    図形を足さず、すでにあるものを磨き直します。

哲学の段階で決まること

哲学には名前を付けます。SKILL.mdの例は「Brutalist Joy」「Chromatic Silence」「Metabolist Dreams」などです。文章では、空間と形、色と素材、スケールとリズム、構図、視覚的な階層をどう扱うかを書かせます。

注意したいのは、哲学が「用途に触れない汎用の文章」にされる点です。SKILL.mdは、哲学には作品の意図を書かず、どこにでも使える形にするよう求めています。「社内勉強会のポスター」という文脈は、哲学ではなく次の段階の主題として使われます。

隠れた主題の扱い

2つ目の特徴が、主題を前面に出さない設計です。SKILL.mdは主題を「作品の中に埋め込む控えめな、ニッチな参照」と呼び、知っている人だけが気づくように、と書いています。ジャズ演奏家が別の曲を引用する例えが添えられています。

説明的な図が欲しい人には、ここで期待とずれが出ます。「3つの機能を矢印でつないだ図」は、この設計の想定外です。

描画段階で効く制約

描画の指示には、守るべき制約がまとまっています。

  • 文字は最小限で、画面の約9割を視覚表現、約1割を必要な文字にする
  • 何も画面外にはみ出さず、何も重ならない。余白を取る
  • 通常は1ページ。複数ページは頼まれたときだけ
  • 色数は絞り、統一感を持たせる

最終段階の指示も特徴的です。SKILL.mdは、仕上げで図形を足すのではなく「すでにある構成を作品として磨く」よう求め、コードに戻って2回目の調整をさせます。

頼み方:最初の依頼文に入れる要素

スキルは「微妙な入力は土台として使うが、創作の自由は縛らない」と書いています。細かい指定を並べすぎると、哲学の段階が形骸化します。入れておくと役立つのは、用途、サイズか向き、載せたい文字、避けたいものの4点です。

canvas-designスキルで、社内AI勉強会のポスターをA3縦のPDFで作って。
載せる文字は「AI勉強会」と開催日の10月24日だけ。
デザイン哲学のMarkdownも一緒に出力して。

これは頼み方の一例で、返ってくる出力を保証するものではありません。SKILL.mdの規定どおりなら、哲学のMarkdownとPDFの2ファイルが成果物になります。

仕上がりが気に入らないときは、図形の追加を頼むより、哲学の側を直すほうがSKILL.mdの設計に沿います。「色数を2色に絞って、同じ哲学で描き直して」のように、哲学を維持したまま変更点だけを伝えます。

canvas-fontsと日本語の扱い

SKILL.mdは、文字を入れるなら./canvas-fontsフォルダのフォントを探して使うよう求めています。同時に「必要なフォントはダウンロードして使ってよい」とも書いています。

canvas-fontsに入っているのは、BigShoulders、Lora、IBM Plex、Outfit、Work Sansなど、欧文向けのファミリーです。ファイル名を見る限り、日本語向けのフォントは含まれていません。多くのフォントにはOFL(SIL Open Font License)の文書が並んで置かれています。

日本語を載せるなら、依頼文でフォントを指定しておくと安全です。

日本語の文字は欧文用のcanvas-fontsではなく、日本語に対応した
フォント(Noto Sans JPなど)を使って。使うフォントは最初に教えて。

指定したフォントが手元の環境にあるか、ダウンロードできるかは実行環境次第です。文字が四角(豆腐)で出た場合は、フォントの未取得を疑ってください。SKILL.mdの方針は「文字は少なく」なので、日本語は見出し1行か日付程度に絞ると失敗しにくくなります。

向く図・向かない図:draw.ioとの使い分け

「Claudeに図を描かせたい」という需要には、目的の違う2つがあります。canvas-designは見た目を作るスキルで、情報の正確さを担保する道具ではありません。

作りたいものcanvas-design別の手段
イベントのポスター、表紙、一枚絵canvas-design向く別の手段
概念を雰囲気で伝えるビジュアルcanvas-design向く別の手段
ER図、構成図、フローチャートcanvas-design向かない別の手段draw.io MCPなど
文字が多い資料、表の多いスライドcanvas-design向かない別の手段PowerPoint系スキル
数値を正確に読ませるグラフcanvas-design向かない別の手段チャート作成の仕組み

構成図やER図のように、箱と矢印の意味が正しいことが大事な図は、図表エディタに渡す方法が合います。手順はdraw.io公式MCPサーバーでClaude Codeに図を描かせる方法で扱っています。チャートはClaude Codeのdatavizスキルが担当領域です。PDFやPowerPointを業務用に生成する標準スキルはAgent SkillsのAPI標準スキル一覧にあります。

仕上がりが崩れたときの切り分け

SKILL.mdが特に強く求めているのは「はみ出さない」「重ならない」の2点です。それでも崩れたときは、次の順に見ます。

  1. 文字が枠外にはみ出す: 余白を取るよう指示し、文字数を減らす
  2. 要素が重なる: 同じ哲学のまま「レイアウトの重なりだけ直して」と伝える
  3. 豆腐文字: 日本語対応フォントを明示する
  4. 派手すぎる、安っぽい: 哲学の名前と色数を指定して描き直す
  5. 説明が足りない: 文字を足すのではなく、別の手段(図表エディタ)に切り替える

「完璧ではない、美術館に飾れるほどに」という趣旨の指示がSKILL.mdの最終段階に入っており、Claudeは2回目の調整を自動で行う設計です。追加の仕上げを頼むときは、新しい要素を足す指示ではなく、いまの構成を磨く指示にします。

まとめ

canvas-designは、依頼を一度「デザインの考え方」に変換してから、1枚のPDFかPNGに落とすスキルです。ポスターや表紙のような、見た目が主役の作品に向きます。

図の中身が正確でなければならない場面には使いません。構成図は図表エディタ、グラフはチャート系の仕組みと分けておくと、手戻りが減ります。日本語を載せるときは、フォントの指定だけは最初に済ませておくのが現実的です。

この記事を共有:XはてブLinkedIn

関連する記事

Claude Code をもっと見る →