このデバイスモックアップ作成ツールは無料ですか？

はい。すべてのデバイス、色、角度、書き出しサイズが無料で、登録不要、透かしも入りません。

iPhoneやiPadのモックアップは作れますか？

現在の人気モデルに似たモダンなスマホやタブレットのモックアップを作れます。アプリやWebサイトのプレビューにはたいていこれで十分です。モデルは汎用的なもので、コードで描かれています。Appleの公式製品画像ではなく、このツールはAppleとは関係ありません。

Webサイトやブラウザのモックアップは作れますか？

はい。ブラウザを選ぶと、アドレスバー付きのデスクトップブラウザウィンドウにサイトのスクリーンショットを配置できます（自分のドメインを入力し、ツールバーのライト/ダークを選べます）。デスクトップを選ぶと、スタンド付きの大型ディスプレイに表示できます。

透過PNGのモックアップはどう作りますか？

背景を「透過」、形式をPNG（またはWebP）にしてダウンロードします。影はやわらかい半透明のピクセルとして残るので、モックアップを置く場所に自然になじみます。

デバイスを回転させるには？

X・Y・Zのスライダーを使うか、−180°から180°までの正確な角度を入力します。プレビュー内でデバイスをドラッグすることもでき（Shiftを押すと平面内で回転）、プレビューをクリックして矢印キーでも操作できます。プリセットでよく使うビューに一発で切り替えられ、リセットで既定の角度に戻ります。

どのくらいの解像度で書き出せますか？

長辺1080、2048、4096ピクセル、または最大8192ピクセルの任意サイズで、1:1、4:5、16:9、9:16、4:3から選べます。そのサイズで新たにレンダリングされるので、拡大ではなくくっきりした仕上がりになります。

スクリーンショットが画面で切れてしまいます。全体を表示するには？

画面へのフィットを「塗りつぶし」から「全体表示」に切り替えると、好きな色の余白付きで画像全体が表示されます。「塗りつぶし」では、配置ボタンで縦長スクリーンショットの上・中央・下のどこを残すかを決められます。

スクリーンショットはアップロードされますか？

いいえ。3DシーンはブラウザのWebGLで動作し、画像がデバイスの外に出ることはありません。

WebGLが使えないと表示されます。どうすればいいですか？

3D表示にはWebGLが必要です。ブラウザの設定でハードウェアアクセラレーションを有効にするか、グラフィックドライバを更新するか、別のブラウザを試してください。Chrome、Edge、Firefox、Safariの最新版ならどれでも対応しています。

3Dデバイスモックアップ作成【無料】スマホ・PC

スクリーンショットをリアルな3Dデバイスに、どんな角度でも

スクリーンショットやデザインをドロップすると、3Dのスマホ、タブレット、ノートPC、デスクトップディスプレイ、ブラウザウィンドウの画面に表示されます。スライダー、角度の数値入力、矢印キー、またはドラッグでX・Y・Z軸にそってデバイスを回転させ、デバイスの色、背景、やわらかい影を選んだら、最大8192ピクセルのくっきりしたPNG、JPEG、WebPで書き出せます。自分のスライドやランディングページに配置したいなら背景を透過にもできます。デバイスはコードでモデリングされ、ブラウザ内のWebGLでレンダリングされるため、何もアップロードされず、透かしも入りません。

デバイスモックアップの作り方

1スクリーンショットをページにドロップするか、ファイルを選ぶか、Ctrl/⌘ + V で貼り付けます。それまではサンプルのアプリ画面が表示されます。
2スマホ、タブレット、ノートPC、デスクトップ、ブラウザから選びます。色を選ぶか、ブラウザウィンドウならツールバーのライト/ダークと表示するアドレスを選びます。スマホとタブレットは横向きにでき、ノートPCの画面は好きな角度に開けます。
3プレビュー上部のバーからビューを選び（ヒーロー ¾、正面、左/右に傾ける、アイソメトリック、平置き）、ビュータブで微調整するか、プレビュー内でデバイスをドラッグします。
4背景（透過、単色、グラデーション、スクリーンショット自体のぼかし）、影、光の向きを設定します。
5アスペクト比、サイズ、形式を選び、画像をダウンロードするかクリップボードにコピーします。

スマホ、タブレット、ノートPC、デスクトップ、ブラウザの3Dモックアップ

平面のモックアップテンプレートでは角度がひとつに固定されます。ここではデバイスが本物の3Dモデルなので、App Store風のスクリーンショットには正面から、ヒーロー画像にはダイナミックな斜め45度から、SNS投稿には平置きで見せる、といったことが同じ画像から数秒でできます。

スマホのモックアップは、ピル型のカメラ穴があるモダンな全面ディスプレイ、磨き上げた金属フレーム、背面のトリプルレンズカメラを備えています。タブレットのモックアップは最近のiPadクラスのタブレットのような細く均一なベゼル、ノートPCのモックアップはフルキーボード、トラックパッド、閉じた状態から完全に倒した状態まで開く画面を備えています。いずれも現在の人気デバイスに似た汎用デザインで、iPhoneモックアップ、iPadモックアップ、MacBookモックアップを探しているときにも役立ちますが、公式の製品画像ではなく、このツールはAppleや他のメーカーとは一切関係ありません。

ブラウザウィンドウでWebサイトのモックアップ

WebサイトやWebアプリにはブラウザを選びましょう。スクリーンショットがシンプルなデスクトップブラウザウィンドウのページ領域いっぱいに表示され、ウィンドウボタンと、入力したドメインを表示するアドレスバーが付きます。ツールバーはデザインに合わせてライトとダークから選べ、ウィンドウはデバイスと同じようにどんな角度でも浮かせられます。正面向きにすれば、すっきりした平面のWebサイトモックアップになります。

実機のほうがいい場合は、デスクトップを選ぶと、細いベゼルの大型ディスプレイをアルミスタンドに載せた形でページが表示され、スタジオモニターで見るサイトのようになります。塗りつぶしと上を組み合わせれば、縦長のフルページスクリーンショットでも、訪問者が見るのと同じ最初の画面が表示されます。

操作項目

回転 X・Y・Z: Xはデバイスを手前や奥に傾け、Yは左右に向きを変え、Zは画面の平面内で回転させます。それぞれ−180°から180°まで設定でき、数値も入力できます。プレビューではドラッグでX・Y回転、<kbd>Shift</kbd>を押しながらドラッグでZ回転、またはプレビューにフォーカスして矢印キー（<kbd>Shift</kbd>で15°刻み）、Zは<kbd>Q</kbd>/<kbd>E</kbd>、リセットは<kbd>R</kbd>です。
ズームと視野角: ズームはデバイスがフレームをどれだけ占めるかを変えます。視野角は遠近感を決めます。広角にすると近くで構えたスマホカメラのように奥行きが強調され、ごく狭くすると製品レンダリングやアイソメトリックイラストのようにほぼ平行投影に見えます。
画面へのフィット: 塗りつぶしは画面全体を覆い、はみ出た部分を切り取ります。上に揃えれば縦長のフルページスクリーンショットの冒頭を表示できます。全体表示は好きな色の余白付きで画像全体を表示し、引き伸ばしは画面の形に合わせて画像をゆがめます。
ガラスの反射: カバーガラスに映るスタジオ照明のさりげない反射で、画面がシールではなくガラスに見えるようになります。画面の色を完全にフラットにしたいときはオフにします。
背景と影: 透過背景、単色、2色グラデーション、スクリーンショット自体のやわらかいぼかしで書き出せます。影はデバイスの下の床に落とすこともでき（机の上のノートPCに合います）、背後の壁に落とすこともできます（スマホが浮いているようなドロップシャドウになります）。
ライティング: デバイスはやわらかなスタジオ環境で照らされ、金属やガラスにリアルな映り込みが生まれます。光の角度でライトと反射がデバイスの周りを回り、強さでシーン全体が明るくも暗くもなります。

書き出しサイズと形式

画像は書き出すサイズで改めてレンダリングされます。長辺1080、2048、4096ピクセル、または256〜8192の任意のサイズで、正方形1:1、縦長4:5、横長16:9、ストーリー9:16、4:3から選べます。プレビューを拡大するのではなく新たにレンダリングするので、画面の大きさに関係なく、どのサイズでも輪郭はくっきりしたままです。

PNGは可逆圧縮で透過を保持するため、Webサイト、スライド、デザインファイルに配置するモックアップに最適です。WebPも透過を保持し、ファイルサイズがずっと小さくなります。JPEGは透過に対応していないため、透過背景は白で塗りつぶされます。コピーはPNGをクリップボードに入れ、Figma、Keynote、Slack、ドキュメントにすぐ貼り付けられます。

モックアップをきれいに仕上げるコツ

スクリーンショットはデバイス本来の解像度で書き出しましょう（スマホなら約1179 × 2556、デスクトップなら2560 × 1600など）。4Kのモックアップでも画面がくっきりします。
斜め45度の角度で、回転と同じ側から光を当てると最も自然に見えます。アプリストアの掲載画像には正面ビューが最適です。
ランディングページのヒーローには透過PNGを使い、ページ自体の背景を透けて見せましょう。
先にスクリーンショットを切り抜いたりサイズを変えたりしたい場合は、画像トリミングや画像リサイズを、完成したモックアップを各プラットフォームに合わせるにはSNS画像リサイズを使いましょう。

デザインを外部に出さない無料モックアップ作成ツール

未公開のアプリ画面やクライアントの仕事を、他人のサーバーにアップロードするべきではありません。ここではスクリーンショットの読み込み、描画、レンダリングがすべてWebGLでお使いのデバイス上で行われ、どこにも送信されません。アカウント不要、透かしなし、作成できるモックアップの数にも制限はありません。設定（デバイス、角度、背景、書き出しオプション）はこのブラウザに保存されますが、画像は保存されません。

よくある質問

このデバイスモックアップ作成ツールは無料ですか？: はい。すべてのデバイス、色、角度、書き出しサイズが無料で、登録不要、透かしも入りません。
iPhoneやiPadのモックアップは作れますか？: 現在の人気モデルに似たモダンなスマホやタブレットのモックアップを作れます。アプリやWebサイトのプレビューにはたいていこれで十分です。モデルは汎用的なもので、コードで描かれています。Appleの公式製品画像ではなく、このツールはAppleとは関係ありません。
Webサイトやブラウザのモックアップは作れますか？: はい。ブラウザを選ぶと、アドレスバー付きのデスクトップブラウザウィンドウにサイトのスクリーンショットを配置できます（自分のドメインを入力し、ツールバーのライト/ダークを選べます）。デスクトップを選ぶと、スタンド付きの大型ディスプレイに表示できます。
透過PNGのモックアップはどう作りますか？: 背景を「透過」、形式をPNG（またはWebP）にしてダウンロードします。影はやわらかい半透明のピクセルとして残るので、モックアップを置く場所に自然になじみます。
デバイスを回転させるには？: X・Y・Zのスライダーを使うか、−180°から180°までの正確な角度を入力します。プレビュー内でデバイスをドラッグすることもでき（Shiftを押すと平面内で回転）、プレビューをクリックして矢印キーでも操作できます。プリセットでよく使うビューに一発で切り替えられ、リセットで既定の角度に戻ります。
どのくらいの解像度で書き出せますか？: 長辺1080、2048、4096ピクセル、または最大8192ピクセルの任意サイズで、1:1、4:5、16:9、9:16、4:3から選べます。そのサイズで新たにレンダリングされるので、拡大ではなくくっきりした仕上がりになります。
スクリーンショットが画面で切れてしまいます。全体を表示するには？: 画面へのフィットを「塗りつぶし」から「全体表示」に切り替えると、好きな色の余白付きで画像全体が表示されます。「塗りつぶし」では、配置ボタンで縦長スクリーンショットの上・中央・下のどこを残すかを決められます。
スクリーンショットはアップロードされますか？: いいえ。3DシーンはブラウザのWebGLで動作し、画像がデバイスの外に出ることはありません。
WebGLが使えないと表示されます。どうすればいいですか？: 3D表示にはWebGLが必要です。ブラウザの設定でハードウェアアクセラレーションを有効にするか、グラフィックドライバを更新するか、別のブラウザを試してください。Chrome、Edge、Firefox、Safariの最新版ならどれでも対応しています。