PR

デザイン自動化GitHub Actions:実装コード付きガイド

画像アセット最適化のコード実装

GitHub Actionsを使ったデザインワークフローの自動化実装例です。

画像最適化ワークフロー

画像ファイルが更新されると自動実行されます:

name: 画像最適化
on:
  push:
    paths:
      – ‘assets/images/**’
jobs:
  optimize:
    runs-on: ubuntu-latest
    steps:
      – uses: actions/checkout@v3
      – name: ImageMagick セットアップ
        run: sudo apt-get install imagemagick webp
      – name: 複数サイズ生成
        run: |
          mkdir -p optimized/{xl,lg,sm}
          for img in assets/images/*.{jpg,png}; do
            filename=$(basename “$img”)
            convert “$img” -resize 1920×1080 “optimized/xl/${filename}”
            convert “$img” -resize 1280×720 “optimized/lg/${filename}”
            convert “$img” -resize 640×360 “optimized/sm/${filename}”
          done
      – name: WebP変換
        run: |
          for img in optimized/*/*.{jpg,png}; do
            cwebp -q 80 “$img” -o “${img%.*}.webp”
          done

ポートフォリオ自動更新ワークフロー

新しい作品がアップロードされると自動でサイト更新:

name: ポートフォリオ更新
on:
  push:
    paths:
      – ‘portfolio/**’
jobs:
  update:
    runs-on: ubuntu-latest
    steps:
      – uses: actions/checkout@v3
      – name: Node.js セットアップ
        uses: actions/setup-node@v3
        with:
          node-version: ’18’
      – name: サムネイル生成
        run: |
          npm install sharp
          node generate-thumbnails.js
      – name: サイト更新
        run: |
          npm run build
          npm run deploy
      – name: SNS投稿
        run: python post_to_social.py
        env:
          TWITTER_API_KEY: ${{ secrets.TWITTER_API_KEY }}

アプリアイコン生成ワークフロー

マスターアイコンから各プラットフォーム向けアイコンを自動生成:

name: アプリアイコン生成
on:
  push:
    paths:
      – ‘icons/master-icon.png’
jobs:
  generate-icons:
    runs-on: ubuntu-latest
    steps:
      – uses: actions/checkout@v3
      – name: iOS用アイコン生成
        run: |
          sizes=”1024 512 256 128 64 32 16″
          for size in $sizes; do
            convert icons/master-icon.png -resize ${size}x${size} “ios/icon-${size}.png”
          done
      – name: Android用アイコン生成
        run: |
          convert icons/master-icon.png -resize 192×192 “android/icon-192.png”
          convert icons/master-icon.png -resize 512×512 “android/icon-512.png”

生成される画像サイズ

レスポンシブ対応

  • XLサイズ:1920×1080(デスクトップ)
  • Largeサイズ:1280×720(タブレット)
  • Smallサイズ:640×360(スマートフォン)

次世代フォーマット

  • WebP:80%品質で軽量化
  • AVIF:さらなる圧縮効率

自動化のメリット

  • デザイナーの作業時間短縮
  • 一貫した品質の維持
  • 複数フォーマット対応の自動化
  • ヒューマンエラーの防止
タイトルとURLをコピーしました