ストア用スクショ作成無料サービス「AppMockUp」が神すぎた
はじめに
アプリの第一印象を決めるストア用のスクショ作成はアプリ開発の中でもとても重要。
そんなスクショを
- 誰でも
- 簡単に
- 無料で
- あっという間に
作れてしまう神サービス「AppMockUp」を紹介します。
ここが神ポイント！
1.操作が簡単
このサイト上で全てが完結します。
そのため、PhotoshopやXDといったスキルがなくても直感的に作成できます。
2. 誰でもそれっぽいものが作れる
テンプレートがいくつか用意されており、それを利用すれば誰でもそれっぽいものが作れます。
デザインセンスに自信のない人にとっては特にありがたい機能。
3. 時間がかからない
操作が直感的かつ複雑な工程がないため、枚数にもよりますが慣れてくれば３０分もあれば完成します。
4. 無料（重要）
無料なんです。（大事なのでもう一回）
スクショ作成は色々な有料サービスがありますが、このクオリティで無料なのは本当にすごい。。。
使い方
完成までの流れをさっと紹介します。
作成はここから。
1. OSを選択
作成したいストアのOSを選択する。
iOSとAndroid両方一気に作ることもできる。
選択後はこのような画面になり編集が可能になる。
2. デバイスを編集
左のメニューから「Devices」→「New Devices」
そうすると、スクショの載せるスマホ（タブレットも）が選べる。
ここから利用したいデバイスを選択しておく。
自分の場合はエミュレーターで普段から利用しているスクリーンサイズと一致する
- iPhone 11 Pro MAX
- Google Pixel 4 XL
にしました。
3. テンプレートを選択
全19種類。
左のメニューから「Templates」
テンプレートは利用しなくてももちろん大丈夫。
デザインに自信がない人、さっと終わらせたい人はガンガン利用しちゃいましょう。
使いたいテンプレートの「Load」ボタンを押すと利用できる。
4. エミュレーターでアプリ画面を撮影
当たり前ですがエミュレーターで利用するアプリ画面のスクショをとっておきましょう。（macはcommand + s）
5. 編集するデバイス（OS）を選択
画面右上から作成したいストア用のデバイスを選びます。
今回なら
- iOS→iPhone 11 Pro MAX
- Android→Google Pixel 4 XL
6. スクショを編集
編集したいスクショを選択しすると、右に編集メニューがでてきます。
ここをいじっていきます。
各項目にトグルがついており、表示/非表示を切り替えられる。
- Layout
- スマホやテキストの位置の変更
- Background
- 背景色の変更
- グラデーションや画像を挿入できたりする
- Icon
- アイコンの挿入
- 挿入位置やサイズの調整が可能
- デフォルトだと非表示になっているので使いたい場合はトグルをオンにする
- Title
- サイズ、色、傾き、位置、影など結構細かく調整できる。
- Subtutle
- タイトルと同じ。
- Device
- 先ほどとったアプリ画面を実際にはめ込める
- スマホのフチの色、傾き、位置などが調整可能
- Device Two
- １枚のスクショに２つデバイスがある場合に利用
- 画像のようにそれぞれのデバイスで設定を行う
左のメニュー「Preview」や右上の▶︎を押すと
完成画像を確認できる。
7. ダウンロード（完成）
左のメニュー「Export」からダウンロードが可能。
たったこれだけ！！！
簡単すぎる。
データの保存と読み込み
作成したデータは画面左上の「SAVE」から保存が可能。
また、「LOAD」で読み込みができ、再利用や作業中断にも対応できる。
最後に
無料でここまで細かく設定ができるのは本当にありがい。
何より面倒なスクショ作成が圧倒的に簡単に、楽しくなるのが本当すばらしい。
まさしく神サービスです。
個人開発アプリ
自分はエンジニアではないですが、個人開発を趣味としていて、BIG3記録管理アプリ「LifterLog」 をリリース中です。
FlutterとFirebase, Cloud Functionsで開発しています。
パワーリフティングに興味ないと全くわけわからんアプリですが、よければ一度触ってみてください！
Discussion