スクリーンショットから手順書を作る方法

手作業で：スクリーンショットと文書

昔ながらの方法は今も使え、費用もかかりません。Win+Shift+S で手順ごとにスクリーンショットを撮り、Word、Google ドキュメント、OneNote、社内の Wiki などに貼り付けて、それぞれの下に説明を 1 つずつ書きます。言葉づかいを完全に自分で決められます。ただし時間がかかります。ウィンドウの切り替え、トリミング、画像を見れば一目で分かるボタンの説明に、時間の大半を取られるからです。

作業しながら記録する：Scribe と Tango

Scribe と Tango は、作業している間にその手順を記録します。ブラウザー拡張機能で記録を開始して作業を進めると、クリックのたびに、スクリーンショットと自動生成された説明付きの手順になり、編集したうえでリンク、PDF、埋め込みとして共有できます。

どちらもブラウザーと自社のクラウドを前提に作られており、手順書は各社のサービス上に置かれます。また Scribe では、デスクトップアプリの記録は有料プランに限られます。どちらも事前の準備が必要で、作業を始める前に記録を開始しておかなければなりません。

撮影済みのスクリーンショットから：ScreenFeel の手順書作成

手順書が必要になるのは、たいてい事後です。作業を終え、途中で何枚かスクリーンショットを撮っていて、そこへ同僚からやり方を聞かれる。ScreenFeel の手順書作成レンズは、手元のキャプチャから手順書を書き起こします。

1. ライブラリを開き、2〜8 枚のキャプチャに、古い順にチェックを入れます。
2. 手順書作成を選びます。何かが実行される前に、消費するクレジットがボタンに表示されます。
3. 結果を読みます。作業名の見出し、手順書で何ができるようになるかを述べる 1 文、そして画像 1 枚につき 1 つの手順が並びます。各手順は「クリック」「入力」「選択」などの指示で始まり、実際の操作部品、ラベル、値を正確に引用します。最後に、うまくいったことを確かめる方法を示す結果のセクションがあります。
4. コピーするか、Notion、Confluence、GitHub などの Wiki 用に Markdown としてダウンロードします。

キャプチャがどのアプリでも撮れるので、ブラウザーに限らず、どのアプリのスクリーンショットにも使えます。画像と手順書はローカルのライブラリに残り、キャプチャは手順書を書くために 1 回だけ、何も保持しないモデルへ送られます。

良い手順書になるスクリーンショットの撮り方

• クリックする前に撮る。役に立つのは、これから押すボタンが写った画像で、押した後の画面ではありません。
• 手順を通してウィンドウの大きさを変えないようにすると、どの画像も前の画像と同じように見えます。
• 操作部分を切り取る。大事な部分が隅にある画面全体より、ダイアログの周りだけの範囲のほうが伝わります。
• Studio で番号を振る。Studio の番号付きステップや矢印を使えば、情報の多い画面も読みやすくなります。
• 公開する前に黒塗りする。手順書は広く共有されるものです。まず各キャプチャに名前、メールアドレス、トークンが写っていないか確認してください。

よくある質問