Back
デバイスモックアップ
画像をデバイスフレームに合成してモックアップを作成
EN
shadcn/ui
📱 デバイスフレーム画像をアップロード
デバイス画像を選択
💡 透過PNG推奨。画面領域を自動検出します
🖼️ 画面画像をアップロード
画面画像を選択
クリップボードから貼り付け
💡 スクリーンショットやアプリ画面などをアップロード
🎨 背景色
プレビュー
(Shift押下で縦横比維持)
コピー
📥 ダウンロード
📱 テンプレート
テンプレート1
テンプレート2
テンプレート3
テンプレート4
テンプレート5
💡 使い方
1.
デバイステンプレートを選択(または独自のデバイス画像をアップロード)
2.
画面画像をアップロード、または
Ctrl+V
で貼り付け
3.
画面画像を調整:
•
移動
: 画像をドラッグ
•
拡大縮小
: 角・辺をドラッグ(Shift押下で縦横比維持)
•
回転
: 回転ハンドルをドラッグ
•
パース変換
: 四隅の◯をドラッグ
4.
背景色を変更(オプション)
5.
「コピー」でクリップボードにコピー、または「📥 ダウンロード」で保存
🔍 カスタムデバイス画像について
• 透過PNG形式を推奨(画面領域が透明な画像)
• 画面領域(透明部分)を自動検出します
• カスタムテンプレートはホバーで削除ボタン表示