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
6
1.1k
読者のモチベーションを⾼める技術
naohiro_nakata
7
1.1k
テクニカルライティングの基本 2023年版
naohiro_nakata
148
120k
技術をわかりやすく伝えるためテクニカルライティング
naohiro_nakata
32
26k
『THE PRODUCT IS DOCS』のすゝめ
naohiro_nakata
2
1.2k
書く前に立ち止まって考えよう!「伝える情報を整理する」ということ
naohiro_nakata
9
10k
テクニカルライティングの基本
naohiro_nakata
256
300k
モノや概念をわかりやすく伝えるテクニック
naohiro_nakata
14
12k
ユーザーとの協調を重視する時代における ドキュメント制作現場の取り組み
naohiro_nakata
4
2k
Other Decks in Design
See All in Design
発表資料テンプレート / My slide template
thatblue
0
170
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
5
1.7k
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
660
実利の世界で、表現者である
kiyou77
2
360
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
700
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
160
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
360
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
440
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8k
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
190
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
8k
LLMによるRAG評価用合成テストデータの生成
licux
5
480
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
67
4.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Optimising Largest Contentful Paint
csswizardry
33
3k
RailsConf 2023
tenderlove
29
970
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
Mobile First: as difficult as doing things right
swwweet
222
9k
Designing for Performance
lara
604
68k
Statistics for Hackers
jakevdp
797
220k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
173
51k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
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の場合、各ユーザーの立場や役割も意識して。 ⚫ 何を: 「書き手が伝えたいこと」だけじゃなく「ユーザーが知りたいこと」も。
⚫ どのように: 回遊的な動きと直線的な動きを意識しよう。