スクリーンショットを使うと、自分の画面を画像化して見せることが出来ます。スクリーンショットだけではわからない場合は、少し加工をしてわかりやすくしましょう。
スクリーンショットについて
スクリーンショットは、表示されている画面を画像として保存する機能です。 Skillhubのレッスンやブログでも度々登場していますし、ご質問時などにスクリーンショットをお願いすることもあります。
画面を画像化するスクリーンショットには、大きく２種類があります。 画面全体を撮る方法と、画面から一部分のみを切り取る方法です。
基本は必要箇所のみの使用
基本的に、記事に使用するスクリーンショットは、②画面から一部分のみを切り取る、の方法を使います。
主な理由は、必要ない部分も入っているとわかりにくいため。 下のようなスクリーンショットを載せても、どこを見たら良いのかわかりません。 大きなサイズのママアップロードしても、サイトによっては自動圧縮されます。そうなると、文字が潰れて読めなくなる危険もあります。絶対に止めましょう。
また、画面全体だと個人的な情報が見えてしまう危険があります。 ブックマークしているページやGoogleアカウントの写真などを、関係ない場所で公開したくはないですよね。塗りつぶすのも結構手間がかかります。
必要箇所のみトリミングする方法もありますが、二度手間です。 最初から、必要な部分だけのスクリーンショットを撮ったほうが良いでしょう。 画面全体のスクリーンショットを使うとしたら、全体図が必要な場合のみです。
わかりやすいよう加工する
スクリーンショットだけをそのまま載せても、わかりにくいという場面もあります。 下の例を見て下さい。
<colgroup>タグは、表の縦列を（カラム）をグループ化する際に使用します。
列の属性をまとめて指定したいときに便利です。
col要素にspan属性を指定することで、対象となる列の数を指定できます。
HTMLがわかっている方であれば、この説明とコードだけで理解できます。
しかし、勉強しはじめたばかり方は、解読に時間がかかるかもしれません。 実際のプレビューも合わせたり、説明文がどこのことを指しているのかを示したりした方が理解しやすいのではないでしょうか。
このように、スクリーンショットを分かりやすくしてみましょう。
スクリーンショットの加工には何を使う？
結論から言ってしまえば、何でも良いです。
「ここですよ」と枠線で囲うくらいであれば、パソコンに標準搭載されている機能だけでも対応可能です。Macならプレビューからちょっとした編集ができますし、Windowsの場合はペイントを使えばできます。
もっと細かい加工をするならば、Illustratorがおすすめ。 角丸や透明度を細かく調整したり、配置を整えたりしやすいです。アイコンなどの素材も組み合わせやすく、書き出しのサイズ等も調整できるので万能です。
他の編集ツール
OS標準搭載のツールでは物足りない、Illustratorを立ち上げて～というのは面倒。 そんな時はWebアプリを使ってみても良いかもしれません。
● Evernote 簡単に操作ができるのはEvernote。 本来はクラウドサービス型の高性能メモアプリですが、簡単な画像編集ツールも付属しています。
Evernoteの画像編集モードは下記操作で開きます。
1.ノートにスクリーンショットを貼り付ける 2.画像をクリックして選択状態に 3.「…」アイコンをクリック 4.編集＆注釈をクリック
EDITモードは下記のようになっています。 利用できる機能は多くありませんが、操作はシンプルで簡単。
最後に右上の「保存」をクリックすれば完成です。
● Canva 無料で利用できるグラフィックデザインツールでは、Canvaも人気があります。 かなり多機能で、グラフも作れますし、テンプレートも多く用意されています。
操作感は、簡易版Illustratorという感じでしょうか。 多機能さを求める場合、私達の場合はIllustratorを使ったほうが便利ですけどね。 Webライターやブロガーはよく利用しているツールです。
実習
スクリーンショットを撮って、加工してみましょう。
実習で作成している記事に入れられそうなものがあれば、その画像を作って下さい。 スクリーンショットと一致しない記事の方は、練習にhtmlやcss説明を作ってみてください。