Mac で指示用スクリーンショットを分かりやすく注釈する方法

指示用スクリーンショットの役割は一つです。読者に次の操作場所を示すことです。注釈はその場所を明確にします。印が多すぎると場所が分かりにくくなるため、ページ上のすべての矢印、枠、ラベルは、その手順に関する一つの問いに答える必要があります。

このガイドでは、何に印を付けるか、各作業にどのツールが適しているか、Mac の Temposhot Documents エディターでページに注釈を付ける方法を説明します。各セクションでは 6 ページの作成例を使い、すべてのルールに具体的な値を示します。

注目点を一つに絞る

何かを描く前に、手順を一文で書きます。「ツールバーの Export を選択」と書くと、対象は Export ボタン、文脈はツールバーであることが分かります。画面のそれ以外の部分は背景になります。

この一文を使って、画面を次の三つに分けます。

• 対象。 読者が操作する単一のコントロール。最も強い印を付けます。
• 文脈。 読者が自分の画面で対象を見つけるために必要な周辺の UI。ツールバー、サイドバー、ダイアログのタイトルなどで通常は十分です。
• ノイズ。 他のウィンドウ、無関係なパネル、個人情報。切り抜くか覆います。

1 枚のスクリーンショットに対象が二つ必要な場合、その手順には二つの操作が含まれている可能性が高いです。ページを二つに分割します。

作業例: 6 ページの書き出しガイド

この記事の例では、チームメンバーが Web ダッシュボードから月次レポートを書き出す手順を文書化しています。Action Capture で記録したため、各ページにはクリック位置と Click "Reports" のような解析済みのタイトルがすでにあります。注釈を付ける前に、各ページに一文の手順を設定しました。

1. 左のサイドバーで Reports を開きます。
2. 一覧で March 2026 のレポートを選択します。
3. レポートヘッダーの Share メニューを開きます。
4. Export as PDF を選択します。
5. Page range を All pages に設定します。
6. Download を選択します。

手順文は 6 文で、対象も 6 つです。当初の 5 ページ目には、ページ範囲の欄と用紙サイズの欄の両方が表示されていたため、最初の下書きでは両方に印を付けていました。手順文に出てくるのはページ範囲だけなので、用紙サイズの印は削除しました。手順文に「と」で結ばれた操作がある場合は、そのページに操作が二つ含まれていないか確認してください。

描く前に手順文を確認する

簡単な確認で、注釈の問題の多くはキャンバスに置く前に見つかります。手順文を声に出して読みながら、スクリーンショットを見ます。印がない状態で視線が約 2 秒以内に対象へ向かえば、印は軽いものを 1 つ付ければ十分です。視線が定まらない場合は、印を増やす前にフレーミングを行います。

注釈の前に切り抜く

切り抜くと各要素の位置が変わるため、先に描いた印が誤った位置に残ったり、切れたりすることがあります。先に切り抜き、その後で注釈を付けます。

Temposhot の Document では、F キーで Framing を開きます。Action Capture で記録したページにはクリック位置が含まれるため、Focus on action を使うと、その位置を中心に自動でズームできます。レベルは Wide、Relaxed、Balanced、Close、Tight から選びます。広いレベルほど多くの文脈が残り、狭いレベルほど対象のコントロールが強調されます。

読み込んだ画像の場合は Custom を選び、範囲をドラッグします。Apply framing を選択します。Framing は元の画像を上書きせず、Show full image を選べばいつでも切り抜きを解除できます。各コントロールの詳細は 注釈とフレーミングのガイド にあります。

コントロールの大きさからフレーミングのレベルを決める

適切なレベルは、対象の見つけやすさによって変わります。空いたダイアログにある大きくてラベルの付いたボタンなら、Wide や Relaxed のままで十分です。20 個のアイコンが並ぶツールバーにある 16 ピクセルのアイコンには Close が必要です。そうしないと、読者は同じコントロールを探すのに時間がかかります。Tight は操作部分だけを表示するため、読者が自分の画面で同じコントロールを見つけるための文脈も失われます。広いページの後に続くクローズアップとして使ってください。

書き出しガイドでは、次のようにレベルを設定しました。1 ページ目は Relaxed で、サイドバー全体が見えるようにします。2 ページ目と 3 ページ目は Balanced、4 ページ目はメニュー項目が小さいため Close、5 ページ目と 6 ページ目は Balanced です。Page Inspector のマイナスボタンとプラスボタン（Wider framing と Tighter framing）は、クリックごとに一段階ずつ変わるため、二つのレベルを比べるのに便利です。

自動フレームが適切でない場合

Focus on action は、フレームをクリック位置の中央に配置します。メニューが上向きに開いた場合や、クリック時にツールチップが領域を覆っていた場合は、フレームがメニュー項目のラベルを切り取ることがあります。Image actions から Adjust framing… を開き、Mode を Custom に切り替えて、ラベルが収まるまでフレームをドラッグします。ドラッグ中は Frame size に幅と高さが表示されます。結果が悪化した場合は、Reset to action を選ぶと、記録された位置を中心とする自動フレームを再構築します。

役割に応じて注釈を選ぶ

注釈の種類ごとに伝わる内容が異なります。ガイド全体で一貫して使うと、数ページのうちに読者はその視覚的な表現を理解します。

役割	Temposhot のツール	キー
クリックする場所を示す	Click Marker（Pro）	M
小さいコントロールを指す	Arrow	A
領域をまとめる	Rectangle または Ellipse	R または O
二つの領域を区切る	Line	L
値を説明する	Text	T
一画面内の順序を示す	Step Numbers（Pro）	N
非公開の詳細を隠す	Blur（Pro）	B
余分な要素を除く	Framing	F

印の選択、移動、サイズ変更には Select ツール（V）を使います。Object Inspector で色、線の太さ、不透明度、重ね順を変更できます。[ と ] を使うと、印を一段階後ろまたは前に移動します。

ガイド全体でスタイルを一度決める

読者は、視覚的な規則が変わらなければすぐに理解します。書き出しガイドでは次の規則を使いました。「ここを操作する」を示すクリックマーカーは一色で統一します。矢印は約 24 ピクセルより小さいコントロールにだけ使います。長方形は入力欄のまとまりにだけ使います。テキストラベルは値を示すためだけに使います。すべての長方形と矢印は Width を 3 にし、同じ Color を使います。テキストラベルは全ページで同じ Size にします。Object Inspector は Document 単位ではなくオブジェクト単位で設定を適用するため、これらの決定は作業前に書き出しておいてください。

無料のツールと Pro のツール

Text、Rectangle、Ellipse、Line、Arrow、Framing はライセンスなしで使えます。Blur、Click Marker、Step Numbers には Temposhot Pro が必要です。無料のツールだけでもガイドは作成できます。ボタンを囲む Rectangle と、空いた場所から伸びる Arrow を組み合わせれば、「ここをクリック」を示す大半のケースに対応できます。違いが出るのは要素が密集した画面です。その場合、クリックマーカーは枠と矢印を組み合わせるよりも少ない線で視線を集めます。

一ページに Step Numbers が必要な場合

一つの対象に一つの印という規則には例外が一つあります。一画面の中で、読者が決まった順序で入力するフォームです。4 項目のフォームを 4 ページに分けると、同じスクリーンショットを 4 回繰り返すことになります。代わりに、ページは 1 枚のままにし、N を押して、読者が入力する順序で 1 から 4 までの番号ラベルを各項目の横に置きます。Object Inspector では Step Numbers に Label、Radius、Color を設定でき、項目に小さな手順がある場合は「1a」のようなラベルも使えます。Description には対応する順序を書きます。例：「Name、Department、Cost centre、Approver の順に入力する」。キャンバス上の番号と説明文の文章が同じ内容を伝えます。

クリックマーカーで正確な操作を示す

クリックマーカーは、文字を使わずに「ここを操作する」と伝えます。ボタン、メニュー項目、チェックボックス、タブに最も適しています。

Action Capture は、記録中にマーカーを追加できます。Configure の下にある Visual Annotations セクションでは、Show cursor on click captures（Mac Pointer、Minimal Arrow、Touch Dot、Crosshair から選択）と Mark clicked area（Circle または Rectangle。枠線と背景の色を設定可能）を指定できます。これらの印は Document 内で編集できます。

手動で追加する場合は、M を押してコントロールをクリックします。マーカーはコントロールよりやや大きめにし、ハイライトの下でもラベルが読めるようにします。

作成例で使った記録設定

記録前にマーカーを設定すると、各ページが最初から印付きで届くため、最も作業時間を節約できます。書き出しガイドは Configure Action Capture で次の値を設定して記録しました。ダイアログのプレビューには、記録を開始する前にカーソルとマーカーが表示されます。

丸いアイコンや短いボタンには円形が適しています。メニュー項目や表の行は幅が広く高さが低いため、長方形が適しています。ガイドで両方を使う場合は、記録時にどちらか一方の形を選び、例外だけを手作業で変更します。手作業の場合は、Object Inspector で Click Marker の Border、Background、Size を変更します。

コントロールに合わせてマーカーのサイズを決める

マーカーが小さすぎると、枠線がコントロールのラベルを隠します。大きすぎると隣接するコントロールを覆い、読者がどれを指しているのか分からなくなります。書き出しガイドでは、Medium がツールバーのボタンに合いましたが、4 ページ目の Export as PDF メニュー項目は円より幅があったため、そのページには長方形のマーカーを使いました。次のページに進む前に、Reset zoom を使って各ページを 100 パーセントの表示倍率で確認してください。

矢印と図形で文脈を示す

矢印は、コントロールが小さい場合や密集したツールバーにある場合に役立ちます。矢印は空いた場所から始め、コントロールの少し手前で終えます。文字を横切る矢印は、文字とコントロールの両方を読みにくくします。

長方形と楕円は、関連する入力欄のまとまり、ステータス領域、表の列など、要素をまとめるために使います。内容が見えるように、塗りつぶしではなく輪郭線を使ってください。

図形の特殊なケース

よくある状況は三つあります。フレームの端にあるコントロールは矢印の尾を置く余地がないため、フレーミングを一段階広げるか、中央から内向きに矢印を向けます。他の内容と重なる開いたドロップダウンには、トリガーボタンではなく開いたリストの周りに Rectangle を付けます。読者が次に見るのはリストだからです。表の行は、箱で囲むより細い Line を下に引く方が分かりやすくなります。一つの行を箱で囲むと、隣の行も含まれているように見えるためです。

テキストは短く、対象の外に置く

テキストラベルは、スクリーンショットでは示せない値、たとえば入力するファイル名や選択するオプションを伝えます。2 語から 6 語で十分です。長い説明は Page description に書きます。PDF の書き出しでは、説明文がスクリーンショットと一緒に表示されます。

ラベルは対象の横に置き、対象の上には置かないでください。ボタンの上にラベルを重ねると、読者が探しているボタンの文字が隠れます。ガイド内のラベルは、すべて同じフォントサイズにします。

ラベルと説明文の使い分け

区別は簡単です。ラベルは、読者がコントロールの横で見る必要のある値に使います。説明文は、理由や次に起きることを説明するために使います。例の 5 ページ目では、ラベルはフィールドの横に「All pages」と表示されます。説明文には「Partial ranges skip the appendix, which finance needs for the audit.」と書かれています（部分的な範囲では、監査で経理部門が必要とする付録が除外されるという意味）。ラベルは 2 語、説明文は 12 語で、既定の PDF レイアウトでは画像の前に表示されます。

隠す必要がある部分だけをぼかす

Blur（B、Pro）は、名前、メールアドレス、アカウント番号、トークンを覆うために使います。ぼかす対象は、該当するフィールドだけにしてください。ウィンドウの半分ほどの大きさでぼかすと、読者は何が隠れているのか気になります。

Mac の外へ出してはならないデータは、Framing で切り抜くか、サンプルデータを使ってスクリーンショットを撮り直してください。ブラウザツールの Image Redaction Tool は、1 枚の画像をローカルで墨消しします。ぼかしと完全な除去の違いについては、プライバシーぼかし を参照してください。

書き出しサイズでも効果が出るぼかし強度を選ぶ

Blur strength は 2 から 80 までで、新しいぼかしの初期値は 12 です。強度 12 では、画面サイズの小さな本文は隠れますが、大きな見出しや短い数字は推測できる場合があります。例では、ヘッダーのサインイン中のメールアドレスを 20 に上げ、18 ポイントの文字で表示されたアカウント ID を 30 に上げました。キャンバス上だけでなく、PDF プレビューで結果を確認してください。プレビューは最終的な拡大率でページを表示するため、より正確に確認できます。

ぼかしで解決できない問題

ぼかしは、描画されたページのピクセルを隠します。ページタイトルや説明文は変更されません。また、クリックされたコントロールから解析された Action Capture のタイトルには、Click "Invoice for J. Rivera" のように個人名が含まれることがあります。書き出し前に、すべてのタイトルと説明文を読み、ぼかした値を繰り返している箇所は書き換えてください。さらに、隣のページのサムネイルも確認してください。3 ページ目でぼかした値が、2 ページ目では異なるフレーミングレベルで同じパネルとして表示されていると、そのまま読める状態になります。

注釈の前後を比較する

ページメニューの Duplicate page を使ってページを複製し、コピーの印を削除します。その後、Pages パネルで二つのページを並べて表示します。印が手順の理解を助けていない場合は削除します。確認が終わったら、コピーを削除します。

ページをまたいだ一貫性も確認します。完成した印を Command+C でコピーし、次のページで Command+V で貼り付けると、サイズと色をそろえられます。

数分でできるレビュー

Pages パネルの各サムネイルのキャプションには、そのページの注釈数が表示されます。この数字は、すばやく確認するための指標になります。書き出しガイドでは、5 ページのうち 5 ページが 1 または 2 個の注釈を示し、5 ページ目は 4 個でした。そのため、再確認が必要だと分かりました。このうち 2 つはクリックマーカーの重複だったため、削除しました。

最終的な読みやすいサイズを確認する

大きなディスプレイでは問題なく見えるラベルも、印刷された A4 ページやスマートフォンでは読めないことがあります。書き出す前に Export PDF を選択し、ライブプレビューを順に確認してください。書き出しガイド には、PDF、PNG、JPG、WebP のページと ZIP パッケージの一覧があります。

ガイド以外の単発の画像には、ブラウザツールの Screenshot Annotation Tool を使うと、ブラウザ上で矢印、枠、テキストを追加できます。ファイルはお使いのデバイス上に残ります。

A4 横向きでの読みやすさの計算

既定の PDF レイアウトは、Landscape の A4 で、Image size は Fit without enlarging に設定されています。A4 横向きのページの幅は 297 mm です。幅 1440 ポイントのウィンドウ全体のスクリーンショットは、余白を除いて約 1 画面ポイントあたり 0.19 mm で収まります。13 ポイントの画面テキストは、約 2.4 mm で印刷されます。小さいものの、読める大きさです。同じページを、幅 720 ポイントの領域に Close でフレーミングすると、約 4.9 mm に拡大します。読みやすさは、ラベルを大きくするよりもフレーミングによって大きく改善します。

テキストラベルはスクリーンショットと同じ比率で拡大縮小されます。そのため、全幅ページでサイズ 14 のラベルは、画面上のインターフェースと同じ小さな比率で印刷されます。ラベルのサイズは、フレーミングの後に決めてください。

確認すべき書き出し設定

PDF の設定をカスタマイズするには Temposhot Pro が必要です。Pro を使わない場合は既定の設定が適用されます。ラベルがスクリーンショットの横に置かれるガイドでは、Descriptions を Before image に設定すると、理由が画像の上に表示されます。Step numbers を有効にすると、各ページタイトルの上にステップのラベルが追加されます。キャンバス上のページで Step Numbers 注釈を使う場合は、PDF の Step numbers をオフにすることを検討してください。ページ上で二種類の番号体系が表示されるのを避けられます。

よくある質問

注釈で元のスクリーンショットは変わりますか

変わりません。Temposhot の Document での注釈とフレーミングは非破壊です。書き出しでは、注釈とフレーミングを反映した新しいファイルが生成され、元の画像は変更されません。

どの注釈ツールに Pro が必要ですか

Blur、Click Marker、Step Numbers は Pro のツールです。Text、Rectangle、Ellipse、Line、Arrow、Framing はライセンスなしで使えます。

1 枚のスクリーンショットには注釈をいくつ付けるべきですか

対象を示す強い印を 1 つと、読者が値を入力する必要がある場合はラベルを 1 つです。さらに必要になる場合は、手順を分割することを検討してください。

Temposhot で撮影していない画像にも注釈を付けられますか

はい。New Document メニューから Images… を選んで Document を作成し、読み込んだページに同じ方法で注釈を付けられます。一般的な方法については、スクリーンショットへの注釈 を参照してください。

PDF でラベルが小さく、エディターでは大きく見えるのはなぜですか

キャンバスのズームは表示だけを変更します。Zoom in と Zoom out は、書き出されるページサイズを変更しません。ページが用紙の幅に収まる場合、ラベルはスクリーンショットと一緒に縮小されます。フレームをより狭くするか、Export PDF のプレビューでサイズを確認してください。

一つのマーカーのスタイルを全ページに適用できますか

はい。Select ツールで完成した印を選び、Command+C を押します。次のページを開いて Command+V を押します。貼り付けられた印は、色、線の太さ、不透明度を維持します。新しい対象に移動し、必要に応じて Position and size を調整してください。

クリックを分かりやすい手順ガイドにする

Action Capture は、クリックごとにカーソルとクリック範囲を印付けしたスクリーンショットを 1 枚記録するため、多くのページで追加の注釈はほとんど必要ありません。macOS 14 以降を搭載した Apple Silicon の Mac では、Temposhot をダウンロード してください。