メインコンテンツへ移動
AIチュートリアル

Claude向けKubai Iconsで一貫性のあるアニメーションSVGアイコンと静的SVGアイコンを作成する

Kubai Iconsが、レイヤー構造を持つアニメーションSVGアイコンや静的SVGアイコンをClaudeで繰り返し作成するためのシステムを提供する仕組みを解説します。インストール、アイコンの依頼、書き出しオプション、パレット、ローカルプレビュー、セルフチェック、セットを拡張する実践的なワークフローを取り上げます。

約13分で読了
Claude向けKubai Iconsで一貫性のあるアニメーションSVGアイコンと静的SVGアイコンを作成する

Kubai Iconsは、ひとつのビジュアル言語を共有するアイコンを作成するためのClaudeスキルです。機能一覧や既存のプロダクトリポジトリをClaudeに渡すと、プロジェクトに収録された66個のサンプルに一致するアイコンをデザインできます。成果物は、JavaScriptで動作する動的なSVGにも、単体で完結する静的なSVGファイルにもできます。

このシステムは、レイヤー化した形状、外側のアウトライン、アクセントから導出した色、グラデーション、シャドウ、オブジェクトごとに異なるホバー動作を基盤としています。一般的なアニメーションを使うのではなく、フォルダーが開き、封筒の封が解かれ、カレンダーがページをめくります。

ライブギャラリーを開くと、コレクション全体をプレビューし、パレットを切り替えたり、アイコンにホバーしたりできます。

Kubai Iconsギャラリーのプレビュー

プロジェクトの仕組み

Kubai Iconsには、コレクションを一貫して拡張するためにClaudeが必要とするデザインルールと実装ツールがまとめられています。

  • PROMPT.mdは、キャンバスサイズ、キ​​ーライン、レイヤー、角、アウトライン、ライティング、色、マーク、動きに関する必須要件を定義します。
  • src/engine.jsは、色の導出、外側のアウトライン、グラデーション、シャドウ、補間、パレットを提供します。
  • src/icons.jsには、新しいアイコンの構造的な参考となる66個の完成例が含まれています。
  • scripts/check.mjsは、静止状態とホバー状態、中間アニメーションフレーム、複数のサイズ、すべてのパレットを対象に、ヘッドレスでビジュアルチェックを実行します。

各アイコンは、背面パーツ、任意の白いコンテンツ、前面パーツから構成されます。このフォルダーのような構造によって奥行きを保ち、動きを認識しやすくします。すべてのパーツには、静止状態とホバー状態という2つのキーフレームがあります。

Claudeスキルをインストールする

Claude Codeからインストールする

最も簡単な方法は、Claude Codeにリポジトリをスキルディレクトリへインストールさせることです。次のリクエストを送信してください。

Kubai Iconsスキルをインストールしてください：
https://github.com/kubai087/kubai-icons を ~/.claude/skills/kubai-icons にcloneし、
（すでに存在する場合は、代わりに最新バージョンをpullしてください）、
~/.claude/skills/kubai-icons/SKILL.md が存在することを確認し、準備ができたら知らせてください。

インストール後にClaude Codeを再起動してください。次回の起動時からスキルを利用できるようになります。

手動でインストールする

最新リリースのアーカイブをダウンロードし、スキルディレクトリに展開できます。

unzip kubai-icons-v1.0.0.zip -d ~/.claude/skills/

または、リポジトリを直接cloneします。

git clone https://github.com/kubai087/kubai-icons.git ~/.claude/skills/kubai-icons

SKILL.mdにバージョンと表示名のフィールドが必要なスキルマーケットプレイスを利用する場合は、同じリリースに含まれるkubai-icons-v*-platform.zipアーカイブを使用してください。こちらには、フロントマターにそれらのフィールドが含まれています。

適切なモデルを選ぶ

このスキルは、緻密なジオメトリ、レイヤー化されたアニメーション、スクリーンショットの反復的な確認に依存しています。プロジェクトはClaude Opus 5.5で開発され、ブラインドテストも実施されています。Claude Codeでは、次のコマンドで選択できます。

claude --model claude-opus-5-5

最初のアイコンを生成する

スキルをインストールしたら、必要なアイコンを通常の言葉で説明してください。アイコン関連のリクエストに応答するため、スキル名を明示する必要はありません。

  • このリポジトリを読み取り、主要な機能の動的アイコンを描いてください。
  • このセットにハサミのアイコンと地図のアイコンを追加してください。
  • 他のアイコンに合う「エクスポート」用のアイコンが必要です。

Claudeは、再現性のあるプロセスに従います。

  1. PROMPT.mdを読み、各機能を「フォルダーが開く」のように、日常的な物体と自然なホバー動作の組み合わせとして表現します。
  2. 構造が最も近い既存のアイコンを選び、プロジェクトのエンジンを再利用します。
  3. 新しい成果物の横に比較用アイコンを並べてセルフチェックを実行します。
  4. サイズ、アウトライン、レイヤー、色、アニメーション状態についてスクリーンショットを確認します。
  5. チェックリストに合格するまで反復し、その後ギャラリーにアイコンを追加して件数を更新します。

自分のプロダクト用に別のアイコンセットを始める場合は、このスキルでエンジン、ギャラリー、セルフチェックをプロジェクトにコピーし、そこで新しいアイコンを開発できます。

動的出力と静的出力を選ぶ

デフォルトは動的出力です。ホバー時にアイコンの形状を変更するSVGとJavaScriptが含まれており、JavaScriptを実行するウェブページやインターフェース向けです。静的出力では、スクリプトやスタイルシートを含まない、アイコンごとに単体で完結するSVGが1つ生成されます。デザインツール、ネイティブアプリ、ドキュメント、<img>要素に適しています。

書き出したアセットが必要な場合は、Claudeに静的なSVGファイル、またはFigmaに配置できるアイコンを依頼してください。既存のアイコンをリポジトリから直接書き出すこともできます。

node scripts/export.mjs --only 文件夹,日历 --palette 薄荷 --out icons/

書き出しオプション

  • --paletteはパレットを選択します。使用できる値には、彩色、蓝灰、青瓷、薄荷、薰衣草、杏色、黑色があります。
  • --accent #hexは、すべてのアイコンに1つのアクセントカラーを適用します。
  • --state hoverは、静止ポーズではなくホバーアニメーションの終了時点を書き出します。
  • --size 96は、出力の幅と高さをピクセル単位で設定します。
  • --pad 2.5は、シャドウが切り取られないようキャンバスの周囲に余白を追加します。
  • --out dirは出力ディレクトリを指定します。デフォルトはexport/です。

アイコンセットをローカルでプレビューする

リポジトリには、全セットを確認するためのギャラリーが含まれています。ブラウザで index.html を開くと、アイコンをローカルで表示できます。アイコンにカーソルを合わせて動きを確認したり、パレットを変更したり、デモモードを有効にしてコレクションのアニメーションを確認したりできます。

アニメーションするKubai Iconsのプレビュー

7種類のパレットが含まれています。アイコンごとに異なる色、ブルーグレー、セラドン、ミント、ラベンダー、アプリコット、ブラックです。パレットシステムはベースとなるアクセントカラーからアイコンの色を生成し、パレットを変更すると色の変化もアニメーションします。

ビジュアルセルフチェックを実行する

セルフチェックには Node.js 18以降 とChromeが必要です。ヘッドレスで実行されるため、ブラウザウィンドウは開きません。指定したアイコンを確認し、比較用に既存のアイコンを隣に配置するには、次を実行します。

node scripts/check.mjs --only 剪刀,地图 --with 文件夹,邮件,下载
  • --only は指定したアイコンだけを確認します。指定しない場合は、全セットを確認します。
  • --with は、比較用に既存のアイコンを指定したアイコンの隣へ追加します。
  • --accent #F59E0B は、明るい背景上のテストマークに1色のアクセントカラーを適用します。
  • --scale 3 は、継ぎ目を見つけやすくするため、通常の3倍のスケールでシートを描画します。
  • --out dir は、スクリーンショットを check-out/ 以外のディレクトリに書き出します。

Chromeが標準以外のパスにインストールされている場合は、CHROME 環境変数を設定してください。リポジトリのアニメーション生成スクリプト scripts/media.mjs には、さらに ffmpeg と img2webp が必要です。

高度なワークフローのヒント

意味だけでなく構造から始める

新しいアイコンを依頼するときは、その機能と想定する物理的な動作を説明してください。Claudeは最も近い既存例を構造上の出発点として使うため、「勢いよく開くロック」のような依頼のほうが、セキュリティ記号を作ってほしいという一般的な依頼より有用な指針になります。

複数の条件でアイコンを比較する

比較用アイコン、別のパレット、大きなスケールを使ってチェックを実行してください。これにより、単一のデフォルトプレビューでは見えにくいアウトライン、継ぎ目、レイヤー、マーク、色のコントラストの不整合を見つけやすくなります。

Web以外の用途には静的書き出しを使う

デザインツール、ネイティブアプリケーション、ドキュメント、標準の画像要素など、エンジンのJavaScriptを実行できない環境が用途の場合は、静的SVGを選択してください。ホバー操作がインターフェースの一部である場合は、動的出力を使います。

改善への貢献は慎重に行う

不明確なルールを報告したり、新しいClaudeセッションでブラインドテストを実行したり、スクリプトを修正したりすることで、このスキルを改善できます。スキルを使ってアイコンをデザインし、プルリクエストを送ることもできます。貢献する前に CONTRIBUTING.md と行動規範を読んでください。セキュリティ上の問題については SECURITY.md に従って報告してください。

ライセンスに関する考慮事項

Kubai IconsはKubai Icons Licenseを採用しており、オープンソースではなく、ソースを利用可能な形で提供しています。スキルを使って作成したアイコンの権利は作成者に帰属し、クレジット表記なしで商用利用できます。各ファイル先頭の著作権表示を残す限り、リポジトリのエンジン、ギャラリー、サンプルアイコン、セルフチェックをアイコンセットのプロジェクトにコピーできます。

66個のサンプルアイコンは、アニメーションまたは書き出したSVGアセットとして含め、製品で使用できます。ただし、個別のアイコンパックとして使用することはできません。このスキルは、個人の作業用に使用・変更でき、変更していない完全なコピーとして無料で共有できます。PROMPT.md と SKILL.md の変更版または翻訳版を、別の製品として再公開したり、販売したり、異なる名前で提示したりしてはいけません。

まとめ

Kubai Iconsは、Claudeを一度きりの画像生成ツールではなく、再現可能なアイコンデザインのワークフローへと変えます。スキルをインストールし、製品の機能を説明し、動的または静的な出力を選択し、ローカルギャラリーを確認し、ヘッドレスのセルフチェックを使って一貫性を高めてください。付属のエンジン、サンプル、パレット、ルールにより、毎回ビジュアルシステムを作り直すことなく、セットを実用的に拡張できます。