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.7k
ヘルプサイトの制作プロセス
Naohiro Nakata
June 18, 2019
Tweet
Share
More Decks by Naohiro Nakata
See All by Naohiro Nakata
読者のモチベーションを⾼める技術
naohiro_nakata
6
830
テクニカルライティングの基本 2023年版
naohiro_nakata
134
100k
技術をわかりやすく伝えるためテクニカルライティング
naohiro_nakata
31
25k
『THE PRODUCT IS DOCS』のすゝめ
naohiro_nakata
2
1.1k
書く前に立ち止まって考えよう!「伝える情報を整理する」ということ
naohiro_nakata
8
9.6k
テクニカルライティングの基本
naohiro_nakata
244
290k
モノや概念をわかりやすく伝えるテクニック
naohiro_nakata
14
11k
ユーザーとの協調を重視する時代における ドキュメント制作現場の取り組み
naohiro_nakata
4
1.9k
Other Decks in Design
See All in Design
ホワイト化するこの世界の片隅に
hisayosky
0
230
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
9.7k
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
170
WHAT ARE ME?
takuro_nakajima
PRO
0
1.9k
Rebuilding Stamen’s iconic map styles with Stadia Maps
almccon
0
170
Designing and Automating Component Specifications
nathanacurtis
3
350
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
12
5.4k
0→1でデザイナーは何とむきあうのか? / 0→1 Meetup 〜多様な0→1フェーズにおけるデザイナーの働き方〜 / Yasuhiro Yokota
yasuhiroyokota
1
440
PdMを始めたUIデザイナーのリアルな課題
muture
0
700
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
3
860
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
2k
Cardápio - Caraguá A Gosto 2024 - De 01/08 a 08/09/2024
caraguatatuba
0
5.1k
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Testing 201, or: Great Expectations
jmmastey
35
6.9k
The Mythical Team-Month
searls
218
43k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
The Invisible Customer
myddelton
119
13k
Making Projects Easy
brettharned
113
5.8k
A Modern Web Designer's Workflow
chriscoyier
690
190k
Optimizing for Happiness
mojombo
375
69k
From Idea to $5000 a Month in 5 Months
shpigford
378
46k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
Git: the NoSQL Database
bkeepers
PRO
425
64k
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の場合、各ユーザーの立場や役割も意識して。 ⚫ 何を: 「書き手が伝えたいこと」だけじゃなく「ユーザーが知りたいこと」も。
⚫ どのように: 回遊的な動きと直線的な動きを意識しよう。