画像に矢印やモザイクを入れるMac用「Skitch」の使い方

2018年3月26日

Skitch(スキッチ)は画像に矢印,図形(丸や四角)を描き込んだり、説明の文字を入力したり等ができる画像加工用のアプリケーションです。また個人情報など公開したくない部分に簡単にモザイク処理を行うことが出来るので、非常に便利です。

Skitch(スキッチ)のMacへのインストール方法については以下を参照ください。

スクリーンショットに説明を入れるソフト Mac用 「Skitch」のインストール

 

*注意:Skitch(スキッチ)はMacの専用ソフトです、Windowsでは使用できません
Windowsをお使いの方は以下を参照ください。
↓↓↓↓↓↓↓
パソコンの画面を保存して矢印とか説明を入れる「Screenpresso」の使い方入門編

 

それでは、使い方です。

Skitchの起動方法

1. Macのドックで、Skitchのアイコンをクリックします。
キャプチャー、ドックのアイコン
*アイコンをドックに追加する方法はこちら

2. アイコンが反応して、Skitchの画面が表示されます。
キャプチャー、スキッチアイコン起動時
キャプチャー、スキッチの起動した画面

 

3. ドックのSkitchのアイコンに 「・」が表示されます。
*Macのドック内では、起動しているアプリケーションには「・」が表示されます。
キャプチャー、スキッチアイコン起動完了

 

 

画面の保存方法 キャプチャー(スクリーンショット)の撮り方

まず、画面の保存方法には大きくわけて2つの方法があります。

1.Skitchの「画面キャプチャー機能」を使う

2.Macの機能「スクリーンショットを撮る」を使う

パソコンのディスクトップ画面に表示されている内容をそのまま、写真に撮るように保存した画像のことを 主に「キャプチャー」、Macでは「スクリーンショット」と呼びます。全く同じ意味です。
 
 

Skitchの「画面キャプチャー機能」を使う

Skitchの起動画面では、自動的に「画面キャプチャー」のメニューが表示されています。

メニュー一覧が表示されていない場合は、「画面キャプチャー」の▼をクリックします。
キャプチャー、画面キャプチャーメニュー表示

 

開いたメニュー画面で、キャプチャーの撮り方を決めます。
キャプチャー、一覧説明

① 全画面:クリックすると、表示されている画面全体が保存されます。
② 画面のキャプチャー:画面の一部をキャプチャーできます。
クリックすると、十字カーソルが表示されるので、キャプチャーしたい部分をドラッグします。
③ 画面のタイマースナップ:タイマー機能を使ってキャプチャー画面を撮ります。
タイマーを使うメリットは、プルダウンメニューなど、マウス操作が必要とされるキャプチャーを保存することができます。
④ カメラ:内蔵カメラが起動して、写真を録ります。

⑤ 画像またはPDFを開く:ファイルを選んで開きます。

⑥ 空白ページ:白いキャンバスが表示されます。

⑦ 1.x Skitch文書を開く:保存してある文書を選んで開きます。

 

 

Macの機能「スクリーンショットを撮る」を使う

上記で紹介したSkitchの機能で画像保存することもできますが、お勧めはMacの機能「スクリーンショットを撮る」を使う方法です。

なぜか?ですが、通常画面保存する操作は、何か作業を行なっている状況の中で、その画面を保存していきます。Skitchで取り込む操作は連続して複数の画像を保存する場合には効率的ではありません。
作業と平行して、取り込んだ画像に逐一説明を書き込み保存していくのであれば、Skitchを使用する方法が便利だと思います。

しかし、一旦画面を保存しておいて後で解説文書を作成する場合は、Mac機能の「スクリーンショットを撮る」方が、軽快に連続して複数画像を保存でき操作性に優れていると思います。

 

では、その方法についてご紹介します。

 

■画面全体のスクリーンショットを撮る方法

shift + command (⌘) + 3 3つのキーを同時に押します。
(3つのキーをせーので同時に押さえる必要はありません、最終的に3つのキーが押された状態になれば良いので、片手で 先にshift キーと
 command (⌘)キーを押さえおいて、もう一方の手でを押さえると簡単です)
マックキーボードキャプチャー

 

 

■画面の選択した部分のスクリーンショットを撮る方法

shift + command (⌘) +  キーを同時に押します。

キャプチャー、マックキーボドスクリーンショット


ポインタが十字型に変わります。
スクリーンショットの撮影範囲の始点となる位置に十字ポインタを移動し、そのままドラッグして範囲を選択します。
キャプチャー、スクリーンショット範囲選択

マウス(トラックパッド)から手を離した時点で「カシャ」というシャッター音がして範囲選択された画面が保存されます。

 

■特定ウインドウのスクリーンショットを撮る方法

command + shift + 4 + スペースキー

command + shift + 4  同時に押した後、いったん手を離してから、スペースキーを押します。
写真、マックキーボード、スクリーンショット

カーソルがカメラアイコンになり、アクティブウィンドウがグレーで選択されます。
キャプチャー、スクリーンショットアクティブウィンドウ

この状態で、クリックするとグレー選択されたウィンドウが画像保存されます。

*別のウィンドウのスクリーンショットを撮りたい場合はカメラアイコンのカーソルを撮りたいウィンドウ上へ移動させます。

 

上記で撮影した画像は、デスクトップ上に保存されます。
ファイル名は自動的に「スクリーンショット <日付>  <時間>.png」となります。
ファイル形式は「.png 」ファイルになります。

 

補足情報

  • 上記の3種類の組み合わせに[control]キーを追加することでスクリーンショットだけでなく、そのスクリーンショットをクリップボードに転送させることができます。
    例)control + command + shift + 3
  • 範囲を選択してスクリーンショットを撮る場合にshiftキーを押しながら選択するとx軸またはy軸を固定させながら範囲選択ができます。
  • 範囲を選択してスクリーンショットを撮る場合にoptionキーを押しながら選択すると選択範囲中央を固定させながら範囲選択ができます。
  • 範囲を選択してスクリーンショットを撮る場合に、範囲選択はスペースキーを押しながらドラッグすると移動させることが出来ます。

 

Skitchの編集機能

いよいよ、Skitchの編集機能の紹介です。左側のツールバーに機能ボタンが並んでいます。

キャプチャー、スキッチ 機能

 

 

画像をSkitchに取り込む

まず、説明を加えたい元画像をSkitchに取り込みます。

方法その1:スクリーンショットのファイルをSkitch内にドラッグ&ドロップする。
キャプチャー、ドラッグ&ドロップ

ファイルが読み込まれる。
キャプチャー、スキッチ

方法その2:メニュー>ファイル>開くキャプチャー ファイル開く
フォルダウィンドウが出るので、目的のファイルがあるフォルダ>ファイル を選択し、開くをクリックします。
キャプチャー、ファイル選択

ファイルが読み込まれます。
キャプチャー、ファイルが読み込まれる。

 

矢印を描く

 

1. ツールバーで、矢印を選択する。マウスアイコンが選択された色の矢印に変わります。
キャプチャー、矢印

 

2. キャンパス内で、カーソルをドラッグすると矢印が描かれます。
*この時点では、矢印の向きや大きさは気にしなくて良いです、あとで修正します(その方が簡単です)。

3. 描かれた矢印内にマウスを持っていくと、マウスポインターが黒十字に変わります。この状態でクリックすると、矢印の両端に●印が付きます。この●がついた状態が編集可能なモードです。
キャプチャー、矢印の変更モード

 

4. 編集可能状態で以下の操作ができます。
(1)拡大&縮小
●印をつかんで斜め方向にドラッグすると矢印が拡大縮小します。
(2)回転●印をつかんで回すようにドラッグすると矢印が回転し向きが変わります。
(3)先&尾の位置移動:先端または末尾の●印をつかんで合わせたい位置までドラッグすると先端または末尾の位置が移動します。
(4)移動黒矢印を表示させ、ドラッグすると矢印全体を目的の位置に移動できます。
(5)色変更:ツールバーの色マークで別の色を選択すると色が変わります。

キャプチャー、矢印変更

 

文字の入力

1. ツールバーで、「a」を選択します。マウスアイコンが選択された色の「a」に変わります。

2. キャンパス内でクリックすると、カーソルの点滅する枠が表示されます。キーボードで文字を入力します。下線が表示されている状態は変換可能です。確定すると、編集が可能な状態になります。マウスを枠外でクリックすると、入力完了状態になります。

キャプチャー、文字入力

 

 

3. 文書の入力幅を変えたい時は、左右の半円を掴んでドラッグします。幅の変更に応じて、文書が自動改行されます。強制的に改行を入れたい場合は、return(enter)キーを押します。

4. 文字の大きさを変えたい時は、左下の●を掴んでドラッグします。斜め上にドラッグすると、枠が小さくなり文字も小さくなります。斜め下にドラッグすると、枠が大きくなり文字も大きくなります。

キャプチャー、文字変更

 

 

5. 文字の色を変えたい時は、ツールバーの色マークで変更します。
*白縁と黒縁は文字の色によって自動的に設定されるようです。

6. 文字の縁 枠の上にある 「まるa」 をクリックすると文字の縁を有り、無しに変更できます。

キャプチャー、文字色、文字装飾

 

 

図形の描画

1. ツールバーの図形マークをクリックすると、ツールバーが図形の選択に変わります。図形を選びます。

2. ツールバーの色マークをクリックし色を選びます。

3. ツールバーの線マークをクリックし線の太さを選びます。
キャプチャー、図形を選ぶ

 

4. キャンパス内でドラッグすると、図形が描画されます。

Shiftを押しながらドラッグすると、正方形や正円などが描けます。
*描いた後、クリックして四隅に●の表示された状態にすると図形の編集ができます。

キャプチャー、図形描画

 

モザイク機能

1. メニューバーでモザイクボタンをクリック。該当箇所をドラッグ

*文字のある部分だけがモザイク表示になります、空白の部分はドラッグしても空白のままです。

キャプチャー、モザイク処理

 

*モザイクは編集機能が有りません。一回モザイクをかけてもしまうと、訂正できません。
*操作直後、取り消し処理(Command+V)または(メニュー>編集>取り消す)をすれば操作の取り消しができます。

キャプチャー、モザイク処理

 

スタンプ機能

1. メニューバーでスタンプボタンをクリックします。スタンプ一覧が表示されるので、押したいスタンプを選択し、スタンプを押したい箇所でクリックします。スタンプが表示されます。

キャプチャー、スタンプ

 

2. 編集モードにして(スタンプ縁の上でクリックすると周りに円が現れる)、外周の円上にある丸プラスをクリックすると、スタンプに矢印が出ます。

 

3. 黒タブの「a」をクリックし、説明文を入力します。

*外周の青い●をドラッグして、回転させると矢印の位置を変えることができます。矢印が右側に移動すると、説明入力部分は自動的に左側に移動します。

キャプチャー、スタンプ編集

 

フリーハンドペン・蛍光ペン

1. フリーハンドで図形や文字を描くことができます。手書き風のコメント等を入れれます。

2. 蛍光ペンで文字をマークできます。文字の飾りや、ラインマーカーの用に使えます。
キャプチャー、フリーハンド、蛍光ペン

 

 

トリミングと画像ファイル保存(エクスポート)

編集が完了したら、ブログへ挿入する画像ファイルとして保存します。

トリミングする

画像の不必要な部分を切り落として、必要な部分のみ残す作業をトリミングと言います。スクリーンショットを撮る場合、全画面で保存したり、説明に必要のない部分も保存してしまった場合は、トリミングをします。

1. ツールバーのトリミングマークをクリックします。マウスが手のマークに変わります。
キャプチャー、スキッチ トリミング

 

2. ハンドルを使って、トリミングしたい箇所を選択します。

上下左右にあるハンドルの上にマウスを重ねると、マウスがトリミング用の矢印に変わります。上下左右または、四隅のハンドルをドラッグして、トリミングしたい範囲を選択します。
キャプチャー、トリミング操作

3. トリミングしたい範囲が選択できたら、適用ボタンをクリックします。
キャプチャー、トリミング、適用

4. トリミングができました。
キャプチャー、トリミング完成

 

画像サイズを変更する

上記でトリミング方法をご紹介しましたが、ブログに挿入する場合、画像のサイズが重要になります。ブログシステムによっては、自動で画像サイズを調整してくれる機能も有りますが、ワードプレスの場合は以下のように、「メディアを追加」の画面で表示サイズを選択します。
キャプチャー、画像取り込みサイズ

フルサイズ:作成した画像のサイズ
中サイズ:300x241px
サムネイルサイズ:150x150px

中サイズだと少し小さいので、りんごはフルサイズで挿入することがほとんどです。
今、作成している使い方解説のように、パソコンの画面をキャプチャーして並べる場合、せめて横幅は揃っていた方が、見栄えがいいですよね。

それに、あまり大きいサイズだと、サイトの横サイズより大きくなり、最悪レイアウトが崩れる可能性も有ります。

そこで、保存する前に画像サイズを変更します、出来れば同じサイズに揃えておきます。
何んだか、難しい話になってきたな〜、面倒だな〜と思っていますか?大丈夫です!
この作業もSkitchを使うと、簡単にできます。

 

1. ツールバーのトリミングボタンを選んだ状態で、画面左上の拡大縮小 ボタンをクリックします。キャプチャー、画像サイズ変更

 

拡大、縮小の方法を2通り記載しました

2−1. 画面下のスライドボタンを左(マイナス側)へスライドすると、画像が縮小します。右(プラス側)へスライドすると、画像が拡大します。
画面上部にサイズが数値で表示されるので、確認しながら操作できます。サイズが決まったら適用ボタンをクリックします。

キャプチャー、画像の拡大縮小

 

2−2. 上部の画像サイズが表示されている枠に、直接数値を打ち込み設定することもできます。

上部の数字枠に直接数値を打ち込みます、左側の枠が幅の数値です。左側の枠に数値を打ち込み、右側の枠をクリックすると、右側の枠内の数値は自動的に変更になります(縦横比を保つために自動計算されるのです)。最後に右上の適用ボタンをクリックします。
キャプチャー、画像サイズ変更数字入力

りんごは主に2−2の数値を直接入力する方法で作成しています。
ちなみにこの記事の画像サイズは、横幅700px に設定しています。
*注意
画像サイズは、元画像サイズより大きくしてはいけません(しない方が良いです)、画像の解像度が下がり、ぼやけたり、荒い画像になってしまいます。大きな画像が必要な場合は、再度キャプチャー取り込みするなどして、大きいサイズの画像を用意します。

 

 

画像の保存

編集作業が完了したら、画像ファイルとして保存します。画像ファイルになると再編集ができないので、保存前に誤字等ないかよく確認しましょう。

 

1. 画面右下のファイル名の右にある、ファイル種別の▼をクリックすると、画像フィルの一覧が表示されます、保存するファイル種別を決めます。キャプチャー、画像種別選択

一般的に、画面キャプチャーを撮った時のファイル種別は 「PNGファイル」となっています。
Macのスクリーンショットも、「PNGファイル」です。

特別の理由がなければ、「PNGファイル」のままで保存して問題ないと思います。

 

2.Skitch メニューバー>ファイル>エクスポート をクリックします。

キャプチャー、保存

 

3.表示されたウィンドウで、保存場所を選択、ファイル名を入力して、保存ボタンをクリックします。

*ファイル名は英数字のみにしましょう(ブログやHPで使用するため)
*品質はデフォルトのままで良いかと思います(右から2目盛くらいのところ)
キャプチャー、エクスポート

 

*注意
保存されたファイルは、画像ファイルとなるため、入力した矢印や文字の編集はできません。
またSkitch にはEvernote(エバーノート)へ保存する機能も有ります。こちらも保存したファイルは画像ファイルとなるため、保存後の編集はできません。
保存する場合はなるべく(後で訂正等できるよう)元画像を保存しておきましょう。