app-icon

Name: app-icon
Author: code-with-beto

github.com/code-with-betoデザイン・UI1442.1k 回インストール15 週間前に更新

リポジトリ

app-icon について

SnapAIでアプリアイコンを生成し、Expoプロジェクトに設定するためのワークフローガイドです。透過アイコン、iOS 26 Liquid Glass用アセット、Androidのサイズ調整と検証を扱います。

主な機能

01SnapAIの設定とAPIキーを確認
02スタイル指定で透過PNGアイコンを生成
03iOS 26 .iconアセットを作成
04Androidアダプティブアイコンのサイズ調整
05Expo app.jsonを更新して検証

活用シーン

01Expoアプリ用のプラットフォーム別アイコン作成
02iOS 26 Liquid Glassアイコンの設定
03Androidのアダプティブマスクによる切り抜きを防止

インストール

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

$npx skills add https://github.com/code-with-beto/skills --skill app-icon

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

詳細

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

概要

AI を使用してプロフェッショナルなアプリアイコンを生成し、Expo アプリで iOS（iOS 26 Liquid Glass に対応）と Android の両方のプラットフォーム向けに設定します。

ステップ 0：SnapAI のセットアップを確認する（重要：最初に実施してください）

SnapAI は、Code with Beto チームが開発した、無料のオープンソース CLI です。ユーザーの API キーを使って、選択した画像プロバイダーに直接リクエストを送信します。キーはローカルの ~/.snapai/config.json に保存するか、環境変数で指定できます。SnapAI はテレメトリーを送信せず、バックエンドサーバーもありません。

アイコンの生成を試みる前に、SnapAI が設定済みか確認してください。

SnapAI が設定済みか確認します。

npx snapai config --show

設定の確認に失敗する場合、または API キーが見つからない場合：
- アイコンの生成には OpenAI API キーが必要です。
- ユーザーに尋ねます：「SnapAI の使用には OpenAI API キーが必要です。お持ちですか？それとも、設定をお手伝いしましょうか？」
ユーザーが API キーを持っている場合：
- チャット、ソースコード、または実行するコマンドにシークレットを貼り付けるよう、ユーザーに求めないでください。
- ユーザー自身のターミナルで、ローカルに設定するよう依頼します。
```
npx snapai config --openai-api-key "<their-api-key>"
```
- または、シェルやシークレットマネージャーで SNAPAI_API_KEY または OPENAI_API_KEY を設定できます。
- ユーザーが設定の完了を確認したら、シークレットを表示せずに検証します。
```
npx snapai config --show
```
ユーザーが API キーを取得する必要がある場合：
- https://platform.openai.com/api-keys に案内します。
- 次のように説明します：「以下の手順が必要です。
  1. OpenAI アカウントをお持ちでない場合は、アカウントを作成します。
  2. API キーのセクションに移動します。
  3. ［Create new secret key］をクリックします。
  4. キー（sk- で始まります）をコピーします。
  5. チャットで共有せずに、ローカルに設定します。」

重要な注意事項：

SnapAI はオープンソースです。API リクエストは選択したプロバイダーに直接送信され、ツールに中継用バックエンドはありません。
ツール自体は無料です。プロバイダー API の利用料金は、ユーザーのプロバイダーアカウントに従って課金されます。
SnapAI が設定されていない場合、アイコンの生成を続行しないでください。
チャット、コマンド出力、ログ、コミット対象ファイルで認証情報を公開しないでください。

ステップ 1：アプリのコンテキストを把握する

app.json を読み、アプリ名と現在のアイコン設定を確認します。
コンテキストからアプリの内容が明らかでない場合は、ユーザーに尋ねます。
アプリのテーマ、目的、目指す美的スタイルを特定します。

ステップ 2：スタイルの希望を確認する

アイコンに希望するスタイルをユーザーに尋ねます。選択できるスタイルは次のとおりです。

minimalism - Apple を思わせる、すっきりとしたミニマリズム（最大 2～3 色）
glassy - 半透明の要素を使った、上質なガラス風デザイン
gradient - 鮮やかなグラデーション、Instagram を思わせるスタイル
neon - サイバーパンク、発光効果を取り入れた未来的なスタイル
material - Google Material Design
ios-classic - 控えめなグラデーションを使った、従来の iOS スタイル
pixel - レトロな 8 ビット／16 ビットのゲームアートスタイル
geometric - 大胆で角ばった構成

または、カスタムのスタイルを説明してもらいます。

ステップ 3：SnapAI でアイコンを生成する

事前確認： 実行前に SnapAI が設定済みか確認します（ステップ 0 を参照）。

透明な背景の 1024x1024 アイコンを生成します（両プラットフォームで重要です）。

npx snapai icon --prompt "YOUR_PROMPT_HERE" --background transparent --output-format png --style STYLE_NAME

重要なフラグ：

--background transparent - iOS 26 と Android のアダプティブアイコンで必須です。
--output-format png - PNG 形式を指定します。
--style - 任意。ビジュアルスタイルを強調します。
--quality high - 任意。最終版のアイコンに使用します。

アイコンは ./assets/icon-[timestamp].png に保存されます。

ステップ 4：iOS 26 の .icon フォルダー構成を作成する

新しい iOS 26 Liquid Glass アイコン形式を作成します。

フォルダー構成を作成します。

mkdir -p assets/app-icon.icon/Assets

生成した PNG をコピーします。

cp assets/icon-[timestamp].png assets/app-icon.icon/Assets/icon.png

次の基本設定で assets/app-icon.icon/icon.json を作成します。

{
  "fill": "automatic",
  "groups": [
    {
      "layers": [
        {
          "glass": false,
          "image-name": "icon.png",
          "name": "icon"
        }
      ],
      "shadow": {
        "kind": "neutral",
        "opacity": 0.5
      },
      "translucency": {
        "enabled": true,
        "value": 0.5
      }
    }
  ],
  "supported-platforms": {
    "circles": ["watchOS"],
    "squares": "shared"
  }
}

ステップ 4.5：Android 向けに最適化したアダプティブアイコンを作成する

Android のアダプティブアイコンでは、iOS と比べてセーフエリアが小さく（キャンバスの約 66％）、SnapAI が生成するメインアイコンは iOS のセーフエリア向けに最適化されています。そのため、円形やスクワークル形のマスクを使用する Android デバイスでは、大きく表示されすぎて切り取られることがあります。

Android のあらゆるデバイス形状（円形、スクワークル形、角丸四角形）でアイコンを正しく表示するには、縮小版を作成してください。

ImageMagick を使用する（推奨）：

# Scale the icon to 66% and center it on a 1024x1024 transparent canvas
magick assets/icon-[timestamp].png \
  -resize 66% \
  -gravity center \
  -background transparent \
  -extent 1024x1024 \
  assets/android-icon.png

代替方法 - sips と ImageMagick を使用する（macOS）：

# Step 1: Resize to 66% (676x676)
sips -Z 676 assets/icon-[timestamp].png --out /tmp/icon-resized.png

# Step 2: Create the final centered image
magick -size 1024x1024 xc:transparent /tmp/icon-resized.png \
  -gravity center -composite assets/android-icon.png

注： ImageMagick がインストールされていない場合は、次のコマンドでインストールしてください。

brew install imagemagick

ステップ 5：app.json を更新する

両方のプラットフォームのアイコンを設定するため、app.json を更新してください。

iOS の場合：

{
  "expo": {
    "ios": {
      "icon": "./assets/app-icon.icon"
    }
  }
}

Android の場合：

ステップ 4.5 で作成した Android 向けに最適化したアイコンを使用してください。

オプション 1：シンプル（単色の背景色を使用）

{
  "expo": {
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/android-icon.png",
        "backgroundColor": "#ffffff"
      }
    }
  }
}

オプション 2：包括的（推奨） アイコンの背景が透明なので、Android アダプティブアイコンの 3 つのフィールドすべてに使用できます。

{
  "expo": {
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/android-icon.png",
        "backgroundImage": "./assets/android-icon.png",
        "monochromeImage": "./assets/android-icon.png"
      }
    }
  }
}

オプション 2 のメリット：

foregroundImage - 表示されるメインアイコン
backgroundImage - Android 8.0 以降でレイヤーによる奥行き効果を実現します
monochromeImage - Android 13 以降のテーマアイコンに使用されます（システムによって自動的に色が変更されます）

注：

オプション 1 では、希望する backgroundColor をユーザーに確認するか、デフォルトとして白（#ffffff）を使用してください
オプション 2 では、同じ透明 PNG を 3 つのフィールドすべてに使用できます
オプション 2 は、Android の Material You テーマとの統合性がより高くなります

ステップ 6：確認とテスト

フォルダー構成が存在することを確認します。

ls -la assets/app-icon.icon/

app.json が有効な JSON であることを確認します。

cat app.json | jq .

次の方法でアプリをテストするよう、ユーザーに伝えます。

npx expo prebuild --clean
npx expo run:ios
npx expo run:android

重要な注意事項

背景の透明化は必須です - iOS の Liquid Glass 効果と Android のアダプティブアイコンの両方で、アイコンの背景を透明にする必要があります
iOS 26 の .icon 形式 - .icon フォルダーを使用すると、iOS 26 以降で Liquid Glass 効果を利用できます
2 種類のアセットを使うワークフロー - このスキルでは、2 つのアイコンアセットを生成します。
- icon-[timestamp].png - iOS のセーフエリア向けに最適化されたメインアイコン（.icon フォルダーで使用）
- android-icon.png - Android アダプティブアイコンのセーフエリア向けに 66％に縮小し、中央に配置したアイコン
なぜ 2 種類のアセットが必要なのか？ - iOS と Android ではセーフゾーンが異なります。iOS ではコンテンツを端に近づけることができます（約 80～85％）。一方、Android のアダプティブアイコンでは、強いマスク処理（円形、スクワークル形など）により、中央の約 66％だけが確実に表示されます
Android アダプティブアイコンの柔軟性 - android-icon.png は、foregroundImage、backgroundImage、monochromeImage の各フィールドで使用できます
Material You のサポート - monochromeImage を使用すると、Android 13 以降でユーザーの配色に合わせて変化するテーマアイコンを利用できます
ファイル名 - .icon フォルダーの名前は変更できます（例：app-icon.icon、myapp.icon）

トラブルシューティング

SnapAI の設定に関する問題

「API キーが見つかりません」 - ユーザーに、ローカルで npx snapai config --openai-api-key "<key>" を実行するか、SNAPAI_API_KEY / OPENAI_API_KEY を設定するよう伝えてください
「API キーが無効です」 - チャットでキーを共有せずに、OpenAI アカウントでキーを確認するか、ローテーションするようユーザーに伝えてください
認証エラー - API キーが取り消されていないか、platform.openai.com でクレジットが不足していないか確認してください
コマンドが見つかりません - snapai だけではなく、npx snapai を使用していることを確認してください

アイコンの表示に関する問題

アイコンが表示されない場合は、app.json のパスが実際のフォルダーの場所と一致していることを確認してください
.icon フォルダー内の PNG のサイズが正確に 1024x1024 であることを確認してください
Android の場合は、すべての画像パス（foregroundImage、backgroundImage、monochromeImage）が正しく、既存のファイルを指していることを確認してください
アイコンを変更した後、npx expo prebuild --clean を実行してネイティブプロジェクトを再生成してください

ImageMagick の問題（Android アイコン用）

「convert: command not found」 - brew install imagemagick で ImageMagick をインストールしてください。
アクセスが拒否される - assets フォルダーへの書き込み権限があることを確認してください。
Android でアイコンがまだ切れて表示される - セーフエリアにより確実に収まるよう、リサイズ率を 66% から 60% に下げてみてください。

Markdown 対応

ログインしてコメント

基本情報

作者: code-with-beto
リポジトリ: code-with-beto/skills
カテゴリ: デザイン・UI
インストール数: 2,103
GitHub スター: 144

問題を報告