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

2018年3月26日2020年4月29日

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

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

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

 

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

 

それでは、使い方です。

Skitchの起動方法

１. Macのドックで、Skitchのアイコンをクリックします。

＊アイコンをドックに追加する方法はこちら

２. アイコンが反応して、Skitchの画面が表示されます。

 

３.　ドックのSkitchのアイコンに　「・」が表示されます。
＊Macのドック内では、起動しているアプリケーションには「・」が表示されます。

 

 

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

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

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

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

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

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

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

 

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

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

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

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

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

 

 

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

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

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

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

 

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

 

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

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

 

 

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

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



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

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

 

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

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

command + shift + 4 　を同時に押した後、いったん手を離してから、スペースキーを押します。

カーソルがカメラアイコンになり、アクティブウィンドウがグレーで選択されます。

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

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

 

 

 

Skitchの編集機能

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

 

 

画像をSkitchに取り込む

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

方法その１：スクリーンショットのファイルをSkitch内にドラッグ＆ドロップする。

ファイルが読み込まれる。

方法その２：メニュー＞ファイル＞開く
フォルダウィンドウが出るので、目的のファイルがあるフォルダ＞ファイル　を選択し、開くをクリックします。

ファイルが読み込まれます。

 

矢印を描く

 

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

 

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

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

 

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

 

文字の入力

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

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

 

 

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

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

 

 

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

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

 

 

図形の描画

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

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

３. ツールバーの線マークをクリックし線の太さを選びます。

 

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

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

 

モザイク機能

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

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

 

 

スタンプ機能

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

 

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

 

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

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

 

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

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

２. 蛍光ペンで文字をマークできます。文字の飾りや、ラインマーカーの用に使えます。

 

 

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

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

トリミングする

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

１. ツールバーのトリミングマークをクリックします。マウスが手のマークに変わります。

 

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

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

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

４. トリミングができました。

 

画像サイズを変更する

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

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

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

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

 

１. ツールバーのトリミングボタンを選んだ状態で、画面左上の拡大縮小　ボタンをクリックします。

 

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

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

 

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

上部の数字枠に直接数値を打ち込みます、左側の枠が幅の数値です。左側の枠に数値を打ち込み、右側の枠をクリックすると、右側の枠内の数値は自動的に変更になります（縦横比を保つために自動計算されるのです）。最後に右上の適用ボタンをクリックします。

 

 

画像の保存

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

 

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

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

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

 

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

 

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

＊ファイル名は英数字のみにしましょう（ブログやHPで使用するため）
＊品質はデフォルトのままで良いかと思います（右から２目盛くらいのところ）