画像編集

ブログを作成する中で、画像を文章内に差し込みするのは良くあるかと思います。

ブログに画像を入れるケース
  • アイキャッチ用の画像
  • 旅行に行ったときのきれいな写真
  • ブログ内でアクセントとしての画像
  • 操作を分かりやすく説明するための画像

単純に写真を入れるような場合は特に気にする必要はありませんが、上記の4つ目(操作を分かりやすく説明するための画像)のように、元の画像を加工(コメントを入れたり、注釈を入れたり、矢印を入れたり)したものをブログに貼り付けたいような場合、貼り付け前に画像を編集するという作業が必要になります。

私の場合は特に、注釈を入れたり画像の中の一部を枠で囲んだり、ということをするのですが、このような画像加工をWordPressに用意されている機能では行えません。WordPressのメディアの機能でできるのは、画像のサイズを変更と回転ぐらいです。

この画像編集、結構手間なんですよね。

そこで今回は、ブログ用の画像編集に一番簡単に使えて最適だと私が思う、Screenpressoというツールをご紹介します。画像をキャプチャーし、コメントや注釈を入れたものをブログに貼り付けたいような場合、このツールだととても簡単に、そしてキレイに実現する事ができます。

画像編集における手間

当初、ブログに載せる画像を加工する際、画像加工専用のツールは使用せず、エクセルの図形を使って行っていました。

エクセルでの画像編集時の作業
  1. 画面をキャプチャーする
  2. エクセルを開いて貼り付ける
  3. 枠線や矢印やテキストで装飾する
  4. 再度キャプチャーする
  5. 必要に応じてクリップボードの内容を画像として保存する

とはいえ、エクセルでも十分できるのですが、やっぱり手間がありました。 この手間をもっと簡単にできないか、という事で画像編集ツールやサービスを探し始めました。

画像編集において、PhotoShopなどの高機能な物を私は求めていませんでした。画像加工の機能が豊富でも、素人で使いこなせません。そのため、無料なものを中心に、色々と画像加工サービスやツールをインストールしては比較をしていました。しかし、中々これだ!というのが見当たりません。

そんな中、Screenpressoという画像編集サービスに出会えました。これこそ私が求めている機能を簡単に実現できるツール!今の私の画像編集において無くてはならないものになっています。

Screenpressoとは

Screenpresso(スクリーンプレッサー)は、デスクトップをキャプチャするツールです。トレーニングドキュメント、コラボレーションデザインワーク、ITバグレポートなど様々な用途に使用することができます。ググった際に「Screenpresso:Windows用の究極のスクリーンキャプチャツール」とタイトルに表示されますが、正にピッタリと思います。

ダウンロードはこちらから行えます。

Screenpressoのダウンロード画面

ダウンロードボタンをクリック時に次のような画面が表示されますが、必要ない場合はスキップを選択します。

Screenpressoのダウンロード時のニュースレター確認が面

しばらくするとファイルダウンロードのダイアログが表示されるので、任意の場所を選択してダウンロードします。自動でダイアログが表示されない場合、画面上の直接リンクをクリックします。

Screenpressoのダウンロード画面

以上でダウンロードが完了しました。

Screenpressoの起動方法・初期設定

Screenpressoの起動方法

ダウンロードしたexeファイルをダブルクリックします。バージョンによっては次のダイアログが表示されますので、同意しますにチェックを入れて「コンピュータにインストール」または「インストールせずに起動する」をクリックします。どちらを選択しても問題ありません。

Screenpressoの使用許諾契約書画面

起動すると、画面の右下に次のような画面が表示されます。キャプチャーをしていくと、ここに過去のキャプチャー画像が溜まっていきますので、3つ前にキャプチャーした画像を使いたい!といった場合に重宝します。

Screenpressoのキャプチャー履歴画面

これでScreenpressoが使える状態となりました。

Screenpressoでやっておきたい初期設定

Screenpressoの設定画面を開き、次の2設定を必ず行っておきます。設定画面は次の手順で起動する事ができます。

Screenpressoの設定画面起動方法

クイックキャプチャウィンドウの表示設定

設定画面の一般タブ内に「クイックキャプチャウィンドウ」のチェックボックスがありますので、ここにチェックを入れてOKをクリックします。

Screenpressoのクイックキャプチャウィンドウの表示設定方法

この設定をする事で、クイックキャプチャウィンドウが表示されるようになります。

クイックキャプチャウィンドウとは、画面の上部にマウスカーソルを合わせることで自動で表示されるウィンドウの事で、これを有効にしておくと素早くScreenpressoを起動させる事ができます。

Screenpressoのクイックキャプチャウィンドウ表示例

また、この設定をする事で、「prt scr」ボタンをクリックすると自動的にScreenpressoの指定領域キャプチャーとなります。

キャプチャを遅らせて起動する際の遅延秒数の設定

メニューやドロップダウンリストの表示内容など、クリックすると表示が消えてしまうような物をキャプチャーしたい場合、Screenpressoの「スクリーンショットの起動を遅らせる」という機能を使用します。この機能を使用することで、数秒後の状態をキャプチャーする事ができるようになります。

まず、設定画面の「スクリーンショットタブ」の中にある、「キャプチャを送らせて起動」の設定ボタンをクリックします。すると遅延秒数を設定するダイアログが表示されますので、ここで秒数を設定し、OKで確定させます。

Screenpressoの遅延秒数の設定方法

これで遅延秒数の設定が完了しました。デフォルトは3秒ですが、3秒だと短いため、10秒前後を指定しておくと使い勝手が良いかと思います。

起動を遅らせてスクリーンショットを取る場合、クイックキャプチャウィンドウの▽ボタンをクリック→スクリーンショット起動を遅らせる、から行う事ができます。

起動を遅らせてキャプチャーする方法

Screenpressoの使い方

画面のキャプチャー方法

クイックキャプチャウィンドウから操作を行います。主に次の2つを使うと想定されますがどちらも同じです。

  1. カメラボタン(指定領域のスクリーンショット)
  2. スクリーンショット起動を遅らせる
Screenpressoの良く使うボタントップ2

2の「スクリーンショット起動を遅らせる」の場合、指定秒数経過後に指定領域のスクリーンショットが起動されるイメージです。

指定領域のスクリーンショットが起動されると、画面上でキャプチャーしたい部分を範囲選択できるようになりますので、抜き取りたい範囲をマウスでドラッグ&ドロップで指定します。 すると、画面右下にキャプチャーした画像がストックされます。

Screenpressoの指定領域のスクリーンショット後

これを繰り返す事で、複数の画像キャプチャーをストックする事ができます。

参考
  • 無料版だと30枚までストックされます。30以上になった場合、古いものから削除されます。そのため、必要に応じて別の場所に画像を保存しておくと良いでしょう。
  • 間違ってキャプチャーした場合でこのリスト上に残したくない場合、対象画像を選択してDeleteボタンをクリックすると削除する事ができます。複数の画像を選択することで、まとめて削除する事も可能です。

画像の編集・装飾の方法の基本(コメント挿入・枠で囲み、など)

キャプチャーした画像を編集する場合、ストックした画像一覧から対象のデータをダブルクリックします。

Screenpressoでストックした画像の選択方法

すると編集画面が表示されます。ここで自分の好きなように画像に対して編集作業を行っていきます。

Screenpressoの画像編集画面
Screenpressoでできる編集作業
  • 矢印の挿入
  • 枠線(四角形)の追加
  • 文字列(テキストボックス)の追加
  • 吹き出しの追加
  • 番号付け(連番)の追加
  • 強調の追加
  • 楕円の追加
  • ポリゴン(多角形)の追加
  • フリーハンドの線の追加
  • 指定領域のぼかし表示
  • 画像の追加
  • ルーペの追加(指定部分を拡大表示)
  • 波括弧の追加

編集作業は、画面右上のアイコン部分から行います。

Screenpressoの編集ボタン

文字列(テキスト)を表示したい場合、次のように行います。

まず、画面右上からAのアイコンをクリックします。

Screenpressoの文字列の挿入手順1

すると、アイコンのAの文字が赤くなります。赤くなる=選択中を意味します。合わせて文字の種類を表すダイアログが表示されますので、使いたい物を選びます。

Screenpressoの文字列の色などの選択

次に、画像内で文字列を挿入したい部分をドラッグ&ドロップで範囲選択するとテキストを入力できるようになりますので、文字を入力します。その後、枠外をクリックします。

Screenpressoの文字列の挿入

すると、文字が表示されます。

Screenpressoの文字列の挿入後

簡単ですね!特にいいと思うのが、デフォルト設定でも文字の外側に色がついていたり影がついていたりするので、そのままでもわりと使えるという点です。ここはデフォルト設定を変えることでもっと自分好みに変更する事ができます。

最後にクリップボードにコピーしたり、保存したりします。編集後すぐにWordPressに画像を貼り付けたいような場合「画像をコピー」のアイコンをクリック後、WordPressの投稿画面でCtrl+Vを行うと、画像を簡単に貼り付ける事ができます。

上記は文字列の追加についてを例に操作方法をご紹介しましたが、文字列以外についても同様の手順を行う事で、簡単に画像に追加する事ができます。

Screenpressoによる画像への編集
Screenpressoによる画像への編集例

挿入するオブジェクトのデフォルト設定の変更

Screenpressoではデフォルトの色が5つほど用意されています。どれもそのまま使ってもいいですが、デフォルトの状態について、

  • 文字サイズを大きくしたい
  • 色を変えたい
  • グロー(文字の外側の色や大きさ)を設定したい
  • フォントを変えたい
  • 影の強さを変えたい
  • 文字を中央揃えにしたい
  • 太さを変えたい

といった要望が使ってくると出てきます。 毎回設定を変えるのは面倒なので、これらはデフォルト設定を変えてしまいましょう。

デフォルトの設定変更は、まず追加したオブジェクトをクリックして選択状態にします。すると四隅のどこかがピンク色になっていますので、そこにマウスカーソルを合わせます。

オブジェクトを選択状態にする

すると描画オプションのダイアログが表示されます。

Screenpressoの描画オプション画面

ここで、フォントや色を変更し、自分の好みの表現ができたら「基本設定」をクリックします。すると次のように、どこに設定を保存するかが表示されます。

Screenpressoの描画オプション画面の基本設定保存時

既存の表示へ上書きする場合は対象のものを選びます。新規でデフォルト設定を追加したい場合は「新規」をクリックします。

以上でデフォルトの設定を変えることができます。

オブジェクトの描画オプションの設定例

デフォルトでは6種類のパターンを選ぶ事ができますが、私の場合は少し描画オプションをアレンジして使っています。当サイトではテキストボックスを次のように設定しています。

Screenpressoテキストボックスの描画オプションの設定例

フォントサイズをデフォルトより大きい設定に変更しています。 ブログで差し込む画像の説明文として使う場合、デフォルトのフォントサイズでは文字が小さいため、大きめにします。20px以上がオススメです。

テキストの外枠に色を付けたいため、グロー(テキストの外側の色)とグロー率(テキストの外側の色の幅)を設定しています。上記の場合、テキストの色はピンクで、グローの色は白としています。グロー率ではテキストの外側に設定する色の幅を変えることができますが、大きすぎても見づらくなるため、2~5pxぐらいにするとテキストがみやすくなるかな思います。

影についてはお好みで設定します。影がない場合、グローと背景色が同じ場合にグローがあることが見えなくなるため、影はつけておいたほうがテキスト部分が浮き上がって見えるので視認性が良くなります。

単にテキストの単一色だけだと味気ないですが、グローと影があるだけで大分印象が変わります。Screenpressoではテキスト色と合わせてグローと影も簡単に設定できるので、これだけでも見た目がスマートになりますね!

まとめ

Screenpressoについてご紹介しました。ブログに載せる画像を簡単に編集したいような場合は是非このツールを試してみてはいかがでしょうか。とても簡単に画像に対して装飾を入れることができるようになりますよ!

Twitterでフォローしよう

おすすめの記事