Written in Japanese(UTF-8)
2014. 8.17
INASOFT

/トップ/目次/管理人のひとこと(ブログ)/優位なスクリーンショット(画面キャプチャ)あれこれ

3198099 (+0019)[+0384]

管理人のふたこと Tweet

優位なスクリーンショット(画面キャプチャ)あれこれ



公開日:2014/08/17

PrintScreenキーを押下すると画面全体のイメージが、Alt+PrintScreenキーを押すとアクティブなウィンドウのイメージが、それぞれクリップボードに書き込まれます。これを、スクリーンショットと呼んだり、画面キャプチャと呼んだりしますが、ここではスクリーンショットという呼び方でいきたいと思います。

ソフトウェア付属のヘルプファイルを作成しているとき、操作画面の(というか、アクティブなウインドウの)スクリーンショットは、機能の説明をする上で非常に重要な役割を果たします。しかし、画像ファイルというのは大きなファイルサイズとなることが多いため、スクリーンショットを多く使えば説明もわかりやすくなるかもしれない反面、ヘルプファイルのファイルサイズがどんどん大きくなってしまうジレンマが起こります。

多くの情報を伝えつつ、しかしながら最低限の情報量で伝えたい、ということになります。

今回はスクリーンショットのファイルサイズに着目して、その点を書いていきたいと思います。


Windows 95のころは、ヘルプファイルと言えば拡張子 .hlp のヘルプファイルがよく使われていました。このヘルプファイルに画像を入れたい場合、画像形式はビットマップ(.bmp) にする必要がありました。ビットマップに圧縮要素を付与することは不可能ではありませんが、圧縮要素を付けたビットマップファイルをヘルプファイルに入れることはできないため、必然的に、ヘルプファイルには非圧縮の画像ファイルしか入らないことになります。

そのため、画像の色数やピクセル数を小さく抑えつつ、必要な情報を盛り込むための工夫が必要になりました。

当然、Windows 98から採用されたような、グラデーションするタイトルバーなんて使うわけにはいきません。下の例では、左よりは右の方が奨励になります。

Win98スタイル。タイトルバーがグラデーション Win95スタイル。タイトルバーはグラデーションしない

とはいえ、左のような描き方にしておけば、Windows 98にも対応しているんだぞということをアピールできるので、サイズを犠牲にすることで未来的感覚を示すことはできます。

ちなみにこの後、HTMLヘルプ(chm)が普及し、画像形式としてpngやjpg等が使えるようになりました。画面スタイルの方も、画面全体の見た目が変わったWindows XPスタイルであったり、Windows Vista/7におけるエアログラスなスタイルやベーシックスタイル、Windows 8におけるフラットなスタイルなど、Windowsのバージョンの進化と共に画面デザインも進化していきます。

WinXPスタイル
▲Windows XPスタイル

Windows Vista/7では、下記のようなエアログラス(タイトルバーなど周辺が透けている)のスタイルが登場しています。

Win7スタイルA
▲Windows 7 エアログラス

とはいえ、バカ正直にスクリーンショットを撮ったのでは、背景のアイコン等が透けてしまい、余計な情報量が入ってくることになります。よって、何かしら白いウィンドウを背景において、スクリーンショットを撮ることが重要になります。

Win7スタイルB
▲タイトルバーの部分が少しスッキリ


こんな感じで撮影する
▲こんな感じでスクリーンショットを撮る


スクリーンショットの画像ファイルサイズを小さくするテクニックとしては、この他に、ベーシックスタイルを使う方法があります。

Win7ベーシック
▲背景が透けることのないベーシックスタイル


Windows 8では、スマホ・タブレットなどへの進出が考慮され、なるべく単純なフラットなデザインが採用されることになりました。

Win8スタイル
▲Windows 8のスタイル


で、最後にこれらを、pngファイル(可逆圧縮)で作るか、jpgファイル(非可逆圧縮)で作るかの選択があります。

基本的に、写真のように複雑な、色の変化の激しい画像に対しては、jpgファイルがマッチし、フラットで単純な画像に対してはpngがマッチします。また、今回は触れませんが、背景色を使いたい場合はpngファイルの方が良くなるかと思います。

なお、pngの場合は、可逆性を保ちつつ、カスタムパレット等を駆使して、同一内容のまま圧縮率を向上させるソフトも存在しています。今回は、PNGGauntletを使うことにします。

以上を種類別にまとめると、次のようになります。

名称PNGファイルJPGファイル
Windows 95スタイル
(タイトルバーがグラデーションしない)
Win95スタイル。タイトルバーはグラデーションしない
サイズ:10KB
Win95スタイル。タイトルバーはグラデーションしない
サイズ:69KB
Windows 98スタイル
(タイトルバーがグラデーションする)
Win98スタイル。タイトルバーはグラデーションする
サイズ:15KB
Win98スタイル。タイトルバーはグラデーションする
サイズ:69KB
WindowsXPスタイル WinXPスタイル
サイズ:22KB
WinXPスタイル
サイズ:73KB
Windows7エアログラス1
背景配慮なし
Win7スタイルA
サイズ:41KB
Win7スタイルA
サイズ:70KB
Windows7エアログラス2
背景配慮あり
Win7スタイルB
サイズ:26KB
Win7スタイルB
サイズ:70KB
Windows7ベーシック Win7ベーシック
サイズ:21KB
Win7ベーシック
サイズ:69KB
Windows8スタイル
(フラットデザイン)
Win8スタイル(フラットデザイン)
サイズ:10KB
Win8スタイル(フラットデザイン)
サイズ:70KB

どうやらこの結果を見ると、Windows 95スタイル(タイトルバーをグラデーションしない)か、Windows 8のスタイルを使うのが、最も良いという結論になりそうです。

また、pngとjpgでは、pngの方が圧倒的に小さくなっています。おそらく今回、jpgの得意とするような画像では無かったためかと思います。というわけで、jpgが得意かもしれない画像を準備してみることにしました。

名称PNGファイルJPGファイル
Windows 95スタイル
(タイトルバーがグラデーションしない)
Win95スタイル。タイトルバーはグラデーションしない
サイズ:78KB
Win95スタイル。タイトルバーはグラデーションしない
サイズ:24KB
Windows 98スタイル
(タイトルバーがグラデーションする)
Win98スタイル。タイトルバーはグラデーションする
サイズ:78KB
Win98スタイル。タイトルバーはグラデーションする
サイズ:24KB
WindowsXPスタイル WinXPスタイル
サイズ:55KB
WinXPスタイル
サイズ:26KB
Windows7エアログラス
背景配慮あり
Win7スタイルB
サイズ:85KB
Win7スタイルB
サイズ:25KB
Windows7ベーシック Win7ベーシック
サイズ:80KB
Win7ベーシック
サイズ:25KB
Windows8スタイル
(フラットデザイン)
Win8スタイル(フラットデザイン)
サイズ:78KB
Win8スタイル(フラットデザイン)
サイズ:25KB

やはり、ダイアログ内に写真や複雑なグラフィックが登場すると、圧倒的にjpgの方が小さくなるようですね。

さて、ここまでの情報を揃えると、Windows 8のフラットなデザインが、一番圧縮率が高く、また、Windows 8への対応を宣言することができるので、色んな意味で有利ということになります。

まぁ、このフラットなデザインを好むか好まないかという問題もありますけどね。そこらへんは、個人の趣向も考慮に入れつつ、上記の中から選ぶことになるかと思います。


本ページへは、自己責任の範囲内であれば自由にリンクしていただいて構いません。
本ページに掲載されている内容は、自由にお使いいただいて構いませんが、必ずしも筆者が内容を保証するものではありませんので、ご利用に際しては自己の責任においてお使いいただきますよう、お願いいたします。
このページのURLやアンカーは、サーバ運営・サイト運営・ページ運営・その他の都合により無告知で一時的あるいは永遠に消滅したり、変更したりする可能性がありますので、あらかじめご了承下さい。
本ページは、公開から1年半経過後の任意のタイミングで削除される予定です。本ページの内容は複製・公開していただいて構いません。


/トップ/目次/管理人のひとこと(ブログ)/優位なスクリーンショット(画面キャプチャ)あれこれ