Macで手順書を撮るだけで作る「StepNote」を開発した話｜スクショに番号を付けてMarkdown/PDFに書き出す

一行でいうと: 画面を撮るたびに番号を付けて蓄積し、最後にMarkdownやPDFの手順書として書き出せる、メニューバー常駐の小さなMacアプリを作りました。名前はStepNoteです。BOOTHで準備中です（リリース価格は300円・買い切り）。

なぜ作ったのか

操作手順を人に伝えるとき、いちばん手っ取り早いのはスクリーンショットです。ただ、実際に手順書を作ろうとすると面倒が重なります:

・スクショを撮る
・画像に番号を付ける
・文書に貼って整形する
・配布形式を揃える

1回なら良いのですが、「毎月同じ手順を説明する」「引き継ぎ資料を何枚も作る」場面で一気に重くなります。

世の中の道具を調べると:

・手順を録ると自動でガイドを作るクラウド型SaaSは便利ですが、個人プランは月$25〜35（2026年時点の公開情報）で、撮った画面はクラウドに送られます
・高機能なスクショアプリは買い切りで買えますが、番号付きの手順書として組み立てる機能はありません
・macOS内蔵のスクショは番号付けも組み立てもありません

「ローカルで完結して、買い切りで、撮るだけで手順書になる道具」は空いていました。メニューバー工房らしい1本です。

StepNoteの使い方（3ステップ）

StepNoteで撮影した手順デモ（番号バッジ付き）

①メニューバーにカメラアイコンが現れます。②操作のたびに「手順を撮る（⌥⇧S）」を押します。撮影画像には自動で番号バッジが付きます。③「書き出し…」でMarkdownかPDFとして保存します。ステップのタイトルは書き出し前に編集できます。

StepNoteのメニューバーメニュー

できること

・全画面撮影+番号バッジ自動付与（撮るたびにステップ1、2、3…と蓄積）
・ステップごとのタイトル編集（書き出し窓から直接）
・Markdown書き出し（画像を同梱したフォルダ+手順書.md）
・PDF書き出し（1ステップ1ページ）
・やり直しても過去の手順はguidesフォルダに自動退避（勝手に消えません）
・データはすべてこのMacの中。外部送信はありません

中身の作り方（開発メモ）

Swift 1ファイル（約1,300行）で、次の構成です:

・撮影はScreenCaptureKit。録画ではなく「最初の1フレーム」を静止画として受け取りCGImage化します（macOS 13でも動く実証済みパターンです）
・番号バッジはCore Graphicsで円+白リング+数字を撮影画像に合成
・PDFはPDFKitで1ステップ1ページ（番号+タイトル+画像）
・保存は~/Library/Application Support/StepNote/（steps.json+PNG）。やり直しは削除ではなく退避
・ビルドはuniversal（Apple Silicon / Intel両対応・macOS 13以降）

テストは自己テスト36件（番号採番・Markdown生成・PDF生成・保存と退避・バッジのピクセル検証など）+撮影以外の全工程を通すE2E 15件で、実機で全項目合格。撮影エンジン自体も実画面キャプチャ（2400×1350）で実写検証済みです。

macOS 27で苦労したところ（権限まわり）

StepNoteの初回セットアップ窓（画面収録の案内）

撮影には「画面収録」の許可が必要ですが、最近のmacOSでは挙動が独特です。システム設定のトグルをオンにする際に管理者認証が出ること。そしてトグルをオンにしても「起動中のアプリ」には反映されず、再起動が必要なこと。前者は画面収録の変更が保護された操作になっているため、後者は起動時に権限状態を確定させる仕様のためです。

このため初回起動の案内窓は、「システム設定を開く→『+』でStepNoteを追加→トグルをオン→窓の『StepNoteを再起動』」を1枚にまとめました。許可が済んだ状態で窓を開くと緑の「準備完了」が表示されます。

正直な既知の制限

・撮影は全画面です（範囲指定・特定ウィンドウのみは今後の候補）
・クリック位置の自動検出はありません（番号バッジは画像の左下に付きます）
・ステップの並べ替えは撮影順固定です（タイトル編集は自由）

「足りない20%」を求める人には物足りません。その層は想定していません。毎月の手順書・引き継ぎ資料・サポート返信に画面説明を添える用途に、小さく収めた道具です。

リリース予定

BOOTHのメニューバー工房ショップで準備中です。リリース価格は300円（買い切り・今後価格を変更する可能性があります）。公開されたらショップトップから購入できるようになります: https://menubar-kobo.booth.pm/

これまでの道具と同じく、完全オフライン・買い切りです。

コメント

コメントを投稿

このブログの人気の投稿

メニューバーの3つの道具、それぞれの使い方

イメージ
前回「つくり始めました」と書いたきりだったので、今回はそれぞれが何を解決する道具なのか、どう使うのかをまとめます。動いている画面も撮りました。 ShotTidy（スクショの自動整理） きっかけは自分のデスクトップです。スクショを撮るたびにPNGが落ちてきて、気づくと画面の端がスクショだらけ。「あとで整理しよう」は永久に来ません。 使い方は3つだけ。 起動するとメニューバーに常駐します（「監視中 — 今日7枚整理」のように、今日撮った枚数も見えます） いつも通りスクショを撮る。撮った瞬間に「ピクチャ/スクショ整理/2026-11-08/」のような日付フォルダへ自動移動します すでに散らかっている分は、メニューの「デスクトップを今すぐ整理」で一括片付け 左が散らかっている状態、右が整理後。フォルダの中に4枚きれいに入っています。 保存先は「ピクチャ/スクショ整理/日付/」で固定。設定はほぼいりません。 PastePolish（コピーした文字の整形） WebやPDFからコピーした文字は、だいたい汚いんですよね。Ｉｔｅｍ　Ａみたいな全角英数字とか、変な空白とか。資料に貼ってから手で直すのが地味に嫌でした。 クリップボードの中身を、貼る前に整えます。 いつも通りコピー Option+⌘V を押す（クリップボードの中身がその場で整います） 普通にペースト。整った文字が入る この画像は手で作った説明図ではなく、本当のクリップボードで実行した結果を撮ったものです。 モードは次の4つ。メニューで切り替えます。 全角英数→半角 半角英数→全角 空白を整形 改行を整形 かな漢字は壊しません（英数字と記号・空白だけを整えます）。なお、最初「動いてない」と思ったらモードが違った、というオチがありました。 WindowFit（ウィンドウ整列） 「資料を左、メモを右」で作業したいのに、ドラッグだと毎回ずれる。あの微調整が嫌でした。 使うのはホットキー4つだけです。 Control+Option+← / → : 前面のウィンドウを画面のちょうど左半分 / 右半分へ Control+Option+F : 画面中央の大きめサイズへ Control+Option+C : 画面中央のコンパクトサイズへ これは実際に2回...
続きを読む

メニューバー工房に、道具を5つ増やします

自分が欲しくてつくった小さな道具が、あと5つ増えます。どれも「あると毎日数十回ぶんの手間が消える」方向けです。 TidyLoad — ダウンロードフォルダを放っておくと片付く。拡張子ごとに自動で移動する整理道具。 RecZoom — 画面録画に、クリックを追うズームを後付け。説明動画を「伝わる映像」に変える道具。 KoeNote — ⌥Spaceで録音、話したことがそのまま文字になる。AIモデルをアプリに同梱した完全オフラインの文字起こし。 PdfLighten — 重いPDFが驚くほど軽くなる。圧縮と結合はドロップ一発。 MediCon — MP4/M4A/HEVCへの一括変換。ffmpeg等の外部ツールは使わず、macOS内蔵エンジンだけ。 こだわりは3つあります。 データは端末の外に出ない。 文字起こしのAIモデル（465MB）までアプリに同梱しました。録音した音声がどこかへ飛ぶことはありません。 テストを書いて、動くところを自分で確かめてから出す。 5本合わせて200件超の自動テストと、実際のファイル・動画・音声を使った検証を通しています。 「できないこと」も商品ページに正直に書く。 ズームは2倍固定、PDFはテキスト検索ができなくなる等、弱いところもそのまま載せます。 販売ページはBOOTH（ menubar-kobo.booth.pm ）です。商品の公開を順次はじめました。道具ごとの紹介記事は追って書きます。 追記: 初回起動時の権限案内の作り方や、開発中のつまずき（音声認識APIが黙って死ぬ問題とその回避など）も、このブログで順番に書いていく予定です。
続きを読む

PDFを軽量化するMacアプリ「PdfLighten」｜Web圧縮サイトに上げない

イメージ
PdfLighten — 重いPDFが、飲み込みやすくなる。圧縮と結合のPDFユーティリティ。 【解決する問題】 スキャンPDF・画像たっぷりPDFがメールに添付できないほど重い。Web圧縮ツールは「ファイルをアップロード」が不安。 使い方（3ステップ） ①PDFをドロップ ②品質を選ぶ（低60/中75/高90） ③圧縮済みPDFが横に生成。結合はドロップした順で複数枚→1冊。 できること 圧縮3段階（低60/中75/高90）— 設定は記憶されます 結合はドロップ順で複数枚→1冊 出力は元ファイルの横に 名前-compressed.pdf（上書き禁止・連番退避） 完全オフライン。PDFをどこにも送りません（Webツールとの最大の違い） 実測: 6.4MB→0.3MB（ページ数は維持） 正直な既知の制限 ページのラスタ化方式のため、テキストの検索・選択・リンク・しおりは失われます（画像・スキャン主体のPDF向け） テキスト主体の軽いPDFは逆に大きくなることがあります 再描画は144dpi固定 パスワード付きPDFは処理しません 品質状態 : 単体テスト36件+E2E実走（圧縮率・ページ数・結合・衝突退避を出力実物で検証） 動作環境 : macOS 13以降・Apple Silicon/Intel Mac 両対応（universalビルド）。 価格 : ¥300。 初回起動の注意 : アドホック署名のため「壊れているため開けません」と表示されることがあります。その場合はターミナルで xattr -cr /Applications/PdfLighten.app （初回のみ。詳細は サポートブログ に記事があります）。 プライバシー : ユーザーのデータを端末の外へ送信しません。収集・解析・トラッキングは一切行いません。 ダウンロード（BOOTH・¥300） : https://menubar-kobo.booth.pm/items/9121313
続きを読む