操作手順の書き方

基本的な考え方

操作手順に関するヘルプページでは、ユーザーがやりたいこと(ゴール)を達成するために、アプリケーションをどのように操作すれば良いのかを説明します。 ユーザーが順を追って操作を把握し、ゴールを達成できることを重視してください。

構成

操作手順に関するヘルプページは、以下の構成で記載します。

#要素内容必須
1タイトルユーザーがやりたいこと
2リード文ユーザーがやりたいことをアプリケーション上の言葉で言い直す×
3見出し+本文操作に先立つ説明事項×
4見出し操作手順の要約
5本文操作手順の詳細
6囲み注意点×
7囲みTips×
8見出し+本文操作全体に関わる補足事項×

各セクションの役割

各セクションでは、ユーザーに対して以下の内容を説明します。

1. ユーザーがやりたいこと(タイトル)

この操作手順を踏むと、最終的に何が実現できるのかを記載します。

2. ユーザーがやりたいことをアプリケーション上の言葉で言い直す(リード文)

タイトルだけで不十分な場合は、このページで何の手順を説明するのかを記載します。

3. 操作に先立つ説明事項(見出し+本文)

事前に準備をしたり、特定の情報を把握したりしないと、操作が進まない懸念がある場合は、準備事項や注意点を記載します。

4. 操作手順の要約(見出し)

各ステップで何をするのかを端的に記載します。

5. 操作手順の詳細(本文)

上記の要約を補う形で、各ステップで何をするのかを詳細に記載します。

6. 注意点(囲み)

注意喚起しないと、ユーザーが操作を進められなくなったり、データを損失したりしてしまう場合に記載します。

7. Tips(囲み)

この手順に関連する内容で、ユーザーに役立つ情報を記載します。

ただし、ユーザーが読み飛ばしても、操作を完了できる内容にします。読み飛ばしてはいけない内容は、注意点として記載してください。

また、本来の目的である操作手順の説明を妨げないよう、ユーザーにとって本当に必要な内容だけを厳選して記載してください。

8. 操作全体に関わる補足事項(見出し+本文)

特定のステップではなく、操作全体に関わる補足事項や注意点がある場合に記載します。

各セクションの書き方

各セクションが上記の役割を果たすように、以下の書き方を意識します。

1. ユーザーがやりたいこと(タイトル)

ユーザーが何をしたいのかを念頭に、端的に「XXをXXする」という形で記載します。

2. ユーザーがやりたいことをアプリケーション上の言葉で言い直す(リード文)

タイトルだけで自明な場合は割愛します。

タイトルに補足が必要な場合は、1〜2文を目安として「XXについて説明します。」という形で記載します。「このページでは〜」という導入は不要です。

1〜2文に収まらない場合は、説明事項(#3)や補足事項(#8)のセクションを設けることを検討してください。

原則として、スクロールしなくても目次が見える状態を意識します。長文、画像、囲みの多用によって、目次が埋もれないようにしてください。

3. 操作に先立つ説明事項(見出し+本文)

ユーザーが操作の前に把握すべき情報がある場合は、セクションを分けて記載します。

事前準備、画面の見方(例:申請一覧画面の見方)など、目的に応じてタイトルを付けます。

リード文に統合できる場合や、内容が自明な場合、このセクションは不要です。

4. 操作手順の要約(見出し)

文頭に番号(例:1.)をつけて、見出し1のスタイルを適用します。

ユーザーが「どの画面で何をするのか」を端的に記載し、見出しだけ読んでも操作が完結するようにします。

文字数を抑えるため、「XXする」という表現は避けます。(例:クリックする>クリック)

5. 操作手順の詳細(本文)

ユーザーが「どの画面で何をするのか」と「その結果、何が起きるのか」をあわせて説明します。

原則として、ユーザーの操作は能動態(XXします)で記載します。

ユーザーの操作で起きる結果はシステムの挙動であり、ユーザーからすると「システムからXXされた」という関係のため、受動態(XXされます)で記載します。

できるだけテキストで説明し、スクリーンショットの使用は最小限にとどめます。スクリーンショットの使用についてを参照してください。

最後のステップでは、ユーザーが正しく操作を完了したことを確認できる方法を記載します。(例:XX画面でXXが最新の情報に更新されたことを確認します。)

また、このステップ固有の注意事項やTipsがある場合は、本文の最後に記載します。

6. 注意点(囲み)

「囲み」のスタイルで記載します。

7. Tips(囲み)

「囲み」のスタイルで記載します。

8. 操作全体に関わる補足事項(見出し+本文)

特定のステップではなく、操作全体に関わる補足事項がある場合は、セクションを分けて記載します。

操作の前に確認が必要な情報は、説明事項(#3)への移動を検討してください。

複数の操作について説明する場合

「権限の追加」「権限の編集」「権限の削除」など、複数の操作を1ページにまとめる場合は、個別の操作でユーザーがやりたいことを見出し1、操作手順の要約を見出し2に記載します。

情報量が増えてきたら、個別の記事に分割することを検討しましょう。

具体的な書き方のヒント

  • まずユーザーの目的を明確にし、そこにたどり着くまでに必要なアクションを箇条書きで書き出しましょう。
  • アクションは「どの画面で何をする」という単位で切り分けます。
  • 目的を達成するために必須のアクションを操作手順とし、その他のアクションや補足情報と区別してください。
  • 事前に把握すべき情報や準備することがあれば、別途メモしましょう。
  • 操作手順を説明するページでは、ユーザーが順を追って操作を把握できることが重要です。Tipsなど注意を逸らす情報を安易に追加しないようにしましょう。Tipsや注意事項が複数ある場合は、囲みを外して本文に統合するか、複数の囲みを統合することを検討してください。

スクリーンショットの使用について

原則として、操作手順はテキストを使って説明します。

アクセシビリティの観点、および情報量が増えて検索性が下がることを防ぐ観点から、スクリーンショットの使用は最小限にします。

まずはテキストのみで説明できないか検討し、難しい場合のみ、スクリーンショットを使用してください。(例:画面上にボタンが表示されておらず、ドロップダウンリストを開いて操作する場合など)

ライティングパターン

操作手順のライティングパターンをまとめました。 内容に応じて、表現をアレンジしても構いません。

単一の操作のライティングパターン

#内容例1例2
1ユーザーがやりたいこと(タイトル)XXを管理するXXを作成する
2ユーザーがやりたいことをアプリケーション上の言葉で言い直す(リード文)XXのXXを設定する手順を説明します。XXで、XXしたいXXをXXする手順を説明します。
3操作手順の要約(見出し1)1. XX画面で[XX]をクリック/2. [XX] > [XX]を選択/3. XX画面でXXを確認/補足事項XXについて/1. [XX]メニューで[XX]を選択/2. XX画面で[XX]をクリック
4操作手順の詳細(本文)XX画面で[XX]をクリックします。XXのメニューが表示されます。[XX]メニューで[XX]を選択すると、XX画面に移動します。

記載例

組織図をCSV形式でダウンロードする

複数の操作のライティングパターン

#内容
1ユーザーがやりたいこと(タイトル)XXを編集する
2ユーザーがやりたいことをアプリケーション上の言葉で言い直す(リード文)XXのXXを更新、追加、削除する手順を説明します。
3個別の操作でユーザーがやりたいこと(見出し1)XXとは/XXを更新する/XXを追加する/XXを削除する
4操作手順の要約(見出し2)1. XX画面で[XX]をクリック/2. [XX] > [XX]を選択
5操作手順の詳細(本文)XX画面で[XX]をクリックすると、XXされます。

記載例

評価テンプレートを管理する