アプリやウェブサービスの使い方を記事で説明する時にパソコンやスマホの画面をスクリーンショット（キャプチャ）して、使うことが多々あります。マニュアルを作る際にもスクリーンショットは欠かせないスキルです。ただ、スクリーンショットはただ取得すればいいわけではなく、見せ方が重要になります。どこをどう見せるかで見た目やわかり易さが大きく変わってくるからです。というわけで、この記事では、キャプチャの加工・編集テクニックについて解説します。ブログを書いている方には必見の情報だと思います。
スクリーンショット取得の基本操作
スクリーンショットの撮り方はWindowsの場合、全体を撮るなら「Print Screen」キー、最前面だけを撮るなら「Alt」+「Print Screen」キー。Macの場合、全体を撮るなら「shift + command (⌘) + 5」キー、部分的に切り取って撮るなら「shift + command (⌘) + 4」キーです。
スマホの場合は機種やOSによって、スクリーンショットの取り方も変わるのでネット上で調べるようにしてください。ちなみにMacを使っている方はこちらもご参考ください。
Macユーザー向けの記事になるのですが、画面キャプチャをとる機会が多いWEB業界の方や、ブロガーの方に向けて少し便利な情報をお届けいたします。筆者もMacを使っていて、普段から画面キャプチャをとることが多いのですが、デフォルトだとpng形式で書き出されます。これらをサイト内に表示させると容量が大きく...
たかがスクショ、されどスクショ。編集次第で印象は変わる
でも、スクリーンショットの撮り方は書かれていても、キャプチャを綺麗に加工して掲載するテクニックが共有されている記事は少ないものです。そのため、スクリーンショットをそのままトリミングも加工もせずに掲載していることが多々あります。そうすると、1つの記事の中に縦長の画像があるとと思ったら、今度は横長だったりと誌面全体に整合感に欠けた記事になってしまったりするわけです。他にも全体をキャプチャしたせいで、重要な箇所が小さくて見えにくかったり。
画像とテキストの境界線が分からないスクリーンショット
上の画像は背景が白になっているので、画像とテキストの境界線が分かりません。境界線をつけると下のようになります。デザイン的な意味があって、あえて境界線をつけないこともあるかと思いますが、しっかり画像とテキストを区別したい場合は画像に1pxの外枠を付けましょう。面倒な人はCSSで自動的に表示させてもいいですね。
空白の領域が大きい画像は対象物を中央寄せする
先ほどの事例のように左上に対象物があり、右下に大きな空白があるよりも、中央寄せにした方が綺麗に見えますね。必ずしも寄せる必要がなければ中央に寄せておいたほうがいいでしょう。
画像の横幅は記事の横幅に合わせる
一つの画像だけ横幅が違うと違和感がありますよね。下の画像は横幅「567px」ですが、他の画像は「790px」です。このサイトの他の記事でもそうですが、なぜ790pxで統一しているかいうと、記事の横幅限界が790pxだからです。少しでも綺麗に見せるなら、画像の横幅は統一しましょう。
縮小しすぎない
スクリーンショットを大きめに撮った場合、縮小して使わなくてはいけません。当たり前ですが、縮小すると小さくて見づらくなります。出来るだけ元サイズで使うようにしましょう。
使用する枠線の太さを調整する
スクリーンショットの中に枠線を使うこともあるかと思います。その時、枠の太さに工夫を加えることでも見え方が変わります。1つ目は1px、2つ目は5pxの枠線ですが、あなたはどちらがお好みですか。
画像内の文字のサイズを調整する
キャプチャー画像内の文字関連の大きさは、本文のフォントサイズとのバランスを考えましょう。本文のフォントサイズより画像内の文字が大きいと、目を剥くような画像になってしまい、大味感のレイアウトになりがちです。
読者は無意識レベルで本文のフォントサイズが、記事を読む上での視覚的スタンダードになるので、キャプチャー画像内の文字は、本文と同一レベルか、それよりも少し小さい方が、上から下へのスクロール動作がスムースで記事全体のバランスが違和感のない整ったレイアウトとして成立します。記事全体のバランスを俯瞰的に観る上では大切な事ですね。
不要な情報をカットする
これはアプリやウェブサービスのスクリーンショットでありがちなことですが、ブラウザ全体をスクリーンショットしてしまったせいで、太枠で囲った解説で重要な部分が小さくなって見えづらくなっています。スクリーンショットする場合、「どこを撮るか」は「どう伝えるか」ということに繋がります。
ですから例えば、必要箇所以外の場面が必要なければ、スクリーンショットを撮る段階でカットして撮ってもいいわけです。
あらかじめブラウザサイズを調整しておく
上の項目「不要な情報をカットする」と少し似ていますが、スクリーンショットを撮る段階でブラウザサイズをあらかじめ必要なサイズに調整するテクニックもあります。通常のネットサーフィン等ではブラウザ幅をフル幅で使用することが多いですが、例えばキャプチャ取得時に24インチモニタでフル幅だとが大きすぎて下のようなキャプチャになってしまうからです。
よくありますよね（笑）。こうなると上の項目「不要な情報をカットする」と同じでキャプチャ内の情報がよく伝わってきません。最終的に掲載したいキャプチャ画像に合わせてブラウザ幅を縮小して各キャプチャで統一すると全体的に綺麗に見えます。横幅はこちらのサイトでチェックするといいでしょう。
拡大で画質を粗くしない
スクリーンショットを元のサイズから拡大すると画質が粗くなってしまいます。画質が粗くなるとボヤケて見にくくなってしまいますね。多少の拡大は許容範囲内ですが、極力元サイズに近いサイズで使うようにキャプチャの撮り方を工夫しましょう。
どこを撮るかで伝える情報が変わる
以下の2つの画像を比べてみてください。1つ目は左メニューを見せたいのに対して、2つ目は全体を撮った画像を見せたいわけです。ユーザーに伝えたい情報が何なのかによって、寄りと引きを見極めてスクショするわけです。
外部ライターへのキャプチャ取扱いルールとして
弊社でも外部ライターに記事を依頼することがあるのですが、ライターごとにキャプチャの撮り方が千差万別です。撮り方が異なるだけで、結果的に綺麗に見えていればそれで良いのですが、「ただ撮れてればいいでしょ」という感覚のライターが少なくないというか、ほとんどがそうだったりします。
そんな時にこれらのスクショ取扱テクニックを伝えてあげると時間短縮になります。なぜなら、美しく見せるかどうかは感覚的なセンスに大きく影響するので、文章や会話で説明するのはなかなか難しいからです。というわけで、外部ライターに指針を伝えたい時に、この記事をご利用頂いても大丈夫です。
スクリーンショットテクニックのまとめ
上記のこの記事の内容を箇条書きにまとめるとこうなります。
- 記事内でキャプチャの横幅を統一
- 横幅は記事幅に合わせる
- 縦幅もなるべく統一
- 拡大しすぎない
- 縮小しすぎない
- 記事幅に対して画像を中央寄せする
- 対象物は中央寄せする
- 画像の周りに1pxの外枠を付ける
- 画像内の文字サイズは本文のフォントサイズとのバランスを意識
- スクショ前にブラウザサイズを調整する
- どこを撮るかで何を伝えるかが変わる
この中にはケースバイケースで採用するしないと決めたほうがいい場合もあります。例えば、3番目の縦幅の統一に関しては、スクリーンショットの内容によっては統一できない場合もある。1pxの外枠も付けないほうが美しい場合もある。なので、必要に応じてテクニックを取り入れて頂ければと思います。
また、下の記事でも違った切り口からキャプチャの取扱いについて触れていますので、よろしければどうぞ。
・「デザインのプロの技を盗む」ブログ記事のクオリティーを劇的に高めるための5つの画像最適化
最後に「何を伝えるか」を意識したサイトを共有します。
キャプチャの撮り方で「何を伝えるか」が変わると述べました。難しく言うと、文章と同じでキャプチャ1つでもメッセージ性があるというわけですね。
その事例として弊社が運営する「TCD MUSEUM」を共有しておきます。このサイトはTCDテーマのユーザーが運営するサイトを集めたリンク集ですが、それぞれのサイトに運営者の思いがあるわけで、それらを適切に伝えるために1枚1枚に対して何を伝えるかを意識してキャプチャを撮っています。
なので、キャプチャを撮るのも骨が折れる作業でもあるのですが、そうした1つ1つにこだわってやっていくことは重要ですね。よろしければご参考ください。
