モックアップ作成（無料）

計算方法

要点：モックアップとは、ロゴやデザインを実際の商品に載せたときの見え方を示すリアルな見本画像です。このツールは、Tシャツ、パーカー、マグカップ、店舗の看板、名刺、ノートPC、スマホ、額装ポスターの8種類の写真に、画像を正しい遠近感で合成し、写真のしわ・影・つやも残します。すべてブラウザ内で動作し、登録・透かし・アップロードは不要です。

使い方

1. ロゴをドラッグするか、ファイルを選ぶか、Ctrl + V で貼り付けます。画像がないときは、入力した文字から見本のロゴを描きます。
2. 商品をタップすると、すぐにプレビューが表示されます。
3. 大きさと位置を調整します。白背景のロゴは「白い背景を消す」をオンのまま、写真やスクリーンショットは「面全体に広げる」をオンにします。
4. 「モックアップを保存」でPNGまたはJPGを保存。「8種類をZIPで保存」なら全商品をまとめて作れるので、提案書やネットショップ、プレゼンに便利です。

計算のしくみ

看板やポスター、画面は写真の中で斜めに写っています。その面の4つの角から射影変換（ホモグラフィー）を求めます。これはPaul Heckbertが1989年にテクスチャマッピングの手法として解説したものです。写真の各画素について、デザイン側の対応位置を逆算し、周囲4画素を混ぜ合わせる（バイリニア補間）ため、ギザギザや継ぎ目が出ません。マグカップは曲面なので、デザインを円柱に巻き付け、両端に向かって縮め、上下の縁は楕円の弧に沿わせます。

貼り付けたようではなく印刷したように見せるため、デザインに商品写真の明るさを掛け合わせます（W3Cの描画モード「乗算」）。布のしわやマグの影がプリントの上にも現れ、陶器の反射も残ります。画面は自ら光るため暗くしません。

できないこと

商品写真は長辺1024〜1216ピクセルです。ウェブサイトやネットショップ、SNSには十分ですが、印刷入稿用のデータではありません。写真はこのサイトのために画像生成モデルでローカルに作成したもので、ブランドは写っていません。モックアップはあくまで見本で、実際の色は印刷方法や素材によって変わります。

プライバシー

ロゴはブラウザ内だけで処理され、送信されることはありません。保存されるのは設定（商品・大きさ・文字）だけで、画像は保存しません。

関連ツール：ロゴの背景を透過、写真の写真編集。

よくある質問

出典・根拠

• Heckbert (1989) – Fundamentals of Texture Mapping and Image Warping, UC Berkeley UCB/CSD-89-516 (projektive Abbildung Quadrat → Viereck)
• W3C – Compositing and Blending Level 1: multiply B(Cb, Cs) = Cb × Cs
• ITU-R BT.709 – Luminanz Y = 0,2126 R + 0,7152 G + 0,0722 B
• MDN – CanvasRenderingContext2D.getImageData() / putImageData()
• W3C – Web Share API
• ITU-T T.81 / ISO/IEC 10918-1 – JPEG
• W3C – Portable Network Graphics (PNG) Specification
• Google for Developers – An image format for the Web (WebP)
• AOMedia – AV1 Image File Format (AVIF)
• MDN – Image file type and format guide
• MDN – HTMLCanvasElement.toBlob()

更新日：2026年10月1日 · 編集方針