iOS、Android、macOS用のアプリアイコンを生成する方法(無料でプライベート)

公開日 September 15, 2024

すべてのモバイル開発者はその苦痛を知っています。アプリの構築を終え、ロジックは堅固で、UIは洗練され、App StoreやGoogle Playに提出する準備ができました。しかし、待ってください—まだアプリアイコンを生成する必要があります。

一つだけでなく、数十個も。

  • iOSは、通知、設定、スポットライト、ホーム画面用に20pxから1024pxまでのサイズが必要です。
  • Androidは、異なる画面密度(mdpi、hdpi、xxhdpiなど)に対応するアダプティブアイコンが必要です。
  • macOSwatchOSには、それぞれ独自の要件があります。

これをPhotoshopやFigmaで手動で行うのは、面倒でエラーが発生しやすいです。ファイル名を誤って[email protected]と名付けると、Xcodeのビルドエラーを引き起こす可能性があります。

だからこそ、私たちは**無料のアプリアイコンジェネレーター**を開発しました。これは、あなたの単一のマスター画像を、数秒で提出準備の整った完全なアセットパッケージに変えます。

なぜPhotoshopの代わりにこのツールを使うのか?

1. Xcode & Android Studio対応

私たちは単に画像のサイズを変更するだけでなく、それらを構造化します。

  • iOS/Macの場合: 有効なContents.jsonファイルを含む、完全にフォーマットされたAppIcon.appiconsetフォルダを取得します。このフォルダをXcodeのアセットカタログにドラッグ&ドロップするだけで、すべてのサイズスロットが自動的に埋められます。
  • Androidの場合: mipmap-フォルダが整理された標準的なresディレクトリ構造を取得し、プロジェクトに貼り付ける準備ができています。

2. プライバシー第一(アップロードなし)

ほとんどのオンラインアイコンジェネレーターは、あなたのデザインをサーバーにアップロードする必要があります。これは、未リリースのアプリやNDAで保護されたデザインにとってリスクとなります。 私たちのツールは100%あなたのブラウザ内で動作します。 私たちはWebAssemblyと最新のブラウザAPI(Pica)を使用して、あなたのデバイス上で画像のサイズを変更します。あなたのアイコンがあなたのコンピュータを離れることはありません。

3. リアルタイムプレビュー

四角いアイコンがオペレーティングシステムによってマスクされたときにどのように見えるかを視覚化するのは難しいです。

  • iOSプレビュー: シミュレートされたホーム画面上で、古典的な「スクワークル」マスク付きのアイコンを確認できます。
  • Androidプレビュー: 丸いアダプティブアイコンとして、またPlayストアのリスト上でどのように見えるかを確認できます。
  • macOSプレビュー: Big SurスタイルのドロップシャドウでDockの美観をチェックできます。

アプリアイコンデザインのベストプラクティス

ジェネレーターを使用する前に、最高の結果を得るためにマスターファイルがこれらのルールに従っていることを確認してください:

ルール1:1024x1024のソースを使用する

常に高解像度の画像から始めてください。App Storeはマーケティングアイコン用に1024x1024ピクセルの画像を要求します。私たちのツールは、高品質のLanczos3リサンプリングを使用してこの画像を小さなサイズにダウンスケールし、シャープさを保ちます。小さな画像(例:200px)をアップロードすると、Retinaスクリーンでは結果がぼやけて見えます。

ルール2:角を丸めない

これが最も一般的な間違いです。 マスターファイルに丸みを帯びたマスクや透明な角を適用しないでください。フルブリードの四角い画像をアップロードしてください。

  • iOSは自動的に丸みを帯びた角のマスクを適用します。自分で角を丸めると、奇妙な白いアーティファクトや二重の境界線ができることがあります。
  • Androidも、ユーザーのデバイスのテーマに応じて独自のマスク(円、四角、スクワークル)を適用します。

ルール3:シンプルに保つ

アイコンは非常に小さいサイズ(設定では20pxほど)で表示されます。

  • テキストは避けてください(読めなくなります)。
  • 写真は避けてください(ベクターやシンプルな形状が最適です)。
  • シンプルな背景と、明確な中心的な焦点を使用してください。

プロジェクトにアイコンを追加する方法

私たちのアプリアイコンジェネレーターからZIPファイルをダウンロードしたら、それを使用する方法は次のとおりです:

Xcode用(iOS / macOS / Watch)

  1. ファイルを解凍します。iphone(またはmacなど)という名前のフォルダを開きます。
  2. ダウンロードしたファイル内にあるAssets.xcassetsフォルダを見つけます。
  3. Xcodeプロジェクトを開きます。
  4. プロジェクトナビゲーターでAssets.xcassetsファイルに移動します。
  5. 既存の空のAppIconエントリを削除します。
  6. ダウンロードしたAppIcon.appiconsetフォルダをXcodeのアセットリストに直接ドラッグ&ドロップします。
  7. 完了!すべてのサイズが割り当てられました。

Android Studio用

  1. ファイルを解凍し、androidフォルダを開きます。
  2. mipmap-mdpimipmap-hdpiなどのフォルダが表示されます。
  3. Androidプロジェクトディレクトリに移動します:app/src/main/res/
  4. ダウンロードしたフォルダの内容を、プロジェクト内の対応するフォルダにコピーします。
  5. これでAndroidは、デバイスの画面密度に基づいて正しいアイコンサイズを自動的に選択します。

まとめ

手動でファイルのサイズを変更したり名前を変更したりする時間を無駄にしないでください。プロフェッショナルなアプリアイコンはコンバージョン率にとって重要であり、技術的な設定は楽であるべきです。

→ アプリアイコンジェネレーターへ そして、今日からあなたの資産をローンチ準備万端にしましょう。

Advertisement

関連ガイド