スマホモックアップとは？
スクリーンショットや動画、UI を端末の外形に収めて見せる枠です。平面の PNG とは違い、3D モックはカメラとヒンジを変えつつ、画面内容をガラスに貼ったままにできます。
ブラウザで無料
iPhone Duo モックアップ
折るとレスポンシブページがカバーから内側デュアル画面へ広がります。画像や動画をドロップしてクロップし、MP4 を書き出します。
CutFast を Google の優先ソースに追加 トップニュースと AI による回答に CutFast がもっと表示されます。
- できること
- 折りたたみモック + MP4
- 入力
- URL・画像・動画
- 実行場所
- このタブ
- 書き出し
- MP4 ダウンロード
中身が動く折りたたみモック
カスタム映像は HTML キャンバスに描かれ、Duo の内外画面へ貼られます。ヒンジは GIF ではなくライブのスライダーです。収録は内容が載った 3D ビューを書き出します。
Features
その場で使える折りたたみモック
このページがツールです。キャンバスに描いた内容を Duo の画面に貼り、ブラウザで収録します。
URL・画像・動画
デモサイトは外画面からデュアル幅へリフローします。ファイルをドロップしてプロフィール写真のようにドラッグでクロップもできます。
手に追従する折りたたみ
ドラッグ中は 1:1。離すと今の速度から開きまたは閉じへスプリングします。
ここで MP4 書き出し
画面の内容ごと折りたたみを録り、再生できる MP4 を保存します。
空の枠ではなく実写の型
静止画の端末フレームでは足りないときに、ヒンジを物語に合わせます。
プロダクト映像
アプリやサイトが折りたたみ端末で開くカットを書き出します。
公開クリップ
縦動画を入れて折りたたみ、同じファイルを広告や SNS に使います。
クライアント確認
デザインの静止画を両画面に載せたままブラウザを離れません。
3 ステップ
このページのまま。インストール不要。
- 1
デモサイトを折るか、ファイルをドロップ
カスタムは端末を開くと広がるレスポンシブページから始まります。画像や動画をドロップしてクロップ・配置できます。
- 2
端末を折る
スライダーは手に追従し、離すと開きまたは閉じへスプリングします。
- 3
収録して保存
折りたたみ一周を MP4 にします。エンコードはブラウザ内です。
折りたたみモックの使いどころ
静止した端末枠では物語が止まってしまうとき。
アプリの告知
シネマレンダーなしで、折りたたみ上に UI が開くところを見せます。
モーション
動画を入れて拍に合わせて折り、そのカットを書き出します。
締切前の創業者
LP のスクリーンショットを両画面に載せ、今日中にクリップを出します。
関連ダウンロード
3D モックではなく、実写の手のプレートが欲しいとき。
用語
折りたたみスマホのモックとは？
ヒンジ角がライブのパラメータである端末枠です。閉じるとカバー、開くと内側の画面。同じ素材を角度に合わせて両画面へ載せられます。
なぜどのサイトもキャンバスに描けないのか？
CORS ヘッダーが無い限り、ブラウザは他サイトの画素を非公開として扱います。キャンバスへ描くとその画素を読めます。ヘッダーが無ければ埋め込みを断り、アップロードを受けるのが正しい対応です。
出典
-
CORS ヘッダーが無いクロスオリジンの内容はキャンバスへ描けません。他サイトの画素を読むのを防ぐためです。
MDN — CORS ↗ -
WebCodecs はキャンバスや VideoFrame をブラウザ内で符号化でき、フレームをサーバーへ送る必要がありません。
W3C WebCodecs ↗
よくある質問
よくある質問
ご質問はありますか？お気軽にどうぞ！