Duo Studio で折りたたみ端末のモックアップを作る

Duo Studio は、アプリのスクリーンショットから折りたたみスマホのモックアップと開閉アニメーションを作る、オープンソースのブラウザツールです。内外画面の画像を追加し、姿勢を選んで、製品紹介用の画像や動画を書き出せます。Web モードでは埋め込みが許可されたサイトを操作できます。画像の処理と書き出しはローカルで完結します。iOS やネイティブアプリを実行するエミュレーターではありません。

画像からモックアップを作るには？

「スクリーンショット」で内側画面の画像を追加します。外側画面には別の画像も設定できます。未設定なら内側画像の左半分を利用します。
「全体を表示」で比率を保持するか、「画面を埋める」で余白をなくします。位置とズームも調整できます。
自由開閉、閉じた状態、横向き、縦向き、卓上、スタンドから選び、各姿勢に合う画像を設定します。
開閉スライダーでプレビューし、書き出す形式とサイズを選びます。詳細設定で背景や構図を調整できます。

どのサイズの画像を用意すればよいですか？

以下は Duo Studio が使用する画像スロットと書き出しプリセットの寸法です。内側横向きは 2853 × 2007、縦向きは 2007 × 2853、外側縦向きは 1398 × 2034、スタンド姿勢の外側横向きは 2034 × 1398 ピクセルです。画像のピクセル数は Web ページの CSS ビューポートとは異なります。これらはツールの設定値であり、実機の仕様や App Store の受理を保証するものではありません。

画面	使用する姿勢	推奨ピクセル数	比率
内側・横向き	自由開閉、横向き	2853 × 2007	1.42:1
内側・縦向き	縦向き、卓上	2007 × 2853	1:1.42
外側・縦向き	閉じた状態	1398 × 2034	1:1.45
外側・横向き	スタンド	2034 × 1398	1.45:1

全サイズと書き出し仕様

どんな Web サイトでも表示できますか？

対象サイトが iframe の埋め込みを許可している必要があります。Content-Security-Policy の frame-ancestors や X-Frame-Options による制限は回避できません。ブラウザはサイトへ直接接続します。

開閉中の内側画面には独立したページを使うため、操作やスクロールが同期しない場合があります。完全に開いて操作を確認してください。書き出すには現在の Duo Studio タブを共有する許可が必要です。各画面をローカルで取得後、共有を終了してファイルを生成します。

どの形式で書き出せますか？

形式	用途	解像度・フレームレート
PNG	枠付き静止画。透明背景も選択可能	シーンに合わせたサイズ、1600 × 1000、1080 × 1350、1200 × 1200
MP4 / WebM	H.264 / VP9 の開閉動画。ブラウザのエンコード対応が必要	30 fps・最長辺 1280 px
GIF	繰り返し再生するアニメーション	12 fps・最長辺 640 px
ZIP	画像を設定した全シーンの PNG と一覧	各スロットのサイズ
UI 原画像 PNG	枠なしのアップロード画像。寸法の厳密な確認	スロットと完全一致する画像が必要

画像はサーバーに送信されますか？

追加した画像の処理と書き出しはデバイス内で行います。プロジェクトはブラウザに自動保存され、.duo.json として持ち出せます。ファイルには原画像が含まれるため、共有時にはご注意ください。ブラウザデータを消す前にバックアップしてください。Web モードの通信には対象サイトのプライバシーポリシーが適用されます。

入力とアニメーションの制限は？

画像は PNG・JPEG・WebP、一辺 4096 px、1600 万画素、20 MB まで。アニメーションは 2〜10 秒で、前後に各 0〜2 秒の停止を追加できます。MP4 と WebM の利用可否はブラウザのエンコーダーによって異なります。Web プレビューの CSS ピクセルと出力画像のピクセル数は別の設定です。

Apple の公式ツールですか？

Duo Studio は独立したオープンソースプロジェクトで、Apple の製品ではありません。モデル素材の出典とライセンスは公開リポジトリに記載しています。モックアップはアプリの実機対応を証明しません。App Store への提出には最新の要件を確認し、実機でもテストしてください。

ソースコード・素材の出典・問題報告

画面サイズと書き出し仕様

エディターを開く