Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

C43b7e95298f26c44b8a52587074a062?s=128

Naohiro Nakata

June 18, 2019
Tweet

More Decks by Naohiro Nakata

Other Decks in Design

Transcript

  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の場合、各ユーザーの立場や役割も意識して。 ⚫ 何を: 「書き手が伝えたいこと」だけじゃなく「ユーザーが知りたいこと」も。

    ⚫ どのように: 回遊的な動きと直線的な動きを意識しよう。