いいセールスレターやランディングページに出会うと、「このページ、欲しい！保存しておきたい！」そう思うことはありませんか？
そのほかにもクライアントの方に完成したページをWEB上で公開する前に確認してほしい時など、画面をキャプチャしてそのスクリーンショットを保存したくなる時があります。
ですが、chromeの画面から直接印刷機能を使ってPDF化してもうまく動作せず、表示と違うものが出来上がることが時々あって「何かうまくいく機能はないか」とずっと探していました。
また、Fireshotなどの拡張機能も、しばしば、ピタッと印刷準備中のまま動かなくなることがあり、悩みの種。縦長のWEBページの保存には、苦労していました。
ですが、今回ブラウザのchromeを使って縦に長いページ全体を画像としてのスクリーンショットして保存する方法を知ることができましたので、自分のメモを兼ねてお伝えしたいと思います。
縦長のwebページ全体をchromeを使って画像としてキャプチャする方法
手順 PC版WEBページ・Windows編
- ブラウザはchromeを使い画像保存したいページを表示させる
- “Ctrl”+”shift”+”I”を同時に押してディベロッパーツールを開きます。
- “Ctrl”+”shift”+”P”を同時に押して詳細機能を呼び出します。
- “full”と入力するとページ全体のスクリーンショット機能が表示されますので、そのままEnter(return)”⏎”を押しますと、ちょっとの間をおいてWEBページ全体のスクリーンショットが保存されます。保存先のディフォルトはダウンロードフォルダです。
手順 PC版WEBページ・Mac編
- chromeで画像保存したいページを立ち上げる
- “command”+”option”+”I”を同時に押してディベロッパーページを立ち上げる
- “command”+”option”+”P”を同時に押して詳細機能を呼び出す。
- “full”と入力し、returnキーを押すと数秒後にページ全体のスクリーンショットが保存されます。
手順 モバイル版WEBページの保存
- chromeでサイトページを表示
- Windowsは”Ctrl”+”shift”+”I”、Macは”command”+”option”+”I”
- Windowsは”Ctrl”+”shift”+”M”、Macは”command”+”Shift”+”M”
- 好きなデバイスを選択を選んでページ更新
- Windowsは”Ctrl”+”shift”+”P”、Macは”command”+”Shift”+”P”
- Windowsは”full”→Enter、Macは”full”→return
スマホ版の全体画面キャプチャは、実際の表示からずれることがあります。
参考画像
- ディベロッパーツール
- 詳細機能
- “full”の入力
- キャプチャ画像（キャプチャ画像の左右の黒い部分はキャプチャがぞうではありません）
注意点
現時点でわかる範囲の注意点をメモしておきます。
スクロールすることで表示されるサイト
画像遅延表示されるサイトなどスクロールすることで内容が表示されるページでは、そのままキャプチャしようとするとうまくいきません。その場合は一度下までスクロールして全体を一度表示させてからキャプチャするとうまくいくことがあります。
左右の端が切れて保存されてしまう
画面が狭いと左右の余白が切れてしまい、全体が保存されないことがあります。そんな時は、ブラウザの表示を縮小しておきキャプチャするとうまくいくことがあります。
表示の縮小はWindowsなら”ctrl”＋マウススクロールで、Macなら”command”+”-“できます。
なお、ズームアウトしすぎると表示が切れてしまったり、消えてしまうこともありますのでやりすぎには気をつけましょう。ディスプレイ自体の表示の縮尺を変更できる機種の場合はその機能を使った方がより正確に保存できるようです。
ブラウザの機能は日々変わります
昨日できていたのに、今日できない。
そんなことも十分考えられるのが、ブラウザの機能。早めにこの機能に慣れておけば仕様変更が出たときにも対応できるようになると思いますので、練習あるのみ、ですね。
関連記事：Yoast Duplicate Postで簡単リライト！書き換え＆再公開が熱い
・たった一度の人生、自分らしく生きたい。
・自分の人生、他人に振り回されずに思い通り生きてみたい。
・好きなことをして暮らしていきたい。
好きなものを追い続け、やりたいことで起業する、そんな夢のあるあなたを全力で応援します。
コピーライティングであなただけのビジネスを創造する小比井雷太＠運営者メルマガ、絶賛配信中！
コメントを残す