React Native開発者向け
App StoreとPlay Store、1つのデザインで。
TL;DR. React Nativeアプリはどちらのストアにもリリースされます。Screenshotifyは1つのデザインから両ストアに必要なサイズ行列をすべてエクスポートします。2つのデザインツールで並行ワークフローを維持する必要はありません。
React Nativeアプリはデフォルトで2つのストアエコシステムに存在します。スクリーンショット作業は通常、生のシミュレータキャプチャを得るためのDetox駆動のUIテスト、またはiPhoneプリセットとAndroidプリセットを並べて開いたFigmaでの手動デザインのどちらかになりがちです。Screenshotifyは、デザインされたマーケティング用スクリーンショット — 生のキャプチャではなく — を両ストア向けに一度に作りたいときのためのツールです。
RNスクリーンショットの典型的な流れ
- ソースフレームをキャプチャします。実行中のアプリから取得してください。iOSシミュレータはCmd+S、Androidエミュレータはスクリーンショットボタン、実機の場合は内蔵のWebRTCペアリング経由で直接転送できます。
- Screenshotifyを開き、3〜5パネルのカルーセルを組み立てます。パネルごとに異なるデバイスフレームを使えるので、iPhoneとPixelを視覚的に混在させたカルーセルも1つで作れます。
- キャプションを追加します。ソース言語で入力してください。マルチパネルコンポーザーがパネル間で見出し構成を一定に保ちます。
- ローカライズします。ワンクリックでApp Storeの39言語すべてに翻訳します。グローバルなRNアプリでよく対象となるロケール（EN、JP、DE、BR、KR、ESなど）を中心に確認してください。
- エクスポートします。有効にしたApp Storeサイズ（6.9"、iPad 13"など）とPlay Storeサイズ（デフォルト1080 × 1920）をまとめた1つのZIPが出力されます。
RNエコシステムの代替手段
Detoxやreact-native-testing-libraryにスクリーンショットヘルパーを組み合わせると、UIテストから生のフレームキャプチャを得られます。ソーススクリーンショットの取得には有用ですが、マーケティング合成のステップは別途必要です。Fastlane snapshotはRNアプリのiOS側（XcodeプロジェクトはそのままXcodeです）で機能します。
多くのRNチームが落ち着く組み合わせは、シミュレータ・実機でソースをキャプチャし、Screenshotifyでカルーセルをデザインし、プロジェクトJSONをコードと同じリポジトリでバージョン管理するというものです。
クロスプラットフォームデザインのヒント
- プロジェクトごとにデザインシステムを1つに統一しましょう。iOSとAndroidのスクリーンショット間でフォントやカラースキームを切り替えないでください。
- ステータスバーの表示は異なります。iOSは慣例として9:41を表示し、Androidは実際の時刻を表示します。ScreenshotifyはデバイスごとにiOSステータスバーの表示を切り替えられます。AndroidはOS標準のステータスバーをスクリーンショットにそのまま反映します。
- ボトムナビゲーションとタブバーは切り取らないでください。カルーセルのサムネイルでユーザーが最初に目にするのは、アプリのこの部分です。
- 5.5" iPhoneはもう対象外です。RNアプリがiOS 13（iPhone 6s Plus最小要件）をターゲットとしていない限り、5.5"サイズは省略して構いません。