デザインカンプ プレゼンとは？
ウェブサイトのデザインカンプや、ページ全体を撮影した縦長のスクリーンショットを、ブラウザとスマホの枠に入れて表示するツールです。枠の中でスクロールできるので、実際にサイトを見ているときに近い感覚でデザインを確認できます。PC 用とスマホ用を並べる、A 案と B 案を並べて比べる、全画面のプレゼン表示に切り替える、といった見せ方に対応しています。
画像はブラウザの中だけで処理され、サーバーには送信されません。公開前のデザインにも、そのままご利用いただけます。画像を埋め込んだ HTML ファイルに書き出せるので、打ち合わせに同席できない方にも同じ表示で確認してもらえます。
長い画像を印刷用のページに分けたいときは「スクショ分割＆面付け」を、分割して保存したスクリーンショットをこのツールで1ページにつなげて見せる、という組み合わせでも使えます。
デザインの見せ方の比較
| 比較項目 | 本ツール (マッハーツール) |
画像ファイルをそのまま共有 | PDF にまとめて共有 |
|---|---|---|---|
| 見え方 | ◎ ブラウザとスマホの枠の中でスクロール | 画像の全体が縮小されて表示されやすい | ページの区切りで途切れる |
| PC とスマホの確認 | ◎ 並べて、同じ位置までいっしょにスクロール | ファイルを1つずつ開く | ページを行き来する |
| 複数の案の比較 | ◎ ボタンやキーで切り替え、並べて比較 | ウインドウを並べて調整する | ページを行き来する |
| 分割した画像 | ◎ 1ページにつなげて表示 | 別々のファイルのまま | 別々のページになる |
よくある質問 (FAQ)
送信されません。画像の読み込みから表示、HTML の書き出しまで、すべてお使いのブラウザの中で処理されます。作ったプレゼンは、次に開いたときに復元できるよう、お使いのブラウザの中に履歴として保存されます（新しいものから20件まで）。「履歴」の各行の削除ボタンで消去できます。共用のパソコンでは、使い終わったら履歴から削除してください。
PNG・JPEG・WebP・GIF・AVIF に対応しています。複数の画像をまとめて追加でき、画像の入ったフォルダごとドラッグ＆ドロップすることもできます。
つなげられます。同じ案・同じ表示（PC またはスマホ）の画像は、上から順につながって1ページとして表示されます。ファイル名に「分割1」「part2」のような語があればその順に並び、順番は画像の一覧の矢印のボタンで変更できます。
ファイル名で見分けています。「PC」「パソコン」「デスクトップ」「desktop」や「1440」などの幅の数字が入っていれば PC、「スマートフォン」「スマホ」「モバイル」「SP」「iPhone」や「375」などの幅の数字が入っていればスマホとして扱います。どちらも入っていない場合は、画像の幅が 700px 未満のものをスマホとします。案は「A」「B案」「案1」「パターンA」「v2」のような書き方や、「top」「トップ」のような短いページ名から読み取ります。違っていた場合は、画像の一覧で案と表示を選択し直してください。
画像の画素数が、表示する大きさに対して足りていないためです。Retina ディスプレイなどの高精細な画面では、表示の幅の2倍の画素が必要です。目安として、PC 用は幅 1,600px 以上、スマホ用は幅 700px 以上の画像をご用意ください。目安に満たない画像には、一覧に注意が表示されます。「元の大きさで表示」をオンにすると、PC 用の画像を引き伸ばさずに表示できます。
HTML ファイルをメールやチャットで共有し、ブラウザで開いてもらうだけです。画像はファイルの中に埋め込まれているので、インターネットに接続していなくても表示できます。案や表示の切り替え、並べて比べる表示、全画面表示もそのまま使えます。ファイルの大きさは、元の画像の合計のおよそ 1.3 倍になります。
操作できます。← → キーで案を、1・2・3 キーで表示（PC・スマホ・PC とスマホ）を切り替えられます。画面の下の操作の帯は、しばらく操作しないと自動で隠れ、マウスを動かすと再び表示されます。Esc キーでプレゼン表示を終了します。