デザイン・開発向きなキャプチャツール – Shottr


デザインのやりとりの際、デザインのカンプ出すまでもなく、スクリーンショットと注釈くらいで送りたい、ということがよくあります。
ぱっとスクリーンをキャプチャしてちょっとコメントつけてさっと出したい、くらいの手軽さ。
Mac だったら、OSのコマンドとプレビューアプリでできなくもない。でも、もっと素早く注釈が書きやすいといいなと思っていました。

最近出会ったスクリーンキャプチャツール、Shottr のご紹介です。
 https://shottr.cc/

なにができるか

Shottr は 2020年にリリースされた比較的新しいアプリですが、機能は充実しています。
起動するとメニューバーに Shottr アイコンが表示されます。

キャプチャ

  • 全画面
  • ウィンドウ選択
  • エリア選択
  • エリアの再選択(最後のエリア選択設定を再度呼び出してキャプチャできる)
  • エリア内自動スクロール(上下両方向)
  • 遅延スクリーンショット

キャプチャを撮るとキャプチャ画像の編集ウィンドウが表示されます。

20220301-shottr-shot01

注釈を入れるのに必要な機能は一通り揃っています。
色の数が決まっていたり矩形や楕円は線だったりしますが、注釈の用途では十分なように思います。

編集ツール

  • テキスト
  • 矢印線
  • 矩形
  • 楕円
  • 画像内のぼかし・削除

面白いのは画像ので矩形選択したエリアが削除される機能です。簡易的単純な削除で、Photoshopのような写真の要素を消せるようなものではありません。

便利な機能

  • カラーピッカー
  • スクリーンルーラー
  • ピクセル拡大

カラーピッカーはカーソルのあるピクセルの色コードを拾うことができます。右上の編集ウィンドウにカーソルの色コードが表示されて、色コードのコピーもできます。

スクリーンルーラーは、矩形選択で選んだエリアのピクセルのサイズを測定してくれます。そのままルーラーのサイズが書き込みできるので、サイズの注釈説明にも使えます。

このほかキャプチャー画像や画面エリア選択からのOCRもできますが主に欧文で、日本語には非対応です(欧文以外では中国語に対応)。

おすすめ

スクリーンキャプチャの方法が豊富なので、やりたいことは Shottr で行えると思います。
それに加えて、注釈に向いた編集ツールがあるのでキャプチャを撮ってからすぐ書き込めるのがとても便利です。私はプレビューの編集ツールよりもデザイン指示の書き込みには向いていると思います。
ホットキーも設定できるので、デフォルトのスクリーンショットのコマンドを上書きする日も近そうです。

画面に書き込みしたスクリーンショットをやりとりすることを日常的に行う Mac ユーザーにはオススメのツールです。


投稿者 Imanishi Emi

UIデザイングループリード。
制作会社でプロモーションサイトや広告のデザイン制作、受託開発会社にてサービスのUIデザインを経験し、Gaji-Laboに参加。ユーザーが使いやすいインターフェースデザインづくりと、フロントエンドで実現するUIデザインの橋渡しについて考えます。
実際にインターフェースを試したりフィクションの世界のUIにヒントをもらいながら、心地よく使えるデザインを考えるのが好き。