スクリーンショットを、紹介画像や手順図に。
アプリの画面を並べたり、小さなボタンを拡大して見せたり。スマホの枠・背景・注釈を組み合わせて、伝えたい内容に合わせた一枚を作れます。
手順を伝える画像にフレームや拡大枠を手軽に加えたい、という思いから作ったツールです。ここでは、基本の作り方から用途別の作例まで紹介します。
iPhone モックアップの作り方
テンプレートを選び、画像を入れて、PNGで保存。まずは1枚のスクリーンショットで試してみましょう。
テンプレートを選ぶ
「テンプレート」で画面の数と並べ方を選びます。設定パネルはパソコンでは右側、スマートフォンではプレビューの下にあります。あとから別のテンプレートにも切り替えられます。
スクリーンショットを入れる
最初の画面では「画像をアップロード」、ドラッグ＆ドロップ、コピーした画像の貼り付けで追加できます。最初はフレームなしで表示されます。画面上の「画像の大きさ」で全体を拡大・縮小し、外枠を付けたいときに「フレームを選ぶ」から選択してください。テンプレートを選んだあとなら空のフレームからも追加でき、複数の画像は「まとめて追加」から読み込めます。差し替えるときは「画像を調整」にして対象の画面を押すか、下の「使用する画像」から選びます。
見た目を整えてPNGで保存する
背景や配置を整え、必要なら「注釈」で文字や矢印を加えます。仕上がったら「PNGを書き出す」で保存してください。背景なしの画像が必要なときは、先に「背景透過」をオンにします。
iPhone 17・17 Pro・16・15の画面比率に合わせて作成
「デバイス」タブで、iPhone 17、iPhone 17 Pro、iPhone 16、iPhone 15を選べます。選んだ機種の画面比率が、配置したすべてのiPhoneに適用されます。
機種別の画面比率を参考にした簡易テンプレートです。外枠は共通の描画で、実機の寸法・色・細部を再現した公式素材ではありません。iPhone 17と17 Pro、iPhone 16と15はそれぞれ同じ画面比率なので、このツールでの正面の見た目も共通です。
スクリーンショットを並べて、位置と背景を調整
見せたい画面の数と役割に合わせて選びましょう。迷ったときは「1台・中央」から始めて、必要に応じて台数を増やすと整理しやすくなります。
見せたい画面に合わせて、6種類の配置から選ぶ
画像の位置と、フレームの位置を別々に調整
「画像を調整」では、画面内をドラッグして見せたい部分を動かせます。中央付近でガイドに吸着し、離すと自由に動かせます。動かせない方向は「デバイス」の「画像の拡大」を上げてください。画像全体を見せたい場合は「全体を表示（余白あり）」に切り替えます。
「配置を移動」では、フレームごと動かせます。「すべて選択」でまとめて移動し、画像番号で一部だけを選ぶこともできます。「左右中央」「上下中央」は、選んだフレームをひとまとまりとして揃えるボタンです。ドラッグ時も中央で吸着し、ガイドから離すと解除されます。
画像に背景を追加して、雰囲気を整える
新しく始めるときの背景は暖かみのあるアイボリーです。「背景」で単色・グラデーション・透明に切り替えたり、手元の画像を背景にしたりできます。保存済みの下書きを開くと、その作品で選んだ背景が戻ります。
文字・矢印・拡大枠で操作手順をわかりやすく
操作説明では、見せたい場所が小さくて伝わりにくいことがあります。「注釈」の拡大枠で一部分を大きく見せ、矢印で注目する場所を示し、番号で順番を伝えられます。
拡大したい場所と、拡大枠の置き場所を動かす
「拡大枠」を追加すると、拡大元と拡大表示の枠が現れます。「注釈」タブのまま、それぞれをドラッグして調整してください。丸い枠・四角い枠を選び、拡大率や大きさも変えられます。
タイトルや短い説明を添える
「文字」で文章を入力し、大きさと色を調整できます。文字をドラッグすると、キャンバスの左右・上下の中央付近で自動で揃います。ガイドから離すと自由に配置でき、元に戻すこともできます。選択枠とガイドは書き出したPNGには入りません。
使い方の例は、下の番号・矢印・拡大枠を組み合わせた手順図で確認できます。
背景透過PNG・スマホの枠だけを保存
「PNGの書き出し」にある「背景透過」をオンにしてから「PNGを書き出す」を押すと、デバイスの外側が透明になります。スクリーンショットと注釈は残るので、スライドやバナー、ブログのアイキャッチに重ねて使えます。
スマホ画面の枠だけを書き出す
「枠のみ書き出し」は、外側だけでなく画面の中も透明なPNGを保存します。背景・スクリーンショット・注釈は含まれず、スマホの画面枠やフレーム画像として使えます。別のツールでは、用意した画像の上にフレームを重ねてください。
カメラ部分と設定した影は残ります。影が不要なら「デバイス」の「影の濃さ」を0%にしてください。「フレームなし」を選んでいるときは、枠のみの書き出しは使えません。
アプリ紹介・ブログ・SNSに使える作成例
同じスクリーンショットでも、並べ方や説明の付け方で伝わる内容が変わります。以下はこのツールで実際に書き出した作例です。フレーム内のアプリ画面は説明用の架空のサンプルで、実在するサービスや利用実績を示すものではありません。
アプリ紹介：3つの画面を一枚で見せる
ホーム、一覧、詳細の画面を並べると、アプリの流れを紹介できます。機能ごとに別の画像を見せたいときにも使いやすい配置です。
ブログの操作説明：注目する場所を拡大する
スクリーンショット全体を残しながら、押してほしい場所を拡大。番号と矢印を添えると、記事の手順説明と画像を対応させやすくなります。
SNS・アイキャッチ：タイトルと余白で見せる
一つの画面を主役にして、上に短いタイトルを配置します。背景を落ち着いた色にすると、画面の内容と見出しを読み取りやすくできます。
無料で使える機能と対応形式
登録不要・透かしなしで使えます。画像の読み込みから配置、PNGの書き出しまで無料です。
| 読み込める画像 | PNG・JPEG・WebP。1枚20MB・5,000万画素まで |
|---|---|
| 同時に配置できる画像 | 最大3枚 |
| 書き出し | PNG。背景透過・枠のみの書き出しに対応 |
| カスタムサイズ | 幅・高さは各320〜4096px、合計1,200万画素まで |
サイズはプレビュー上部で選べます。用途に合う縦横比を選ぶか、「カスタムサイズ」で幅と高さを指定してください。各ストアの提出規定への適合を保証する設定ではありません。
画像はブラウザ内で処理・下書きも端末内に保存
画像の編集とPNGへの変換は、お使いのブラウザ内で行います。このツールの画像処理機能は、選んだ画像をサーバーへ送信しません。
画像・背景・文字・配置は、このブラウザに下書きとして自動保存されます。「下書きを保存しました」の表示後は、同じブラウザ・同じサイトで開き直して続けられます。別の端末には同期されません。ブラウザのデータ削除や保存容量の制限などで失われる場合があるため、必要な完成画像はPNGで保存してください。
Figmaを使わず、ブラウザでモックアップを作成
スクリーンショットにフレームを付けて並べるなら、このページで作成からPNGの保存まで進められます。Figma用のファイルやプラグインを用意する必要はありません。
PSDや編集可能なFigmaデータの読み込み・書き出しには対応していません。ほかのデザインツールで続きを作る場合は、書き出したPNGを1枚の画像として配置します。デバイス1台ごとの大きさ・傾きの指定、フォントの持ち込みにも対応していません。
うまくいかない時の対処法
| 状況 | 対処法 |
|---|---|
| 画像がぼやける | 解像度の高い元画像を使い、拡大しすぎないようにします。小さい画像を大きくしても、細部は増えません。 |
| 画面の端が切れる | 追加した画像は画面いっぱいにするため端が切り取られます。「デバイス」で対象の画像を選び、「全体を表示（余白あり）」にします。拡大率を100%にして位置を調整すると、全体を確認しやすくなります。 |
| デバイスが小さい | 「テンプレート」の「配置を調整」で「大きさ」を上げます。 |
| 3台が重なる・傾く | 「デバイスの間隔」を広げるか、「まっすぐに戻す」でテンプレートの傾きもまとめて戻します。 |
| 画像を読み込めない | PNG・JPEG・WebPか確認してください。1枚20MB・5,000万画素を超える場合は、小さくしてから追加します。 |
| 背景が白く見える | 「背景透過」をオンにしてPNGを書き出します。閲覧アプリによっては透明部分が白く表示されるため、色付きの背景に重ねて確かめてください。 |
iPhone モックアップ作成のよくある質問
無料で使えますか？登録や透かしはありますか？
はい、無料で使えます。アカウント登録は不要で、書き出した画像に透かしも入りません。
iPhone 17の公式モックアップ素材ですか？
公式素材ではありません。iPhone 17・17 Pro・16・15の画面比率を参考にした簡易テンプレートです。外枠は共通の描画で、実機の細部を再現したものではありません。
画像を切り取らずに画面全体を表示できますか？
「デバイス」で対象の画像を選び、「全体を表示（余白あり）」に切り替えて、拡大率を100%にします。画像と画面の縦横比が異なる場合は余白ができます。
透明背景のPNGやPSDで保存できますか？
「背景透過」をオンにすると、背景が透明なPNGで保存できます。PSDには対応していません。PNGは、ほかのデザインツールで1枚の画像として重ねて使えます。
作り直したいときは、どの削除ボタンを使いますか？
「すべて削除」は画像・枠・文字・注釈・背景を消して、サイズを保った空のキャンバスにします。「画像をすべてクリア」は画像だけを消し、背景・配置・文字を残します。どちらも元に戻せます。「下書きを削除」は保存済みのデータだけを消す操作で、表示中の編集内容は残り、再び編集すると自動保存を再開します。
途中で閉じても、続きから編集できますか？
「下書きを保存しました」と表示されていれば、同じブラウザ・同じサイトで開き直して続けられます。プライベートモードや保存容量の制限、ブラウザのデータ削除で復元できなくなる場合があります。クラウド同期には対応していません。