ヘルプサイトの制作プロセスと、設計のポイントを紹介しました。

1. ヘルプサイトの制作プロセス
サイボウズ株式会社
仲田 尚央

2. 自己紹介
UI上の言葉をライティングしたり、ヘルプ
サイトのディレクションをしたりしています。
Twitter: @naoh_nak
Facebook: nak816
仲田 尚央
なかた なおひろ
• Webディレクター
• テクニカルライター
• UXライター
発売中！

3. チーム紹介
開発本部
kintoneチーム Garoonチーム デザインチーム
テクニカル
コミュニケーション
チーム
・・・
UI上の言葉のライティング、ローカライズ、
ヘルプサイトの運用などをやるチーム！
東京：6 名
松山：4 名
上海：3 名
で活動中！

4. 私たちが作ってるモノの一例

5. 今回は、ヘルプサイトの制作プロセスと
設計のポイントを紹介します。

6. 「いいヘルプ」って？
役に立つ
useful
探しやすい
findable
アクセシスしやすい
accessible
正確である
credible
わかりやすい
clear
いいヘルプの
5つの要素

7. ヘルプ制作のプロセス
誰に何を伝える
かを整理する
構成を考える
記事を作る
記事をチェックす
る
フィードバックを
もとに改善する
伝える相手のイメージを固め、伝える情報（プロダクトの情報）を収集します。
漠然とした説明になってしまうことを防ぐには、伝える相手のことをできるだけ
具体的にイメージできていることが大切です。
誰に何を伝えるのかが決まったら、伝える情報を
ユーザーが理解しやすい形に整えます。
ここまでのフェーズで誰に何を伝えるのかが決まっている
ので、それを記事にしていくだけ。
できるだけ他の人のチェックを通しましょう。作り手自身では
誤解される文章や図になかなか気付けません。
公開がゴールではありません。
むしろ公開してからの改善が重要です。

8. ヘルプ制作のプロセス
誰に何を伝える
かを整理する
構成を考える
記事を作る
記事をチェックす
る
フィードバックを
もとに改善する
伝える相手のイメージを固め、伝える情報（プロダクトの情報）を収集します。
漠然とした説明になってしまうことを防ぐには、伝える相手のことをできるだけ
具体的にイメージできていることが大切です。
誰に何を伝えるのかが決まったら、伝える情報を
ユーザーが理解しやすい形に整えます。
ここまでのフェーズで誰に何を伝えるのかが決まっている
ので、それを記事にしていくだけ。
できるだけ他の人のチェックを通しましょう。作り手自身では
誤解される文章や図になかなか気付けません。
公開がゴールではありません。
むしろ公開してからの改善が重要です。

9. 記事を作り始める前に考えよう
誰が
user
何を
content
どのように
context
「誰が」「何を」「どんな状況で / どのように探すのか？」

10. 誰が？
課題 / 目的
⚫ ユーザーはどんな課題をかかえている？
⚫ どんな目的でプロダクトを利用してる？
立場 / 役割（主にBtoBで）
⚫ 組織における各ユーザーの立場と役割は？
⚫ 導入担当者、システム管理者、一般ユーザー、とか
事前知識
⚫ プロダクトについての事前知識
⚫ プロダクトのジャンルについての関連知識
⚫ Webブラウジングのスキル
？

11. 何を？
⚫ 使い始めに必要な情報
⚫ プロダクトの概要
⚫ 使い始めに必要な設定
⚫ 基本的な使い方
⚫ 活用例
⚫ 用語
⚫ 各機能の利用目的と操作方法
⚫ 期待に答えられないところ
⚫ よくあるトラブルと対処方法
書き手から
伝えたいこと
ユーザーが
知りたいこと
いいヘルプ
ユーザーの立場になって
知りたいことをイメージする

12. どのように？
ユーザーが「どんな状況で」「どのように」
情報を探すか考えよう
カテゴリーから探す？
それとも、検索するかな？
どんな検索キーワード入れるかな？

13. たとえば：
ExcelのVLOOKUP関数の解説を考えよう

14. たとえば：
ExcelのVLOOKUP関数の解説を考えよう
「VLOOKUP」で検索する？

15. たとえば：
ExcelのVLOOKUP関数の解説を考えよう
「VLOOKUP」で検索する？
いや、「VLOOKUP」って言葉がわからないか
も？その場合、どんな言葉で検索するだろう。
言葉が思い付かなくて、検索できない？

16. たとえば：
ExcelのVLOOKUP関数の解説を考えよう
「VLOOKUP」で検索する？
いや、「VLOOKUP」って言葉がわからないか
も？その場合、どんな言葉で検索するだろう。
言葉が思い付かなくて、検索できない？
いやいや、そもそもそんな機能があることも知らな
くて、情報を探そうともしないか？

17. たとえば：
ExcelのVLOOKUP関数の解説を考えよう
「VLOOKUP」で検索する？
いや、「VLOOKUP」って言葉がわからないか
も？その場合、どんな言葉で検索するだろう。
言葉が思い付かなくて、検索できない？
いやいや、そもそもそんな機能があることも知らな
くて、情報を探そうともしないか？
ユーザーは自分が必要な情報が何なのか知っているとは限らない

18. スーパーマーケットの動線を例に
野
菜
果
物
精肉 鮮魚
惣
菜
パ
ン
レジ
飲
料
・
酒
類
菓
子
冷
凍
食
品
乳
製
品
乾
物
調
味
料
日
用
雑
貨
米
嗜好品類

19. スーパーマーケットの動線を例に
野
菜
果
物
精肉 鮮魚
惣
菜
パ
ン
レジ
飲
料
・
酒
類
菓
子
冷
凍
食
品
乳
製
品
乾
物
調
味
料
日
用
雑
貨
米
嗜好品類
まずは外周をふらふらと
ユーザーは自分が必要な商品が何なのか知っているとは限らない

20. スーパーマーケットの動線を例に
野
菜
果
物
精肉 鮮魚
惣
菜
パ
ン
レジ
飲
料
・
酒
類
菓
子
冷
凍
食
品
乳
製
品
乾
物
調
味
料
日
用
雑
貨
米
嗜好品類
挽肉が安いな..
そうだ、今日はハンバーグにしよう！
情報を仕入れるうちに、必要な商品が明確になってくる

21. スーパーマーケットの動線を例に
野
菜
果
物
精肉 鮮魚
惣
菜
パ
ン
レジ
飲
料
・
酒
類
菓
子
冷
凍
食
品
乳
製
品
乾
物
調
味
料
日
用
雑
貨
米
嗜好品類
玉ねぎと卵と...
あ、塩コショウを切らしていたな
目的の定まらない「回遊的な動き」から、
目的が明確な「直線的な動き」に変わる

22. Webサイトにあてはめると...
外周：
トップページや初心者向けコンテンツ
内側の商品棚：
プロダクトの各機能の解説記事

23. トップページのレイアウトを考える
トップページは動線の起点
回遊できるコンテンツを載せよう
⚫ 初心者向けの情報
⚫ 見てもらいたい情報
⚫ よく見られてる情報
⚫ 繰り返し見られることが多い情報

24. 記事のカテゴライズを考える
パターン 説明
機能で分ける 機能でカテゴリーを分け、機能リファレンスとしてまとめま
す。
目的で分ける ユーザーの利用目的でカテゴリーを分けます。
初心者向けに適しています。
状況で分ける ユーザーの状況を軸にカテゴリーを分けます。
Ex. 「使い始め」「困ったとき(トラブル発生時)」「より活用する方法を
知りたいとき」
ターゲットで分ける ターゲットでカテゴリーを分けます。
Ex. 導入担当者、システム管理者、エンドユーザー(一般の利用者)
商品（記事）を適切な商品棚（カテゴリー）に並べよう

25. カテゴリーをナビゲーションに落とし込む

26. まとめ
記事を作り始める前に、「誰が」「何を」「どのように」探すのかを
考えよう
⚫ 誰が：
伝える相手を具体的にイメージしよう。
BtoBの場合、各ユーザーの立場や役割も意識して。
⚫ 何を：
「書き手が伝えたいこと」だけじゃなく「ユーザーが知りたいこと」も。
⚫ どのように：
回遊的な動きと直線的な動きを意識しよう。