asset-manager について
Asset Managerは、プロジェクト間でデザインアセットを整理、最適化、追跡するためのワークフローガイドです。ディレクトリや命名規則、画像・フォント処理、ブランドライブラリ、バージョン管理を扱います。
主な機能
- 01アセットのディレクトリと命名規則
- 02Sharpによる画像サイズと形式の変換
- 03SVGOによるSVG最適化
- 04フォント変換とサブセット化
- 05ハッシュベースのアセット版管理
- 06型付きブランドアセットマニフェスト
活用シーン
- 01未整理のプロジェクトアセットを整理
- 02レスポンシブ画像のバリエーションを生成
- 03Webフォントを変換してサブセット化
- 04リリース間のアセット変更を追跡
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/asset-managerを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/best-practices.mdbrand-library.mdfont-management.mdimage-optimization.mdorganization.mdversion-control.md詳細
アセットマネージャー
プロジェクト全体のデザインアセットを管理します。ディレクトリの整理、命名規則、画像やフォントの最適化、ブランドライブラリ、バージョン管理に対応します。アセットの整理、圧縮、最新形式への変換、リリース間での追跡が必要な場合に使用してください。ランタイムでの画像変換や、パスのプレフィックス追加を超えるCDN設定には使用しないでください。
クイックリファレンス
| タスク | ツール／方法 | 主なポイント |
|---|---|---|
| 画像の最適化 | Sharp | WebP／AVIF／JPEG／PNGへのリサイズ、圧縮、変換 |
| SVGの最適化 | SVGO (v4+) | v4ではremoveViewBoxとremoveTitleはデフォルトでオフです |
| フォント変換 | woff2_compress、sfnt2woff | TTF／OTFからWOFF2（主）＋WOFF（フォールバック）への変換 |
| フォントのサブセット化 | Glyphhanger | 未使用のグリフを削除し、クロールしたページから自動検出します |
| レスポンシブ画像 | Sharpのブレークポイント | モバイル（640）、タブレット（768）、デスクトップ（1920）用のバリエーションを生成 |
| アセットのバージョン管理 | SHA-256ハッシュの追跡 | 変更検出機能を備えたasset-versions.jsonマニフェスト |
| Gitでの大容量ファイル | Git LFS | PSD、AI、Sketch、Figma、MP4、MOVファイルを追跡します |
| ブランドアセット | 型付きマニフェスト | ロゴ、カラー、タイポグラフィを含むBrandAssetsインターフェース |
ディレクトリ構成
| ディレクトリ | 内容 |
|---|---|
assets/images/{category}/ | 製品、チーム、マーケティング、UIの画像 |
assets/icons/svg/ | SVGアイコンファイル |
assets/fonts/{family}/ | WOFF2＋WOFFフォントファイル |
assets/videos/ | 動画アセット |
assets/logos/svg/、png/、variants/ | ロゴの形式とカラーバリエーション |
brand/ | カラーJSON、タイポグラフィJSON、ガイドライン |
命名規則
| アセットの種類 | パターン | 例 |
|---|---|---|
| 画像 | {category}-{description}-{size}.{format} | product-hero-1920x1080.jpg |
| アイコン | {icon-name}-{variant}.svg | home-outline.svg |
| フォント | {font-family}-{weight}.{format} | Inter-Regular.woff2 |
| ロゴ | logo-{variant}.{format} | logo-full.svg、logo-white.svg |
最適化の目標
| 形式 | ツール | 用途 |
|---|---|---|
| WebP | Sharp | Web画像の主要形式 |
| AVIF | Sharp | 最新のブラウザー、最高の圧縮率 |
| JPEG | Sharp (mozjpeg) | 写真のフォールバック |
| PNG | Sharp | 透明度のあるUI要素 |
| SVG | SVGO | アイコンとロゴ |
| WOFF2 | woff2_compress | Webフォントの主要形式 |
| WOFF | sfnt2woff | フォントのフォールバック |
パイプラインのステップ
| ステップ | アクション |
|---|---|
| 整理 | 命名規則に従って未整理のアセットをディレクトリに振り分けます |
| 画像の最適化 | サイズ変更、圧縮、WebP／AVIF 形式のバリエーションを生成します |
| レスポンシブ画像 | モバイル／タブレット／デスクトップのブレークポイント用サイズを生成します |
| フォントの最適化 | TTF／OTF を WOFF2 と WOFF に変換します |
| バージョン管理 | asset-versions.json を使ってハッシュベースで追跡します |
よくある間違い
| 間違い | 修正方法 |
|---|---|
| デザインファイルの元データを git にコミットする | PSD、AI、Sketch、Figma、動画ファイルには Git LFS を使います |
| 元のサイズの画像を配信する | ブレークポイントごとにレスポンシブ画像のバリエーションを生成します |
| JPEG／PNG のみを使う | フォールバック付きで WebP と AVIF を生成します |
| フォントのサブセット化をしない | Glyphhanger を使って未使用のグリフをサブセット化します |
font-display: swap がない | FOIT を避けるため、常に @font-face に設定します |
| アセット用 CDN がない | CDN_URL 環境変数でアセットのパスにプレフィックスを付けます |
| 新しいプロジェクトで imagemin を使う | Sharp を直接使います。imagemin はメンテナンスされていません |
| SVGO v4 で SVGO v3 のプラグイン設定を使う | v4 では removeViewBox と removeTitle はデフォルトで無効です |
タスクの委任
- コードベース内のアセット整理パターンを調べる：既存のアセットディレクトリ、命名規則、最適化スクリプトを見つけるには、
Exploreエージェントを使います - 画像またはフォントをまとめて最適化する：Sharp パイプライン、フォント変換、レスポンシブ画像の生成を実行するには、
Taskエージェントを使います - アセットパイプライン全体を計画する：ディレクトリ構造、命名規則、最適化の手順、CI との連携を設計するには、
Planエージェントを使います
参考資料
コメント
Markdown 対応