CC for Biz
2026/10/21Claude Code
スキル実測比較Skills活用AI活用非エンジニア向け

canvas-design Claude skillとは|ポスターを作る使い方

canvas-design Claude skillとは|ポスターを作る使い方

「お店に貼るポスターを作りたいけれど、デザインを頼むほどでもない」「AIに作らせると、どれも似たようなチラシになる」——そんな場面で、canvas-design というスキルの名前を目にした方も多いと思います。

結論から言うと、canvas-design は、ポスターや一枚絵のような「静止した1枚」を、芸術作品のような見た目で作るClaude Codeの公式スキルです。私が架空の会社の新商品ポスターを頼んだところ、約1分40秒でA3・300dpiのPDFとPNGが出てきました。ただし、日付や連絡先を読ませたい販促物では、そのままでは足りない場面もありました。

株式会社Fyveは、Claude Codeのスキルを1本ずつ実際に入れて試し、うまくいった点もいかなかった点も記録しています。この記事では、canvas-design の使い道、入れ方、頼み方、試した結果、スキルなしとの違い、安全面の確認、向かない場面を順に書きます。

canvas-design Claude skillとは|ポスターや一枚絵を「作品」として作るスキル

canvas-design は、Anthropicが公開しているスキル集(anthropics/skills)に入っている1本です。説明文には「ポスターや一枚絵などの静止したデザインを、PNGまたはPDFで作る」とあります。

作り方に特徴があります。スキルの指示書(SKILL.md)は、作業を2段階に分けています。

  • 1段階目:いきなり描かず、まず「デザインの考え方(美学の宣言文)」を4〜6段落で書く。「Brutalist Joy」のような短い名前を付ける
  • 2段階目:その考え方に沿って、1枚のキャンバスに絵と文字を組む

さらに指示書は「絵が9割、文字が1割」「文字は最小限」「人の手で何時間もかけたように見せる」といった方向を強く求めています。一般的なチラシのように、情報を詰め込む作りは想定していません。

GitHubのリポジトリ(anthropics/skills)のスター数は182,538、スキル本体を含む最新のコミットは2026年10月9日です(いずれも2026年10月21日時点。スター数はGitHubのAPIで確認)。canvas-design の指示書とライセンスは、リポジトリ内の skills/canvas-design にあります。

どんな仕事に使えるか

向いているのは、「見る人の目を引く、1枚の絵」が主役になる場面です。

  • 店頭・イベントのポスター:新商品の告知、季節のお知らせなど。文字より雰囲気で見せたいもの
  • SNSやサイトの飾りになる一枚絵:記事の扉絵、ブランドの世界観を示す画像
  • 社内の掲示物:スローガンやイベントの告知を、少し洒落た見た目にしたいとき
  • 複数枚のシリーズ:指示書に「追加のページを頼まれたら、同じ考え方でありつつ少しずつ違う絵にする」という項目があります(今回は試していません)

一方、価格・日付・連絡先などを大きく確実に読ませたい販促物は、頼み方に工夫が要ります。この点は、試した結果で詳しく書きます。

この記事を読んでいるあなたへ無料プレゼント仕事でAIを使う人が「絶対に」知っておくべき Claude Codeスキル TOP1031本を実際に入れて、スキルなしと比べた結果つき(全28ページ)
文章・スライド・図・数字・調べもの・契約書など、仕事別の10本1本ごとに、スキルなしと比べた時間・費用・出来実物の画面と、Claude Code にそのまま貼れる頼み方
中身のプレビューを見る ↓登録すると、過去の特典もまとめて受け取れます(PDF 18点・合計468ページ + すぐ使えるzip素材 3点)

入れ方(READMEの手順)

READMEに書かれているClaude Code向けの手順は、次のとおりです。

  • /plugin marketplace add anthropics/skills で、このリポジトリをプラグインの配布元として登録する
  • 「Browse and install plugins」から example-skills を選んで入れる。コマンドで入れる場合は /plugin install example-skills@anthropic-agent-skills

リポジトリの .claude-plugin/marketplace.json を見ると、canvas-design は example-skills に含まれていました(document-skills のほうには入っていません)。入れたあとは、スキルの名前を出して頼めば使えるとREADMEに書かれています。

今回の試験では、普段の環境を汚さないよう、skills/canvas-design のフォルダを試験用フォルダの .claude/skills/canvas-design/ にコピーして使いました。プラグインとして入れる方法は試していません。

必要なものについても書いておきます。このスキル自体には、実行するプログラムは付いていません(指示書とフォントのファイルだけです)。絵はClaude Codeが、その場でPythonなどのプログラムを書いて描きます。今回のClaudeは、画像ライブラリのPillowを使いました。私のMacにはPillowが入っていたため、追加の導入は不要でした。入っていない環境では、Claudeが導入を試みるか、止まるかのどちらかになると思いますが、この点は確かめていません。

Claude Codeにこう頼む

READMEには「スキルの名前を出して頼めばよい」とあります。今回は、スキル名を一度も言わずに、次のように頼みました。

work/company.md に会社の情報があります。新商品のダイニングチェア(2026年11月発売予定)のお店に貼る告知ポスターを作ってください。A3縦で印刷できるもの(PDFかPNG)にして、完成したら work/ に置いてください。

実行記録の最初の動きが canvas-design スキルの呼び出しで、1回目の依頼で発動しました。「ポスター」という言葉に反応して呼ばれたようです。

頼む側が決めたのは、会社の情報(架空の会社の設定ファイル)、用途(店に貼る告知)、サイズ(A3縦)、置き場所だけです。色も構図も、何を大きく見せるかも、Claudeが決めました。

試した結果|架空の会社のダイニングチェア告知ポスターを作った

試したのは、架空の会社(手作り家具を売る従業員12名の会社)の、新商品ダイニングチェアの告知ポスターです。使ったのは、会社の概要をまとめた1つのファイル(商品の価格や発売予定月が書いてあります)。使ったモデルはSonnetです。

できあがったもの

98秒(約1分40秒)、10ターン、実行記録上の費用は約0.25ドルで、次の3つのファイルができました。

  • A3縦のPDFとPNG(PNGは3508×4961ピクセル、300dpi)
  • 「デザインの考え方」を書いたmdファイル(印刷には使わない)
canvas-designで作ったダイニングチェアの告知ポスター。年輪の円盤の上に椅子の側面シルエット

Claudeが付けた考え方の名前は「年輪図譜(Annual Ring Atlas)」でした。木の年輪を細い線で描いた円盤の上に、椅子の側面のシルエットを置いた構図です。円盤の外周は時計の文字盤になっていて、「11」の目盛りと年輪の1本だけが赤茶色です。これは「11月発売」をさりげなく示す仕掛けだと、Claudeが説明してくれました。スキルの指示書にある「題材は、知っている人だけが気づく控えめな引用として織り込む」という方針に沿った動きです。

色は、生成り・焦げ茶・赤茶の3色だけです。載せた情報は、商品名、2026年11月発売予定、価格36,000円(税込)、座面がファブリックか木から選べること、会社名でした。

正解と比べてどうだったか

  • 情報は間違っていない。価格・発売月・座面の選択肢は、元の設定ファイルのとおりでした。電話番号やメールは載せていません(頼んでいないため。Claudeも「載せていない、必要なら足せる」と報告しています)
  • 日本語の文字は崩れていない。見出しは明朝体で、はみ出しや重なりは、私が見た範囲ではありませんでした。Claude自身も、縮小したプレビューで確かめたと報告しています
  • 椅子の絵は、実物とは別物。実際の商品の形は設定ファイルにないので、「それらしい」椅子です。背もたれの形が少し不自然だと私は感じました。実際の商品写真を使いたい場合は、頼み方を変える必要があります
  • 「発売月」が小さい。見出しの「ダイニングチェア」が大きく、「2026年11月 発売予定」は小さめでした。店の入口から離れて見る販促物としては、いちばん読ませたい情報が控えめです。これはスキルの「文字は最小限」の方針が出た結果だと思います
Claude Codeに頼んだ文と、返ってきた報告の画面

2回目|「3m先から読めるように」と頼み直した

発売月が小さい点を、そのまま同じ会話で頼み直しました。

店の入口から3メートル離れて見る想定です。「2026年11月発売」がもっと遠くから読めるように大きくして、お問い合わせ先(company.md のダミーの電話とメール)も入れて、作り直してください。

61秒で、v2が出てきました。「2026年11月」が赤茶色で紙面でいちばん大きな文字になり、右下にお問い合わせ先が入りました。Claudeの報告では、発売月の文字の高さは実寸で約13mmから約40mmになったとのことです。年輪と椅子の絵は、文字の場所を空けるために小さくなっています。

頼み直して作ったv2。発売月を大きくし、お問い合わせ先を入れた

ここで、Claudeは自分から「価格(約18mm)は3m先では読み取りにくい」「座面の説明と連絡先は手に取る距離で読む想定の小さな文字」と書いてきました。私が確かめたわけではありませんが、画像を見た印象とも合っています。つまり、頼み直せば直るが、「何を遠くから読ませたいか」は頼む側が先に言う必要があります。

うまくいかなかった点・気になった点

  • PDFは、絵を貼っただけのもの。PDFの中身を調べたところ、300dpiの画像が1枚貼ってあるだけで、文字データは入っていませんでした。印刷には使えますが、文字の選択・検索はできず、極端に拡大するとぼやけます
  • 日本語のフォントは同梱されていない。スキルに付いているフォント54ファイル(27書体)は、書体名を見る限りすべて英字用でした。日本語の部分は、Macに入っているヒラギノ(明朝・角ゴシック)をClaudeが探して使いました。ヒラギノが無いPCで同じ結果になるかは、試していません
  • 作業用のファイルを、指定外の場所に置いた。絵を描くプログラムは、試験用フォルダの外(1つ上の階層)に作られました。作業の実害はありませんでしたが、会社のフォルダで使うときは、どこに何が増えたかを確認したほうがよいと思います
  • 時間と費用は、スキルなしより少し多い。次の節で書きます
canvas-designがポスターを作るまでの流れ(頼む、デザインの考え方を書く、その方針で描く、PDFとPNGが完成)

スキルなしとの違い

同じ依頼文を、canvas-design を入れていない別のフォルダでも、1回だけ実行しました(実行記録にスキルの呼び出しがないことを確認済み)。1回ずつの結果なので、毎回この差が出るとは限りません。

同じ依頼をcanvas-designありとなしで実行した結果の比較表

スキルなしの出来は、次のとおりです。

  • 61秒、実行記録上の費用は約0.20ドル。PNGは1754×2482ピクセル(150dpi)
  • 「ダイニングチェア 新登場」「2026年11月発売」が大きく、価格、座面の選択肢、会社名、電話とメールまで入った、売り場の告知らしい1枚
  • キャッチコピー「手作りの木の家具から、毎日座りたくなる一脚。」をClaudeが自分で考えて入れた(報告にもその旨が書いてありました)
  • PDFは、文字データが入った形式(フォントが埋め込まれている)でした
左がcanvas-designあり、右がスキルなしで作ったポスター。左は年輪の円盤、右は椅子2脚の線画

私の見立てでは、次のように分かれます。

  • 目を引く「作品のような」1枚が欲しい:canvas-design のほうが向いています。余白の広さ、細い線の積み重ね、色数を絞った統一感は、スキルなしの出力にはない仕上がりでした。解像度(300dpi)も、大きい紙に刷るなら有利です
  • 売り場で情報を伝えたい:スキルなしのほうが、最初から実用的でした。発売月も価格も連絡先も、頼んでいないのに入っていて、遠くからでも読める大きさです。ただし椅子の絵は、2脚が少し不自然な形で、こちらも商品の絵としては頼りないと感じました
  • 時間と費用:canvas-design ありのほうが約1.6倍の時間(98秒と61秒)、約1.25倍の費用(約0.25ドルと約0.20ドル)でした。体感で気になる差ではありません

つまり、「ポスターを作る」だけならスキルなしでも作れます。canvas-design が効くのは、情報の分かりやすさより、見た目の格や雰囲気を優先したい場面です。情報を確実に伝えたいときは、頼み方で補うか、スキルなしのほうが近道になることがあります。

中身の安全確認|何を外に送り、何を実行するか

入れる前に、SKILL.md(約12KB)、LICENSE.txt、同梱のフォントのファイル一覧、READMEを読みました。

  • 実行するプログラム:スキルには、スクリプトも、hooks(自動で動く仕組み)も、plugin.jsonによる追加の設定も入っていません。入っているのは、指示書、ライセンス、フォント(54ファイル)だけで、フォルダ全体で約5.5MBです。allowed-tools(許可するツールの指定)もありません
  • 外部への送信:指示書に、データを外部へ送る指示はありません。ただし「必要なフォントはダウンロードして使ってよい」という趣旨の一文があります。Claudeが外部からフォントを取りに行く可能性は、指示書の上ではあります。今回の実行記録には、ダウンロードの操作はありませんでした(同梱の英字フォントと、Macのヒラギノだけで足りたためです)
  • 認証情報:読む処理はありません
  • ライセンス:skills/canvas-design のLICENSE.txtはApache License 2.0です。READMEも「このリポジトリのスキルの多くはApache 2.0」と書いています(同じリポジトリのdocx・pdf・pptx・xlsxは別で、ソースが見られるだけの扱いです)。同梱フォントには、フォントごとのライセンスファイル(OFL)が付いていました

私が読んだ範囲では、説明と違う動きは見つかりませんでした。ただし、リポジトリの更新は続いているので、入れる時点で最新の中身を確認することをおすすめします。READMEにも「デモと教育目的で提供。自分の環境で十分に試してから使うこと」と書かれています。

向かない場面

  • 価格・日付・連絡先を、確実に大きく読ませたい販促物:「文字は最小限」の方針が働くので、頼み方で「◯◯を大きく」と指定しないと、小さく扱われることがあります
  • 実際の商品を写した写真が必要な場面:今回の椅子は、Claudeが描いた「それらしい絵」でした。商品の正確な形は再現されません
  • 印刷所への入稿データ:PDFは画像が1枚貼ってある形で、文字データがありません。入稿の仕様によっては使えない可能性があります(入稿規定は印刷所ごとに違います)
  • 日本語フォントが無い環境:同梱のフォントは英字用です。日本語の部分はお使いのPCのフォント次第です(今回はMacで試しています)
  • 説明図・グラフ・表:指示書の対象は「作品としての1枚」です。情報を整理して見せる図は、別の道具のほうが向いています
  • 今すぐ数枚の案を並べたいとき:1枚の完成度を上げる作りで、案を何通りも出す用途の指示は書かれていません(試していません)

関連する記事

スキルそのものの使い方を一から知りたい方は、こちらをご覧ください。

Claude Code Skillsの使い方|業務をSkill化する実践手順

AIの見た目を整えるスキルとの違いが気になる方は、こちらもあわせてどうぞ。

taste-skillとは|AIのUIを格上げするスキル集
Claude Codetaste-skillとは|AIのUIを格上げするスキル集

画像生成AIで資料の1枚を作る方法との比較には、こちらが参考になります。

gpt-image-2 でスライド1枚を生成|資料制作革命
Codexgpt-image-2 でスライド1枚を生成|資料制作革命

まとめ|入れる前のチェックリスト

  • □ 作りたいのは「ポスター・一枚絵」で、見た目の格や雰囲気が大事な場面である
  • □ 価格・日付・連絡先など、必ず読ませたい情報があるなら、頼むときに大きさや位置まで指定する
  • □ 実際の商品の写真や正確な形は出ないと理解している
  • □ PDFは画像が貼ってあるだけ(文字データなし)だと理解したうえで、印刷の仕様を確認する
  • □ 日本語の文字は、お使いのPCのフォントで描かれる(Mac以外は未確認)
  • □ 指示書は、外部からのフォント取得を許している。気になる場合は「フォントは同梱のものとPC内のものだけ」と頼む
  • □ 作業用のファイルが指定外の場所にできていないか、終わったあとに確認する
  • □ 入れる時点の最新の中身を、一度読んでおく
  • □ 情報を確実に伝えたいだけなら、スキルなしの依頼でも足りることがある

試験の日付と数字は、2026年10月21日時点のものです。スキルは更新が続くため、結果が変わる可能性があります。

「デザイン・販促物を作る」のスキルは、ほかに2本を同じ架空の会社の材料で試しています。

prototypeとは|Emil Kowalski skillsで案を3つ比べる
Claude Codeprototypeとは|Emil Kowalski skillsで案を3つ比べる
frontend-design 使い方|LPを作らせてスキルなしと比べた結果
Claude Codefrontend-design 使い方|LPを作らせてスキルなしと比べた結果
この記事を読んでいるあなたへ無料プレゼント

仕事でAIを使う人が「絶対に」知っておくべき Claude Codeスキル TOP10

31本を実際に入れて、スキルなしと比べた結果つき(全28ページ)

スキルを入れても、Claude が急に賢くなるわけではありませんでした。31本を架空の会社の仕事で試し、同じ依頼をスキルなしでも検証して比べたうえで、導入する価値があった10本を仕事別にまとめています。

  • 文章・スライド・図・数字・調べもの・契約書など、仕事別の10本
  • 1本ごとに、スキルなしと比べた時間・費用・出来
  • 実物の画面と、Claude Code にそのまま貼れる頼み方
  • 外した5本の理由と、入れる前に確かめる4つのこと

メールアドレス登録で他にも様々な資料を閲覧できます

「Sonnet 5.5」を、実務で比べてみた。Codexを使い始める前に、「絶対に」見直してほしい5つのこと「Opus 5.5」を、実務で比べてみた。Jevで得する仕事、損する仕事Astra と Fable 5.1、ベンチマークでは分からない「使い分け」。Fable 5.1、賢さは「どこ」に出たか。Workにしかできない仕事は、2つだけその太字、本物ですかClaudeのこの5つの設定、今すぐ見直した方がいい+9

PDF 18点・合計468ページ + すぐ使えるzip素材 3点

どれも登録後の受け取りページから、まとめてダウンロードできます。

毎週配信の無料ニュースレター「AIネイティブ超研究」の購読特典です。メール登録後すぐ、受け取りページのご案内が届きます。そこにはこの資料に加えて、過去の特典もすべてまとめて置いてあります。あわせて、AI活用に関するお知らせやお役に立てそうなご案内をお送りすることがあります。解除はいつでも1クリック。

← 記事一覧に戻る

御社の業務に合わせたClaude Code導入支援

「AIツールを導入したが、現場で使われない」を終わらせる。
業務課題のヒアリングから設計、ハンズオン実践、運用定着まで一貫して支援します。

無料AI活用診断を受ける料金とサービス一覧を見る →
© 2025 Fyve Inc. All rights reserved.