実際に画面で確認できるscreenshots (Flutter)の代替。
screenshots (Flutter)はターミナルからスクリーンショットの枠付けとリリースを行います。CIには適した形ですが、デザインには向いていません。設定ファイルの中のキャプションは、レンダリングされるまで誰の目にも触れません。ScreenMocksはビジュアルの半分を担いますが、自動化された半分を手放せというわけではありません。
見える場所でデザインする
文字組み、背景、デバイスフレーム、エフェクトのある本物のキャンバス。レイアウトとの間に設定ファイルは挟まりません。
それでも自動化できる
MCPコネクタを使えば、Claude Code、Cursor、Codexがセットを作成しエクスポートできます。同じ発想の現代的な形です。
言語ごとにフォルダを分けなくていい
1つのデザインからApp Storeの48言語すべてを生成し、翻訳が長くなる箇所には上書きを用意できます。
機能を1つずつ比較
各行は、それぞれの製品の公開されている料金ページ、ドキュメント、実際のアプリと照らし合わせて確認しています。機能が公に文書化されていない場合は、推測せずにその旨をセルに記載しています。
| 機能 | ScreenMocks | screenshots (Flutter) |
|---|---|---|
| デザインの方法 | ||
| ビジュアルキャンバスエディタ | 設定ファイル | |
| レンダリング前にレイアウトを確認 | ||
| デザイン | ||
| ストア用スクリーンショットテンプレート | 40+ | |
| デバイスフレーム | 33 | 自分で用意 |
| 3Dデバイスモックアップ本物のGLTFモデルをブラウザ内でレンダリング | 無料ツール | |
| 自動化 | ||
| CIで実行 | MCP経由 | |
| テストスイートからスクリーンショットを取得 | ||
| ワークフロー | ||
| Claude、Cursor、Codex向けMCPコネクタ | ||
| サイズと言語 | ||
| 1つのデザインからすべてのストアサイズを生成配置もコピーもサイズ軸に沿って継承される | ||
| サイズごとのレイアウト上書きiPadだけレイヤーを動かし、他のキャンバスはそのまま | ||
| App Store対応言語 | 48 | まちまち |
| 言語ごとのレイアウト上書き英語はそのままに、ドイツ語だけ見出しを縮小 | ||
| サイズごとに異なる画面構成iPhoneは6枚、iPadは3枚、プロジェクトは1つ | ||
| ワークフロー | ||
| Figmaファイルをプロジェクトとしてインポート | ||
| App Store Connectへ直接アップロード | まちまち | |
| キャプチャのフォルダをドロップして全画面に自動配置 | ||
| エクスポートと料金 | ||
| プロジェクト・画面・エクスポートが無制限、しかも無料 | オープンソース | |
| レンダリングはブラウザ内で実行スクリーンショットの合成処理はどこにも送信されない | ローカル | |
1つのデザイン。AppleとGoogleが求めるすべてのキャンバスへ。
画面はiPhone 6.9で一度だけ描きます。プロジェクト内の他のすべてのキャンバスはそこから読み込むため、iPad用セットもAndroid用セットも、追加したカスタムサイズも、すでにデザインされた状態になります。あるキャンバスでレイヤーを固定すれば、そのキャンバスだけに固定されたままになります。
- デバイスフレームはキャンバスに追従します。Playタブで描いたiPhoneはPixelとして描画されます
- 同じプロジェクトから、iPhoneには6枚、iPadには3枚のスクリーンショットをリリース
- エクスポートはすべてのサイズと言語を1つのZIPに、フォルダごとに書き出します
1つのデザイン、4つのキャンバス、描き直しなし。
ドイツ語が長くなったら、ドイツ語だけ直す。
このカテゴリのツールは今やどれも一括翻訳ができます。問題は、翻訳された見出しが英語より40パーセント長くなり、スマートフォンと重なってしまうスクリーンショットです。ScreenMocksでは、どのレイヤーにも言語ごとの上書きを設定できるため、その1つの見出しをその1つの言語だけで縮小でき、残り47言語はそのまま保たれます。
- App Store対応48言語、右から左に書く言語も含む
- 上書きは言語単位、サイズ単位、あるいは特定の1マス単位で設定可能
- AI翻訳は空欄だけを埋め、書いた文章を上書きすることはありません
上書きは1つだけ。残り47言語には触れません。
Figmaファイルを持ち込む。あるいはエージェントを。
デザインがすでにFigma上にあるなら、プロジェクトとしてインポートできます。テキストは編集可能なまま残るのでローカライズでき、正確に再現できない部分はFigmaによってレンダリングされ、近似ではなく画像として取り込まれます。デザインツールをまったく開きたくない場合は、MCPコネクタを使えばClaude Code、Cursor、Codexがエディタと同じAPIを通じてセット全体の作成と編集を行えます。
- FigmaのトークンがScreenMocksのサーバーに届くことはありません
- エージェントはレイアウトレポートを読み取れるため、自分が作ったものを確認して修正できます
- エージェントが作ったものは、通常のプロジェクトとしてエディタで開けます
どちらのコネクタも、買い切りのパスを含むすべての有料プランで利用できます。
それぞれの料金
価格は2026年8月24日時点で公開されているものです。決める前にscreenshots (Flutter)の公式ページをご確認ください。
- 無料プラン: プロジェクト、画面、サイズ、エクスポートが無制限
- 有料プランは透かしを外し、48言語すべてを開放
- Figma ConnectorとMCP Connectorはすべての有料プランに含まれます
- Launch Passは期限切れも更新もありません
移行にかかる時間は20分ほど
必要なのはすでにお手元にあるアプリのキャプチャだけです。
今のキャプチャ方法をそのまま続ける
CIであれ手作業であれ、今生のスクリーンを作っている仕組みはそのまま使い続けられます。その部分は何も変える必要がありません。
フォルダをキャンバスにドロップする
キャプチャをドロップすると、空いているディスプレイに1画面ずつ順番に配置され、それぞれに本物のデバイスフレームが付きます。
1度デザインすれば、すべてエクスポートできる
掲載に必要なキャンバスと言語を追加し、サイズと言語ごとにフォルダ分けされたZIPをエクスポートするか、App Store Connectへ直接プッシュします。
乗り換え前によく聞かれる質問
screenshots (Flutter)を使い続けられますか?
はい、キャプチャに関してはむしろそうすべきでしょう。screenshots (Flutter)はシミュレータを操作し、再現性のある生のスクリーンを作るのが得意です。得意でないのはデザインです。レイアウトが設定ファイルの中にあるからです。キャプチャはあちらで、デザインはこちらで。
ScreenMocksはCIで動作しますか?
MCPコネクタを通してであれば動作します。エージェントはエディタと同じAPIを使って、プロジェクトの作成、キャプチャの配置、文章の作成と翻訳、エクスポートまで行えます。専用のCLIは存在しません。正直な理由は、ヘッドレスレンダラーを作ると、キャンバスと食い違う可能性のある二重実装になってしまうからです。
今使っている仕組みとエクスポートは互換性がありますか?
ZIPはサイズと言語ごとにフォルダ分けされており、アップロードツールが想定する形式と同じです。ファイルを経由せず、ブラウザから直接App Store Connectへプッシュすることもできます。
無料ですか?
screenshots (Flutter)はオープンソースで無料です。ScreenMocksは透かし付きなら無料、透かしなしなら月額$9.99、あるいは一度$149です。プロジェクト、画面数、キャンバスサイズ、エクスポート数はすべてのプランで無制限です。
セットは一度作るだけ。48言語でリリースする。
無料プランはカード登録不要で、最初の1分からすべてのキャンバスサイズをエクスポートできます。Figmaファイルを持ち込むか、テンプレートから始めてください。
Proは月額$9.99。Launch Passは$149の買い切りで、更新の必要はありません。
この比較はScreenMocksが公開しており、比較対象の製品のうち一方を販売しています。screenshots (Flutter)はその所有者の商標であり、ScreenMocksとは提携関係にありません。内容は2026年8月24日時点で確認されており、四半期ごとに見直されます。 github.comを確認. 情報が古くなっていますか?