ブラウザモックアップジェネレーター

ウェブサイトをブラウザウィンドウでフレーム

ウェブサイトのスクリーンショットはブラウザウィンドウの中にある方がはるかに説得力があります。信号ボタンのついたタイトルバーとアドレスバーは「これは本物のサイトだ」と一目で伝えます — ポートフォリオ、ケーススタディ、ランディングページ、ドキュメントに最適です。

このジェネレーターはスクリーンショットの周りにクリーンなブラウザクロムを描き、パディングとソフトシャドウを添えた背景の上に配置します。すべてベクターなのでウィンドウが鮮明なまま保たれ、スクリーンショットはコンテンツエリアでフル解像度を保ちます。

ブラウザモックアップの作り方

1. ウェブサイトのスクリーンショットを開く。 ページの横向きスクリーンショットがブラウザフレームに最適です。
2. ブラウザフレームを選ぶ。 タイトルバー、信号ボタン、アドレスバーのピルがスクリーンショット周辺に表示されます。
3. スタイリング。 グラデーションまたはカラー背景を追加し、パディング、シャドウ、傾きを調整します。
4. ダウンロード。 高解像度PNG、JPG、またはWebPを保存します。

ページの全幅をキャプチャする

実際のブラウザに近い比率になるよう、一般的なデスクトップ幅（1280〜1440px程度）でスクリーンショットを撮りましょう。スクリーンショットにすでにブラウザクロムが含まれている場合は、重複しないようページコンテンツだけにトリミングしてください。