Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ヘルプサイトの制作プロセス
Search
Naohiro Nakata
June 18, 2019
Design
6
8.5k
ヘルプサイトの制作プロセス
Naohiro Nakata
June 18, 2019
Tweet
Share
More Decks by Naohiro Nakata
See All by Naohiro Nakata
読者のモチベーションを⾼める技術
naohiro_nakata
5
530
テクニカルライティングの基本 2023年版
naohiro_nakata
109
87k
技術をわかりやすく伝えるためテクニカルライティング
naohiro_nakata
31
24k
『THE PRODUCT IS DOCS』のすゝめ
naohiro_nakata
2
990
書く前に立ち止まって考えよう!「伝える情報を整理する」ということ
naohiro_nakata
7
9.2k
テクニカルライティングの基本
naohiro_nakata
238
270k
モノや概念をわかりやすく伝えるテクニック
naohiro_nakata
14
11k
ユーザーとの協調を重視する時代における ドキュメント制作現場の取り組み
naohiro_nakata
4
1.9k
Other Decks in Design
See All in Design
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
170
Ride or Die Animatics
warwatkar
0
140
Wishing Star Comic
torije
2
1.2k
Product-Writing
aguringo
6
2.8k
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2.2k
リリース1ヶ月後で機能をなくした話
hinofu
1
700
Métricas de UX - Reflexões sobre o uso de dados numéricos no contexto de UX
videlvequio
0
150
「これをゲームにしたい!」と言われた時ゲームデザイナーが考えること
kinakobooster
5
5.2k
データ活用に強い、伴走型デザインパートナー「DeC」紹介資料
hopin
0
190
Goodpatch Tour💙 / We are hiring!
goodpatch
28
690k
20240120_画像生成AI_NovelAI入門・情報収集
doradora09
0
110
231206_Book-launch-event_kato
hjmkth
2
1.2k
Featured
See All Featured
What the flash - Photography Introduction
edds
64
11k
Infographics Made Easy
chrislema
238
18k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Six Lessons from altMBA
skipperchong
21
3k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Building Adaptive Systems
keathley
31
1.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Into the Great Unknown - MozCon
thekraken
10
990
Clear Off the Table
cherdarchuk
84
310k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Transcript
ヘルプサイトの制作プロセス サイボウズ株式会社 仲田 尚央
自己紹介 UI上の言葉をライティングしたり、ヘルプ サイトのディレクションをしたりしています。 Twitter: @naoh_nak Facebook: nak816 仲田 尚央 なかた
なおひろ • Webディレクター • テクニカルライター • UXライター 発売中!
チーム紹介 開発本部 kintoneチーム Garoonチーム デザインチーム テクニカル コミュニケーション チーム ・・・ UI上の言葉のライティング、ローカライズ、
ヘルプサイトの運用などをやるチーム! 東京:6 名 松山:4 名 上海:3 名 で活動中!
私たちが作ってるモノの一例
今回は、ヘルプサイトの制作プロセスと 設計のポイントを紹介します。
「いいヘルプ」って? 役に立つ useful 探しやすい findable アクセシスしやすい accessible 正確である credible わかりやすい
clear いいヘルプの 5つの要素
ヘルプ制作のプロセス 誰に何を伝える かを整理する 構成を考える 記事を作る 記事をチェックす る フィードバックを もとに改善する 伝える相手のイメージを固め、伝える情報(プロダクトの情報)を収集します。
漠然とした説明になってしまうことを防ぐには、伝える相手のことをできるだけ 具体的にイメージできていることが大切です。 誰に何を伝えるのかが決まったら、伝える情報を ユーザーが理解しやすい形に整えます。 ここまでのフェーズで誰に何を伝えるのかが決まっている ので、それを記事にしていくだけ。 できるだけ他の人のチェックを通しましょう。作り手自身では 誤解される文章や図になかなか気付けません。 公開がゴールではありません。 むしろ公開してからの改善が重要です。
ヘルプ制作のプロセス 誰に何を伝える かを整理する 構成を考える 記事を作る 記事をチェックす る フィードバックを もとに改善する 伝える相手のイメージを固め、伝える情報(プロダクトの情報)を収集します。
漠然とした説明になってしまうことを防ぐには、伝える相手のことをできるだけ 具体的にイメージできていることが大切です。 誰に何を伝えるのかが決まったら、伝える情報を ユーザーが理解しやすい形に整えます。 ここまでのフェーズで誰に何を伝えるのかが決まっている ので、それを記事にしていくだけ。 できるだけ他の人のチェックを通しましょう。作り手自身では 誤解される文章や図になかなか気付けません。 公開がゴールではありません。 むしろ公開してからの改善が重要です。
記事を作り始める前に考えよう 誰が user 何を content どのように context 「誰が」「何を」「どんな状況で / どのように探すのか?」
誰が? 課題 / 目的 ⚫ ユーザーはどんな課題をかかえている? ⚫ どんな目的でプロダクトを利用してる? 立場 /
役割(主にBtoBで) ⚫ 組織における各ユーザーの立場と役割は? ⚫ 導入担当者、システム管理者、一般ユーザー、とか 事前知識 ⚫ プロダクトについての事前知識 ⚫ プロダクトのジャンルについての関連知識 ⚫ Webブラウジングのスキル ?
何を? ⚫ 使い始めに必要な情報 ⚫ プロダクトの概要 ⚫ 使い始めに必要な設定 ⚫ 基本的な使い方 ⚫
活用例 ⚫ 用語 ⚫ 各機能の利用目的と操作方法 ⚫ 期待に答えられないところ ⚫ よくあるトラブルと対処方法 書き手から 伝えたいこと ユーザーが 知りたいこと いいヘルプ ユーザーの立場になって 知りたいことをイメージする
どのように? ユーザーが「どんな状況で」「どのように」 情報を探すか考えよう カテゴリーから探す? それとも、検索するかな? どんな検索キーワード入れるかな?
たとえば: ExcelのVLOOKUP関数の解説を考えよう
たとえば: ExcelのVLOOKUP関数の解説を考えよう 「VLOOKUP」で検索する?
たとえば: ExcelのVLOOKUP関数の解説を考えよう 「VLOOKUP」で検索する? いや、「VLOOKUP」って言葉がわからないか も?その場合、どんな言葉で検索するだろう。 言葉が思い付かなくて、検索できない?
たとえば: ExcelのVLOOKUP関数の解説を考えよう 「VLOOKUP」で検索する? いや、「VLOOKUP」って言葉がわからないか も?その場合、どんな言葉で検索するだろう。 言葉が思い付かなくて、検索できない? いやいや、そもそもそんな機能があることも知らな くて、情報を探そうともしないか?
たとえば: ExcelのVLOOKUP関数の解説を考えよう 「VLOOKUP」で検索する? いや、「VLOOKUP」って言葉がわからないか も?その場合、どんな言葉で検索するだろう。 言葉が思い付かなくて、検索できない? いやいや、そもそもそんな機能があることも知らな くて、情報を探そうともしないか? ユーザーは自分が必要な情報が何なのか知っているとは限らない
スーパーマーケットの動線を例に 野 菜 果 物 精肉 鮮魚 惣 菜 パ
ン レジ 飲 料 ・ 酒 類 菓 子 冷 凍 食 品 乳 製 品 乾 物 調 味 料 日 用 雑 貨 米 嗜好品類
スーパーマーケットの動線を例に 野 菜 果 物 精肉 鮮魚 惣 菜 パ
ン レジ 飲 料 ・ 酒 類 菓 子 冷 凍 食 品 乳 製 品 乾 物 調 味 料 日 用 雑 貨 米 嗜好品類 まずは外周をふらふらと ユーザーは自分が必要な商品が何なのか知っているとは限らない
スーパーマーケットの動線を例に 野 菜 果 物 精肉 鮮魚 惣 菜 パ
ン レジ 飲 料 ・ 酒 類 菓 子 冷 凍 食 品 乳 製 品 乾 物 調 味 料 日 用 雑 貨 米 嗜好品類 挽肉が安いな.. そうだ、今日はハンバーグにしよう! 情報を仕入れるうちに、必要な商品が明確になってくる
スーパーマーケットの動線を例に 野 菜 果 物 精肉 鮮魚 惣 菜 パ
ン レジ 飲 料 ・ 酒 類 菓 子 冷 凍 食 品 乳 製 品 乾 物 調 味 料 日 用 雑 貨 米 嗜好品類 玉ねぎと卵と... あ、塩コショウを切らしていたな 目的の定まらない「回遊的な動き」から、 目的が明確な「直線的な動き」に変わる
Webサイトにあてはめると... 外周: トップページや初心者向けコンテンツ 内側の商品棚: プロダクトの各機能の解説記事
トップページのレイアウトを考える トップページは動線の起点 回遊できるコンテンツを載せよう ⚫ 初心者向けの情報 ⚫ 見てもらいたい情報 ⚫ よく見られてる情報 ⚫
繰り返し見られることが多い情報
記事のカテゴライズを考える パターン 説明 機能で分ける 機能でカテゴリーを分け、機能リファレンスとしてまとめま す。 目的で分ける ユーザーの利用目的でカテゴリーを分けます。 初心者向けに適しています。 状況で分ける
ユーザーの状況を軸にカテゴリーを分けます。 Ex. 「使い始め」「困ったとき(トラブル発生時)」「より活用する方法を 知りたいとき」 ターゲットで分ける ターゲットでカテゴリーを分けます。 Ex. 導入担当者、システム管理者、エンドユーザー(一般の利用者) 商品(記事)を適切な商品棚(カテゴリー)に並べよう
カテゴリーをナビゲーションに落とし込む
まとめ 記事を作り始める前に、「誰が」「何を」「どのように」探すのかを 考えよう ⚫ 誰が: 伝える相手を具体的にイメージしよう。 BtoBの場合、各ユーザーの立場や役割も意識して。 ⚫ 何を: 「書き手が伝えたいこと」だけじゃなく「ユーザーが知りたいこと」も。
⚫ どのように: 回遊的な動きと直線的な動きを意識しよう。