slack-gif-creator を使ってみた ― トグルが動く Slack エモジを作る

このスキルは何か

slack-gif-creator は、Slack最適化のアニメGIFを作るツールキット。同梱の GIFBuilder（フレーム合成＋色数削減・最適化）、easing（なめらかな動き）、frame_composer（背景・図形ヘルパー）、validators（Slack要件チェック）を使い、PILの図形でフレームを描いて1本のGIFにする。制約が明確なのが特徴——エモジは128×128、メッセージ用は480×480、FPS 10–30、色数48–128、エモジは3秒以内。

実際にやった手順

Step 1：題材と動きを決めた

ui-memo はUIコンポーネントの参照サイトなので、トグルスイッチがオンになる動きにした。オフ（灰）→ ノブが右へ overshoot しながらスライド → トラックが赤に染まる → 小さなスパークルが弾ける → オフに戻ってループ。いつも「UI表現の引き出し」で使う原則（linear禁止・overshoot・レイヤー合成・アクセントの一点）を、そのままGIFに持ち込んだ。

Step 2：PILの図形でフレームを描いた

絵文字フォントは使わず（プラットフォーム差で崩れるため）、PILの rounded_rectangle / ellipse でカード＋トラック＋ノブ＋ハイライト＋接地影をレイヤーで重ねた。配色は ui-memo トークン（クリームのカード・赤アクセント・白ノブ）。ノブのスライドは付属の ease_back_out（overshoot）、トラックの色は灰→赤を補間。オンの瞬間に6粒のスパークルを放射させて減衰（パーティクル）。

体験メモ：これは「フレームを1枚ずつ描く」ラスタの世界。普段やるSVG/CSSの“宣言的な”アニメ（@keyframes やSVGアニメ）とは逆で、1コマずつ全部描く。原則（イージング・overshoot・レイヤー）は同じでも、媒体の手触りがまるで違った。

Step 3：GIFBuilder で組んで最適化した

フレームを GIFBuilder に渡して save(num_colors=64, optimize_for_emoji=True)。最適化が走り、24フレーム → 12フレームに自動間引き、色数48、サイズ8.3KB、1.0秒のGIFになった。「小さく軽く」を勝手に詰めてくれるのが効く。

from core.gif_builder import GIFBuilder
from core.easing import ease_back_out, ease_out_cubic

builder = GIFBuilder(width=128, height=128, fps=12)
for i in range(24):
    frame = make_frame(i)          # PILで1コマ描画（カード/トラック/ノブ/スパークル）
    builder.add_frame(frame)
builder.save('toggle.gif', num_colors=64, optimize_for_emoji=True)

Step 4：検証ツールで Slack 対応を確認した

付属の validate_gif(..., is_emoji=True) で要件チェック。128×128（最適）・48色・8.3KB・1.0秒・PASS。「作る」だけでなく「仕様に通っているか機械で確かめる」工程まで用意されているのが、このスキルの実用性。

使ってみて効いたこと

• 制約が明確で迷わない：128/48色/3秒という枠が最初から決まっているので、「Slackで実際に使えるか」をブレずに作れた。
• 検証まで込み：作ったGIFが仕様を満たすか機械チェックできる。手作業の目視確認が要らない。
• イージングが同梱：ease_back_out 等が揃っていて、overshoot のある“気持ちいい”動きがすぐ出せた。
• 原則は媒体を超える：linear禁止・overshoot・レイヤー・アクセント一点という、普段のSVG/CSSデモの原則が、ラスタGIFでもそのまま効いた。

ハマった・判断したこと

• フレーム自動間引き：optimize_for_emoji が24→12にフレームを減らす。容量は小さくなるが、動きの細かさは削られる。細部を見せたいなら最適化を弱めるか、最初からフレーム数を抑えて設計する。
• 小さく表示される前提：Slackエモジは実寸22px前後。ON/OFF の文字やスパークルの粒は実機では潰れる。動きと色で読ませる設計が正解（メッセージ用480×480なら細部も出る）。
• ラスタである：GIFは拡大に弱く、サイトのUIデモ（SVG/CSSでスケールする）とは別物。用途はサイト内UIではなく、Slack・SNS・告知などの外部コミュニケーション。ui-memo本体のデモには使わない、という住み分け。

ui-memo での使いどころ

• Slack/コミュニティのカスタムエモジ：UIトグルやコピー完了など、ui-memo文脈のリアクション用。
• Zennアイキャッチ・SNS・告知の動く図版：静止画より目を引く。
• 「動きの試作」：本実装前に動きの雰囲気をGIFで素早く共有する用途。
• 注意：サイト本体のUIデモはSVG/CSSのまま（スケール・SEO・軽さ）。GIFは外向きの素材として使い分ける。

まとめ

slack-gif-creator は、明確な制約・イージング・検証までを1セットにした実用ツールキットだった。普段のSVG/CSSアニメの原則（linear禁止・overshoot・レイヤー）をそのままラスタGIFに持ち込めて、UIトグルのエモジを“Slack対応PASS”まで一気に作れた。媒体は違っても、良い動きの原則は共通——という確認になった。これで「手を動かして作る」系のデザイン・ビジュアルスキル（frontend-design / algorithmic-art / canvas-design / slack-gif-creator）を、実際に使って体験談にできた。残る theme-factory・brand-guidelines は“配色・ブランドを当てる”系で、サイトのデザイン底上げと合わせて見ていきたい。

よくある質問