こんにちはまめさるです
突然ですが、ブログや解説記事などで手順やクリック箇所を説明するためのこんな画像見たことありませんか？
今回は上記のような、手順や解説テキストを画像に挿入したい場合に使える無料の画像編集ツールと、その画像の作成方法について詳しく紹介していきます
見ただけで手順などが分かるような画像をつくりたい！
もっと分かりやすい解説記事を書きたい！
こういった悩みを解決してくれる優れものですので、是非参考にしてみてください
- ブログ初心者
- 分かりやすい解説記事を書きたい人
- 無料の画像編集ツールを探している人
この記事の管理人
まめさるです
ブログとWebライターの副業をしている、平凡なサラリーマンです。
まったくの無知からブログを始めて、困惑だらけだったぼくだからこそ誰にでも分かる記事で紹介していきます。
【Photo Scape】ブログで使える解説画像の無料編集ツール
無料でダウンロードして使える『PhotoScape』というツールがあります
これを使えば画像に矢印、丸、四角、テキスト（文字）、モザイク、切り取りなどの編集や挿入が簡単にできるようになります
こんな感じにいろんな機能を画像に挿入できるよ
さっそく使い方や解説画像の作り方を分かりやすく説明していきます
PhotoScapeをダウンロードする
まずは『PhotoScape』のダウンロード画面にいきましょう
ダウンロード画面へいけたら、緑色のダウンロードボタンをクリックしよう
ダウンロードと表記された広告がたくさんあるから間違えないように
するとこのような画面に変わるからダウンロード中をクリックしよう
ダウンロードが完了すると、パソコンの画面左下に出てくるバーをクリックして開いていこう
インストールのウィンドウが出てくるので、インストールと書かれたボタンをクリック
インストールが終わったら完了ボタンをクリック
これで『PhotoScape』のダウンロードは完了しました
完了をクリックすると、自動で『PhotoScape』が開かれますが、以後はデスクトップにショートカットアイコンが自動で作成されているので、そちらから起動できます
解説画像の作り方
ここからは、実際に解説画像をどのようにして作れるのかを紹介していきます
初心者にも簡単に作れるので、さっそく見ていきましょう
その1.解説を挿入したい画面をスクリーンショットする
まず、解説用の矢印やテキスト(文字)を挿入するための、もととなる画像をスクリーンショットします
今回は『グーグルマップ』での検索方法を解説するというお題で進めていくね
『GoogleMap』を開いたら、キーボードの〔PrtSc〕(PrintScreen)というボタンを押してください
これでスクリーンショットは完了です
ペイントに貼り付ける
次に、先ほどスクリーンショットした画像を『ペイント』に貼り付けていきます
まずペイントを開いていきます
- パソコンの左下にある『Windowsマーク』をクリック
- 『Windowsアクセサリ』を開く
- 『ペイント』をクリック
『ペイント』が開けたら左上の『貼り付け』をクリックします
先ほどスクリーンショットした画像が貼り付けられますので、この画像を一旦保存します
- 左上の『ファイル』をクリック
- 『名前を付けて保存』を選択します
- 『PNG画像』をクリックします
保存する際は様々な形式で保存できるけど、画質がキレイな『PNG画像』がオススメだよ
- どこに保存するか
- 画像の名前は何にするか
を選択して『保存』をクリックすれば画像の保存は完了です
Photo Scape に画像を入れ込む
スクリーンショットした画像の保存が完了すれば『PhotoScape』を開いていきます
『画像編集』をクリック
このような画面になりますが、このグレーの部分に先ほど保存したスクリーンショット画像(編集していきたい画像)を貼り付けます
画像を保存したファイルを開いて、ドラッグして貼り付けるのが一番簡単だよ
編集する
『PhotoScape』に貼り付けることができたら、さっそく編集していきましょう
トリミング(余計な部分を切り取る)
モザイクで隠していますが、スクリーンショットしただけの画像は『必要のない部分』や個人情報などが写ってしまっていて『見られたくない部分』がありますので
まずは余計な部分を切り取っていきましょう
左下に『トリミング』という項目があるのでクリックします
あとは切り取りたい部分を除いた範囲をドラッグして選択して『Enter』キーを押せば切り取り完了です
モザイクを入れて見せたくない箇所を隠す
隠したいけれど、場所的に切り取れないのであれば『モザイク』を入れることも可能です
『ツール』の項目に『モザイク』があるので、選択したら
実際に隠したい場所をドラッグして範囲を選択すると、モザイクがかかります
オブジェクト(丸や四角の図形)を挿入する
『グーグルマップ』の検索方法を説明するために
まずは左上の検索バーに誘導するように矢印等の図形を挿入していきます
『オブジェクト』をクリックすると様々な図形が並んでおり、挿入したい図形を画像に挿入することができます
- 図形
- 色
- 太さ
- 縁取りを入れるか入れないか
など、かなり細かく指定することが可能です
今回は検索バーを囲うために四角を挿入していきます
さらに強調したいときは矢印も合わせて挿入すると、より効果的になります
アイコン(数字やスタンプ)を挿入する
『オブジェクト』内の『♡』をクリックしてください
様々な素材やスタンプなどが表示され、状況に適したものを挿入することができます
特によく使用するのが順序などを説明する時に便利な『数字』です
この数字も『縁なし』や『縁あり』など状況によって見やすいものを選択できます
補足ですが、上の画像のように一つの画像の中にいくつかの数字アイコンがある場合は、大きさを揃えるようにしましょう
サイズはアイコンをダブルクリックすると変更することができます
『リサイズ』をクリックします
幅と高さを決めることができます(幅を入力すると自動で高さも同じ数字が入るようになっています)
最適なサイズを入力したらあとは『OK』をクリックすれば完了です
数字アイコンは小さすぎるとスマホで見たときに見にくくなるので最低でも50以上に設定した方がいいよ
数字以外にも様々なアイコンやスタンプがあるから見てみてね
テキスト(文字)を挿入する
続いてテキストを挿入していきます
テキストも『オブジェクト』内にあり、『T』の文字をクリックしましょう
キーボード入力で挿入したい文字を書き込みます
- 字体
- 色
- 大きさ
- 縦書きか横書きか
など様々なことを選択することができます
- トリミングで余計な部分や隠したい部分を切り取る
- モザイクで隠したい部分を覆う
- 図形の挿入
- 数字(アイコン)の挿入
- テキストの挿入
主に使用する手順は以上です
その他の便利な機能としては
- 画像にフレームを付けることができる(円形フレームも可能)
- 明るさや濃さを調整できる
などがありますので、お好みで試してみてください
保存する
すべての編集が完了したら保存していきましょう
やり方はとても簡単で
右下にある『保存』をクリックすれば上書き保存を自動でしてくれます
Photo Scapeはブロガーにおすすめしたい無料で使える解説画像編集の便利ツール
今回は『PhotoScape』と解説画像の作り方について紹介してきました
- 無料で使える
- 簡単だから初心者も安心
- 切り取り、モザイク、図形、数字アイコン、テキストを細かく設定・挿入できる
解説記事などを作成するとき、もっと分かりやすい記事を書けないかと思うものです
そんな時は『PhotoScape』を使って、一つの手段として解説画像を挿入してみましょう
そして、少しでも読者に分かりやすい記事を提供できるようにしていきましょう
『PhotoScape』以外にもブログで使える便利ツールはたくさんあります
下の記事で詳しく解説していますのでこちらも参考にしてみてください
ではまた
