macOSアプリのスクリーンショットとアイコンサイズの注意点

先日、開発に携わっているiOSアプリの、macOS版をリリースしました。
macOSアプリの審査に必要なスクリーンショットとアプリアイコンが、iOSやiPadOSとは違っていたので、注意点を記載します。

## スクリーンショット

[スクリーンショットの仕様 - App Store Connect ヘルプ](https://help.apple.com/app-store-connect/?lang=ja#/devd274dd925)

MacのスクショはiPhoneやiPadと違い、1サイズ（	アスペクト比16:10固定）のみ必要になります。
次のいずれかのサイズの画像が必要です。

- 1280 x 800 ピクセル
- 1440 x 900 ピクセル
- 2560 x 1600 ピクセル
- 2880 x 1800 ピクセル

DockやMenu barは画像に含まれていても審査は通ります。

## アプリアイコン

https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/#specifications

アプリアイコンはHuman Interface Guidlinesに記載の通り、以下のサイズが必要です。

| ＠1x (pixels) | ＠2x (pixels) |
|:-:|:-:|
| 1024x1024 |  |
| 512x512 | 1024x1024 |
| 256x256 | 512x512 |
| 128x128 | 256x256 |
| 32x32 | 64x64 |
| 16x16 | 32x32 |

＠1xは解像度が72ppi、＠2xは解像度が144ppiの画像です。
32x32の＠2xの画像では、プロパティがこのようになります。
![Screen Shot 2022-07-27 at 19.21.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/8ea1eea7-9294-7b7e-85cb-bff8bc885edf.png)

それぞれの画像をXcodeで当てはめるとこんな感じ
![Screen Shot 2022-07-27 at 19.15.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/8466d883-9f94-5568-1dfa-c6d06343ab29.png)

### 注意点

macOSのアプリアイコンはiOSやiPadOSと違い、角丸の処理とアイコンサイズの調整が必要になります。
iOSと同じアイコンにするとこんな悲劇が起こります。

![Screen Shot 2022-07-03 at 17.55.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/1e887f92-826c-76a9-4acb-9c6b179639fe.png)

下記のURLのProduction Templatesを利用して、アイコンの調整を行います。
私はXDファイルを利用したので、XDで説明します。

https://developer.apple.com/design/resources/#macos-apps

#### 1. 手前にある青いガイドを削除する
削除前
![Screen Shot 2022-07-27 at 19.35.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/ce7cae3c-c1a0-d511-9355-dbb0ea5c0d5e.png)

削除後
![Screen Shot 2022-07-27 at 19.36.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/eac4fa96-4739-b02d-666c-41110b7362c3.png)

#### 2. 背景にある格子柄の塗りを透明にする

![Screen Shot 2022-07-27 at 19.44.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/31b06ebe-2e02-5016-b21e-0074877d5d69.png)

#### 3. アイコンの枠についているドロップシャドウを消す

![Screen Shot 2022-07-27 at 19.51.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/822217d8-e7eb-baed-741d-64b6270877e1.png)

#### 4. アイコン画像を挿入する

![Screen Shot 2022-07-27 at 19.43.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/1bdc318f-48ef-4faf-37e1-e7c8d854dcd7.png)

＠1x、＠2x同様、コンポーネント化されているので、一番大きなサイズの枠に画像を挿入すると、他の小さいサイズの画像も挿入されます。
ここで利用する画像サイズは1024x1024以上を推奨します。

#### 5. 透明にした背景とアイコンをグループ化する

背景も一緒に書き出さないと、サイズが変わってしまうのであくまで背景含めてアイコンだと認識してください。

![Screen Shot 2022-07-27 at 19.45.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/a9124fce-0321-736a-24be-abf58556d51b.png)

#### 6. エクスポートする

グループ化したアイコンにエクスポートのチェックをそれぞれつけていきます。

![Screen Shot 2022-07-27 at 19.45.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/453a4874-b972-ebec-50d0-724825a05f60.png)

メニューから一気にエクスポートします。
エクスポートのサイズはiOSかWebにしておくと、144ppiの画像が出てくるので、そこから選定できればリサイズなどの必要がなくなります。

![Screen Shot 2022-07-27 at 19.46.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/21ff0329-a9ea-01fa-258b-3e27a15cda2d.png)

## まとめ
スクリーンショットはアス比が合っていればかなり簡単に作成することができますが、アプリアイコンのルールは複雑なので、テンプレートを活用するのが一番だと思います。

**参考にした記事**

https://bootcamp.uxdesign.cc/creating-app-icons-for-macos-11-and-up-1132ccd479bc

**つくったアプリ**

https://apps.apple.com/jp/app/purelist/id1549367431