Visual Documentation

ビジュアルドキュメントは、主に画像で製品、プロセス、システムを説明するドキュメントです。注釈付きのスクリーンショット、図、短い動画、手順ごとの画像の連続を使い、短い文章で補います。各手順で画面がどう見えるべきかを、説明するだけでなく示します。

一般的な形式には、操作ガイド、オンボーディングの資料、標準作業手順書、リリースノート、バグ報告、トレーニング用のスライドがあります。スクリーンショットは、ユーザーが実際に見る内容と一致するため、最も一般的な要素です。図は構造を説明し、短い動画やGIFは、静止画では示せない動きを示します。

ビジュアルドキュメントが重要な理由

読み手は、読む前に目で探します。正しいボタンに番号付きのマーカーが付いたスクリーンショットは、読み手が正しい場所にいることを確認させ、ミスを減らします。ビジュアルのガイドは、長い文章よりも言語の壁を越えやすく、設定がどこにあるかという繰り返しの問い合わせも減らします。

ビジュアルドキュメントの用途

• ヘルプセンターとナレッジベース。
• サポート、財務、運用チームの社内手順。
• 設定画面を示す開発者向けのドキュメント。
• QAのレポートとバグのチケット。
• 新入社員のトレーニング。

ドキュメントの作業の流れにおけるスクリーンショット

1. 理想的には操作ごとに1枚のスクリーンショットで、各手順を撮影します。
2. 画像を関連する領域に切り抜くか、枠を付けます。
3. 手順の番号、矢印、短いラベルを追加します。
4. 非公開のデータをぼかします。
5. PDFまたはWeb用の画像として書き出し、公開します。

Temposhotの Action Capture（Command+3）は、受け付けられた各クリックの直前に対象を保存します。既定では Click "[[element-name]]" の形式で、クリックされた要素から手順のタイトルを付けられます。ドキュメントエディターでは Step Numbers と フレーミングを追加でき、書き出しではPDFまたはページの画像が作られます。

よくある間違い

• 1つのパネルが重要なのに、画面全体を示すスクリーンショットを使う。
• インターフェースの変更後も、古い画像のままにする。
• 手順の間で、サイズと注釈のスタイルが不統一になる。
• 公開する画像に非公開のデータが残る。

同じスクリーンショットを繰り返し撮りますか？

Action Capture で手順を一度記録し、Documentsで編集してください。詳しくは Action Capture をご覧ください。

よくある質問

ガイドにはスクリーンショットをいくつ入れるべきですか？

画面を変える操作ごとに1枚が妥当な目安です。視覚的な情報が不要な手順は省いてください。

スクリーンショットを最新の状態に保つには？

インターフェースが変わるたびに、影響を受ける手順を撮り直し、バージョンごとに元の画像を保管してください。

出典

• Software documentation（Wikipedia）
• Google developer documentation style guide

関連リソース

• Action Captureのガイド: クリックから手順ガイドを作成します。
• 注釈とフレーミング: 手順の番号と焦点。
• ドキュメントの書き出し: PDFとページ画像の書き出し。