mcpField
V
visual-assets

visual-assets

github.com/dralgorhythmデザイン・UI12863 回インストール14 週間前に更新
リポジトリ

visual-assets について

ビジュアルアセットの選定、整理、最適化に使えるデザインリファレンスです。アイコン、画像、グラフィックの形式に加え、レスポンシブ配信とパフォーマンスの実践項目を扱います。

主な機能

  1. 01アイコン、画像、グラフィック形式の指針
  2. 02画像圧縮コマンド
  3. 03レスポンシブ画像の実践項目
  4. 04SVGOによるSVG最適化
  5. 05アセット整理と性能のヒント

活用シーン

  1. 01ビジュアルアセットの形式選び
  2. 02配信用画像の圧縮
  3. 03アセットのフォルダーと派生物の整理
  4. 04画像読み込み性能の改善

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dralgorhythm/claude-agentic-framework --skill visual-assets

インストール後、Claude Code で/visual-assetsを入力して読み込まれたか確認します。

詳細

ビジュアルアセット

アセットの種類

アイコン
  • SVG：拡大縮小可能で、ファイルサイズが小さく、CSS でスタイルを設定できます
  • アイコンフォント：使いやすいですが、スタイル設定に制限があります
  • PNG スプライト：従来型で、ファイルサイズが大きくなります
画像
  • JPEG：写真、複雑な画像
  • PNG：透過、スクリーンショット
  • WebP：最新形式で、ファイルサイズが小さくなります
  • AVIF：最新の形式で、圧縮率に最も優れています
グラフィック
  • SVG：イラスト、ロゴ、グラフ
  • Lottie：アニメーション、複雑な動き

最適化

画像圧縮
# WebP conversion
cwebp -q 80 input.png -o output.webp

# AVIF conversion
avifenc input.png output.avif

# PNG optimization
pngquant --quality=65-80 input.png
レスポンシブ画像
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description"
       srcset="image-400.jpg 400w,
               image-800.jpg 800w,
               image-1200.jpg 1200w"
       sizes="(max-width: 600px) 100vw, 50vw">
</picture>
SVG の最適化
# SVGO optimization
svgo input.svg -o output.svg

アイコンのガイドライン

  • 線幅を統一する
  • サイズを統一する（24x24、20x20）
  • 視覚的に整列させる
  • 小さいサイズでも明瞭に表示する

ファイルの整理

assets/
├── icons/
│   ├── ui/
│   └── brand/
├── images/
│   ├── originals/
│   └── optimized/
└── illustrations/

パフォーマンスのヒント

  1. スクロールしないと表示されない画像は遅延読み込みする
  2. コンテンツに適した形式を使用する
  3. レスポンシブなサイズで配信する
  4. CDN での配信を検討する
  5. キャッシュヘッダーを設定する

コメント

Markdown 対応