PhotoshopなしでApp Storeスクリーンショットをデザインする
PhotoshopとFigmaは汎用デザインツールです。App Storeスクリーンショットを含め、あらゆる作業をこなせます。ただし、App Storeスクリーンショットはデザイン領域が非常に限定的で、特有の制約（デバイスクラスごとの厳密なサイズ、パネル間の繰り返しレイアウト、ロケールごとのバッチエクスポート、デバイスフレームのレンダリング）があり、汎用ツールではうまく対応しきれません。
ブラウザネイティブのスクリーンショットツール — Mokbiはそのひとつですが、AppLaunchpad・Previewed・AppMockUp・MockUPhoneなどもこのカテゴリに含まれます — は、この限定的な用途に特化して設計されています。特定の作業においては処理が速く、トレードオフとして一般的なグラフィックデザインや写真編集には対応していません。
省けること
Photoshopのセットアップにかかる時間
App StoreスクリーンショットにPhotoshopを使う場合、通常は次の作業が発生します。正しいサイズでアートボードを設定し、デバイスフレームのアセット（AppleのDesign ResourcesやフリーのPSDパックからダウンロードしたもの）をインポートし、フレーム内にスクリーンショットを配置し、コーナーをマスクし、テキストレイヤーを追加し、Smart Objectのスケーリングを調整する。これをデバイスクラスごとに繰り返します。
ブラウザツールなら、このすべてがワンタップで完了します。デバイスを選んでスクリーンショットをドロップすれば、フレームがレンダリングされます。ロケールごとのバリエーションも、セットアップを最初からやり直すことなく保存できます。セットアップにかかる時間が、1時間から約30秒に短縮されます。
Figmaのコンポーネント構成の複雑さ
Figmaはコンポーネント・バリアント・オートレイアウトを使って繰り返し作業の問題を解決できます。ただしその構築コストは無視できません。Figmaで適切にコンポーネント化されたApp Storeスクリーンショットのシステムを最初に組み上げるには、1〜2日かかります。一度構築すれば作業は速くなりますが、システムに非trivialな変更（新しいデバイスクラス、新しいロケール、新しいアスペクト比）が生じるたびにコンポーネントの再構築が必要になります。
四半期ごとにスクリーンショットをリリースする社内デザインチームなら、Figmaへの投資は報われます。年に2回リリースするインディー開発者には、割に合いません。
手作業エクスポートの煩雑さ
PhotoshopやFigmaで「デバイスごと × ロケールごと」に手作業でエクスポートすると、多言語対応の申請では数百回のエクスポート操作が発生します。ブラウザツールなら、ZIPファイル全体をワンクリックで生成できます。時間の節約が積み重なるのはここで、追加するロケールごとの手間はほぼゼロになります。
諦めること
ピクセル単位の写真レタッチ
スクリーンショットの背景に高度なレタッチが必要な写真（実写のカラーグレーディング、不要な要素の除去、ライフスタイル写真の肌補正など）が含まれる場合、Photoshopに勝るものはありません。ブラウザツールはCSSスタイルのフィルター（ぼかし・明るさ・コントラスト・彩度）は適用できますが、選択的なレタッチには対応していません。
大多数のApp Storeスクリーンショットは、単色のグラデーションか比較的シンプルなデバイス画面を使っており、レタッチ済みの写真は使いません。そのため、この制限が実際に問題になることはほとんどありません。
特殊なブレンドモード
Multiply・Overlay・Screen・Color Dodge — Photoshopのフルブレンドモードセットは、ブラウザツールではほとんど利用できません。App Storeスクリーンショットの大半は、直接的な不透明度やシャドウ効果を使っており、クリエイティブなブレンドモードは使いません。特定のMultiply合成テクスチャオーバーレイにデザインが依存している場合は、Photoshopに軍配が上がります。
App Previewビデオの最終合成
App Previewビデオ（App Storeページで自動再生される30秒のクリップ）にはビデオ編集が必要です。After Effects・Premiere・Final Cut、またはそれに準じたツールを使います。ブラウザツールはスクリーンショットには対応していますが、ビデオ合成には対応していないため、App Storeページのビデオ部分については別のツールが引き続き必要です。
ハイブリッドワークフロー
多くのインディーチームは、次のようなハイブリッド構成に落ち着いています：
- 実機またはシミュレータで実際のスクリーンショットを撮影します。
- 必要なフレームをPhotoshopで修整します（ステータスバーのアーティファクト除去・グラフィックの不具合修正・カラー補正など、クリーンアップが必要な場合）。
- Mokbiでカルーセルを構成します（または同等のブラウザツール） — デバイスフレーム・テキストオーバーレイ・グラデーション・マルチパネル。
- ブラウザツールで翻訳とバッチエクスポートを行います。
- ビデオをリリースする場合は、After EffectsまたはDaVinci ResolveでApp Previewビデオを編集します。
Photoshopが優れている場面
- 写真を多用した合成（ライフスタイル写真・複雑な背景・多層写真レタッチ）を行っている場合。
- 既存のPhotoshopパイプラインとアセットライブラリがあり、それを作り直したくない場合。
- ブラウザツールでは実現できない、ブランド固有のカスタムタイポグラフィや特殊エフェクトが必要な場合。
- シニアデザイナーが日常的にPhotoshopで作業しているエージェンシーの場合 — ツールへの習熟度が高く、切り替えのコストのほうが大きい。
ブラウザツールが優れている場面
- インディーまたは小規模チームで、リリース頻度が低い場合。
- 多言語対応のリリース（バッチエクスポートとワンクリック翻訳で実際の時間が節約できる場合）。
- App Storeスクリーンショットを頻繁に更新する場合（リリースごと）。
- 既存のデザインインフラがなく、ゼロから始める場合。