モックアップとストア素材のガイド
デバイスモックアップ、App Store と Google Play のスクリーンショットサイズ、プロモ動画、カメラワーク、書き出し設定についての実践ガイド30本。Mockuptop を開発しているチームが書いています。
- 表を暗記しない App Store のスクリーンショットサイズApp Store Connect が受け付ける iPhone と iPad のスクリーンショットサイズ、枚数の上限、そして通常はひとそろいで足りる理由。
- Google Play のスクリーンショットとストア画像のサイズPlay ストア掲載情報でのスマホ・タブレット・フィーチャーグラフィック・アイコンの寸法と、アップロードを弾く縦横比の制限。
- アプリプレビュー：要件と機能する構成App Store のプレビューの尺・解像度・フレームレート・内容の規定と、音声なしでも成立する20秒構成。
- Play のプロモ動画に、その枠を稼がせるPlay のプロモ動画の仕組み、アップロードではなく YouTube リンクである理由、最初の5秒の作り方。
- 縮小されても生き残るフィーチャーグラフィックを作るGoogle Play のフィーチャーグラフィックの設計原則。セーフエリア、文字サイズ、中央を空けるべき理由。
- スクリーンショットを iPhone モックアップの中に置く素のスクリーンショットをデバイスモックアップに変える手順。縦横比、角、背景の選び方。
- Play 掲載情報のための Android モックアップAndroid のモックアップが iPhone とどう違うか、どの比率で作るか、Play の掲載情報をどう揃えるか。
- ウェブアプリを本物に見せるノート PC モックアップウェブアプリをノート PC のモックアップで見せる方法。撮影幅、開き角、影、そして素のブラウザ枠が優る場面。
- タブレット用モックアップと、ストアがそれを求める理由タブレット用スクリーンショットの寸法、縦か横か、そして両ストアがこの素材を品質のシグナルとして扱う理由。
- スマートウォッチのモックアップ：小さい画面、大きな構図問題とても小さな画面を説得力をもって見せる方法。トリミング、大きさ、バンド、そしてスマホと構図が違う理由。
- 3Dモックアップを意図して使うフラットなテンプレートと本物の3Dレンダリングの違い、そして可読性を損なわずに遠近を使う方法。
- フレームか素の画像か：掲載場所ごとに決めるフレームがコンバージョンに効く場面、ピクセルの無駄になる場面、そして習慣ではなく掲載場所ごとに決める方法。
- ストア用スクリーンショットの文言を書くストア用スクリーンショットの文言を、サムネイルでも読め、画像にできないことを補うように書き、配置する方法。
- 仕事の大半をこなすのは1枚目カルーセル最初の画像が不釣り合いに重い理由と、その選び方と作り方。
- ストア素材の離陸前チェックリストストア素材の短い最終確認リスト。寸法、順序、キャプション、翻訳、統一感、そして却下につながるミス。
- 11回作り直さずに多言語化するきれいに翻訳できるスクリーンショットのセットの作り方、費用対効果の高い言語、翻訳を安くするレイアウト判断。
- ライトかダークか：掲載情報に載せるテーマアプリをライトとダークのどちらで見せるか、ストアの背景が判断に与える影響、そして作業を倍にせず両方を示す方法。
- 画面を主題のままにする背景を選ぶインターフェースを主役に保つ背景の選び方。グラデーションの向き、コントラスト、ブランドカラーの扱い。
- モックアップを物体らしく見せる照明実用的な3灯構成、金属とガラスが黒く出る理由、支配的にならずに接地させる接触影の置き方。
- カメラアングル：ほぼすべてを賄う5つの構図3Dモックアップで傾き・回転・画角・ズームがどう作用し合うか、そして画面を読ませる構図。
- キーフレーム：機能する最小のモデルモックアップエディタでキーフレームがどう働くか、動かす価値のあるプロパティ、良いカットに必要な数。
- イージングが、動きと意図された動きを分けるイージング曲線が何をしているか、製品の動きに合うのはどれか、モックアップ動画を素人臭くする具体的なミス。
- 20秒の紹介動画は実際にどう組み立てるか短い製品動画のカットごとの構成、各拍の役割、多くの試みが失敗する場所。
- モックアップの書き出し形式を選ぶストア、ウェブ、SNS で使う画像形式の選び方と、透明部分やグラデーションが答えを変える理由。
- 圧縮に見えないモックアップ動画を書き出す解像度、フレームレート、ビットレート、コーデックの選び方と、フレーム単位の書き出しが画面収録に勝る理由。
- 透明なモックアップ：ストア以外のどこでも役に立つアルファ付きでモックアップを書き出す方法、透明が助けになる場所、そしてアップロードが却下される場所。
- ランディングページのヒーローでモックアップを使うランディングページでのモックアップの使い方。大きさ、切り抜き、静止画か動画か、そしてページを速く保つ方法。
- SNS 向けに製品モックアップのサイズを決めるX、LinkedIn、Instagram、Product Hunt に向けた実用的な比率と、切り抜き事故を防ぐセーフエリア。
- デバイスモックアップと、飛ばされがちな法的論点マーケティングでデバイス画像を使うときの実務的な原則。商標、写真のライセンス、そして中立なデバイスが低リスクである理由。
- 画面収録をストア用プレビューに仕上げる一連の流れ。実機やシミュレータでのきれいな収録、トリミング、モックアップへの配置、ストア向けの書き出し。