Webサイトの校正に役立つ!ページ全体のスクリーンショットと分割印刷

ページ全体のスクリーンショットと分割印刷

Webの校正をするとき、今ではパソコンの画面上でするという方も増えてきましたが、まだまだ紙にプリントして校正するという方も多いと思います。中には、文字情報は紙で見て、レイアウトはPCの画面で確認するという方もいるかもしれません。

Web校正で一番厄介なのが、パソコンの画面をそのまま印刷するとレイアウトが崩れてしまうことです。

■ PCの画面
⇒ このまま印刷してもレイアウトが崩れてしまいます。

web校正

■ レイアウトが崩れた状態

web校正
web校正

レイアウトが崩れることによって、文字が画像の下に隠れてしまうことや、改行位置がめちゃくちゃになることがあります。

そこで思い浮かぶのがスクリーンショットです。
ただ、通常のスクリーンショットでは、画面に映った範囲しか撮ることができません。Webページは、大抵縦に長いため一画面では収まりきりません。かといって、何回かにわけてスクリーンショットを撮るのも面倒です。

こんなときに、Webページ全体をスクリーンショットできる方法を知っておくと便利です。

仕上がり結果は次のようになります。ページ全体をスクリーンショットできます。

web校正

1:ページ全体のスクリーンショットを撮るやり方

方法はいくつかありますが一番簡単なものを紹介したいと思います。Chromeのデベロッパーツールの機能を使います。Windows版でのやり方です。

.スクショしたいページを開きます。

web校正
以下の順で進みます。
(1)右上の設定(縦組みの三点リーダーのようなマークです)
(2)その他のツール
(3)デベロッパーツールをクリック

.デベロッパーツールをクリック後の画面です。

web校正
画面右上赤枠の「Toggle Device Toolbar」をクリックします。これによりスクショ画像を任意のサイズに調整することができます。

3.「Toggle Device Toolbar」をクリック後の画面です。

web校正
ページ上部にサイズ調整用のバーが表示されます。


サイズ調整の例

.「Responsive」のプルダウンからは、iPhone、GalaxyなどのMobileサイズを選ぶことができます。

web校正

.グレーのバーをクリックすることでもサイズ調整が可能です。

web校正

.「Mobile L - 425px」サイズの例

web校正

.「Tablet - 768px」サイズの例

web校正
その他にも、直接数値の入力をしてサイズ調整するとこも可能です。

.サイズの決定後、スクショを撮ります(※PC用のサイズで撮ります)。

web校正
以下の順で進みます。
(1)More options
(2)Capture full size screenshotをクリック

.スクショした画面が保存されます。

web校正

.保存されたスクショを開いた画面です。

このようにページ全体のスクショを撮ることができます。
web校正

拡大すればちゃんと文字もきれいに読めます。
web校正

以上で、Webページ全体のスクリーンショットを撮る手順は終了です。


次は、このスクリーンショットを分割して印刷する方法になります。

撮ったスクリーンショットをそのまま印刷しても、画像1枚の扱いになるため1ページに縮小された状態で印刷されてしまいます。文字がほとんど読めないぐらい小さくなります。

2:ページを分割して印刷

.スクショした画像を「ペイント」で開きます。
 (※Windows10では「すべてのアプリ」→「Windowsアクセサリ」→「ペイント」)

web校正
【ファイル】→【印刷】→【ページ設定】へと進みます。

.ページ設定の画面です。

web校正
・赤枠内
「印刷の向き」→ 縦
「中央揃え」 → 水平方向
※基本は上記の設定で大丈夫です。

・青枠内
「拡大縮小」
最初は『合わせる』が選択されているので『調整』を選びます。

.
青枠(1)の「%」の箇所に数値を入れて調整していきます。数値を入れると、青枠(2)のグレー四角の大きさが変わります。

web校正

・数値の調整は、青枠(2)のグレーの四角を点線に合わせる感じです。
web校正

・数値を変えていくと、赤枠(3)のページ数が変わってきます。
※最初は「1×1ページ」でしたが「1×2ページ」に変更されています。

これでページ設定は終了です。
あとは印刷するだけです。

.ページ分割後の印刷結果です。 

・1ページ目
web校正

・2ページ目
web校正