Skip to Content
ドキュメント🏁 クイックスタート

クイックスタート

最初のアイコンセットを作る手順です。元画像を入れ、テーマを当て、デバイスで確認し、各プラットフォーム向けに書き出します。

事前準備

  • macOS または Windows に Zapicon を入れておく。
  • 元画像。PNG / JPG / WEBP。くっきり書き出すなら 512×512 px 以上 を推奨。

ステップ 1：画像を入れる

  1. Zapicon を開く。
  2. アップロード欄にドラッグするか、クリックしてファイルを選ぶ。
  3. エディターが開き、キャンバスに画像が出ます。

ヒント: 元が小さいときは、編集の前に AI アップスケール で画質を上げてください。

ステップ 2：見た目を決める

二通りあります。

テーマプリセットを当てる

  1. テーマプリセット パネルを開く。
  2. 内蔵 25 種から選ぶ。無料は先頭 4 種、Pro は全部。
  3. プレビューがすぐ更新されます。

手で調整する

左のコントロール：

操作内容
アイコンサイズキャンバスに対する前景の拡大率。
回転度数で回転。
角丸画像の角を丸める。最大で iOS Squircle。
パディング画像端とキャンバス端の余白。
オフセット横・縦にずらす。
背景単色または線形グラデーション。

ステップ 3：デバイスで見る

  1. プレビューのデバイスアイコンで iPhone / MacBook / Web を切り替え。
  2. 小さいサイズでも読めるか、明るい／暗い背景で破綻しないかを確認。

ステップ 4：書き出す

  1. 次へ で書き出しパネルを開く。
  2. 必要なプラットフォームを選ぶ：iOS、Android、macOS、Windows、Web、Tauri、Flutter、WXT、またはカスタム。
  3. 書き出し して保存先フォルダを指定。
  4. 必要なサイズと形式をまとめた ZIP ができます。

ZIP の中身

各プラットフォーム用フォルダは、その生態系が期待する構成です。

  • iOS — AppIcon.appiconset と完全な Contents.json。
  • Android — mdpi〜xxxhdpi の mipmap-...。
  • macOS — PNG 各サイズと icon.icns。
  • Windows — 複数サイズを埋め込んだ icon.ico。
  • Web — favicon.ico、apple-touch-icon.png、PWA アイコン。
  • Tauri — Tauri プロジェクト向け一式。
  • Flutter — Android mipmap と iOS AppIcon.appiconset。
  • WXT — 拡張用 icon/16.png 〜 icon/128.png。

次の一歩

最終更新日
🚀 はじめに🎨 ビジュアルエディター