Claude Media
Claude slack-gif-creatorスキルでSlack用GIFを作る手順と検証
Claude CodeClaudeチュートリアル

Claude slack-gif-creatorスキルでSlack用GIFを作る手順と検証

Anthropic公式のslack-gif-creatorは、サイズ・色数・秒数の制約と検証関数を持つスキルです。導入、頼み方、絵文字用の自動間引きとイージング名の落とし穴を扱います。

読了目安 約9分

slack-gif-creatorは、Anthropicがanthropics/skillsリポジトリで公開しているサンプルスキルです。「Slack用に〇〇が△△するGIFを作って」と頼まれたときのために、Slackの寸法・色数・秒数の目安、GIFを組み立てるクラス、検証関数、動きの付け方を1つにまとめています。

画像素材は同梱されていません。絵はPillowの描画命令で毎回描かせる設計です。この記事では、導入、頼み方、絵文字用の出力で起きること、そして同梱コードを読んで見つかった2つの落とし穴を順に説明します。

slack-gif-creatorは何を渡してくれるスキルか

SKILL.mdのdescriptionは、Slack向けのアニメGIFを作るための「制約・検証ツール・アニメーションの考え方」を提供する、と説明しています。フォルダの中身は次のとおりです。

  • SKILL.md: 制約、基本の流れ、動きのレシピ
  • core/: gif_builder.py、validators.py、easing.py、frame_composer.py
  • requirements.txt: 依存パッケージ
  • LICENSE.txt: ライセンス文書

SKILL.mdは自分の役割を「知識・ユーティリティ・柔軟性」の3つとし、決まったアニメーションのテンプレートや既成の絵の部品、絵文字フォントの描画は提供しないと書いています。つまり、動きのロジックはClaudeがその場でコードにします。スキルが持つのは、守るべき数字と、組み立てと検証の道具です。

SKILL.mdが示すSlackの数字

項目目安
絵文字GIFの寸法目安128x128(推奨)
メッセージ用GIFの寸法目安480x480
FPS目安10〜30(低いほどファイルが小さい)
色数目安48〜128(少ないほどファイルが小さい)
絵文字GIFの長さ目安3秒未満

これらはSKILL.mdの記述です。Slack側の仕様ページを引いたものではないので、アップロード上限のような厳密な値は別途Slackの案内で確かめてください。

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

Claude Codeでは、リポジトリをプラグインのマーケットプレイスとして登録します。slack-gif-creatorはマーケットプレイス定義の中で、canvas-designなどと同じスキルの一覧に入っています。READMEが示す導入コマンドは次の2行です。

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

導入後は、スキル名を文中に出せば使われます。READMEは「PDFスキルを使って〜」という頼み方を例にしています。同じexample-skillsに入っているポスター作成の手順はcanvas-designスキルの記事にあります。スキルの置き場所やSKILL.mdの書き方はClaude Code Skillsのfrontmatter全フィールドが詳しいです。

Claude.aiについて、READMEはこれらのサンプルスキルが有料プランではすでに使える状態だと書いています。Claude.aiで作ったファイルを手元に取り出す方法はSkillsの生成ファイルをダウンロードする手順を参照してください。

動かす環境の前提

SKILL.mdの依存はpip install pillow imageio numpyの1行です。一方requirements.txtには、pillow 10.0以上、imageio 2.31以上、numpy 1.24以上に加えてimageio-ffmpegも並んでいます。SKILL.mdの1行だけで入れると、記載が食い違う点に注意が必要です。

validators.pyは型注釈にstr | Pathの書き方を使っています。この書き方は関数定義の時点で評価されるため、Python 3.10以上が前提になると読めます。手元のPythonが古ければ、先にここで引っかかります。

また、コードはfrom core.gif_builder import GIFBuilderと書かれています。coreフォルダの親が作業ディレクトリ(または検索パス)になっていないと動きません。Claudeに実行させるときは、スキルのフォルダを作業場所にするよう頼むのが確実です。

頼み方:制約を言葉で渡して、検証まで走らせる

SKILL.mdの想定する依頼は「XがYしているGIFをSlack用に作って」という短いものです。ただ、短い依頼では絵文字用かメッセージ用かが決まりません。寸法・長さ・色数を先に言い、最後に検証関数の結果を返させると、やり直しが減ります。

slack-gif-creatorスキルで、絵文字用の128x128のGIFを作って。
赤いボールが上から落ちて、床で2回バウンドする。
長さは3秒未満、色は48色まで。
作ったら validate_gif の出力を貼って、
サイズがKBでいくつかも教えて。

最後の一文が効きます。検証の出力(寸法・サイズ・フレーム数・秒数)を人間が読める形で返させれば、「できました」という報告だけに頼らずに済みます。

手順

slack-gif-creatorが想定する作業の流れ

  1. 1

    ビルダーを作る

    GIFBuilder(width=128, height=128, fps=10)のように、寸法とFPSを決めます。

  2. 2

    フレームを描く

    PillowでRGB画像を作り、ImageDrawの円・多角形・線・長方形で絵を描いてadd_frameで追加します。

  3. 3

    保存する

    save('output.gif', num_colors=48, optimize_for_emoji=True)で、色数を減らしながら書き出します。

  4. 4

    検証する

    validate_gifかis_slack_readyで、寸法やサイズが範囲内かを見ます。

見栄えのために書かれている指示

SKILL.mdは、絵が単調にならないための指示も持っています。線はwidth=2以上にする(1だとギザギザに見える)、背景はグラデーションにする、星には後ろに大きく薄い影を重ねる、色は補色を使い輪郭でコントラストを付ける、といった内容です。絵文字フォントは環境で変わるので使わない、とも明記されています。

文字入れを頼むときは、この点が効きます。frame_composer.pyのdraw_textは、コメントによればPillowの既定フォントを使う実装です。日本語を載せたいなら、フォントファイルを指定する処理をClaudeに足させる必要があります。

動きの付け方:SKILL.mdのレシピ

動きはサイン波とイージングの組み合わせで作ります。SKILL.mdには次のレシピが並んでいます。

  • 揺れ: フレーム番号にsinかcosを掛け、位置をずらす
  • 脈動: 元のサイズの0.8〜1.2倍の間で拡縮する。心臓の鼓動は「速い2拍と休止」
  • 弾み: 落下はease_in、着地はbounce_out
  • 回転: image.rotate。揺らすなら角度を線形でなくサイン波にする
  • フェード: RGBAのアルファ値、またはImage.blend
  • スライド: 画面外から目標位置へ。行き過ぎて戻すならback_out
  • ズーム: 0.1〜2.0倍に拡大して中央を切り出す
  • 破裂: 粒を放射状に飛ばし、重力を足して、時間とともに消す

組み合わせも歓迎されています。弾みながら回る、脈動しながら滑り込む、といった合わせ技です。

絵文字用の出力で何が起きるか:自動間引きと秒数

optimize_for_emoji=Trueは、保存時に3つの処理を走らせます。gif_builder.pyの実装を読むと次のとおりです。

  1. 幅か高さが128を超えていれば、128x128に縮小する
  2. 色数の上限を48に下げる
  3. フレームが12枚を超えていれば、n枚おきに残して間引く

3つ目が見落としやすい点です。残す間隔は「フレーム数÷12」の切り捨てで決まります。30枚なら2枚おきで15枚が残り、24枚なら12枚、36枚なら12枚になります。ちょうど12枚に揃う仕組みではありません。

しかも間引いた後も、再生のFPSは最初に指定した値のままです。10fpsで30枚(3秒)のつもりで作ると、15枚・10fpsの1.5秒で書き出されます。動きが速く見える原因はここにあります。

対策は、絵文字用なら最初から12枚前後で設計することです。Claudeには「絵文字用は12フレームで、1秒前後のループにして」と頼みます。1つ目の縮小も、正方形でないフレームを128x128に押し込むので、縦横比は崩れます。最初から正方形で描かせてください。

検証関数が通す範囲

validate_gifの合否は、寸法だけで決まります。

種別合格の条件
絵文字(is_emoji=True)合格の条件正方形で、一辺が64〜128
メッセージ用合格の条件縦横比が2以下で、短い辺が320〜640

サイズ(MB)は合否に入りません。5MBを超えると「ファイルが大きい」という注意が表示されるだけです。is_slack_readyは、この合否をそのまま真偽値で返す関数です。

そのため「検証を通った」は、寸法が範囲内という意味にとどまります。秒数が3秒未満か、KBが十分小さいかは、返ってくるresultsのduration_secondsやsize_kbを自分で見る必要があります。先ほどの依頼文にサイズを聞く一文を入れたのは、これが理由です。

つまずきやすい点

落とし穴

easing='back_out'は線形として動く

SKILL.mdはイージング名にback_outを挙げています。ところがeasing.pyの名前表(EASING_FUNCTIONS)にback_outのキーはありません。interpolateは未知の名前を受け取ると、エラーにせず線形に落とします。「行き過ぎて戻る」動きを頼んだのに、普通の等速移動になります。関数ease_back_out自体は同じファイルにあるので、start + (end - start) * ease_back_out(t)と直接呼ぶ形に直させれば動きます。

表にあるのはlinear、ease_in、ease_out、ease_in_out、bounce_in、bounce_out、bounce、elastic_in、elastic_out、elasticです。ここにない名前を書くと、同じように黙って線形になります。

もう1つの注意は、最適化の頼み方です。容量を小さくする手順は、小さくしてほしいと頼まれたときだけ実施されます。容量の目安を先に伝えない限り、remove_duplicates=Trueなどは入らないと考えてください。

SKILL.mdの最適化は5つの手法で、saveの引数と対応させると頼み方が決まります。

  • フレームを減らす: FPSを下げるか、秒数を短くする(saveの引数ではなく設計の話)
  • 色を減らす: num_colors=48のように指定する(既定は128)
  • 寸法を小さくする: 480x480ではなく128x128で描く
  • 重複を除く: remove_duplicates=True。連続して同じ絵のフレームだけが対象で、既定ではオフ
  • 絵文字モード: optimize_for_emoji=True。前節の3つの処理がまとめて入る

「容量を半分にして」と頼むより、「色を48まで、連続する同一フレームは除いて」と引数に落ちる言い方をすると、狙った効果だけが入ります。

向く場面と向かない場面

場面向き理由
揺れる・弾む・光るなど、図形で表せる絵文字向き○理由描画命令だけで足り、制約もスキルが持っている
既存のロゴや写真を動かす向き△理由アップロード画像をPillowで読み込めるが、動きは平面の変形が中心
日本語の文字入れ向き△理由既定フォントのままでは足りず、フォント指定の追加が要る
動画からGIFを切り出す向き×理由動画を扱う処理は入っていない

実画面の操作をGIFにしたいときは、このスキルではなくブラウザ操作の録画が向きます。手順はClaude Code GIF録画にまとめています。完成したGIFをSlackでClaudeと使う側の話はClaudeとSlackの連携が受け持ちます。

READMEには、これらのスキルは実演と学習のためのもので、Claudeが実際に返す挙動は異なることがある、と明記されています。社内の絵文字を量産する前に、1つ作ってvalidate_gifの出力を読むところまで試すのが現実的です。

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

関連する記事

Claude Code をもっと見る →