スクリーンショットモックアップ作成
スクリーンショットをブラウザー、ノートPC、スマートフォン、タブレットのフレームに配置し、背景や影を設定してPNGで書き出せます。
ブラウザー内でローカルに処理されます。ファイルはアップロードされません。
このツールでできること
ただのスクリーンショットを、ランディングページ、README、アプリストアの掲載、SNS投稿に使える見栄えのよい画像に仕上げます。ブラウザーウィンドウ（アドレスバーは編集可能）、ノートPC、スマートフォン、タブレットから選べます。フレームはブラウザー内でベクターパスとして描画されるため、外部画像は使われず、どんなサイズでも輪郭がくっきりしています。
単色、グラデーション、透過の背景、余白、拡大縮小のスライダー、角丸、調整可能なドロップシャドウで見た目を整えられます。出力サイズは内容に合わせて自動で決めることも、1280x800や1200x630といったプリセットに合わせることもできます。デバイスはスクリーンショットの縦横比に合わせたサイズになるため、スクリーンショットが引き伸ばされたり切り取られたりすることはありません。
すべてのフレーム、スタイル設定、密度、プリセットを利用できます。スクリーンショットはローカルで処理され、アップロードされることはありません。
使い方
- 1スクリーンショット（PNG、JPG、WebP、GIF、AVIF）を追加します。
- 2フレーム（ブラウザー、ノートPC、スマートフォン、タブレット）を選びます。ブラウザーのフレームでは、表示したいアドレスを入力します。
- 3背景、余白、拡大縮小、角丸、影を設定します。
- 4出力サイズを選ぶか、自動のままにします。
- 5PNGをダウンロードします。
対応形式
入力：PNG、JPG、WebP、GIF（最初のフレーム）、AVIF。出力：PNG（背景の透過も選択可能）。
プライバシー
このツールはブラウザー上で動作します。入力されたデータはお使いのデバイス上で処理され、当社のサーバーには送信されません。
制限事項
- フレームは汎用的なイラストであり、特定のブランドのハードウェアを正確に再現したものではありません。
- ブラウザーのキャンバスの制限内に収めるため、書き出しは長辺8192 pxまでに制限されています。必要に応じて、2倍・3倍の密度は自動的に下げられます。
- アニメーションGIFは、最初のフレームのみが書き出されます。
- スクリーンショットは元の縦横比のまま配置されます。デバイスの解像度に正確に合わせたい場合は、先にトリミングしてください。
よくある質問
背景を透過にできますか？
はい。「透過」を選んでPNGをダウンロードしてください。影は残ります。透過書き出しはどの密度でも利用できます。
利用できるプリセットはどれですか？
自動、1280x800、1200x630、1080x1080、1920x1080、1080x1920、3840x2160です。
スマートフォンのモックアップが細くなるのはなぜですか？
フレームはスクリーンショットの縦横比に従います。縦長のスマートフォンのスクリーンショットでは、選択した出力サイズの中央に縦長のデバイスが配置されます。
アドレスバーのテキストを変更できますか？
はい、ブラウザーのフレームを選択している場合に変更できます。テキストは飾りにすぎず、ページが読み込まれることはありません。
関連ツール
OGP画像ジェネレーター
タイトル、ロゴ、背景を組み合わせて1200x630のSNSシェア用画像を作成し、PNGでダウンロードできます。すべてブラウザー内で処理されます。
ファビコン生成ツール
1枚の画像から、favicon.ico、各サイズのPNG、Apple Touch Icon、Androidアイコン、Webマニフェスト、HTMLタグまでファビコン一式を作成できます。
カラーパレット生成ツール
基準色から配色パターンを生成し、気に入った色をロックして、WCAGコントラストを確認できます。CSS、Tailwind、JSON、PNGでエクスポートも可能です。
画像からカラーパレット抽出
あらゆる画像から主要な色を抽出し、16進コードをコピーできます。スポイトで正確なピクセルの色を拾い、パレットとしてエクスポートも可能です。