AppMockUp Studioの使い方
AppMockUp Studio
アプリを宣伝するApp Store、Playストアのスクショ画面を作るのって大変ですよね。
自分も長らくFigmaで作ってましたが、今回はAppMockUp Studioを使ってみたらかなり便利だったので使い方を説明していきます。
基本的に無料です。
AppMockUp Studio
GoogleChrome推奨です。Safariで開くとなぜかpngファイルが読み込めません。
またFigmaみたいな自動保存タイプじゃないので保存方法は見てから作業終了して下さい。
そのことに関しては、公式アカウントから詳細を教えてもらいました。
Safariを推奨していない件について。
保存のファイル形式の件について。
使い方
-
6.9インチ選択
起動画面でそれぞれのスマートフォンの画面が表示されるので自分の作りたいものを選んで下さい。
本記事内では「iOS Devices」を選択して説明していきます。
こちらがデフォルト画面です。
iPhoneの実機の選択表示が出たら「Apple iPhone 16 Pro Max」を選択して下さい。
現在2025年5月の時点ではAppStoreConnectでは6.5インチのみが必須になりましたが、6.5インチのiPhoneってXS Max, 11 Pro Maxとかなり限られてきます。なので6.9インチ画面で作ってしまいましょう。
AppStoreConnect画面。
iPhone画面サイズはこちらです。
iPhone画面サイズ早見表（図付き）
-
AppMockUp Studio画面
画面の使い方から見ていきます。
右矢印→の「Add Screenshot」をクリックすると右方向に画面の数が増えていきます。
アプリの画面説明をする際に増やしたい場合はクリックをして必要な数増やして下さい。
下矢印↓の「Add Device」ではデバイスの種類を増やせます。
他のiPhoneやiPadなどを使いたい場合はこちらを選択します。
選択したものは全て反映されるので、最初からでも後からでも問題なく使うことができます。
選択する場合はこのように画面が出てくるので、例えばiPad画面を作りたい場合は「iOS Tablets」をクリックすると今までのシリーズが表示されます。
もしくは、上にある検索バーからもデバイスを探すことができます。
デバイスを選択しすぎて削除したい場合は、デバイスを選択して青くなっていればそのまま「Delete」キーで消すことができます。
-
ストア画面作り方
左上1で最初の画面を選択します。右2の「Device 1」を選択、次に3の「ADD SCREEN」をクリックして下さい。
「ADD SCREEN」を選択して画像を選択しようとするとこのように「png」がなぜか選択できない状態になっています。
これはSafariで作業していると起きる現象なので、Google Chromeなら問題ありません。
画像を選択するとこのように「iPhone 16 Pro Max」だけではなくて「iPad Mini」と「iPhone XR」にも画像が反映されているのがわかります。
なのでデバイスそれぞれの画面を作る必要がないのがとても便利だと思っています。
画面を選択した後でも「iPhone SE」を後から追加しても反映されます。
試してみたい人はこの起動画面の画像を使って下さい。フリーです。
画像は2868×1320ピクセルで「iPhone 16 Pro Max」で合わせてあります。
保存方法
Figmaみたいな自動保存タイプではないので作業終了時には保存しておきましょう。
左上の「FILE」から「Save project...」でプロジェクトを保存します。
「Finder」の「ダウンロード」を選択すると自動的に保存されています。
時間などを見るとどのファイルかわかりやすいでしょう。
作業ファイルを呼び出したい場合は「Load project...」でファイルを呼び出します。
開きたいファイルを選択して「アップロード」をクリックして下さい。
ファイルが編集できます。
- その他の保存方法と開き方
ブラウザ右上に保存されるのでこのファイルをクリックして下さい。
↓
すると開けません。
↓
なので、デスクトップ画面などにファイルをスクロールしてきて保存します。
↓
今度は「Load project...」でファイルを呼び出します。
↓
選択できるのでファイルを選んで下さい。
これでも作業の続きから開始できるようになります。
ちなみに「command + S」でも保存動作をしますが、そのファイルで保存しても開けません。
ここら辺の保存の設定が謎仕様です。
文字編集
右側のメニュー欄で「Device 1」を選択して「Title」を選択します。
そして「TEXT」で編集をすると文字の編集を行うことができます。
「Subtitle」も同様に編集できます。
「TEXT」の欄で文字の細かなレイアウト編集ができるので自分に合うのを探して下さい。
モック編集
右側のメニュー欄で「Device 1」を選択します。
右下のメニューでモック画面の編集ができるようになります。
メニュー欄をいじってみて自分のストア画像を作ってみて下さい。
ストア画像編集
ストア画像を3つほど適当に作ります。
左矢印のキラキラしたアイコンがいい感じに自動的にレイアウトを生成してくれます。
何度でも試すことができます。
右矢印はプレビュー画面です。App Store画面になります。
iPhoneとiPadを切り替えてそれぞれのApp Store画面が確認できます。
このようにしてストア画面を作ってみて下さい。
基本操作
下メニューのペンみたいなアイコンが「Editor」です。基本的な画面に戻ってくるのでよく使うようにするのが良いと思います。
下メニュー画面の説明です。
左から説明します。
・コーヒーアイコンが開発者に支援する画面になります。
・数字が書いてあるのが表示画面の比率です。
・←と→が戻るボタンと進むボタンです。
・+ボタンがここでも画面数の数とデバイスの数を増やせます。
・キラキラボタンが自動レイアウトです。
・四角が合わさったボタンは有料のテンプレートを表示します。何か欲しいのがあればそのテンプレートを購入することができます。
・ペンアイコンがエディター画面です。
・▶️ボタンがプレビュー画面です。
・↓がエクスポートボタンです。全機種全画面が一括ダウンロードすることができます。
公式チュートリアル
公式アカウントから使い方のチュートリアルを教えてもらいました。
詳細は、こちらを参考にしてください。
よくわからない点
-
戻るボタンがあまり効かない
自動レイアウトを何度もして、元の白い画像にしようとしても戻りません。
Discussion