スクリーンショットモックアップジェネレーター

Q: 背景を透明にできますか？

はい。背景として**透明**を選ぶと、PNGはフレームと影の周囲の透過を保ちます。

スクリーンショットを、ブラウザウィンドウ、アプリウィンドウ、スマートフォン、タブレット、ノートPCのフレームに入れ、グラデーションや単色の背景と影を付けてPNGで保存できます。

ここに画像をドロップするか、クリックして選択

クリップボードから画像を貼り付けることもできます（Ctrl+V / ⌘V）

すべてブラウザ内で実行されます。データがアップロードされることはありません。

スクリーンショットモックアップとは？

スクリーンショットモックアップは、スクリーンショットをすっきりした汎用のデバイスやウィンドウの枠に入れます。アドレスバーにURLを表示するライトまたはダークのブラウザウィンドウ、シンプルなアプリウィンドウ、スマートフォン、タブレット、ノートパソコンから選べます。グラデーション、単色、透明の背景、余白、ドロップシャドウを加えて、ランディングページ、ドキュメント、SNS投稿向けのPNGを書き出せます。

スクリーンショットモックアップの使い方

スクリーンショットをドロップ、選択、または貼り付けます。
フレームを選び、ブラウザのフレームではアドレスバーの文字を入力します。
背景（グラデーション、単色、透明）、その色、余白、ドロップシャドウを選びます。
PNGのモックアップをダウンロードします。

例

入力

40×20 screenshot, frame Browser window (light), padding 0, transparent background

出力

40×64 PNG: a 44 px title bar with window dots and address bar above the screenshot

スクリーンショットモックアップを使うべき場面

製品ページ、READMEファイル、変更履歴、プレゼン資料、ツイートでスクリーンショットを洗練された見た目にするときに使います。写実的なデバイスのレンダリングや遠近のモックアップには、専用のデザインツールを使ってください。

スクリーンショットモックアップの仕組み

すべてcanvas上に描画されます。ブラウザとアプリのウィンドウはスクリーンショットのサイズに合わせられ（上にタイトルバーが追加され、サイズはスクリーンショットの幅に応じて拡縮されます）、スクリーンショットはフル解像度のままです。スマートフォン、タブレット、ノートパソコンのフレームは固定の画面アスペクト比（19.5:9、4:3、16:10）を使い、スクリーンショットは画面の幅に合わせて拡縮され、上から描画され、はみ出した部分は切り取られます。フレームは単純な汎用の形状で、特定のブランドのデバイスの複製ではありません。