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

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

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

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


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

web校正

・レイアウトの崩れた状態

web校正
web校正

レイアウトが崩れることによって、文字が画像の下に隠れてしまうことや、改行位置がめちゃくちゃになることがあります。その状態で校正しても適切だとは言えません。

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

このような場合に、Webページ全体をスクリーンショットできる方法を知っておくと役立ちます。


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

web校正

1:ページ全体のスクリーンショット

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


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

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


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

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

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

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


サイズ調整の一例

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

web校正


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

web校正


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

web校正


3-4.「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校正


PC