Chromeでデバイスフレームを使用してWebページのスクリーンショットを作成します

デスクトップオペレーティングシステム上のGoogleChromeのあまり知られていない機能は、開いたページのスクリーンショットを、モバイルデバイスで実行されているブラウザのスクリーンショットであるかのようにキャプチャする機能です。 スクリーンショットの周りにフレームを追加して、スマートフォンのリアルな写真のように見せることもできます。 これがその方法です。

Chromeデベロッパーツールには、モバイルデバイスをエミュレートできる特別なツールがあります。 開発者にとって、スマートフォンや小さな画面のデバイスでWebサイトがどのように表示されるかを確認することは非常に便利です。 カスタム画面サイズを指定したり、iPhone、iPad、Nexus、SamsungのGalaxyなどの事前定義されたデバイスサイズを使用したりできます。 開いたページがデバイスエミュレーターに表示されると、ユーザーはページのスクリーンショットをキャプチャできます。 ページの周りにデバイスフレームを有効にして、リアルな写真のように見せることもできます。

あなたは次のようにそれを行うことができます。

1. Chromeで目的のページを開き、を押します F12. これにより、開発者ツールが開きます。
2. モバイルデバイスエミュレータボタンをクリックして、開発ツールモードを切り替えます。
3. デバイスセレクターで、デバイスを選択します。 たとえば、iPhone6を選択します。
4. 次に、デバイスセレクターの右側にある3つのドットメニューをクリックし、[デバイスフレームを表示する]オプションにチェックマークを付けます。
5. これで、Webページが素敵なデバイスフレーム内に表示されます。
   
   次に、3つのドットメニューをもう一度クリックして、[スクリーンショットをキャプチャ]を選択します。

結果は次のようになります。

これで完了です。