Mac で既存のスクリーンショットから手順ガイドを作る方法

多くのガイドは、すでに存在するスクリーンショットのフォルダから始まります。サポートチャットでの取得画像、「Screenshot」と日時が付いたファイルが並ぶデスクトップ、以前の作業セッションのフレームなどが対象です。ガイドにするために録画をやり直す必要はありません。

この記事では、これらの画像を Temposhot の Document に取り込み、順序と見出しを整え、完成したガイドを書き出す手順を説明します。例として、Mac で画面収録の許可を設定するガイドを使います。サポート担当者は、2回のセッションで保存された 61 枚のスクリーンショットから作業を始め、16ページのガイドを完成させました。

1. ガイドに必要なスクリーンショットを選ぶ

Finder でフォルダを開き、手順を示す画像だけを選びます。重複したもの、読み込み途中の画面、誤って撮影したものは除外します。すべての画像を使うより、操作ごとに1枚ずつの画像を使うほうが、読み手は速く理解できます。

採用するファイルには、作業順を示す番号の接頭辞を付けて名前を変更します。例として 01-open-settings.png や 02-select-account.png のように付けます。Finder はこの順に並べて表示し、ファイル名は下書きのページタイトルとしても使えます。

取り込み前に、各画像に個人情報が含まれていないか確認します。今除外するほうが、書き出しのたびにぼかし処理をするより簡単です。

フォルダ名はガイドの名前にします（例: permission-guide）。却下した画像は、書き出しが確定するまでサブフォルダに保管します。Temposhot は画像を Document にコピーするため、取り込み後にフォルダを整理しても Document には影響しません。

作業例: 61 ファイルから 14 ページへ

サポート担当者は、フォルダ内の 61 ファイルから作業を始めました。選別で次の 4 グループを除外しました。

• 採用済みの画面と重複する 9 件
• ダイアログの読み込み中に撮影された 11 件
• 同じフォルダに保存されていた他の作業のフレーム 27 件
• 1 手順ずつを示す 14 件

採用した 14 ファイルがガイドのページになりました。残りの 47 ファイルは却下フォルダに移し、デスクトップ全体を検索しなくても後からフレームを戻せるようにしました。

名前と日付による並べ替え

Finder は名前または作成日で並べ替えます。作成日は1回のセッション内では役立ちますが、2つのセッションの時間が重なる場合や、別の Mac からファイルをコピーした場合には適しません。コピーの日付が元の撮影日時を置き換えるためです。名前を変更した後は名前で並べ、日付はセッションの最初のファイルを探す目的だけに使います。

2. 画像から Document を作成する

1. Documents を開く

   Command+4 を押して Documents を開きます。

2. 画像を選ぶ

   New Document メニューを開き、Images… を選びます。

3. ファイルを選択する

   Finder で名前を変更したスクリーンショットを選び、確定します。Temposhot は画像を Document にコピーするため、後の編集で元のファイルは変わりません。

開いている Document に画像を追加するには、空の Document の Upload images か、Add Pages メニューを使います。以前の Temposhot セッションのフレームは Add from Capture History から取り込みます。セッションを選び、1つを展開して含めるフレームと除外するフレームを指定し、Add selected Frames を選択します。選択した順番がページの順番になります。各オプションの詳細は ページと取り込みのガイド にまとめています。

ページごとの取得元を選ぶ

Add Pages メニューの 3 つの取得元は、それぞれ異なる種類のページを作成します。次の表を見て、各スクリーンショットに適した取得元を選びます。

以前の Temposhot セッションで撮影したスクリーンショットには Add from Capture History を使います。この方法ではフレームのセッション情報が保持され、ピッカーには撮影が完了したセッションだけが表示されます。他のアプリで作成したファイルには Upload images を使います。

取り込みのエラーと対処

最も多い問題は次の 2 つです。

• ファイルが取り込めない: PNG と JPG は直接取り込めます。他の形式は先に変換します。たとえば Image Converter で変換してから、変換後のコピーを取り込みます。
• 同じ画面が Document に 2 回現れる: ページメニューの Delete page でコピーを削除します。ページを削除しても、Finder の元のファイルには影響しません。

並べ替えの前に件数を確認する

Document のページ数を数え、採用したファイルの数と比較します。例では、取り込み後の Document が 14 ページで、選別で採用した 14 ファイルと一致しました。数が一致しない場合は、ファイルが読み込まれなかったか、セッションが 2 回追加されています。並べ替えの前に、各ページのサムネイルを一度開き、画像が読み込まれていることを確認します。

3. ページを作業順に並べる

Pages パネルには、すべてのページが一覧表示されます。ページをドラッグして並べ替えるか、ページメニューの Move up と Move down を使います。1つのスクリーンショットが異なる印を付けた 2 つの手順を示す場合は Duplicate page が役立ちます。不要なページは Delete page で削除します。

サムネイルを上から下へ確認し、画像だけで読み手が作業を追えるかを判断します。手順が欠けていれば書き留めておきます。後から Add Pages メニューの Capture new images… で撮影できます。

並べ替えの作業例

14 の採用ページは、1回目の作業で並べ、2回目の作業で確認しました。1回目はドラッグ＆ドロップで並べました。2回目は、各タイトルが示す画面と照合しました。

ガイドは最終的に 16 ページになりました。ページ数が変わったのは、2 つの画面にそれぞれ別の手順を示す 2 つの印があったため複製し、確認ダイアログを 1 画面で繰り返していたためです。

途中に新しい撮影を挿入する

Capture new images… で撮影した画像は、末尾ではなく選択中のページの後に入ります。欠けている手順の直前のページを選び、メニューから撮影を実行します。ドラッグしなくても、新しいフレームを正しい位置に配置できます。次の作業に進む前に、サムネイルの一覧で結果を確認します。

重複が生じる理由

重複は主に 2 つの原因で生じます。1つは Add from Capture History でセッションを 2 回追加した場合、もう 1 つは同じ画面を手動撮影と自動撮影の両方で保存した場合です。ページを削除する前に、各サムネイルの下のキャプションを確認します。キャプションには注釈の数が表示されます。印が付いたページは、見た目が似ていても印のない同じ画面のページとは重複ではありません。

4. 各ページに具体的なタイトルを付ける

ページを選び、Page Inspector で Page title を編集します。動詞から始め、操作する項目を正確に書きます。

• 「System Settings を開く」
• 「Privacy & Security を選択する」
• 「アプリの Screen Recording をオンにする」

詳細は Page description に書きます。入力する値、操作後の変化、注意事項などが対象です。PDF の書き出しでは、説明をスクリーンショットの前または後に表示できます（Pro のカスタマイズ）。

手順の種類ごとのタイトルのパターン

ほとんどの手順は 4 つの種類に分類できます。種類ごとにタイトルのパターンを決めておくと、読み手は説明文を読まなくても、リストから操作を見つけられます。

手順の種類	パターン	例
画面を開く	開く + 画面名	System Settings を開く
項目を選ぶ	選択する + 項目名	Privacy & Security を選択する
値を変更する	オンにする、または設定する + 値	Screen Recording をオンにする
結果を確認する	確認する + 結果	アプリが一覧に表示されていることを確認する

説明に書く内容

説明には、タイトルに含まれない情報だけを書きます。例では、9 ページのタイトルは「アプリの Screen Recording をオンにする」です。説明には「スイッチをオンにする前に、アプリが一覧に表示されている必要があります。表示されない場合は、アプリを一度再起動し、もう一度確認します。」と書いています。タイトルは操作を示し、説明は条件と次の手順を示します。

タイトルと画面の照合

タイトルは、記憶ではなく該当するスクリーンショットと並べて確認します。画面に表示されていないボタン名をタイトルに書くと、読み手は別の場所を探してしまいます。例では、16 ページ中 3 件の不一致が見つかりました。画面では「Open」と表示されている「Allow」というボタン、「Privacy & Security」と表示されているメニュー名の「Privacy」、そして、ダイアログでは「quit and reopen」と表示されているのに「restart」と書かれた手順です。書き出しの前に、各不一致を Page Inspector で修正します。

5. 読み手に必要な視覚的な手がかりだけを加える

取り込んだ画像には、クリック位置の記録がありません。そのため Focus on action は使用できません。Custom を選んだ Framing（F）で、各ページを該当するウィンドウまたはパネルに切り抜き、Apply framing を選択します。

次に、対象を示す印を付けます。

必要な表現	ツール
項目を指し示す	Arrow（A）
領域を囲む	Rectangle（R）または Ellipse（O）
クリック位置を示す	Click Marker（M、Pro）
値にラベルを付ける	Text（T）
非公開の情報を隠す	Blur（B、Pro）

1ページに印を 1 つ付けるだけで十分なことがほとんどです。各フレーミング機能の説明は 注釈とフレーミングのガイド にあります。

ページごとに手がかりを 1 つ選ぶ

各ページが答える質問に応じて手がかりを選びます。「どの項目を操作するか」に答えるページには矢印が必要です。「どの値を入力するか」に答えるページには、入力欄の近くにテキストラベルが必要です。パスワード欄のあるフォームのページにはぼかしが必要です。次の流れは、1 枚のスクリーンショットでの判断を示しています。

Custom フレームでダイアログを切り抜く

権限のダイアログは小さく、画面の中央に表示されるため、画像全体の大半は余白になります。F でフレーミングエディタを開き、Mode を Custom に変更します。フレームをドラッグして、ダイアログのタイトル、スイッチ、読み手が押すボタンを含めます。Frame size を使うと、同じセクションのページで切り抜きの幅を揃えられます。ガイドの途中で拡大率が変わることを防げます。切り抜きを保存するには Apply framing を選択します。

小さい文字に対するぼかしの強さ

Blur には、2 から 80 までの Blur strength 設定があり、初期値は 12 です。まず初期値で始め、書き出しサイズでページを確認します。文字が読めなくなるまで値を上げます。エディタでは十分に見えても、書き出しサイズでは文字が読めることがあるため、書き出したページも確認します。注釈は非破壊なので、Blur strength は Object Inspector で後から変更できます。

6. 完成したガイドを書き出して確認する

1つのファイルとして書き出すには Export PDF を選択します。PDF の設定ダイアログでは、表紙、手順番号、ページ番号がオンになった状態で開きます。これらの設定を変更するには Temposhot Pro が必要です。ライブプレビューでページを順に確認し、タイトルと切り抜きがページに収まっていることを確認します。

More export formats では、タイトルに基づいて名前が付いた PNG、JPG、WebP のページを作成できます。描画済みの PNG ページと document.json を含む ZIP パッケージを作成することもできます。すべての書き出しでは、現在のページ順、フレーミング、注釈が使われます。

タイトルや印を付けずに、画像を 1 つの PDF にまとめるだけで十分な場合は、ブラウザツールの Image to PDF が、ブラウザ内でローカルに処理します。

16 ページのガイドの PDF 設定

次の設定で例の PDF を作成しました。すべての値は初期値と同じであるため、例では設定を変更していません。

横向きのページは幅の広いウィンドウに適し、縦向きのページは縦に長くスクロールするウィンドウに適しています。向きは、1ページをテスト書き出しした後に選び、ガイド全体で同じ設定を使います。

画像の形式とファイル名

画像形式は、ページの使用先に応じて選びます。PNG は UI の文字がくっきり表示されるため、ヘルプセンターやスライドに適しています。JPG と WebP はファイルサイズが小さいため、チャットやメールで送る場合に向いています。画像ファイルの名前はページのタイトルから付けられるため、タイトルを変更すると次回の書き出しでファイル名も変わります。

編集後に書き出し直す

Document を変更しても、書き出したファイルは自動では更新されません。順序、フレーミング、注釈を変更したら、もう一度書き出し、古いファイルを置き換えます。Document は書き出し後も編集できるため、元のデータを作り直す必要はありません。

1人の読み手でガイドを検証する

ガイドを作成していない人に、テスト用の Mac で書き出した PDF だけを使って手順を追ってもらいます。どこで止まったかを観察し、そのページ番号を記録します。例では、最初の読み手が 5 ページで止まりました。その手順では再起動が必要でしたが、説明に書かれていなかったためです。2人目の読み手は約 6 分で 16 ページすべてを完了しました。読み手が止まったページを修正してから、共有する前にもう一度書き出します。この規模のガイドでは 2 人の読み手で十分です。1人の読み手が止まる原因は、通常、次の読み手も止めるためです。

読み手のサイズで確認する

プレビューで高い拡大率にしたまま確認せず、読み手が実際に見るサイズで各書き出しページを確認します。200 パーセントの拡大率で読みやすいラベルも、A4 用紙に印刷すると小さすぎることがあります。テスト用の PDF を 1 つ書き出し、100 パーセントで表示して、すべてのタイトルと印が読めることを確認します。

PDF を共有する

手順だけを追う読み手には、書き出した PDF を送ります。Document には編集可能なページとすべての元の画像が含まれるため、所有者が保持します。ヘルプセンターで 1 手順 1 画像が必要な場合は、PNG ページを書き出します。

クリック操作から次のガイドを作成する

バラバラのスクリーンショットからガイドを作り直すのは、録画するよりも時間がかかります。次の作業では、Command+3 で Action Capture を開き、Start Action Capture を選択します。受け付けたクリックごとに、クリック直前の画面が保存されます。下書きのタイトルは Click "[[element-name]]" のようになり、任意でクリックマーカーも付きます。完了した実行は、順序の揃った Document として開きます。詳しくは クリック操作から手順ガイドを作る方法 を参照してください。

作り直しのコストが記録を上回る場合

例では、サポート担当者が 61 ファイルの選別、並べ替え、タイトル付けに時間を使いました。同じ権限の作業を録画すると、受け付けたクリックごとに 1 フレームが保存されるため、選別するフレームが少なくなります。画面がすでに存在し、作業を再現できない場合、たとえば顧客のセッションで発生した不具合などは、スクリーンショットから作り直します。

よくある質問

どの画像形式を取り込めますか

macOS のスクリーンショットは既定で PNG です。PNG と JPG のファイルは直接取り込めます。画像が取り込めない場合は、先に PNG または JPG に変換します。たとえば Image Converter を使います。

元のファイルは変更されますか

いいえ。Temposhot は画像を Document にコピーします。編集、切り抜き、注釈はコピーに適用されます。

取り込んだ画像と Action Capture のページを組み合わせられますか

はい。Images…、Add from Capture History、新規撮影のいずれからでも、同じ Document にページを追加できます。その後、Pages パネルで並べ替えます。

スクリーンショットにない手順を追加できますか

はい。欠けている手順の直前のページを選び、Add Pages メニューから Capture new images… を実行します。新しいフレームは選択中のページの後に挿入されます。

なぜ Focus on action のオプションが表示されないのですか

Focus on action には、記録されたクリックポイントが必要です。取り込んだ画像や、クリックポイントのない撮影から作られたページにはクリックポイントがないため、代わりに Custom のフレーミングを使います。

Document は作業中に自動保存されますか

変更が書き込まれると、エディタのヘッダーに Saved と表示されます。エディタを閉じる前に、このラベルが表示されるのを待ちます。Save failed が表示されたままの場合は、Temposhot を開いたままにし、ディスクの空き容量を確保してから、変更をやり直します。

1 つのガイドには何ページ入れるべきですか

1 つのガイドには 1 つの作業だけを入れます。例では、1 つの権限設定を扱い、16 ページで終わります。約 20 ページを超えるガイドは、2 つの作業を含んでいることが多いです。その場合は、タイトルを付けて 2 つ目のガイドに分けると、読み手が見つけやすくなります。

失敗時の手順も含めるべきですか

よく発生する失敗であれば含めます。エラーメッセージのページを 1 つ追加し、修正方法を短く説明します。失敗の原因となる手順の後に失敗のページを置くと、読み手は修正の前に原因を確認できます。

既存の PDF を全体から作り直さずに一部のページを修正する

1 つの画面が変わった場合は、そのページだけを置き換えます。新しい画像または撮影を追加し、正しい位置に移動してから、古いページを削除して書き出し直します。Document には、他のページ、タイトル、印がそのまま残ります。詳しくは Documents のページを参照してください。

書き出しには版番号を付けます（例: permission-guide-v2.pdf）。読み手がすでに受け取ったファイルは変更されないため、版番号を見ると読み手がどのバージョンを持っているかがわかります。

変更履歴を残す

置き換えたページは、書き出しファイルと並べて短いリストに記録します。記録する項目は、ページ番号、理由、日付です。例: 「9 ページ: ダイアログの位置が変わったため、2026-05-20 に新しい撮影で置き換えました。」このリストがあれば、次の編集者は、2 つの PDF をページごとに比較しなくても、どのページがなぜ変わったかを把握できます。