デバイスモックアップ作成ツール

デバイスモックアップ作成ツール

デバイスモックアップ作成ツールは、スクリーンショットを実機フレームにドロップします。ダイナミックアイランド付きのiPhone、Androidスマホ、iPad、MacBook Pro、タブストリップとアドレスバー付きのブラウザウィンドウ、スタンド付きのデスクトップモニターです。どのフレームもそのデバイスの実際の画面比率で描画されるので、書き出したものはスクリーンショットが実機でどう見えるかそのものです。フレームはご自身のブラウザタブ内のキャンバスに描かれるため、未公開アプリや社内ダッシュボードのスクリーンショットがマシンの外に出ることはありません。

いちばんよく使われる3つのフレーム

フレームは読み手への近道です。スクリーンショットの中身を一字も読む前に、スマホアプリなのか、ウェブページなのか、デスクトップツールなのかが一目で分かります。

切り取りメーター：多くのモックアップツールが見落とす部分

デバイス画面の形は決まっています。iPhoneの画面は1179×2556、およそ9:19.5で、スクリーンショットがまさにその比率であることはほとんどありません。多くのモックアップ生成ツールは、画面が埋まるまで画像を静かに拡大し、はみ出した部分を捨てます。料金表の下端が消えていることに気づくのは、投稿したあとです。

このツールは測ります。画面いっぱいに表示モードでは、フィットボタンの下のメーターがフレームに隠れているスクリーンショットの正確な割合を示し、その数が増えるにつれてバーが緑から赤に変わります。多すぎると感じたら、逃げ道は2つです。

• パン。スライダーはあふれた軸に沿って見える範囲を動かすので、中央クロップを受け入れる代わりに、ヘッダー、中央、フッターのどれを残すかを選べます。
• 全体を収める。スクリーンショットの全ピクセルが画面内に入るまで縮小し、残った帯を選んだ色で埋めます。上下または左右に帯は見えますが、切り取りはありません。

目安：切り取りが約8%未満なら読み手には見えず、8%から25%は被写体を残すようにパンしていれば問題なく、25%を超えたらデバイスのアスペクト比で撮り直すか、「全体を収める」に切り替えてください。

どのフレームを、どの解像度で

そのピクセルサイズ以上のスクリーンショットは、どの書き出しサイズでもくっきり残ります。小さいものは拡大され、最初に崩れるのはスクリーンショット内の小さな文字のアンチエイリアスです。

デバイスモックアップ作成ツールの使い方：ステップバイステップ

1. スクリーンショットを追加：PNGまたはJPGをアップロードパネルにドロップするか、クリックして参照するか、Ctrl+Vでクリップボードから直接貼り付けます。
2. デバイスフレームを選ぶ：iPhone、Android、iPad、MacBook、ブラウザ、モニター。スマホとタブレットのフレームは縦向きと横向きも切り替えられます。
3. 切り取りメーターを確認：隠れすぎている場合は、パンスライダーをドラッグするか「全体を収める」に切り替えて、何も失わないようにします。
4. フレームを整える：フレームの色、背景、余白、シャドウ、反射を設定します。ブラウザフレームでは、タブのタイトルとアドレスも自分で入力します。
5. 書き出し：書き出しサイズを選び、「PNGをダウンロード」でモックアップを保存するか、「画像をコピー」で投稿に貼り付けます。

実践的なヒント

• できるときはデバイスのアスペクト比でスクリーンショットを撮る。キャプチャ前にブラウザウィンドウを1179×2556にリサイズすると、切り取りメーターは0%になり、モックアップはピクセルパーフェクトです。
• URLが重要なときはブラウザフレームを使う。アドレスバーに自分のドメインを入れると、キャプションを足さずにブランドが画像に入ります。
• 余白は6%から12%に保つ。少ないとデバイスが投稿の端に触れ、多いとフィードで画面が読めなくなります。
• フレーム色をスクリーンショットに合わせる。ダークモードのスクリーンショットにはスペースブラック、明るいものにはシルバーまたはチタニウム。ブラウザのクロームも同じ選択に自動で従います。
• 文字が多い画面では反射を下げる。控えめな光沢はガラスに見え、強いものはストック写真に見え、コピーを隠します。
• スライド用には透明で書き出す。背景の「なし」は、シャドウ付きの浮かぶデバイスになり、どのデッキやヒーローセクションにも置けます。

プライバシー

すべてはHTML5 canvas APIを通じてブラウザタブ内で起きます。スクリーンショットはローカルのオブジェクトURLから読み込まれ、フレームに描画され、ブラウザ自身がPNGにエンコードします。画像のアップロード、保存、送信は一切ありません。ページの読み込み後は、ネットワーク接続がなくてもツールは動作し続けます。

よくある質問

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

いいえ。デバイスフレームはご自身のブラウザタブ内のHTML5 canvas APIで描画され、スクリーンショットはローカルのオブジェクトURLから読み込まれます。どこにも送信されないので、未公開アプリ、社内ダッシュボード、クライアント案件のモックアップも自分のマシンに留まります。ページの読み込み後は、ネットワーク接続がなくてもツールは動作し続けます。

どのデバイスフレームが使えますか？

6種類です。ダイナミックアイランド付きのiPhone、パンチホールカメラ付きのAndroidスマホ、iPad Pro、ノッチとベース付きのMacBook Pro、タブストリップとアドレスバー付きのブラウザウィンドウ、スタンド付きのデスクトップモニターです。各フレームはそのデバイスの実際の画面比率を使うので、ここで作ったモックアップは実機での見え方と一致します。

スクリーンショットの形がデバイス画面と違う場合、どうなりますか？

それが切り取りメーターの役割です。「画面いっぱいに表示」はスクリーンショットを画面全体が埋まるまで拡大し、はみ出した部分を切り取り、メーターが隠れた正確な割合を示します。パンスライダーで切り取られた軸に沿って見える範囲を動かし、重要な部分を残せます。「全体を収める」はスクリーンショット全体が画面内に入るまで縮小し、残った帯を選んだ色で埋めるので、何も失われません。

スクリーンショットの解像度はどれくらいがよいですか？

フレームに合わせます。iPhoneは1179×2556、Androidスマホは1080×2400、iPadは1668×2388、MacBookは3024×1964、ブラウザウィンドウは1440×900、モニターは2560×1440です。そのサイズ以上ならシャープなままです。小さいスクリーンショットでも使えますが、拡大されるためテキスト周辺のエッジが柔らかく見えます。

透明な背景でデバイスを書き出せますか？

はい。背景スウォッチの「なし」を選ぶと、デバイス周りの余白は色ではなくアルファとして書き出され、フレーム、画面、ドロップシャドウは描画されたままです。「PNGをダウンロード」はその透明度を保持します。スライド、ヒーローセクション、ページ自身の背景を透けさせたいときに最適です。

ブラウザフレームがダークになるのはなぜですか？

ブラウザのクロームは選んだフレーム色に従います。「スペースブラック」を選ぶとタブストリップ、ツールバー、アドレスバーがダークテーマになり、ダークモードのスクリーンショットに合います。明るいフレーム色ならライトテーマになります。タブタイトルとアドレスは普通のテキスト欄なので、製品名とドメインを画像に入れられます。

画像ツール:

• 画像に線を追加
• 画像にテキストを追加
• アスペクト比電卓 新しい
• 画像を円形に切り抜き 新しい
• コラージュメーカー 人気
• 点つなぎジェネレーター 人気
• EXIFデータビューア・削除ツール 新しい
• GIF を反転
• 画像を反転
• GIFメーカー
• 画像モザイクツール
• 画像圧縮ツール
• 画像トリマー
• 画像エンハンサー
• 画像リサイズ
• 画像回転ツール 人気
• 画像分割ツール 人気
• 画像からASCIIアートへの変換器 新しい
• 画像からSVGトレーサー 新しい
• Lorem Picsum / プレースホルダー画像ジェネレーター 新しい
• 📷 OCR / 画像からテキスト抽出 新しい
• 印刷サイズ・解像度電卓 (DPI/PPI)
• 角丸画像ジェネレーター 新しい
• スクリーンショット装飾ツール 新しい
• デバイスモックアップ作成ツール 新しい
• 画像に影を追加 新しい
• 画像に枠を追加 新しい