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.9k
ヘルプサイトの制作プロセス
Naohiro Nakata
June 18, 2019
Tweet
Share
More Decks by Naohiro Nakata
See All by Naohiro Nakata
エンジニアが一生困らない ドキュメント作成の基本
naohiro_nakata
7
1.5k
読者のモチベーションを⾼める技術
naohiro_nakata
7
1.1k
テクニカルライティングの基本 2023年版
naohiro_nakata
149
120k
技術をわかりやすく伝えるためテクニカルライティング
naohiro_nakata
32
27k
『THE PRODUCT IS DOCS』のすゝめ
naohiro_nakata
2
1.2k
書く前に立ち止まって考えよう!「伝える情報を整理する」ということ
naohiro_nakata
9
10k
テクニカルライティングの基本
naohiro_nakata
259
300k
モノや概念をわかりやすく伝えるテクニック
naohiro_nakata
14
12k
ユーザーとの協調を重視する時代における ドキュメント制作現場の取り組み
naohiro_nakata
4
2k
Other Decks in Design
See All in Design
クライアントワークにおける UXリサーチの実践
kozotaira
0
310
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
Dive Deep into Communication
yomtsu
0
210
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
130
Tableau曲線表現講座(2024.11.21)
cielo1985
0
250
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
270
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4.1k
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
3
3.4k
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
630
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
780
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
280
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
220
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
461
33k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Designing for Performance
lara
604
68k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Designing for humans not robots
tammielis
250
25k
KATA
mclloyd
29
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
For a Future-Friendly Web
brad_frost
176
9.5k
Designing Experiences People Love
moore
140
23k
Thoughts on Productivity
jonyablonski
69
4.5k
Music & Morning Musume
bryan
46
6.3k
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の場合、各ユーザーの立場や役割も意識して。 ⚫ 何を: 「書き手が伝えたいこと」だけじゃなく「ユーザーが知りたいこと」も。
⚫ どのように: 回遊的な動きと直線的な動きを意識しよう。