アップル信者<br>2日目は、
プレビュー画像の登録
について解説します。
前回、1日目に解説した、App Developerへの登録からApp Store Connectへの登録は以下のページから確認ください。
iOSアプリ開発情報
iOSアプリの公開手順まとめ 2024年度版 1日目（App Developerへの登録など） | iOSアプリ開発情報
これまで、私はiOSアプリをApp Storeに３回公開してきました。 最初は全く分からず、色々なサイトを参考に試行錯誤して、なんとか公開までこじつけてきました。 今後、手順…
次回、3日目に解説する、アプリの概要、プライバシーなどの手続きは以下のページから確認ください。
iOSアプリ開発情報
iOSアプリの公開手順まとめ 2024年度版 3日目（アプリの概要、プライバシーなど） | iOSアプリ開発情報
3日目は、アプリの概要、アプリ情報、プライバシーなどについて解説します。 前回、2日目に解説した、プレビュー画像の登録は以下のページから確認ください。 次回、4日目…
目次
App Store Connectへの登録
3. プレビュー画像の登録（Figma使用）
審査に必要な画像は以下の通り。
iPhone用
- iPhone 6.7インチディスプレイ（1290 x 2796）
又は、iPhone 6.5インチディスプレイ（1242 x 2688、1284 x 2778）
iPhone 15 Pro Max（6.7インチ）など - iPhone 5.5インチディスプレイ（1242 x 2208）
iPhone 8 Plusなど
iPad用
- iPad Pro(第6世代)12.9インチディスプレイ（2048 x 2732）
iPad Pro（第6世代） - iPad Pro(第2世代)12.9インチディスプレイ（2048 x 2732）
iPad Pro（第2世代）
1. フレームの作成
スクリーンショット、テキストを入力する前に、Figmaを使用してフレームを作成します。
STEP
背景色のフレーム作成（6.7インチ）
前提条件
縦向き6.7インチのスクリーンショットを8枚作成
→ （1290×8=10320）× 2796px
のフレームを作成し、8分割します。
フレーム（F）を選択
- 画面上にドラッグして、長方形を描く
- サイズをW10320、H2796に修正
- 拡大率を100→20％にする
- 名称を「背景色」に変更
- 線形グラデーションを作成
- 背景色にアクセントを付けるため円を追加
STEP
フレームをスライス
- スライス（S）を選択
- 画面上にドラッグして、長方形を描く
- サイズをW1290、H2796に修正
- 8回繰り返す
STEP
ベゼルを配置
- Apple DevelopperからiPhone 15 Pro Max（6.7インチ）を入手
- 入手したPNG画像を背景の上に配置
- 縦横比をロック（シフトキーを押しながらドラッグ）してサイズ調整
この時点で、背景色にアクセントを付けるためにつけた円の形状を変更しました。
過去のベゼルを入手する場合
あわせて読みたい
Devices from Design at Meta
Download images of popular devices.
2. フレームにスクリーンショット、テキスト追加
作成したフレームにアプリのスクリーンショット、紹介テキストを追記していきます。
STEP
アプリのスクリーンショットを追加
- スクリーンショットを追加するページを新設
- スクルーンショットを追加
- スクリンショットを選択→右クリック→コンポーネントの作成 再利用可能なコンポーネント
STEP
スクリーンショットをベゼルに配置
- 左上の「リソース」メニューから、作成したコンポーネントを選択
- ベゼル枠に合うように縦横サイズを調整
- ベゼル枠に合うように角を丸くする
- ベゼル枠とコンポーネントをグループ化する
STEP
テキストを追加
3. App Store Connectへプレビュー画像のアップロード
ここからは、いよいよ、作成したプレビュー画像をAppStoreへアップロードしていきます。
STEP
画像をアップロード
- 8枚の画像（Slice1〜Slice8）を選択
- 「8レイヤーをエクスポート」をクリック
- ダウンロードした画像をApp Store Connectへアップロード
STEP
エラー「画像にアルファチャンネルや透過を含めることはできません」
画像をアップロード後、しばらくしてからApp Store Connectへアクセスすると、以下のエラーが表示されていました。アップロード直後には表示されませんでした。
- エラーが発生した画像をプレビューで開く
- 「ファイル」→「書き出す」をクリック
- アルファのチェックを外す
- 「保存」をクリック
STEP
エラー対応後、再度画像をアップロード
- アルファのチェックを外したデータをアップロード
- エラーなくなりました。→プレビュー画像の送付完了
アプリを多言語で作成している場合は、別の言語でも同様に画像を作成し送付します。
コメント