2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

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

スクリーンショット

スクリーンショットの仕様 - App Store Connect ヘルプ

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

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

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

アプリアイコン

アプリアイコンは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

それぞれの画像をXcodeで当てはめるとこんな感じ
Screen Shot 2022-07-27 at 19.15.41.png

注意点

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

Screen Shot 2022-07-03 at 17.55.55.png

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

1. 手前にある青いガイドを削除する

削除前
Screen Shot 2022-07-27 at 19.35.11.png

削除後
Screen Shot 2022-07-27 at 19.36.08.png

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

Screen Shot 2022-07-27 at 19.44.34.png

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

Screen Shot 2022-07-27 at 19.51.22.png

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

Screen Shot 2022-07-27 at 19.43.35.png

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

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

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

Screen Shot 2022-07-27 at 19.45.22.png

6. エクスポートする

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

Screen Shot 2022-07-27 at 19.45.29.png

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

Screen Shot 2022-07-27 at 19.46.10.png

まとめ

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

参考にした記事

つくったアプリ

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?