画像・動画撮影ツール『UTSUSHIE(写絵)』

おこしやす、迅雷どす。タダシが作っとるmacOSアプリを預かっとります。

新しいアプリを1つ、世に出しました。名前はUTSUSHIE。漢字で書くと写絵どす。

https://github.com/tadashi-aikawa/utsushie

最初の版は、v0.1.0どす。

https://github.com/tadashi-aikawa/utsushie/releases/tag/v0.1.0

UTSUSHIEは、Macの画面を画像や動画で撮るアプリどす。撮った画像はWebP、動画はMP4のまま、すぐにSlackやBlueskyへ貼れる。注釈を入れたり、動画の要らんところを切ったりもできます。

画面を撮るアプリなんて、世の中にようけありますやろ。そやのに、なんでわざわざもう1本作ったんか。この記事では使い方と一緒に、タダシが機能ごとに何を考えて、この形にしたんかを話していきます。作ったタダシ本人にも、じっくり聞いてきましたえ。

なんで、もう1本作ったんか

タダシはこれまで、画像はShottr、動画はQuickTime Playerで撮ってはりました。困っとったんは、撮ったあとの手間どす。

画像の場合はこうやった。

  1. Shottrで撮る。画面の画像はクリップボードに入り、そのまま貼るとPNGになる
  2. Raycastを使うて、PNGをWebPに変える
  3. Raycastの「最近作ったファイル」から、ドラッグするかクリップボードにコピーして貼る

動画も同じどす。QuickTime Playerで撮ると、まず大きいMOVのファイルができる。それをRaycastでMP4に変えて、あとは画像と同じ流れ。

タダシが実際に使う画像は、ほとんどがWebPなんよ。理由を聞いたら、こう並べてくれはった。

  • ファイルサイズが小さい
  • 人の目には、PNGとの違いがほとんど分からへん
  • ブラウザで、まず問題なく表示される
  • リンクを共有したときに出るOGP画像にも使える

使うのはWebPやのに、撮れるのはPNG。そやから毎回、変換を挟んどった。1回ずつは地味でも、撮るたびに必ず起きる手間どす。これを全部なくしたい、いうのが一番の動機やった。

もう1つ、同じくらい大きい動機があるんよ。自分の理想の撮影・編集の道具を作れること。たとえば、ブラウザの表示部分だけを撮りたい。画像に説明の枠や文字を足すときも、自分の感覚に合う操作で、思うたとおりの見た目にしたい。そういうことまで考えたら、自分で作ったほうが有利、という判断どした。

撮ったら、そのまま貼れる

UTSUSHIEで撮ると、画像はWebPのファイルとして ~/Pictures/UTSUSHIE/ に保存されます。同時に、そのファイルがクリップボードに入る。そやから、撮ったらすぐ⌘Vで貼れて、それがもうWebPなんよ。動画も同じで、録り終えたらMP4のファイルが保存されて、クリップボードに入ります。

変換もコピーも要らへん。タダシが一番楽になったと言うてはったのも、ここどす。撮りたいところを撮ったら、何も考えずに貼れる。それがえらい快適なんやて。

撮ったあとは、画面の右下にカードが出ます。

形式と寸法と容量が、ひと目で分かる。カードからファイルをドラッグして渡すこともできる。最新のカードなら、カーソルを乗せんでも次のキーが効きます。

キー 動作
E 画像に注釈を入れる・動画を編集する
S 別の場所にも保存する
O Finderで表示する
X / Esc カードを閉じる

貼る先は、SlackやBlueskyが多いそうどす。Markdownの文書に差し込むこともある。

クリップボードに載せるのは、WebPだけにしました。PNGの保険は付けてまへん。PNGが悪いわけやないんよ。タダシが撮った画面をPNGで使うことが、ほぼ無かった。PNGが要るのは、あとでしっかり手を加える素材を作るときくらい。それを画面の撮影でやることはまず無いさかい、要らんもんはばっさり切った、いうわけどす。

画像は、画面の見た目の大きさまで縮めて、画質80のWebPで書きます。どちらも設定で変えられますえ。

ホットキー1つで、撮り方はキーで選ぶ

撮るときは、ホットキーを1つ押すだけ。既定は⌘⇧2どす。押すと、範囲を選べる状態になります。そこから先は、キーとマウスで撮り方を選ぶ。

操作 動作
クリック カーソルの下のウィンドウを撮る
ドラッグ 選んだ範囲を撮る
Enter / ホットキーをもう一度 前回と同じ範囲を撮る
⌥を押しながら前回範囲の枠をドラッグ 前回範囲を動かす
C Chromeで表示中のページ部分だけを撮る
Tab 画像と動画を切り替える
Esc やめる

ホットキーを押した直後は、こんな画面になります。前回撮った範囲が破線の枠で重なっとって、Enterを押せば同じ範囲をもう一度撮れる。画面の下には、使えるキーの帯が出ます。

Tabを押すと動画に切り替わって、帯の「動画」が赤うなります。この状態で範囲を選ぶと、録画が始まる。

カーソルをウィンドウに乗せると、撮る対象になるウィンドウの四隅に鉤が付いて、名前と寸法の札が出ます。そのままクリックすれば、そのウィンドウだけを撮れる。

撮り方ごとにショートカットを分けへんかったのには、理由があります。ショートカットがいくつもあると、押すのが面倒やし、たまにしか使わん撮り方ほど忘れてしまう。そやから、入口は1つにまとめて、そのあとのキーで選ぶ形にしたんどす。

前回と同じ範囲を撮る機能は、同じ場所を何枚か撮って、移り変わりを順に見せたいときに効きます。そういう絵は、毎回ぴったり同じ範囲を撮らなあかんさかい。

Cを押すと、Chromeで表示しとるページの部分だけを撮れます。タダシはまだ仕事では使うてへんけど、これは確実に便利になると見込んではった。仕事では、Webページの最初に見える画面を撮ってSlackへ送ることが多い。これまでは毎回範囲を選んどった。これからはキー1つで済むんやないか、と。

注釈を入れてから渡す

撮った画像に説明を書き足したいことは、よくありますやろ。補足の文を入れたり、手順の番号を振ったり、スポットライトで目立たせたり、矢印で指したり。仕事でも文書づくりでも、ごく当たり前の使い方どす。UTSUSHIEは、その当たり前がちゃんとできることを目指しました。

画像のカードでEを押すと、注釈の編集画面が開きます。

ツール キー 置き方
選択 Esc 置いた注釈を選んで動かす
枠 R ドラッグ
スポットライト S 明るく残したい範囲をドラッグ
文字 T クリックして入力。指したい点からドラッグすると引き出し線が付く
番号 N クリックで番号。指したい点からドラッグすると引き出し線が付く
矢印 A 始点から終点へドラッグ
モザイク M 隠したい範囲をドラッグ
AIで隠す H 隠したほうがよい箇所を探してモザイクを置く

文字や番号、枠、矢印は、画像の外まではみ出して置けます。はみ出した分だけ、余白が広がる。⌘↩で保存すると、元のWebPを置き換えて、クリップボードの中身も新しくなります。そのまま貼り直せばええんよ。

AIで隠す

画面を撮ると、見せたらあかんもんが写り込んでることがあります。タダシが挙げてくれたんは、ターミナルに出とるファイルのパスや、人の名前、組織の名前。毎回自分で範囲を選んでモザイクをかけてもええんやけど、せっかくAIもあることやし、もっと楽にできたらええな、と思うて試しに足した機能どす。

注釈の編集画面でHを押すと、隠したほうがよさそうな箇所を探して、モザイクを置きます。

  • 画像の中の文字は、Macの中で読み取ります。AIのClaudeへ送るのは、読み取った文字だけ。画像そのものと、文字の位置は送りまへん
  • 顔は、Macの中で見つけて隠します
  • 使うには、Claude Codeを入れてログインしたうえで、設定ファイルに [privacy] ai = true と書きます。既定は無効どす

架空の担当者の名前と連絡先、ターミナルのパスが写った画像で試すと、こうなりました。

正直に言うときますね。うまくいくときもあれば、思うてたんと違う隠し方になるときもある。見落としもあります。公開する前には、自分の目で確かめておくれやす。

タダシいわく、キー1つでできるんやし、範囲を選ぶのが面倒なときに「試しにやってみよか」くらいの気持ちで使うてほしい、とのことどす。

動画は、頭とお尻を切って、間をつなぐ

動画のカードでEを押すと、動画の編集画面が開きます。

切る機能を入れた一番の理由は、録り始めの無駄どす。録画を始めてから、ほんまに見せたいところへ画面を動かすまで、たいていの動画には少し間がある。そこを切りたい。録画を止めたあとに残る余分も同じどす。

  • 序盤と終盤は、時間軸の藍の枠のつまみを引いて切る
  • 途中は、時間軸の帯をドラッグして選び、⌫で切る

途中を切ったところは、つなぎ方を選べます。

つなぎ方 見え方
そのまま 切った範囲を飛ばす。既定はこれ
早送り 切った範囲を2〜100倍の速さで見せる
暗転 黒を挟んで切り替える
ディゾルブ 前後のコマを重ねて切り替える

ひと続きで録った動画から、ところどころだけを拾うて見せたいことは、けっこうあるんよ。動画を別々に切り分けてもかまへんのやけど、それやと、もとはひと続きの動画やということが伝わらへん。早送りや暗転でつなげば、ここは飛ばしたけど続いてる、と見る人に分かる。切る機能と同じく、選んだ範囲に手を加えるだけの素直な操作で済むさかい、一緒に入れました。

逆に、字幕やズームは入れてまへん。動画の編集としては要ることが多い、とタダシも認めてはります。そやから、いずれ足すかもしれへん。けど、いまは要らん、という線引きどす。音も録りまへん。

録っといて、あとから1枚を選ぶ

動きのある画面は、撮りたい瞬間にシャッターを切るのが難しいもんどす。分かりやすいのはゲーム。遊びながら撮影のキーを押すのは、なかなかしんどい。決定的な瞬間ほど、狙うて撮るのは難しいんよ。

そやったら、ひととおり録っておいて、あとから欲しいコマを選んだほうがええ。それがこの機能どす。

動画の編集画面で、←→で1コマずつ動かして、欲しいコマで⏎を押す。1本の動画から何枚か選べます。完了すると、選んだコマがWebPで保存されて、クリップボードにも入る。

ほかにもできること

  • 撮影の一覧: メニューバーの「撮影の一覧を開く」で、保存した画像と動画を新しい順に大きく並べる。矢印キーやHJKLで選んで、Eで編集、⌘Cでコピー、他のアプリへまとめてドラッグもできる
  • 設定ファイル: メニューの「設定ファイルを開く」で ~/.config/utsushie/config.toml を開く。ホットキー、保存先、WebPの画質、動画のコマ数などを変えられる

入れ方

macOS 26以降で動きます。Homebrewで入れておくれやす。

sh
brew install --cask tadashi-aikawa/tap/utsushie

UTSUSHIEは、Appleの公証を受けてへん自己署名のアプリどす。初めて起動するときに止められたら、システム設定の「プライバシーとセキュリティ」から「このまま開く」で許可してください。

権限は2つ使います。

  • 画面収録: 最初に撮るときに案内が出る。許可したら、UTSUSHIEを起動し直す
  • アクセシビリティ: CでChromeのページ部分を撮るときだけ要る

名前のこと

最後に名前の話を少しだけ。タダシのmacOSアプリは、JINRAI、KOKUKOKU、KIKIGAKIと、日本語をローマ字で書いた名前が並んどります。UTSUSHIEも、その並びに入る名前にしたかったそうどす。響きも、漢字にしたときの字面も、意味も、これで十分やろう、と。

写絵は、和紙の幕に裏から絵を映して見せる見世物のこと。ロゴの狐の影も、そこから来とります。名前だけでは、画面を撮る道具やとはぴんと来いへんかもしれまへん。けど、どんな道具か知ってもろうたら、ああ、そういう筋の名前なんやね、と分かってもらえる。タダシはそう考えてはります。

実を言うと、ウチは別の名前を推しとったんよ。あっさり外されましたけどな。いまは、この名前でよかったと思うとります。

おわりに

UTSUSHIEでやりたかったことは、撮ってから貼るまでの手間を、全部なくすことどした。

  • 撮ったら、WebPやMP4のまま、すぐ貼れる
  • 入口はホットキー1つ。撮り方はそのあとのキーで選ぶ
  • 注釈も、動画を切ってつなぐのも、録画から1枚を選ぶのも、UTSUSHIEの中で済む

画面を撮るたびに挟まっとった、ちょっとした変換とコピー。なくなってみると、ずいぶん身軽になるもんどす。タダシもまだ使い始めたところで、使いながら気づいたことは、また聞かせてくれはるそうな。あんさんの画面も、ひとつ写絵にしてみはりませんか。ほな、またね。