パソコンの画面を保存して矢印とか説明を入れる「Screenpresso」の使い方入門編
ブログでよく見かける、説明用の画像に矢印や図形(丸や四角)が入れてあったり、補足の文字があったりする解説記事。自分にもできたらいいなあと思っていらっしゃる方へ、これらの画像編集が簡単にできるソフト「Screenpresso(スクリーンプレッソ)」の紹介です。
「Screenpresso」は画像のキャプチャーと編集がひとつのソフトでできます。
パソコンの画面を写真を撮るように保存する、キャプチャーをとる(またはスクリーンショット←Macでの呼び方)ということをされたことがありますか?
一般的なのは、パソコンの機能を使って(PrintScreen(Win)とかcommand + shift + 3(Mac)とか)保存する方法ですかね。
Screenpressoは「好きな範囲だけ指定して保存したい」、「表示されていない部分もまとめて保存したい」または「動画を簡単に保存したい」そんな様々な要望にお応えします。
そして、Screenpressoの最大の魅力は保存した画像の編集が簡単にできることです。矢印を入れたり、説明文をいれたり、モザイクでぼかす、一部を拡大したりと。あっと言う間に高度な編集が楽々できます。
では、Screenpressoの入手方法と使い方について、できるだけ詳しくご紹介します。
注意:ScreenpressoはWindowsの専用ソフトです、Macでは使用できません
Macをお使いの方は以下を参照ください。
↓↓↓↓↓↓↓
■画像に矢印やモザイクを入れるMac用「Skitch」のインストール
■画像に矢印やモザイクを入れるMac用「Skitch」の使い方
Screenpressoでできること
Screenpressoでできることは主に以下の2つ、これが同時に同じソフトでできるのが最大の魅力です、そしてどちらの機能も至れり尽くせりです
●Screenpressoは高機能なキャプチャー(パソコン画面の撮影保存がきるソフト)
簡単に、素早く、色々な方法で画面保存ができます。
●多彩な編集機能
以下はほんの一部です
↓↓↓↓↓↓↓
詳細はこちらのサイトを参照ください。
↓↓↓↓↓↓↓
https://www.screenpresso.com/ja/
Screenpressoの入手方法
Screenpressoは無料版と有料版があります、個人のブログ作成にたまに利用する程度であれば無料版で充分だと思います(個人の感想です)。手に入れるには、インターネットからダウンロードします。
Screenpressoのダウンロード
上記で紹介しているScreenpressoのサイトへ行きます。
↓↓↓↓↓↓↓
https://www.screenpresso.com/ja/
[スクリーンプレッサーを無料で入手] のボタンをクリックします。
ダウンロードの画面が表示されます。
[Screenpressoをダウンロードする(12.79MB)] のボタンをクリックします。
メルマガの申し込み画面がでます、必要ない場合は[スキップ]をクリックします。
「ダウンロードしていただきありがとうございます!」と表示されます。
保存したファイルを保存します。
パソコンの画面右下に、ダウンロード中の表示がでます。
*ブラウザChromeの画面です。
*ダウンロードの表示はブラウザにより異なります。
ダウンロードが完了すると、パソコンのダウンロードフォルダの中に「Screenpresso.exe」が現れます。このアイコンをダブルクリックします。
Screenpressoのインストール
Screenpresso.exeをダブルクリックするとScreenpressoのインストール画面が表示されます。
①同意するにチェックを入れます。
◯が緑色になりクリックできるようになります
②コンピュータにインストールをクリックします。
インストールが完了すると、Screenpressoの画面が開きます。
Screenpressoの起動
日常の起動方法は以下です。
その1:スタートメニューから起動します。
その2:通知領域に表示されたScreenpressoのアイコンをダブルクリックします。
パソコンを起動すると、Windowsの通知領域(画面右下領域)にアイコンが表示されます。
*設定で、パソコンの起動時にScreenpressoも起動するよう設定が必要です。
*設定については、この記事の末尾に記載しています。
Screenpressoの画面が表示されます。
起動すると、パソコン画面の左下のタスクバーにアイコンが表示されます。
使い方
では、使い方をご紹介します。
キャプチャーの撮り方(静止画)
Screenpressoには様々なキャプチャーの撮り方があります。
*キャプチャー(=スクリーンショット)とは,表示されているパソコンの画面を写真を撮るようにそのまま画像として保存したものです。
キャプチャーの撮り方は以下の5種類があります。
- 指定領域のスクリーンショット
- 前回指定した領域のスクリーンショット
- 全画面のスクリーンショット
- スクリーンショットの起動を遅らせる(3秒)
- 自動スクロールを使ってスクリーンショット
指定領域のスクリーンショット
①[キャプチャー] ボタンをクリックします。
②スクリーンショットボタンの右側にある▼をクリックします。
スクリーンショットの撮り方の一覧が表示されます。
③[指定領域のスクリーンショット] ボタンをクリックします。
*前回使用したスクリーンショットの撮り方と同じ方法を使う場合は、一覧表示をしなくてもそのままスクリーンショットボタンをクリックできます。
(ボタン表示が使用したいスクリーンショットの名称になっていることを確認します。)
■ドラッグして領域を指定する
(①〜③は上記)
④画面上でドラッグすると、赤い枠が出ます。
⑤ドラッグを終了して、マウスから手を離すと自動的に画像が保存されます。
⑥保存された画像はワークスペースにサムネールとして表示されます。
■特定のウィンドウを指定する。
(①〜③は上記)
④キャプチャーしたいウィンドウ上にマウスをもっていくと、そのウィンドウが赤い枠で囲まれます。
(マウスの位置は十字線の交点です)
別のウィンドウを選択したいときは、そのままマウスを移動させると別のウィンドウが赤い枠で囲まれます。
⑤クリックすると、自動的に画面が保存されます。
⑥保存された画像はワークスペースにサムネールとして表示されます。
全画面のスクリーンショット
パソコンの画面全体を保存します。
①[キャプチャー] ボタンをクリックします。
②スクリーンショットボタンの右側にある▼をクリックします。
スクリーンショットの撮り方の一覧が表示されます。
③[全画面のスクリーンショット] ボタンをクリックします。
④保存された画像はワークスペースにサムネールとして表示されます。
スクリーンショットの起動を遅らせる(3秒)
右クリックの操作等を撮影するのに便利です。
①[キャプチャー] ボタンをクリックします。
②スクリーンショットボタンの右側にある▼をクリックします。
スクリーンショットの撮り方の一覧が表示されます。
③[クリーンショットの起動を遅らせる(3秒)] ボタンをクリックします。
カウントダウンのタイマーが表示されるので、画面の準備をします。
④保存された画像はワークスペースにサムネールとして表示されます。
自動スクロールを使ってスクリーンショット
長い画面を撮影するのに便利です、スクリーンショットは通常表示されている画面のみ保存できますが、この機能を使うと、表示されていない部分もスクロールして保存してくれます。
①[キャプチャー] ボタンをクリックします。
②スクリーンショットボタンの右側にある▼をクリックします。
スクリーンショットの撮り方の一覧が表示されます。
③[自動スクロールを使ってスクリーンショット]の ボタンをクリックします。
④画面にでた説明に従い操作します。
こんなながーい画像が一度で撮れます↓↓↓↓↓↓↓
⑤保存された画像はワークスペースにサムネールとして表示されます。
録画機能での動画の撮り方(動画)
①[キャプチャー] ボタンをクリックします。
②[録画]ボタンの右側にある▼をクリックします。
動画の撮り方の一覧が表示されます。
③[録画]または[指定領域の録画] ボタンをクリックします。
[動画]のウィンドウが表示されます。
*動画サイズの▼をクリックすると、動画サイズが選択できます。
*設定ボタン(スパナボタン)をクリックすると、その他の設定ができます。
④設定が決まったら、ウィンドウ内の録画ボタンをクリックする、または[PrintScr](パソコンのキーボードにあります)ボタンを押します。
<パソコンの操作をします。→→→操作内容が録画されます>
⑤録画する操作が完了したら[PrintScr]を押します
録画の一時停止:[Ctrl] + [PrintScreen]キーを押す
録画の再開:[PrintScreen]キーを押す
ズーム録画:[Windows] + [F8]キーを押す
⑦[保存]ボタンをクリックします。
MP4で保存
サイズ、サイズ変更の種類、品質を設定して [OK]をクリックします。(*特に希望がなければそのままでOK)
以下のような動画が撮影可能です。
↓↓↓↓↓↓↓(画面下の▶︎をクリックすると動画が再生されます)
この動画の操作で作成した画像が以下です。
↓↓↓↓↓↓↓
どうですか、動画だと静止画より「どんなことができるか」がよく伝わりますね(^^)
保存した画像の編集をする
撮影した画像は、ワークショップに保存されサムネイル(小さな画像)で表示されます。
編集したい画像をダブルクリックします。
編集画面が開いて、選択した画像が表示されます。
メインの編集ツール
主な編集ツールは以下です。
- 矢印を描く
- 四角の枠で囲む
- テキストの挿入
- 吹き出し付きテキストの挿入
- 番号の挿入
- 選択部分をマーカーで強調する
- 楕円で囲む
- 指定した領域をぼかす
- 画像を挿入する
- 虫眼鏡で拡大表示する
- 波括弧で項目をまとめる
では、具体的な操作方法について解説します。
矢印を描く
①矢印マークをクリックします。
②矢印一覧が表示されます、挿入したい矢印をクリックします。
③画面上でドラッグすると,矢印が描けます。
描画オプションで、色や線の幅などを変更できます。
例)線の種類:点線, 影付きを選んでみました。
四角の枠で囲む
①角丸長方形のマークをクリックします。
②囲みたい色の角丸をクリックします。
③囲みたい部分をドラッグします。
*パターン5を利用すると、囲んだ部分が他にくらべて明るく強調されます。
テキストの挿入
①[A]マークをクリックします。
②色々なデザインの文字一覧が表示されます、挿入したいデザインをクリックします。
③文字情報を入力します。描画オプションで文字の修飾情報が設定できます。
例)縁文字:グローで青を指定し、グローぼかしを低く設定します。
例)グローぼかしの値を最大にしたものです。
例)フチなし文字で、斜体にしてみました。
例)アンダーライン(下線)を入れてみました。
例)左寄せ、中央寄せ、右寄せの設定ができます。
吹き出し付きテキストの挿入
①吹き出し付き[a]のマークをクリックします。
②色々なデザインの吹き出し一覧が表示されます、挿入したいデザインをクリックします。
③文字情報を入力します。吹き出しの位置や長さをドラッグで設定します。
④描画オプションで文字の色やサイズ、吹き出しの色などを設定します。影付きにもできます。
例)吹き出しの縁(グロー)を設定した例
例)吹き出しの縁(グロー)をぼかした例
番号の挿入
①番号のマークをクリックします。
②描画オプションで設定します。
・番号は数字または、アルファベットが選べます
・どの数字やアルファベットから始まるかを指定します
・線の種類を選びます、矢印にもできます
・◯の色を指定します
・テキストの色を指定します。
・その他のオプションを指定します。
例)色々な番号表示の例
選択部分をマーカーで強調する
①マーカーの色を選びます。
②マークしたい部分をドラッグします
③マーカーなぞった部分は下の文字や画像が見える状態になります。
楕円で囲む
①角丸長方形のマークをクリックします。
②囲みたい色の角丸をクリックします。
③囲みたい部分をドラッグします。
*角丸と同様にパターン5を選択すると、囲まれた部分が明るく強調されます。
折れた線や矢印を描く
①多角形のマークをクリックします。
②描きたい線や矢印を選択します。
③クリックやドラッグで任意の折れ矢印を描きます。
フリーの線を描く
フリーハンドでの線が描けます。
手書き感覚、落書き調の文字も描けます。
指定した領域をぼかす
①ぼかしマークをクリックします。
②ぼかしたい部分をドラッグします。
③ぼかしのレベルを調節できます。
イラスト画像を挿入する
①画像挿入マークをクリックします。
②イラスト一覧から、挿入したいイラストを選びます。
③参照ボタンをクリックすると、パソコンの中になる任意の画像を選択することができます。
虫眼鏡で拡大表示する
①虫眼鏡マークをクリックします。
②画像の中で拡大表示したい部分をドラッグします。
③ドラッグした部分が虫眼鏡で強調表示されます。
括弧くくりを挿入する
①括弧くくりマークをクリックします。
②画像の中で括弧くくりしたい部分をドラッグします。
③ドラッグした部分が括弧くくりされます。
画像タブの機能
上部のタブを画像に切り替えます。
画面の切り取り(トリミング)
キャプチャーした画像の一部分を使いたい時に、その部分のみを切り取る方法です。
*キャプチャーをする時に指定領域で撮れなかった場合や、不要部分がある場合に便利です。
①切り取りボタン[切り取り]の表示をクリックします。
②切り取って残したい領域を指定します。切り取りボタン[OK]の表示をクリックします。
③画像が切り取れました。
画面の縮小(途中を切り取る)
途中が不要な長い画像を縮める機能です。波線で途中を省略していることがわかる演出もできます。
①縮小ボタンをクリックします。
②縮小後の表示方法を選択します。
③縮小(切り取って縮める)範囲を指定します。
不要部分が切り取られ、波線で繋がりました。
サイズ変更(トリミングされません)
画像のサイズを変更させることができます。
縮小を%で指定
幅をピクセルで設定
設定が完了したら、[OK]をクリックします。
キャンパスサイズ(トリミングされます)
キャンパスサイズの設定項目です。
%指定と幅と高さを指定する方法があります。
画像は、指定したサイズに切り取られます。
枠線
作成した画像に枠線をつけることができます。
①枠線ボタンをクリックします。
②枠線の各種数値を設定します。
③[OK]をクリックします。
画像の保存
作成した画像は、様々なファイル形式へ保存できます。
【ワークスペースに保存されているファイルの形式(初期設定)】
スクリーンショット: PNG
動画: MP4
【保存できるファイル形式】
JPEG / GIF / PNG / BMP / TIFF / PDF / DOCX / HTML
*デフォルト(初期設定)はPNGファイルで保存されるよう設定されています。
*他のファイル形式で保存したい場合は設定画面の「スクリーンショット」のタブで変更します。(下記の「各種設定画面」を参照)
【保存できる場所】
Dropbox やGoogle ドライブに送ったりFacebook やTwitter に投稿したりすることも可能です
編集画面の保存操作
編集画面で、画像の編集が終わったら
[確定]:ワークスペースのファイルが上書き保存されます。
[別名で保存]:ワークスペースにある元画像はそのままで、別途新しいファイルとして保存されます。
ワークスペースのファイルを利用する方法
ワークスペースに保存されている画像を利用する方法は簡単です。
ワークスペースから直接利用したいソフト(アプリケーション)の画面へ、画像をドラッグ&ドロップすることができます。
例)Wardやブログの編集画面にドラッグ&ドロップ
また、他の場所にもドラッグ&ドロップでファイルをコピーできます。
例) パソコン上のフォルダにドラッグ&ドロップ
各種設定画面
設定画面は、基本デフォルト(初期設定)のままで利用してかまいません。使用上変更した方が良い項目が出てきた場合に、都度設定を見直せばいいかと思います。
一般
・「Windows起動時に自動起動する」のチェックを入れると、パソコンを起動した時に同時起動し、通知領域にアイコンが表示されます。(頻繁に使う方はおすすめです)
スクリーンショット
・初期設定の画像形式が変更できます。(初期設定はPNGになっています)
共有
色々なインターネット上のドライブ(ストレージ)と共有できます。他のパソコンや仲間通しで共有するのに便利です。またこれらのストレージに保存しておく方法でバックアップをとるのもおすすめです。
動画キャプチャー
ホットキー
各種操作のショートカットキーです。変更もできますが、どのようなショートカットキーが設定されているかを確認することができます。
高度な設定
細かな設定を変更できます。
プロフェッショナルへのアップグレード
プロフェッショナル版(有償)へのアップグレードができます。
Pro(有料版)の魅力は、何度でも編集が可能なところでしょうか、使用頻度や編集し直す頻度が多い場合は値段にみあう効率が期待できる気がします。
プロとの機能比較は以下です。
参照:ベクターPCショップ
*蛇足*
最後に、ちょっと
Screenpressoのカタカナ表記について、「Screenpresso(スクリーンプレッソ)」と表記しましたが、ダウンロードボタンには「スクリーンプレッサー」と記載してあるので、そっちが正しいのかなと思いました。でもネットを巡っても「Screenpresso(スクリーンプレッソ)」が圧倒的に多い、慣例的にこう呼ばれている気がするので、今回の記事はこちらに合わせました。
ディスカッション
コメント一覧
りんごさん、丁寧なお返事を有難うございました。
一度、YouTube動画の条件など確認してみます^^
初めまして。
「PC作業の動画」録画方法がとても勉強になり、ありがとうございます!
一つ質問です。
録画動画は一旦 保存し YouTube動画にアップロードも可能なのでしょうか?
動画は、保存時にファイル形式が「MP4」となっています。
YouTubeのアップロードについてはYouTubeの条件をご確認ください。
その他著作権等の規約にもご注意ください。
*Mac使用で、その操作の実施経験がないため明確な回答ができかねます、すみません。
*Screen PressoのチュートリアルがYouTubeにあるので大丈夫とは思います(^^)が他サイト等でご確認をお願いします。
↓↓↓↓↓↓↓Screen Pressoのマニュアル
https://www.screenpresso.com/docs/ScreenpressoHelp_ja.pdf
ピンバック & トラックバック一覧
[…] ⇒⇒⇒https://applired.net/screenpresso/#toc_id_2_1 […]