スクリーンショットのワークフロー

スクリーンショットのワークフローは、撮影、注釈、整理、納品まで、最初の撮影から最終出力へ至る一連の工程です。

Related workflow terms: スクリーンショット自動化, スクリーンショットへの注釈.

ワークフローの各段階

スクリーンショットのワークフローは4段階に分けられ、それぞれに判断事項と滞りやすい箇所があります。

1. 撮影： スクリーンショットを撮ります。フルページ、ビューポート、ウインドウ、範囲などの方法を選び、ビューポート寸法を設定し、ページまたはアプリを正しい状態にします。最終画像の用途に合う方法と設定を選びます。

2. 加工： 撮影したままの画像を、見る人と用途に合わせて整えます。矢印、吹き出し、ハイライトなどの注釈、機密情報への確実な墨消し、リサイズやトリミング、形式の変更などです。手作業の多くはこの段階に集まります。

3. 整理： 後から探せるよう、加工済み画像へ名前とタグを付け、所定の場所へ保存します。対象、日付、寸法などを含む命名規則を決めれば、一般的な名前の画像がたまって見つからなくなる事態を防げます。

4. 納品： 完成した画像を目的の場所へ送ります。ドキュメントへの埋め込み、チケットへの添付、CMSへのアップロード、チャットへの投稿などです。形式と解像度は、納品先の要件に合わせます。

ワークフローが重要な場面

スクリーンショットを定期的に作り、ほかの人が使う場合、手順が重要になります。

• 製品ドキュメント： ヘルプセンターやガイドを維持するチームは、現行UIと一致する、同じ基準の画像を必要とします
• QA工程： テスト結果の視覚的な記録を、決まった方法で撮影、ラベル付けし、レポートへ添付します
• マーケティングとコンテンツ： ランディングページ、ブログ、SNS向けの製品画像で、スタイルと寸法をそろえます
• 顧客向けレポート： 代理店やコンサルタントが、視覚監査の画像を再現可能な方法で撮影、注釈、提示します
• 社内連絡： エンジニアとデザイナーがチケットやPRで画像を共有するとき、標準形式なら内容が伝わりやすくなります

手動と自動のワークフロー

手動では、撮影、編集、ファイル名の変更、1枚ずつのアップロードを、各段階で人が行います。たまに撮るだけなら十分ですが、枚数が増えると多くの時間がかかります。

自動のワークフローは、その一部または全部をソフトウェアへ任せます。予定、CIイベント、API呼び出しなどをきっかけに撮影できます。加工では、同じ注釈、リサイズ、形式変換を適用できます。整理には、プログラムによる命名とタグ付けを使えます。納品では、完成画像をCMS、クラウドストレージ、メッセージサービスへ送る処理も組み込めます。

実際には、撮影と整理を自動化し、加工とレビューは人が行うなど、両方を組み合わせるチームが多くあります。判断が必要な段階を残しつつ、繰り返し作業を減らすことが目的です。

よくある失敗

• 整理を省く： 名前のない画像や一般的な名前の画像は、後で探せません。「Screenshot 2024-03-15 at 10.42.17.png」だけでは、内容も目的も分かりません
• 正しく撮る前に加工する： 構図の悪い画像へ注釈やリサイズを加えると、余計な作業が増えます。先にビューポート、状態、内容を正しく撮れば、加工は少なく済みます
• 寸法を統一しない： 文書内の画像がすべて違う大きさでは、レイアウトがそろいません。撮影後ではなく、撮影前に目標寸法を決めます
• すべてを1回限りとして扱う： UI更新後に同じ画像が必要になるなら、URL、ビューポート、設定をそろえて再実行できる手順にします。更新時の作業を大幅に減らせます