ビジュアルを使用してステップバイステップの手順を作成する方法

読者が理解するためにテキスト以上のものを必要とするチュートリアルがいくつかあります。 ビジュアルを使用してステップバイステップの説明を作成することにより、他の方法では伝達されなかった可能性のある詳細に読者をキーイングできます。 それらのビジュアルは、静止画像またはスクリーンショット、アニメーションGIF、比較チャート、またはビデオである可能性があります。 読者があなたのコンテンツを理解するのを助けることに加えて、ビジュアルはまた、大量のテキストの単調さを壊します。

昨年、私はJoyentのテクニカルライターとして、すべてのスキルレベルのユーザーを対象とした指示書の作成とビデオの作成に携わってきました。 これには正確さが必要です—人々は技術的なタスクのためのステップバイステップの説明とガイドを作成するために私に頼っています。 私が一歩を逃したり、読者がすでに情報を知っていると思い込んだりすると、彼らはイライラして立ち去り、私たちのコンテンツに二度と戻ってこないかもしれません。 一方、私が詳細すぎると、コンテンツが過度でとりとめのないものに感じられ、より頻繁な更新が必要になる可能性があります。 プレッシャーはない。

画像がそれらの過度に正確な詳細のいくつかを置き換えることができる場所を見つけることは、私に時間とエネルギーを節約します。 さらに、読者は、自分たちが何を期待しているのかを知って立ち去り、それが自分たちの生活を楽にしてくれることを願っています。 可能な場合はいつでも、語るのではなく見せるという重要な文章のアドバイスに従ってください（非常に重要なため、独自のWikipediaページがあります）。

正確なプロセス用語の恩恵を受けるためにテクニカルライターである必要はありません。 指示を準備し、ドキュメントにビジュアルを追加するための戦略を読み続けてください。

視覚化を開始する前に、視聴者を考慮してください

コンテンツを制作する前に、誰のために制作しているのか、そして彼らの期待は何かを知っておく必要があります。 各読者の個々のニーズを予測することは不可能ですが、確立するルールはコンテンツのトーンに影響を与え、後でプロセスの概要を作成するときに決定を下すのに役立ちます。

次のことを考慮してください。

• 私の読者はすでに専門家ですか？ 彼らは以前にこのプロセスを行ったことがありますか？
• 私の読者は内部ですか、それとも外部ですか？ 私の読者が同じ会社内にいる場合、プロセスをよりよく説明するのに役立つどの言語を共有しますか？
• 彼らは私のコンテンツにどのような気分で来ますか？ 私は何かを成し遂げようと急いでいる誰かのためにこのコンテンツを作成していますか、それともトピックに関する教育をさらに進めたいと思っているよりカジュアルな学習者のためにこれを作成していますか？
• 私の読者にとって最も重要なことは何ですか？ 最も重要でないものは何ですか？
• 私の読者はどのように学ぶことを好みますか？ ブログの投稿がビデオよりも成功しているかどうかわかりますか？ これらの主張を裏付ける分析データはありますか？
• 私の読者は英語を母国語としていますか？ 私がイディオムを使用する場合、それはプロセスを完了する方法を学ぶ彼らの能力を妨げるでしょうか？

何を作成していても、常に相手側のリーダーを使用して作成しています。 読者をよく理解し、読者を念頭に置いてコンテンツを作成すればするほど、読者はより多くのコンテンツを求めて戻ってくる可能性が高くなります。

必要なだけ詳細なプロセスの概要を説明します

任意のメディアのプロセスまたはチュートリアルを準備する1つの方法は、2列のテーブルから始めることです。 最初の列には、読者がタスクを完了するために実行する必要のある個々のステップが含まれます。 これらの手順は、「アプリケーションを送信する」のように小さく正確な場合もあれば、「フォームの残りの部分に記入する」ように大きくて具体的でない場合もあります。

2番目の列は、視覚的なプロセス列になります。 最初は、これには実際のビジュアルがまったく含まれていない可能性がありますが、ビジュアルがどのようになるかについての説明が含まれます。 文書を作成する場合は、1列目のすべてのステップに一致するビジュアルを用意する必要はありません。 スクリーンキャストを作成する場合は、すべてのボックスに、含めるビジュアルのタイプに関するメモを含める必要があります。 ビデオには、空の画面時間がほとんどないか、まったくないはずです。

この表の例は、以下の「例の概要」の下にありますが、最初に、視覚補助の種類について詳しく知る必要があります。

ビジュアルの種類とその使用時期

すべてのプロセスは、さまざまなタイプのビジュアルから恩恵を受けることができます。 媒体はその目的に応じて変化します。

• 静止画像–これは、人であれ、ある種の鍋のような特定の物体であれ、物理的な製品を視覚化しようとする場合に最適な媒体です。 これらは、ストック写真またはあなたが撮った写真である可能性があります。
• スクリーンショット– Webサイトや別のソフトウェアなど、コンピューターに表示される製品について話すときは、画面の静止画像が最適です。 特にSnagitのおかげで、これらは非常に簡単に取得および編集できます。
• GIF –アニメーション画像は、簡単に表現できない可能性のある短いプロセス（8秒未満）を説明するのに最適です。
• チャート–棒グラフ、円グラフ、折れ線グラフ、非常に多くの種類のグラフ！ 一連の数値について話したり比較したりする場合は、グラフが最適です。
• ビデオ–究極のビジュアルであるビデオは、プロセスを説明するのに最適です。 優れたテクニカルビデオを作成する方法は、このプロセスによって確かに役立つことができるアートフォームですが、はるかに多くの計画が必要です。 （幸運なことに、私はTechSmithから多くのことを学びました、そして彼らはこの主題についてもっと多くのことを言う必要があります）。

あなたの文章には、自由に媒体を組み合わせて使用​​してください。 それぞれが異なるステップの異なるニーズを満たします。

概要例

レシピは、ビジュアルが大きな違いを生む可能性のある精度を必要とすることが多いプロセスの最良の例の1つです。 ケーキを作るための手順の概要を説明したいとしましょう。

テーブル {

border-collapse：collapse;

}

テーブル、td、th {

ボーダー：1pxソリッド＃404040;

パディング：4px;

}

すべてのステップにイメージがあるとしたら、それは少し…無償です。

ビジュアルを選択してください

私が選択した画像は、より大きなプロセス内でミニプロセスを明確にするのに役立ちます。 特に、これまでに攪拌されたミックスのステップ7の画像は、視覚的な証拠の重要な部分です。 この指示でたくさんのケーキを焼いたので、ちょうどいいものと混ぜすぎたものの違い…いつも写真があればいいのにと思います。 混合する時間の複雑さだけで書かれた取扱説明書があるかもしれません—他のすべてのページは画像でなければなりません。

必要なビジュアルの概要を説明した後、商品を収集する必要があります。 この例では、ケーキを焼くプロセスの写真を撮るのが最適です。 他のプロセスでは、カスタム写真を撮る必要がない場合があります。 あなたの裁量で使用されるビデオ、GIF、および静止画を持っているさまざまな無料およびプレミアムストックフォトウェブサイトがあります。

ターゲットオーディエンスでテストする

ターゲットオーディエンスの誰かが読んで承認の印が与えられるまで、文章は完成しません。 彼らの意見は、プロセスのどこでステップを逃したか、またはより多くのビジュアルが必要な場所を示します。

これを実行する最も簡単な方法は（ユーザビリティチームの大きなリソースなしで）、主要な人口統計の数人にコンテンツを読んでもらい、書かれたとおりにプロセスに従うようにすることです。 ヤコブ・ニールセンは、5人が最も多くの問題を捕らえるのに最適な数であるとよく言われます。

モデレートされていないテスト

モデレートされていないテストは、リソースが限られている小規模なプロジェクト、または結果をすばやく必要とする場合に最適です。 より正確な結果を得るために使用できるツールは多数ありますが、より小さなプロセスに関するフィードバックを探しているだけの場合は、必要な一連の質問を含むドキュメントをテスターに​​送信するだけで解決できる場合があります。答えた。

テスターに​​質問があるときはいつでもメモを取るように依頼し、不足している可能性のあるものを確認し、プロセスの障害にぶつかるか、より詳細な指示があればいいのにと思います。 うまくいけば、彼らはあなたにフィードバックを与える前にタスクを完了することができるでしょう。

モデレートテスト

モデレートテストの最大の利点は、テスターがプロセスを実行するのを実際に監視し、混乱に注意するのではなく、テスターが混乱している場所を確認できることです。 このセッション中に取ったメモだけに頼る必要がないように、セッションを記録するとさらに良いでしょう。

途中で質問してください。 例えば：

• 実行するように求められているタスクを理解しましたか？ そのタスクは理にかなっていますか？
• このプロセスを完了しやすくした理由は何ですか？
• ステップのあるビジュアルがあった場合、ビジュアルは何をすべきかを理解するのに役立ちましたか？
• もっとビジュアルがあったらいいのに？

まとめ

これで、ステップバイステップの説明にビジュアルを追加する必要がある理由がわかり、ビジュアルエイドを使用してステップバイステップの説明を正常に作成するのに役立つツールが豊富に用意されています。 練習は完璧を作る。 プロセスに画像を追加する最初の試みは完璧ではないかもしれませんが、編集プロセスをガイドするためのユーザーテストを行うことで、ユーザーがタスクを完了する方法を理解できるようになります。

指示に視覚補助をいつ追加するかを理解する別の方法はありますか？ 以下のコメントであなたのヒントを共有してください！

編集者注：この投稿は元々2017年11月に公開され、正確性と包括性のために更新されました。