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
9k
ヘルプサイトの制作プロセス
Naohiro Nakata
June 18, 2019
Tweet
Share
More Decks by Naohiro Nakata
See All by Naohiro Nakata
エンジニアが一生困らない ドキュメント作成の基本
naohiro_nakata
13
3.8k
読者のモチベーションを⾼める技術
naohiro_nakata
7
1.3k
テクニカルライティングの基本 2023年版
naohiro_nakata
162
130k
技術をわかりやすく伝えるためテクニカルライティング
naohiro_nakata
32
28k
『THE PRODUCT IS DOCS』のすゝめ
naohiro_nakata
2
1.4k
書く前に立ち止まって考えよう!「伝える情報を整理する」ということ
naohiro_nakata
9
10k
テクニカルライティングの基本
naohiro_nakata
299
310k
モノや概念をわかりやすく伝えるテクニック
naohiro_nakata
14
12k
ユーザーとの協調を重視する時代における ドキュメント制作現場の取り組み
naohiro_nakata
4
2k
Other Decks in Design
See All in Design
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
650
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
280
7 Core Values of Round-L
wired888
0
1.5k
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
440
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
1.9k
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.5k
Bulletproof Design System with TypeScript
takanorip
7
4k
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3k
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
560
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
860
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
270
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
We Have a Design System, Now What?
morganepeng
53
7.8k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Building Adaptive Systems
keathley
43
2.7k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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の場合、各ユーザーの立場や役割も意識して。 ⚫ 何を: 「書き手が伝えたいこと」だけじゃなく「ユーザーが知りたいこと」も。
⚫ どのように: 回遊的な動きと直線的な動きを意識しよう。