FIRST CHTools

FIRST CH TOOLS / 画像 / 72 DEVICE MOCKUP 3D

3Dデバイスモックアップジェネレーター

スクリーンショットをスマホ・ノートPCの3Dモデルの画面にはめ込み、SNSの投稿やLPにそのまま使えるPNGにします。角度・シーン・背景色はプリセットから選ぶだけ。描画はお使いのブラウザ（WebGL）で行い、画像はサーバーへ送信しません。

ここにスクリーンショットをドラッグ&ドロップ またはクリックしてファイルを選択／⌘V・Ctrl+V で貼り付け（PNG / JPEG / WebP / GIF）

端末

本体の色

角度

シーン

背景色

書き出し

How to Use

  1. スクショを入れるドラッグ&ドロップ、クリックして選択、または ⌘V / Ctrl+V で貼り付けます。縦長ならスマホ、横長ならノートPCに自動で切り替わります。最初は見本の画面が入っています。
  2. プリセットを選ぶ端末と本体の色、角度・シーン・背景色をボタンで選びます。貼る先に合わせて比率（16:9・1:1・9:16 など）も選びます。
  3. 書き出す「PNGで保存」でダウンロード、「画像をコピー」でクリップボードへ。背景を「透明」にすると、影ごと切り抜いたPNGになります。

About This Tool

アプリやWebサイトの紹介画像では、画面のスクショをそのまま並べるより、実物の端末に映っている姿で見せた方が「何の画面か」が一目で伝わります。本ツールは three.js（WebGL）でスマホとノートPCの3Dモデルを描き、その画面にスクショを貼って撮影します。操作はプリセットを選ぶだけに絞っているので、3Dソフトの知識は要りません。端末は特定メーカーの製品を写したものではない汎用の形です。

画面の縦横比はスマホが約9:19.5（iPhoneのスクショとほぼ同じ）、ノートPCが16:10です。比率の違う画像は「上端から切り抜く」（縦に長いページ全体のスクショ向け）・「中央で切り抜く」・「全体を収める」から合わせ方を選べます。シーンの「浮かせる」は端末を床から少し離して影をぼかし、「壁の前」は背後の壁に影を落とします。「透明」を選ぶと背景を塗らずに影だけを半透明で残すので、LPのデザインの上へそのまま重ねられます。

描画も書き出しもブラウザの中だけで行い、画像が外部サーバーへアップロードされることはありません（3D描画には WebGL が要ります）。書き出せるのは静止画（PNG）だけで、動画のモックアップ化・保存・共有の機能はありません。平面のまま背景と影を付けるなら スクリーンショット枠装飾、媒体ごとの規定サイズに切り抜くなら SNS画像サイズ一括書き出し、書き出したPNGを軽くするなら 画像→WebP一括変換 が使えます。

設定はURLパラメータでも渡せます（画像の選択は手元で行います）。例: /device-mockup-3d/?device=laptop&angle=left&scene=float&bg=navy&finish=silver&ratio=1:1（device=phone,laptop / angle=front,left,right,high,flat / scene=floor,float,wall,none / bg=paper,white,mist,sand,sakura,leaf,sky,vermilion,navy,ink,transparent または色コード（%23付き） / finish=black,silver,white,blue / fit=top,center,contain / ratio=16:9,1.91:1,4:3,1:1,4:5,9:16 / scale=1,2）。

Other Tools