デザインモックアップのマルチスクリーン表示
アプリやWebデザインの複数画面を1枚のパノラマ画像に結合し、レビューやポートフォリオに活用します。
クライアントへのプレゼンでもDribbbleやBehanceへの投稿でも、FigmaやSketchから書き出した複数画面を1枚にまとめる作業はデザイナーの日常業務です。
問題
デザイナーはレビュー会議で、アプリの複数画面やWebサイト全体の流れを一目で見せたい場面が多くありますが、FigmaやSketchは画面ごとに個別のファイルとして書き出されます。バラバラの画像をクライアントや関係者が見比べながら遷移ロジックを理解するのは難しく、Photoshopで手動結合すると時間がかかり、画面サイズが異なる場合は比率がずれたりぼやけたりすることもあります。
解決策
Auto Merge Imagesなら、書き出した画面をいくつでもブラウザに直接ドラッグするだけで結合できます。Photoshopなどのソフトは不要で、サーバーへのアップロードも発生しません。ドロップした順に自動配置され、元の解像度を保持したまま、画面間の間隔、背景色、レイアウトの方向（横並びか縦並び）を自由に調整できるので、数秒でクライアントレビューやポートフォリオ用の完成度の高い1枚が作れます。
使い方
- 1FigmaやSketchから全画面を書き出す
- 2フローの順番通りにドラッグ
- 3間隔・背景色・並び方向を調整
- 4プレビューして高解像度画像をダウンロード
- 5クライアントレビューやポートフォリオに使用
このツールを使う理由
- ✓デザインソフト不要、ブラウザだけで完結
- ✓元の解像度を維持、拡大表示しても劣化しない
- ✓画面数に制限なし、何枚でも結合可能
- ✓処理はローカルで完結、サーバーにアップロードされない
- ✓完全無料、透かしなし、使用回数制限なし
よくある質問
モックアップ同士の間隔は調整できますか？
はい、各画面の間隔と背景色は自由に調整できるので、セクションを区別したりポートフォリオのスタイルに合わせたりできます。
クライアント提出に適した書き出し形式は？
文字や輪郭を鮮明に保ちたい場合はPNGがおすすめです。メール添付でファイルサイズを抑えたい場合はJPGでも十分です。
スマホとPCなど異なるサイズの画面を一緒に結合できますか？
できます。デフォルトで比率を保って配置されますが、個別にサイズを調整してスマホとPCの画面を揃えることも可能です。
BehanceやDribbbleへの投稿用画像作りにも使えますか？
もちろんです。複数画面を1枚のカバー画像やケーススタディ画像にまとめてから、BehanceやDribbbleに投稿するデザイナーが多くいます。