スクリーンショット付きドキュメントを最新の状態に保つ方法

スクリーンショット付きドキュメントは、リリースのたびに少しずつ古くなります。ボタン名の変更、メニューの移動、新しいテーマの追加によって、手順自体は動いていても、ガイドが誤って見えるようになります。読者はそのガイドを信頼しなくなります。

この記事では保守の手順を説明します。各ガイドの担当者、レビューを起こすトリガー、そして Mac 上の Temposhot を使って変更されたページだけを差し替える方法を扱います。

手順はひとつの例を通して示します。対象は、6週間ごとにリリースされるWebプロダクトの40ページの管理者ガイドです。バージョン4.3ではボタン名を1つ変更し、ダイアログに項目を1つ追加し、サイドバーの項目を1つ移動します。ガイドはリリース日までに製品に合わせる必要があります。

担当者と検証済みバージョンを設定する

各ガイドには担当者を1人指定します。通常は、ガイドが示す機能を担当する人またはチームです。担当が複数に分かれると、誰も更新しなくなることが多くなります。

次の項目を表紙または最初のページに記録します。

• 担当者: 人名またはチーム名。
• 検証済みバージョン: スクリーンショットが一致する製品バージョンまたはリリース日。
• 最終検証日: 誰かがガイドの手順を最初から最後まで実行した日付。

「検証済み」は、誰かがガイドを使って作業を完了したことを指します。誰かが画面を見ただけでは検証済みになりません。

記録を読者の目に入る場所に置く

検証済みバージョンは、追跡用のシートだけでなくガイド自体に記載します。バージョン4.1の読者が4.3と記載されたガイドを開くと、画面が違って見える理由がすぐに分かります。サポート担当者も、不一致を調べる前にバージョンを確認できます。

Temposhot では、Document の最初のページに記録を Page title と Description として入力できます。Cover page を有効にしてPDFを書き出すと、表紙にドキュメントのタイトルとステップ数が表示されます。たとえば「管理者ガイド、4.3で検証済み」というタイトルにすると、表紙でバージョンを示せます。表紙の設定を変更するにはPDFのカスタマイズが必要で、これは Temposhot Pro の機能です。既定の設定ではすでに表紙が含まれています。

長いガイドは担当者ごとに分ける

例の40ページの管理者ガイドは、メンバー、ロール、請求、監査ログを扱います。4つの領域がある場合、通常は4人の担当者に分けます。40ページを1人で担当するより、セクションごとに担当者を置く方が効率的です。請求に関する変更には、請求チームが最初に気づくためです。

セクションの担当者は、自分の担当ページにのみ承認を出します。ガイドの担当者は4つの承認を集め、4つすべてがそろった後で検証済みバージョンを変更します。

製品の変更をレビューのトリガーにする

カレンダーに沿ったレビューだけでは、問題の発見が遅れます。画面を変えるイベントにレビューを結び付けます。

トリガー	気づく人	対応
ガイドに含まれる画面がリリースノートに記載される	ドキュメント担当者	リリース前に影響するガイドを確認する
ラベルまたはメニュー項目が変更される	プロダクトまたはデザイン	ガイド内で古いラベルを検索する
テーマまたはレイアウトを再設計する	デザイン	全体の再キャプチャを計画する
サポートから不一致が報告される	サポート	次の営業週までに修正する
1四半期間トリガーがない	ドキュメント担当者	利用頻度の高いガイドを抜き取り確認する

プロダクトチームには、見た目のUIを変えるリリース項目にタグを付けてもらいます。この1つの習慣で、ほとんどのトリガーを自動化できます。

6週間のリリースサイクルにレビューを組み込む

6週間ごとにリリースがある場合、ドキュメント作業には固定の期間があります。リリース日の数日前に、ステージングビルドでUIが凍結されます。それより前に撮影したスクリーンショットは、その後も変わる可能性があります。凍結されたビルドで撮影し、リリース日より前に書き出すと、ガイドと製品の内容が一致します。

このサイクルで最もよくある失敗は、撮影が早すぎることです。凍結後にラベルがまた変わると、同じページを撮り直す必要があります。

ステージング用のアカウントで安定したデータを使う

再キャプチャは、リリース間でデータが変わらないアカウントで行います。同じ3人のテストメンバー、同じ請求書番号、同じプラン名を使うと、変更のないページと新しいスクリーンショットの内容が一致します。異なるサンプルデータで撮影したページは、UIが同じでも既存のページの中で浮いて見えます。

サポートから報告された不一致に対応する

リリースノートに載らなかった変更は、サポートが見つけることが多くなります。「ガイドに載っているボタンが見つからない」という問い合わせでは、再キャプチャの前に3つの情報が必要です。ガイド名、ページ番号、顧客が使っている製品バージョンです。バージョンが分からないと、4.1を使う顧客の報告に対して、4.3ですでに正しいガイドを更新してしまうことがあります。

サポートチームには、この3項目を入力する短いテンプレートを渡します。現在のバージョンで確認された不一致は次の営業週に対応します。古いバージョンの不一致は、後述のアーカイブの判断に回します。

変更を影響するステップに対応付ける

再キャプチャの前に、変更された画面を表示しているページを特定します。一覧表があると、この作業が速くなります。

ガイド	表示する画面	検証済みバージョン	担当者
チームメンバーを招待する	メンバー、招待ダイアログ	4.2	チーム管理者
請求書を書き出す	請求、請求書一覧	4.1	財務

リリースで招待ダイアログが変わると、一覧表から該当するガイドと確認すべきページが分かります。一覧表がなければ、すべてのガイドを開いて確認する必要があります。

例: リリース4.3

リリース4.3では、目に見える変更が3つあります。メンバーページの Add member ボタンが Invite に変わります。招待ダイアログに Role 項目が追加されます。Invoices 項目がアカウントメニューから請求のサイドバーに移動します。

一覧表によると、これらの変更が影響するのは40ページのうち7ページです。

4.3の変更	表示しているページ	再キャプチャの方法
Add member が Invite に変更	6（メンバー一覧）、14（概要画面）	メンバーページの Action Capture
招待ダイアログに Role 項目を追加	7、8、9（招待ダイアログ、ロールの選択、確認）	招待フローの Action Capture
Invoices が請求のサイドバーに移動	27、28（ナビゲーションと請求書一覧）	請求の経路の Action Capture

残りの33ページは変更しません。これらのスクリーンショットは4.3と一致しているため、再キャプチャしても読者に見える内容は変わりません。作業だけが増えます。

Compare Images で見た目の差分を確認する

リリースノートにはすべてのピクセルの変更が載るわけではありません。間隔の変更、新しいアイコン、色の変わったボタンは見落とされることがあります。リリースノートに記載がないページでは、同じ画面を新しく1枚撮影し、書き出したページ画像と比較します。

Compare Images は、2つのバージョンをスライダー、フェード、並べて表示、ピクセル差分の4つの方法で表示します。差分表示では変更された領域が強調されるため、移動したコントロールを見つけやすくなります。ブラウザ上で動作するため、一覧表で変更なしとされた33ページを手早く確認するのに使えます。

影響を受けたステップだけを差し替える

変更された1つのダイアログのためにガイド全体を撮り直すと、時間が無駄になり、新たな誤りを招くおそれがあります。変更されたページだけを差し替えます。

1. Document を開く

   Command+4 を押し、ガイドの Document を開きます。

2. 新しい画面を撮影する

   Pages パネルの追加メニューを開き、Capture new images… を選択してから Action Capture を選択します。変更されたステップだけを実行し、Finish capture を選択します。新しいページはエディタに戻り、現在のページの後に挿入されます。

3. 移動と削除

   新しいページを Pages パネルでドラッグして配置するか、Move up と Move down を使います。古いページは Delete page で削除します。

4. タイトルと注釈を引き継ぐ

   古いページを削除する前に、タイトルと説明をコピーします。注釈は Command+C と Command+V でコピーし、位置を調整します。

5. 再度書き出す

   Export PDF を選択するか、More export formats を使います。書き出しには、現在のページ順、フレーミング、注釈が反映されます。

ページと読み込みのガイド では、キャプチャ、画像、Capture History からページを追加する方法を説明しています。

Action Capture を再実行するか、Capture History から追加する

Document に新しいページを追加する方法は2つあります。Capture new images… は Document 内でキャプチャを実行し、実行が終わるとフレームを追加します。Add from Capture History… は既存のセッションからフレームを取り込みます。たとえば、ステージング用のMacで同僚が行った実行などです。

例では、招待フローを直接再キャプチャします。請求の経路は前日にステージングで撮影済みだったため、その2フレームは Add from Capture History… から取り込みます。ピッカーでそのセッションを展開し、必要な2フレームだけにチェックを入れます。

招待フローの再キャプチャ手順

招待フローは5回のクリックで構成されます。Invite、メールアドレスの欄、Role メニュー、Admin オプション、Send invite です。5ステップは、無料プランの Action Capture の上限である1回の実行あたり5ステップに収まります。これより長い経路には、Temposhot Pro またはランを2回に分けることが必要です。

元の実行と同じターゲットの種類とマーカーのスタイルを使います。ページ6から9は円のマーカー、残りは四角形のマーカーというガイドは、すべての手順が正しくても、部分的に修正したように見えます。

ウィンドウのサイズを同じに保つ

Specific Window のターゲットは、ウィンドウを現在のサイズで撮影します。元のページを撮影したときのブラウザウィンドウの幅が1440ピクセルだった場合、再キャプチャの前に同じ幅に戻します。幅が違うと、ページのレイアウトと文字の大きさが、変更のない33ページと合わなくなります。

Screenshot Resolution Checker は、書き出したページ画像のピクセルサイズを表示します。古いページと新しいページを1枚ずつ確認し、幅が一致することを確かめます。

テキスト、注釈、プライバシーを再確認する

新しいスクリーンショットは、その周囲の要素を壊すことがよくあります。

• 古いラベルを含むタイトル。例: ボタンが Invite に変わったのに「Add member を選択」と書かれている。
• 何もない場所を指している矢印やマーカー。
• 移動したコントロールを切り取るフレーミング。
• 古い画面にはなかったデータを含む新しい画面。たとえば、名前が表示された新しいサイドバー。

Action Capture のページには Focus on action を再適用し、それ以外のページには Custom のフレーミングを適用します。新しい個人データは Blur（B、Pro）でぼかします。

すべてのページで古いラベルを検索する

変更されたコントロールの名前は、そのコントロールを表示するページ以外にも現れることがよくあります。例では、「Add member」はページ6と14のタイトルに加えて、ページ3の説明にも出てきます。ページ3はメンバーページの場所を説明しています。Page Inspector で各ページの Page title と Description をすべて確認し、古いラベルが出てくる箇所を一覧にします。同じ編集ですべて修正します。

隣接するページのフレーミングを揃える

Action Capture のページは、Wide、Relaxed、Balanced、Close、Tight の5段階のフレーミングに対応しています。ページ5と10が Balanced の場合、ページ6から9も Balanced に設定します。段階が混在すると、ページ間でズームが飛ぶため、誤りに見えます。

ページで F を押すと、フレーミングエディタが開きます。手動の切り抜きが崩れた場合は、Reset to action でクリック位置を中心とした自動フレームを再作成します。

ガイド全体をテストする

テスト用のアカウントを使い、現在のバージョンでガイドを最初のページから結果まで実行します。差し替えたページは、変更によって後続のステップが移動した場合などに、フロー全体を壊すことがあります。

このテストに合格してから、Verified version と Last verified の日付を更新します。

例でテストが見つけた問題

4.3の例では、エンドツーエンドのテストで、ページのレビューでは見つからなかった問題を1つ発見しました。ページ10には、招待を送った後に「ダイアログを閉じる」と書かれていましたが、4.3ではダイアログが自動で閉じます。ページ10のスクリーンショットは正しかったため、一覧表も Compare Images も指摘しませんでした。手順を実際に実行したときにだけ発見できました。

説明を修正し、ページ5からテストを繰り返します。変更のなかった部分については、最初の変更の前のページからの部分的な再テストで十分です。

テストの担当者を選ぶ

ページを再キャプチャした人は、テストの担当に向きません。すべてのコントロールの位置をすでに知っているためです。再キャプチャに関わっていないセクションの担当者やサポートのメンバーは、顧客と同じようにガイドを読みます。例では、セキュリティスクワッドの担当者がメンバーのセクションをテストし、約10分でページ10の問題を見つけました。

テスターには、エディタ内の Document ではなく、書き出したPDFを渡します。これにより、読者が受け取るファイルのページ順、表紙、画像の品質も含めてテストできます。

ホットフィックス後に再テストする

2つのリリースの間のホットフィックスは、リリースノートに記載されないままラベルを変えることがあります。6週間のサイクル内でサポートから不一致が報告された場合は、同じ手順を繰り返します。一覧表でページを探し、差し替え、変更前のページから部分テストを行います。Verified version には、ホットフィックスのバージョン（例: 4.3.1）を追加します。

履歴が必要な場合のみアーカイブする

ほとんどの読者は、現在のガイドだけを必要とします。古い製品バージョンをまだ使っている顧客がいる場合（長期リリースを利用している場合など）や、規制で記録の保存が義務付けられている場合にのみ、古いバージョンを残します。

アーカイブするときは、ファイル名と表紙で古いファイルであることを明記します。例: invite-teammate_v4.1_archived.pdf。Document と Capture History は Mac にローカルで保存されます。そのため、書き出したファイルは Mac に頼らず、共有ストレージにアーカイブします。Action Capture の作業を削除すると、対応する Document も削除されることがあるため、ガイドを廃止するまで元の Document を保存しておきます。

書き出しファイルのフォルダ構成

固定のフォルダ構成にすると、現在のファイルを見つけやすくなります。Settings > General の Export path をガイドの作業フォルダに設定し、完成したファイルを所定の場所に移動します。

ヘルプセンターや社内イントラネットからリンクされるのは current フォルダだけです。アーカイブされたファイルは、古いバージョンを使う顧客がアクセスできる状態を保ちますが、誤って開かれることはありません。

Capture History の保持期間を確認する

Capture History は、既定で30セッションを保持します。上限は Settings > History で1から500の範囲に変更できます。6週間ごとに複数のガイドを再キャプチャするチームは、数サイクルで30セッションに達することがあります。Document にはすべての画像のコピーが保存されているため、古いセッションを削除してもガイドは壊れません。ただし、後で再利用するための元のフレームは失われます。

保守の記録を残す

スプレッドシートまたはドキュメントツールに、ガイドごとに1行の記録を残します。

• ガイド名とファイルの場所。
• 担当者。
• 表示する画面。
• 検証済みバージョンと最終検証日。
• サポートや読者から報告された未解決の問題。
• 次回の定期確認日。

この一覧を毎週短く確認すると、変更が小さいうちに気づけます。年1回の整理では、読者がすでに影響を受けた後に気づくことになります。

4.3リリース後の記録の例

項目	値
ガイド	管理者ガイド、current/admin-guide_v4.3.pdf
担当者	ドキュメント担当者と4人のセクション担当者
表示する画面	メンバー、招待ダイアログ、ロール、請求、請求書、監査ログ
検証済みバージョン	4.3、最終検証はリリース日
未解決の問題	なし
次回の確認	リリース4.4、6週間後

スクリーンショットを長持ちさせる習慣

リリースのたびに壊れるスクリーンショットもあれば、何年も有効なままのものもあります。違いは、フレームの切り取り方と表示するデータの内容がほとんどです。

よくある質問

スクリーンショット付きドキュメントはどのくらいの頻度でレビューすべきですか？

表示する画面が変わるリリースのたびにレビューします。ほかのトリガーがないガイドは、四半期に1回などの一定間隔で抜き取り確認を行います。

スクリーンショットが壊れる頻度を減らすにはどうすればよいですか？

Framing で関連するパネルに合わせて切り抜き、スクリーンショットに日付や名前を含めないようにします。コントロール名を本文でも示しておくと、細かなスタイル変更が入っても読者は手順を追えます。

デザインを大きく変えた後、ガイド全体を再キャプチャする必要がありますか？

レイアウトやテーマが全体的に変わった場合は必要です。ボタン名の変更やコントロールの移動だけであれば、影響を受けたページだけを差し替えます。

Document を再書き出しすると、古いPDFは上書きされますか？

いいえ。Export path に同じ名前のファイルがある場合、Temposhot は新しいファイル名に番号を付けます。古いファイルを先に移動するか名前を変更するか、公開済みのコピーを手作業で差し替えます。

手動のスクリーンショットから作成したガイドのページを更新できますか？

はい。Upload images… で新しい画像ファイルを追加するか、Capture new images… で撮影します。Document は、ページの供給元に関係なく同じように扱います。Focus on action に必要なクリック位置を持つのは、Action Capture のページだけです。

全体の再キャプチャと比べて、部分更新にはどのくらい時間がかかりますか？

40ページの例では、7ページの差し替えと再確認に約35分かかりました。全体の再キャプチャでは、40ページすべてのタイトルと説明を入力または確認し直し、各ページの注釈を付け直す必要があるため、数倍の時間がかかります。

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

Action Capture は、変更されたステップだけを再キャプチャし、既存の Document に追加します。Temposhot をダウンロードし、検証済みバージョンが最も古いガイドから更新します。