web-asset-generation

Web アセット生成

googleadsagent.ai™によるAgent Skills™の一部です

説明

Web アセット生成では、単一のソース画像またはブランド仕様から、ファビコン、PWA アイコン、Open Graph 画像、ソーシャルメディア用メタタグ、Apple タッチアイコンの作成を自動化します。エージェントは、適切な HTML メタタグとウェブマニフェストの設定を含め、すべてのプラットフォーム、サイズ、形式に対応した、最新のウェブアプリケーションに必要なアセット一式を生成します。

プロフェッショナルなウェブサイトには、16x16 や 32x32 のファビコン、180x180 の Apple タッチアイコン、通常形式とマスカブル形式の 192x192 および 512x512 の PWA アイコン、1200x630 の Open Graph 画像、1200x600 の Twitter カード、プラットフォーム固有のスプラッシュ画面など、数十種類の画像バリエーションが必要です。これらを手作業で生成するのは面倒で間違いやすく、1つでもバリエーションを忘れると、特定のプラットフォームでプレビューが正しく表示されなくなります。このスキルは、パイプライン全体を自動化します。

アイコンの生成に加えて、ドキュメントの head に追加する HTML の <link> タグと <meta> タグ、PWA をサポートする manifest.json、Twitter Cards、Facebook Open Graph、LinkedIn 向けのプラットフォーム固有のメタタグなど、関連する設定も生成します。出力はそのままコピーして貼り付けられる形式で、アセット一式と、それらを参照する HTML が含まれます。

使用する場面

• 新しいウェブプロジェクト用にファビコンとアイコンアセットを設定する場合
• ソーシャルメディアで共有する Open Graph 画像を生成する場合
• 適切なアイコンサイズで PWA マニフェストを設定する場合
• ソーシャルメディア用メタタグ（Twitter Cards、OG タグ）を作成する場合
• ブランドの更新やリデザイン後にアセットを再作成する場合
• ユーザーが「ファビコン」、「OG 画像」、「PWA アイコン」、「ソーシャルメタタグ」を求めている場合

仕組み

graph TD
    A[Source: SVG / PNG / Brand Config] --> B[Parse Source Asset]
    B --> C[Generate Favicon Set]
    B --> D[Generate PWA Icons]
    B --> E[Generate OG Images]
    B --> F[Generate Apple Touch Icons]
    C --> G[favicon.ico: 16x16, 32x32]
    C --> H[favicon.svg: Scalable]
    D --> I[icon-192.png + icon-512.png]
    D --> J[maskable-192.png + maskable-512.png]
    E --> K[og-image-1200x630.png]
    E --> L[twitter-card-1200x600.png]
    F --> M[apple-touch-icon-180x180.png]
    G --> N[Generate HTML Meta Tags]
    H --> N
    I --> N
    J --> N
    K --> N
    L --> N
    M --> N
    N --> O[Generate manifest.json]
    O --> P[Complete Asset Package]

1つのソースアセットから複数の生成パイプラインが並行して処理を行い、必要なすべてのサイズと形式のバリエーションを生成します。最後に、すべてを連携させるための HTML とマニフェストの設定を生成します。

実装

import sharp from "sharp";
import { writeFileSync, mkdirSync } from "fs";

interface AssetConfig {
  source: string;
  outputDir: string;
  siteName: string;
  siteUrl: string;
  themeColor: string;
  backgroundColor: string;
  description: string;
}

const ICON_SIZES = {
  "favicon-16x16.png": { width: 16, height: 16 },
  "favicon-32x32.png": { width: 32, height: 32 },
  "apple-touch-icon.png": { width: 180, height: 180 },
  "icon-192x192.png": { width: 192, height: 192 },
  "icon-512x512.png": { width: 512, height: 512 },
  "maskable-192x192.png": { width: 192, height: 192, maskable: true },
  "maskable-512x512.png": { width: 512, height: 512, maskable: true },
};

async function generateIcons(config: AssetConfig): Promise<void> {
  mkdirSync(config.outputDir, { recursive: true });
  const source = sharp(config.source);

  for (const [filename, size] of Object.entries(ICON_SIZES)) {
    let pipeline = source.clone().resize(size.width, size.height, { fit: "contain" });

    if ((size as { maskable?: boolean }).maskable) {
      const padding = Math.round(size.width * 0.1);
      pipeline = source.clone().resize(size.width - padding * 2, size.height - padding * 2, { fit: "contain" })
        .extend({ top: padding, bottom: padding, left: padding, right: padding, background: config.backgroundColor });
    }

    await pipeline.png().toFile(`${config.outputDir}/${filename}`);
  }
}

async function generateOgImage(config: AssetConfig): Promise<void> {
  const width = 1200, height = 630;
  const svg = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
    <rect width="${width}" height="${height}" fill="${config.themeColor}"/>
    <text x="50%" y="45%" text-anchor="middle" font-size="64" font-weight="bold" fill="white" font-family="system-ui">${config.siteName}</text>
    <text x="50%" y="60%" text-anchor="middle" font-size="28" fill="rgba(255,255,255,0.8)" font-family="system-ui">${config.description}</text>
  </svg>`;

  await sharp(Buffer.from(svg)).png().toFile(`${config.outputDir}/og-image.png`);
}

function generateManifest(config: AssetConfig): object {
  return {
    name: config.siteName,
    short_name: config.siteName,
    start_url: "/",
    display: "standalone",
    theme_color: config.themeColor,
    background_color: config.backgroundColor,
    icons: [
      { src: "/icon-192x192.png", sizes: "192x192", type: "image/png" },
      { src: "/icon-512x512.png", sizes: "512x512", type: "image/png" },
      { src: "/maskable-192x192.png", sizes: "192x192", type: "image/png", purpose: "maskable" },
      { src: "/maskable-512x512.png", sizes: "512x512", type: "image/png", purpose: "maskable" },
    ],
  };
}

function generateHtmlTags(config: AssetConfig): string {
  return `
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="${config.themeColor}">


<meta property="og:type" content="website">
<meta property="og:title" content="${config.siteName}">
<meta property="og:description" content="${config.description}">
<meta property="og:image" content="${config.siteUrl}/og-image.png">
<meta property="og:url" content="${config.siteUrl}">


<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="${config.siteName}">
<meta name="twitter:description" content="${config.description}">
<meta name="twitter:image" content="${config.siteUrl}/og-image.png">`;
}

ベストプラクティス

• すべてのアイコンサイズで劣化なく拡大縮小できるよう、SVG ソースから始めます
• 通常形式とマスカブル形式の PWA アイコンを両方用意します。Android のアダプティブアイコンは大きく切り抜かれるためです
• ソーシャルメディアで最適に表示されるよう、Open Graph 画像のサイズを正確に 1200x630 にします
• モバイルブラウザーの UI の色を設定するため、<meta name="theme-color"> を追加します
• プラットフォームのデバッガー（Facebook Sharing Debugger、Twitter Card Validator）で OG 画像をテストします
• ブランドアイデンティティが変わったらすべてのアセットを再生成します。一部のみの更新では一貫性が損なわれます

プラットフォームの互換性

プラットフォーム	サポート	備考
Cursor	完全	Sharp とファイル生成
VS Code	完全	画像プレビューと設定
Windsurf	完全	アセットパイプラインをサポート
Claude Code	完全	スクリプト生成
Cline	完全	ビルドパイプラインの設定
aider	部分的	設定ファイルの生成

関連スキル

• プログラムによる動画生成
• ML モデルの統合
• ウェブデザインのガイドライン
• ローコード生成

キーワード

favicon pwa-icons open-graph og-image twitter-card web-manifest social-meta-tags asset-pipeline

---

© 2026 googleadsagent.ai™ | Agent Skills™ | MIT License