PhotoScape(フォトスケープ)で画像解説系の記事を楽に作る方法

この記事を書いている人 - WRITER -
大島 松二郎
ログ集客屋まつ ブログ集客コンサルタント 1985年生まれ 福島県出身 月間57000PVのブログを運営中のブログ集客の専門家。 自身が運営してきたブログ・メルマガノウハウを基に集客のアドバイスをしている。 【略歴】 28歳の頃、会社の突然の倒産をきっかけにインターネットビジネスの世界に入る。その後、幾度となく挫折を経験後、ブログ運営やアフィリエイトに関する情報商材を買いあさり、全くのド素人から独学でWordPressの構築、記事の書き方、ライティング、SEO対策、マーケティング、メルマガ集客を学び取る。2015年8月から始めたブログ「ブログ集客屋まつ」は地道に成長し続け、2016年4月→1万PV、2017年7月→2万PV、2018年1月時点→45000PV(現在も運営中)。 また「ブログだけで稼ぐこと」にこだわらないマーケティング重視のスタイルであらゆる業界で使えるマーケティングノウハウを確立。現在は「自分にしかできない仕事を確立したい」人を対象に、ビジネス経験ゼロ、顧客ゼロ、売上ゼロからのブログの集客やビジネスの売上作りのサポートを行っている。

どうも、まつです。

ウェブに関する記事・PC操作系の記事・アプリ操作系の画像で解説するような記事を書こうとすると、画面をスクリーンショットして、何枚も編集するのが面倒だったりしますよね。

※画像解説記事とはこういうやつです。

画像解説記事画面を見ながら作業できるように赤枠や矢印を付けたり
文字を入れたりして親切ご丁寧に解説する記事のことだぞ!!

解説記事は作るのが大変でしたが、PhotoScapeを使い始めてからは相当編集が効率化されて楽になりました。今回はこのPhotoScapeの魅力と僕が実際に使っているやり方をご紹介したいと思います!

★PhotoScapeって何ぞや?という人はまずこれを読もう!★

無料画像加工ソフト『PhotoScape』のインストール方法と使い方!

PhotoScapeなら画像解説記事が効率よく作成できる!

まずPhotoScape(以下フォトスケープ)にはこんなメリットがあります。

  • 複数枚の画像をまとめて編集できる←★これ最強★
  • フォトショップやGIMPよりも動作が軽い
  • 操作がべらぼうに簡単

フォトスケープなら画像を大量に使うタイプのブログでもサクッと作れます。僕の記事は一記事で40~50枚使うのもザラなので、これがないと作業量で死んでしまいます。笑

基本的な画像加工をするだけならフォトスケープはかなり重宝しますね。

読者が見やすい画像解説記事を作るまでの7ステップ

では具体的に読者が見やすい画像解説記事を作るにはどんな流れで作業していけばいいのか?

ざっと流れを解説すると

  • スクリーンショットで作業画面を保存する
  • トリミングで画像の不要な部分を削除する
  • 図形(囲い線や矢印)を入れる
  • 文字入れをする
  • 枠線を付けて見やすくする
  • 個人情報にモザイクをかける
  • 画像は「大サイズ+リンクなし」で投稿する

となります。
全部画像を見ながら作業をできるので
いまわからなくてもそのまま読み進めて作業してみましょう。

スクリーンショットで作業画面を保存する

まずはスクリーンショットで作業画面を保存します。

例えばフリーソフトやアプリの使い方を解説する記事を作る場合、アプリの操作画面をスクリーンショットで保存する必要があります

スクショを覚えてないと話にならないので必ず覚えておきましょう。

Windowsの場合は「Windowsキー+PrtScrキー同時押し」で画面を保存する

ちなみに僕がWindowsなので
Windows前提で解説すると

  • 保存したいパソコンの画面上で「Windowsキー+PrtScrキー」を同時押し

すると画面が保存されます。

↓↓↓

スクリーンショット で画面保存
保存先は「ライブラリ→ピクチャ→スクリーンショット」などになっているはずなので探してみましょう。これで作業画面がバンバン保存できます。

スクリーンショットした画像はすべて同じフォルダに保存しておく

スクリーンショットをした画像はすべて同じフォルダに保存しておきましょう。違うフォルダに保存しておくとどこにどの画像があるのか?がわからなくなってしまいます。

画像を一気に編集できるように
必ず同じフォルダに保存するようにしてください。

トリミングで画像の不要な部分を削除する

次は画像をトリミングして不要な部分をカットしていきます。
ではまずはフォトスケープを開きましょう。

PhotoScape

画像編集をクリックします。

PhotoScape

これが実際に開いた画面です。

上の赤枠にあるフォルダを選択すると下の赤枠にフォルダ内の画像をすべて表示してくれます。

スクリーンショットで画像保存している場合は「ライブラリ→ピクチャ→スクリーンショット」のフォルダを選択して開きましょう。フォルダが見つかったらフォルダ内の編集をする画像をクリックしてください。

PhotoScape

今回はこの画像をサンプルとして使ってみます。まずは「トリミング」をクリックしてください。

PhotoScape

次は範囲を選択します。トリミングしたい範囲をマウスでドラッグしてください。

PhotoScape

トリミングする範囲に間違いがなければEnterもしくは赤枠内の「トリミング」をクリックします。

PhotoScape

これでトリミングが完了しました!!
では次の作業をするために「オブジェクト」をクリックしておいてください。

図形(囲い線や矢印)を入れる

次はもっとわかりやすいように囲い線や矢印を入れていきましょう。

フォトスケープ

赤枠の図形を選択します。

フォトスケープ

図形をクリックすると赤枠の部分で図形の線や色、厚さなどの設定ができます。ブログの色や雰囲気に合うように自分だけのパターンを作っていきましょう。

枠線の色の設定

まずは枠線の色の設定です。

フォトスケープ

枠線の色は下記の中から選べる他、自分で細かく色を設定することもできます。ここではサイトの色に合いつつ目立つ色を使うと良いと思います。

図形の枠線の設定

次は図形の枠線の種類の設定です。

フォトスケープ

枠線の種類を変えることで個性を出すことも出来ます。もし好みの種類が合ったら使ってみると良いと思います。

フォトスケープ

設定してドラッグするだけでこんな枠線をひくことができます。

図形の縁取りの設定

また図形の縁取りを設定することもできます。

フォトスケープ

例えば縁取りをして厚さを「15pt」にした場合、上記のような表示になります。ただこれじゃあちょっと分厚すぎますね。

縁取りをなくすと上記のような表示になります。これも好みの問題なのでサイトの特色と合わせるようにしましょう。

文字入れをする

図形で枠線を設定をした後は文字入れです。
文字入れをすることで枠線では伝えられない部分の説明や補足をすることができます。

テキストの挿入の「T」をクリックします。

フォトスケープ

こちらがテキストの設定をするボックスです。各部分をざっと解説します。

テキストフォントの設定(サイズ、色、字体、アウトライン)

テキストはサイズや色、字体やアウトラインなどを設定することができます。

まずは字体(書体)です。

フォトスケープ

書体にはかなりバリエーションがあるので、好きなものを使うと良いと思います。

個人的には日本人が見慣れているフォントが一番読みやすいと思うので好みがなければ「MSゴシック」「メイリオ」「MS明朝」などを選ぶのが無難かと思います。

字体が決まったらフォントサイズの設定です。

フォトスケープ

フォントサイズは文字入れをしてからでも変えられますが、予め設定しておくとデフォルトサイズ(初期設定のテキストサイズ)が決まるので便利です。

また、普段使うテキストのサイズが統一されていると見栄えもいいので、なるべく統一しておくといいでしょう。

次はフォントの色です。

フォトスケープ

色の部分をクリックするとフォントの色を変えることができます。画面の色合いによって見え方も変わりますし、個性にもなります。僕は見えやすいのがベストだと思っているので赤にしています。

フォトスケープ

次はフォントのアウトライン(テキストの外側の縁の部分)です。

上記の画像の「フォントのアウトラインの色を設定」を見てみると赤文字の外側に白っぽい縁があるのがわかると思いますが、それがアウトラインです。アウトラインを入れることで更に画像を見やすくすることができます。僕の場合はデフォルトで「赤文字+白い縁」にしています。

そして最後は文字入れです。

フォトスケープ

赤枠の部分に文章を打ち込むと右側で実際の表示を確認することができます。ここで調整をしながらベストな文字サイズを決めていくと良いと思います。OKだったら「OK」をクリックして文字を入れていきましょう。

フォトスケープ

これで文字の挿入ができました!!

枠線に矢印を付けると更に見やすくなる!

更に枠線に対して矢印を付けると見やすさが倍増します。

フォトスケープ

下の小さい赤枠をクリックして矢印図形を選べばカンタンに矢印を引くことができます。

フォトスケープ

こんな感じですね!!
矢印を引き終わったら「ホーム」をクリックして次の作業に移りましょう。

画像全体に枠線を付けて見やすくする

次は画像全体に枠線を付けて見やすくします。
これは見る側にはなんとなくしかわかりませんが、そのなんとなくが大事だと思っていますw

では実際にやってみましょう。

フォトスケープ

赤枠部分をクリックします。

フォトスケープ

ここでは好きな画像の枠線を選ぶことができます。僕がよく使うのは「Black Line1」です。全体を薄い線で囲うことができます。今回は「Black Line1」でやってみましょう。

フォトスケープこれで画像の周りにうっすらと枠線が引かれました!!

個人情報にモザイクをかける

あと意外に便利なのが個人情報にモザイクをかける方法です。

例えば自分のパソコンのフォルダを開いたりする際に住所や本名、電話番号などが見られたら大問題です。そうならないよう入念にモザイクをかけておきましょう。

では解説をば。

フォトスケープ

「ツール」をクリックします。

フォトスケープ

「効果ブラシ」をクリックしましょう。

フォトスケープ

効果の種類を選択できます。
今回はモザイクなので「ぼかしー高」を使います。

フォトスケープ

モザイクをかけるにはマウスの左クリックを押しながらマウスを動かします。

フォトスケープ

モザイクがかかったのがわかると思います。
見せたくない部分にモザイクがかかったのを確認したら保存しましょう。

保存は「Ctrl+S」でできる

画像の保存は原則「Ctrl+S」でしましょう。その方が確実に早いからです。

フォトスケープ

「Ctrl+S」を押すと上記の画面になりますので、Enterキーで保存します。これで同じフォルダに保存されます。

画像は「配置中央+大サイズ+リンクなし」で投稿する

あと最後にですが、
もしWordPressブログを使っている場合は
画像は原則「大サイズ+リンクなし」で投稿するのがおすすめです。サイズが大きい方が明らかに見やすいのと(画像によりけりですが)、リンクがあるとタップで拡大されてウザいためです。

WordPressで画像挿入

画像をアップロードした際に「添付ファイルの表示設定」で

  • 配置→中央
  • リンク先→
  • 画像→大サイズ(僕の場合は幅650px、縦はあまり気にしない)

にしています。
ただスマホのスクショで大サイズだと相当縦長になってしまうので、最終的には自分で見てみて調整するのが良いと思います。

複数枚の画像を一気に編集する方法

あと「どうやって複数枚の画像を一気に編集するねん」という疑問もあると思うのでカンタンに流れを説明します。

 

PhotoScape

まずフォトスケープではPCの内の画像がすべて表示されます。なので、ここで編集して保存していけばかなり効率よく作業ができます。

例を見てみましょう。

フォトスケープ

まずは画像を保存したい場合は、画像を加工したあと「Ctrl+S」キーを押します。

フォトスケープ

この画面になったらEnterキーで保存をします。

フォトスケープ

あとは同じ要領で「編集する」→「Ctrl+S」→「Enterキーで保存」を繰り返していけばかなり効率よく作業が出来ますね!!

まとめ

画像をたくさん使う作業は如何に効率化するかが勝負です。

  • 複数の作業をまとめてできないか?
  • ショートカットキーで作業を短縮できないか?
  • タスクをもっと楽にカンタンに処理できないか?

と考えることが「楽に今以上の作業をする」ために必要なことなので、ぜひあなたもフォトスケープでガンガン画像解説記事を書いてみてくださいね。

それではこのへんで。

 

 

無料E-bookプレゼント付きメルマガ

WordPressの集客ノウハウを
すべて詰め込みました。

90ページ以上の
ノウハウが詰まったE-bookです。
広告や有料のツールを使わずに
集客に特化したブログを作る方法を
詳しく載せています。

今なら超豪華特典も用意しております。
詳しくは下記のボタンをクリックしてプレゼントページをご覧ください。

 

無料プレゼント

 
この記事を書いている人 - WRITER -
大島 松二郎
ログ集客屋まつ ブログ集客コンサルタント 1985年生まれ 福島県出身 月間57000PVのブログを運営中のブログ集客の専門家。 自身が運営してきたブログ・メルマガノウハウを基に集客のアドバイスをしている。 【略歴】 28歳の頃、会社の突然の倒産をきっかけにインターネットビジネスの世界に入る。その後、幾度となく挫折を経験後、ブログ運営やアフィリエイトに関する情報商材を買いあさり、全くのド素人から独学でWordPressの構築、記事の書き方、ライティング、SEO対策、マーケティング、メルマガ集客を学び取る。2015年8月から始めたブログ「ブログ集客屋まつ」は地道に成長し続け、2016年4月→1万PV、2017年7月→2万PV、2018年1月時点→45000PV(現在も運営中)。 また「ブログだけで稼ぐこと」にこだわらないマーケティング重視のスタイルであらゆる業界で使えるマーケティングノウハウを確立。現在は「自分にしかできない仕事を確立したい」人を対象に、ビジネス経験ゼロ、顧客ゼロ、売上ゼロからのブログの集客やビジネスの売上作りのサポートを行っている。

Copyright© ブログ集客実践の書 , 2018 All Rights Reserved.