polyshブラウザフレームジェネレーター
ウェブページのスクリーンショットを、本物らしいブラウザウィンドウの枠の中に表示できます。
- ブラウザ内で動作
- アップロード不要
- アカウント不要
ブラウザツールを読み込んでいます…
ブラウザフレームジェネレーターでできること
ウェブサイトのスクリーンショットをブラウザウィンドウに入れると、ウェブページであることがひと目で伝わり、輪郭もすっきりします。タブとアドレスバーがある Chrome、アドレス欄が中央にある細いツールバーの Safari、グレーの 3 つのウィンドウボタンと小さな角丸のアドレス欄だけの「ミニマル」から選べます。
「外観」では、スクリーンショットに合わせてブラウザの枠をライトとダークで切り替えます。「その他のオプション」の「アドレス」では、製品の実際のドメインなど、バーに表示する URL を設定します。枠は既定でサンドのグラデーションの上に、余白、角丸、影付きで置かれます。デスクトップアプリには Mac ウィンドウモックアップのほうが合います。
例
選ぶもの
1440 × 900 px のスクリーンショット ブラウザ：Safari、外観：ライト
ダウンロード
screenshot-browser-mockup.png 1584 × 1096 px：スクリーンショットの上に 52 px の Safari ツールバー、72 px のサンドの余白
幅 1440 px の画像では、ツールバーの高さは Chrome が 82 px、Safari が 52 px、ミニマルが 38 px で、幅の広いスクリーンショットでは大きくなります。
ブラウザフレームジェネレーターの使い方
- ブラウザ自体のツールバーを含まないウェブページのスクリーンショットを、「ファイルを選択」で開くか貼り付けます。
- 「ブラウザ」「外観」「背景」を選びます。「その他のオプション」の「アドレス」に URL を入力し、Chrome の場合は「タブのタイトル」も入力します。
- 「.png をダウンロード」をクリックします。
知っておきたいこと
- 「その他のオプション」のタブのタイトルは、Chrome のスタイルでしか表示されません。Safari とミニマルにはタブがありません。
- 長い URL は、アドレスバーに収まるよう省略記号で短縮されます。
- 先にスクリーンショット切り抜きで実際のブラウザのツールバーを切り取ってください。そうしないと、モックアップにツールバーが 2 つ表示されます。
ブラウザフレームジェネレーターについてよくある質問
スクリーンショットをブラウザウィンドウに入れるには？
ページの内容だけのスクリーンショットを撮ってここに読み込み、Chrome、Safari、ミニマルのいずれかを選びます。ブラウザのツールバーが適切な縮尺でその上に描かれ、ウィンドウ全体が背景の上に置かれます。
Chrome と Safari のどちらのモックアップを使うべきですか？
対象者に合わせます。ほとんどのウェブ製品や B2B 製品には Chrome、Mac ユーザーやデザイン関係の対象者には Safari です。どちらのブランドの見た目も避け、ブラウザらしさだけを出したい場合はミニマルが合います。
ダークモードのスクリーンショットにも使えますか？
はい。「外観」を「ダーク」にすると、ツールバーがダークな画面に合う暗いグレーの色調になります。暗いページの上に明るいツールバーがあると、間違いのように見えます。