ホームページを縦長の1枚画像にする。Chromeだけでできた

ホームページをお客さんに見せるとき、普通にスクリーンショットを撮ると、画面に表示されている部分しか保存できません。

ページ全体のデザインを見せたいときは、これだと少し分かりにくい。

そこで使えるのが、Chromeの開発者ツールにある「フルサイズのスクリーンショット」です。

拡張機能を入れなくても、Chromeだけでページ全体を1枚の画像として保存できます。

スマホ版をページ丸ごと保存する方法

Windowsの場合です。

1. Chromeで撮影したいページを開く
2. F12 を押す
3. 左上付近にあるスマホとタブレットのアイコンを押す
4. 上部の端末選択から「Pixel 7」などを選ぶ
5. 必要なら横幅を390px前後に調整する
6. Ctrl + Shift + P を押す
7. screenshot と入力する
8. Capture full size screenshot を選ぶ

これだけです。

画面に見えている部分だけではなく、下までスクロールしたページ全体が縦長の1枚の画像として保存されます。

これ、ホームページ制作で結構便利

制作中のホームページをお客さんに確認してもらうときにも使えますし、完成したサイトのデザインを資料として残しておくときにも使えます。

特にスマホ版は、ブラウザ上でPixelなどの端末サイズを指定してから撮影できるので便利です。

今回は、お客さんにホームページのイメージを紙で見てもらう方法を考えていて、この機能を使いました。

ブラウザのスクリーンショットでは一部分しか伝わらない。

でも、ページ全体を1枚にして印刷すれば、

「こんなホームページになります」

が、かなり伝わりやすくなります。

Chromeを毎日使っていても、こういう機能は意外と知らなかったりします。