ブラウザモックアップ＆スクリーンショット美化器

Web ページのスクリーンショットをそのままスライドや SNS 投稿に貼ると、どうしても味気なく、Web サイトの画面だと伝わりにくいことがあります。このツールはスクリーンショットを macOS 風のブラウザウィンドウで包み込み、左上の赤・黄・緑のボタン、アドレスバー、角丸、やわらかなドロップシャドウを付けたうえでグラデーション背景に配置します。数秒でプレゼン資料、製品紹介ページ、ポートフォリオ、X への投稿にぴったりの見栄えのよい画像が完成します。

使い方は簡単で、アップロード欄をクリックするか画像をドラッグするだけです。PNG と JPG に対応しており、一度に 1 枚ずつ処理します。「デザイン設定」では 4 種類のグラデーション背景か、グラデーションなしの濃色の単色背景を選べます。余白幅は S・M・L の 3 段階で、スクリーンショットの周りにどれだけ余白を取るかを決めます。枠のテーマはダークとライトの 2 種類から、スクリーンショットの配色に合わせて選べます。変更内容は右側のプレビューにすぐ反映されます。

「ブラウザURL」には、製品のドメインや特定ページのパスなど、表示したいアドレスや文字を自由に入力できます。長すぎる場合は末尾が省略記号で切り詰められ、アドレスバーからはみ出しません。「モックアップを PNG で保存」を押すと、ブラウザ内の Canvas で画像全体を描き直し、幅が常に 1600 ピクセルの高画質 PNG を書き出します。高さはスクリーンショットの縦横比に合わせて決まるため、縦に長いページ全体のキャプチャもそのまま残せます。

合成はすべてお使いのパソコン上で行われ、スクリーンショットが AlpaKit のサーバーにアップロードされることはありません。未公開の製品画面や社内システムの画面にも安心して使えます。なお、現在の枠は macOS 風のみで、背景を透明にすることはできません。元のスクリーンショットの幅が 1600 ピクセルより大幅に小さいと書き出し時に拡大され、文字がぼやけることがあるので、高解像度ディスプレイや大きめのウィンドウで撮影するのがおすすめです。