ヘルプサイトの制作プロセス

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide