ヘルプページの構成

ヘルプページは、以下の要素で構成されています。

  1. タイトル(必須)
  2. リード
  3. 見出し(必須)
  4. 本文(必須)
  5. 画像
  6. 囲み

要素ごとの役割

それぞれの要素が、ユーザーに情報を伝えるために担っている役割を説明します。

1. タイトル

どんな内容が書かれているかを想起できる表現をして、ユーザーが「読みたい情報がどこに書かれているか」を理解できるようにします。
ヘルプセンターを訪問したユーザーが、操作手順やトラブルシューティング、リファレンスを探していることを念頭において考えます。

インデックスに並んだときの一覧性を意識し、タイトルのライティングには規則性を持たせます。

2. リード

ユーザーがページの内容を理解するためのメンタルモデルを構築しやすいよう、このページで書かれている内容の全体感を説明します。

3. 見出し

本文のアウトラインを把握できる表現をします。
見出しはページ全体の目次としても機能するので、「どんな内容」を「どういう順序」で「どれくらいの粒度」で書かれているかを把握する助けもします。

ヘルプページの見出しは、見出し1〜5まであります。
本文で記載する内容を見出しを使って構造化します。ヘルプページの構成を考えるときには、まず見出しの設計をして、情報のボリューム、伝える単位を切り分けることからはじめると良いです。

4. 本文

本文もなるべく簡潔に、一文一義「1つの文に1つの事柄を書く」ようにします。

ただし、ヘルプページで記載する内容は、ある条件下の挙動を説明するなど、情報が込み入っているケースも少なくありません。
情報を補う修飾節が必要な場合は、情報のチャンク(ぱっと見たときに"意味的な塊"を感じる単位)を意識して読点を使用しましょう。

5. 画像

文章での説明が困難な場合には、概念図を作成したり、注釈を加えたスクリーンショットを併用します。

スクリーンショットの使用ルール

アクセシビリティの観点から、スクリーンショットはできるだけ使わず、テキストで説明する

アクセシビリティの観点、および情報量が増えて検索性が下がることを防ぐ観点から、スクリーンショットの使用は最小限にします。
まずはテキストのみで説明できないか検討してください。

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

スクリーンショットを使う場合は、ユーザーに注目させたい部分を囲みや矢印を付けて強調する

スクリーンショットを使う場合は、ユーザーに注目させたい部分を囲みまたは矢印で強調します。ボタンや画面内のエリアを強調する場合は、囲みで強調します。囲みを使うと見てほしい部分が読み取りづらくなる場合は、矢印で強調します。ただし、必要以上の強調はユーザーにとってノイズになってしまうため、囲みと矢印は同時に使わないようにしましょう。

強調する箇所は、1つのスクリーンショットにつき、1部分を基本とします。複数の部分を流れで説明したい場合は、丸数字(①②③)で番号を振って、ユーザーに見てほしい順番をわかりやすくします。
アクセシビリティやメンテナンスの観点から、画像内にテキストを載せないようにしましょう。

また、「関連する情報同士を近くに配置する」にしたがって、スクリーンショットと対応する説明文を近くに配置すると、意図が伝わりやすくなります。

スクリーンショットを使う場合は、ユーザーの操作に必要ない部分を取り除く

スクリーンショットに写っているのがどの画面なのかを、ユーザーが判断しやすいようにしましょう。また、ユーザーの操作に必要ない部分は除いた範囲でスクリーンショットを撮ってください。

操作の起点となる画面は、SmartHRのどの画面から操作するのかをユーザーが把握できるように、ヘッダーも含めたスクリーンショットを使いましょう。
以降の画面は、ヘッダーを除いてトリミングすることを推奨します。どの画面から操作するのかは操作の起点で明示できているため、伝えなくても済む部分を取り除いて、ユーザーが次の操作に集中できるようにします。

6. 囲み

本文で説明する主軸となる流れから、脱線する情報は囲みとして提供します。

ヘルプページでは、囲みに4つのスタイルを用意しています。
囲みの中身は本文を配置します。Tipsに限って、見出しを設置しても構いません。

Tips

ページで説明している内容に加えて、知っておくとユーザーにメリットがある情報を紹介します。

tips.png

注意点

注意を促したい場合に使います。
この情報を理解しないとユーザーが求めている情報を得られなかったり、意図しない結果に繋がったりする可能性のある、重要度の高い情報を記載します。

alert.png

関連コンテンツ

ページで説明している内容に関連するリンクを紹介するときに使います。

related.png

関連用語

用語ページで関連用語を紹介するときに使います。

words.png