WEB+DB PRESS plusシリーズヘルプサイトの作り方

[表紙]ヘルプサイトの作り方

A5判/208ページ

定価(本体2,580円+税)

ISBN 978-4-297-10404-7

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

単機能なプロダクトではヘルプサイトは必要ないかもしれませんが,機能が増えると,チュートリアルやヘルプなどによるフォローなしにはユーザーがプロダクトを使いこなすことが難しくなっていきます。また,ユーザーに長くプロダクトを利用してもらうためには,機能追加などに伴いヘルプサイトを継続的に改善していくことが必要です。本書では,ユーザーが知りたい情報を得ることができ,ストレスを感じずに参照できるヘルプサイトの作成方法を解説します。サイト全体の設計から,具体的な記述方法,検索で見つけやすくする方法,ユーザーのフィードバックを受けての改善方法まで,ドキュメント作成の専門チームに所属しているエンジニアがそのノウハウを解説します。

こんな方におすすめ

  • ヘルプサイトをよりユーザーにとって使いやすいものにしたいと考えている作成者
  • 自分の開発したプロダクトの魅力を伝えられるヘルプサイトを作りたいと考えているエンジニア

この書籍に関連する記事があります!

はじめに
プロダクトの数だけヘルプがあると言っても過言ではないほど,ヘルプはプロダクトに欠かせないものです。

本書のサンプル

本書の一部ページを,PDFで確認することができます。

本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。

サンプル画像1

サンプル画像2

目次

  • はじめに

第1章 ヘルプの基本

ヘルプ制作に必要なスキル

  • ヘルプ制作に文章力は必要?
  • 文章力より設計力

ヘルプの役割

  • プロダクトの使い方をユーザーに伝える
  • サポートコストを低減する
  • プロダクトの改善ポイントを知る

良いヘルプの要素

  • 役に立つ
  • 探しやすい
  • 正しい
  • わかりやすい

ヘルプを制作する流れ

  • 誰に何を伝えるかを整理する
  • 構成を設計する
  • スタイルガイドや用語集を準備する
  • 記事を作る
  • 記事をチェックする
  • 公開後にフィードバックをもとに改善する

第2章 誰に何を伝えるかを整理する

プロダクトの利用ユーザーを理解する

  • ヘルプのターゲットユーザーを絞り込む(ペルソナの設定)
  • ペルソナとは
  • ペルソナの設定による効果
  • ペルソナの例と構成要素
    • 課題と目的
    • 立場と役割
    • 事前知識

プロダクトの仕様に関する情報を収集する

  • プロダクトの使い始めに必要な準備と基礎知識
  • 各機能の利用目的と操作方法
  • 期待に応えられないところ
  • よくあるトラブルとその対処方法
  • 自分でプロダクトを使う
    • 使用中に感じたことを書き出す
    • 使用中につまずいたところを書き出す

第3章 ユーザーの使い方を意識して構成を設計する

ユーザーの情報の探し方を理解する

  • 情報探索の4つの行動モデル
    • 既知項目検索
    • 探求探索
    • 再検索
    • 全数探索
  • 回遊的な動線と直線的な動線がある
  • ユーザーはページを流し読みする

ユーザー像を意識してヘルプの構成を設計する――サイトマップの作成

  • 構成設計の2つのアプローチ
  • カテゴリー構成と動線を決める
    • 初心者向けカテゴリーの動線
    • カテゴリー構成のパターン
    • 内容をイメージできるカテゴリー名にする
    • 意味の重なりを避ける
    • 一般的な用語を使う
  • 記事のタイトルを決める
    • ユーザーが使うキーワードに合わせる
    • 内容をイメージできるタイトルにする
    • 記事を読む必要があるかわかるタイトルにする
    • 語尾を統一する

第4章 ユーザーの動線からナビゲーションを設計する

ナビゲーションの種類と役割

  • 構造型のナビゲーション
    • グローバルナビゲーション
    • ローカルナビゲーション
  • 関連型のナビゲーション
  • 機能型のナビゲーション
    • 検索
    • サイトマップ
    • パンくずリスト

トップページからのナビゲーション

  • トップページに配置する情報を選ぶ
  • トップページに情報を載せすぎない
  • トップページからの移動だけを考えない

モバイルのナビゲーション

  • レスポンシブデザインでモバイルに最適化する
  • モバイルユーザーの行動を理解する
  • 記事の表示を優先する
  • 構成をPC向けと合わせる

プロダクトからのナビゲーション

  • ユーザーの迷いどころにヘルプリンクを配置する
  • ヘルプだとわかるリンク名にする
  • リンクを管理する
  • ユーザーが疑問を解決できているか確認する

第5章 スタイルガイドや用語集を準備する

スタイルガイドで表現を統一する

  • 文字表現
    • 文体
    • 漢字とひらがなの使い分け
    • 日時の表現
    • 数値の表現
  • 記号
  • 参照リンク
  • 例として出す人名やドメイン
  • スクリーンショット
    • OSとWebブラウザー
    • 画像の形式
    • 加工方法
    • ファイル名のルール
  • 注意事項などのスタイル

用語集で用語を統一する

  • 用語集に載せる用語
  • Webデータベースで効率的に用語を管理する

第6章 記事を作る――文章と図解のテクニック

アウトラインを決める

  • ユーザーのスタートとゴールを決める
  • ユーザーに伝えることを書き出す
  • 書き出した情報を整理する
  • 見出しを決める

わかりやすい文章のテクニック

  • 一文一義
  • 簡潔に書く
  • ユーザーに求める操作を明確に書く
  • 主題(言いたいこと)から書く
  • ユーザーを主体にする
  • 列記には箇条書きを使う
    • 項目の順番に意味がある場合は番号を付ける
    • 項目が多い場合は分類する
  • 表を適切に使う
  • 見出しで情報の区切りを明確にする
  • 視覚的な変化をつける

誤解を防ぐ文章のテクニック

  • 二重否定を使わない
  • 係り受けを明確にする
  • 主語と述語の対応に気をつける
  • 主語,目的語と述語を近づける

わかりやすい機能説明のテクニック

  • ユーザーの馴染みのある知識と関連付ける
  • リード文から入る
  • 概要を挟む

わかりやすい操作手順のテクニック

  • 一画面一手順
  • ユーザーの操作だけを手順にする
  • 作業の目的を書く
  • スクリーンショットを効果的に使う
    • 説明したいことに応じて撮影範囲を変える
    • ほかと区別のつく色で加工する
    • ハイライトする箇所を説明と一致させる

わかりやすいトラブルシューティングのテクニック

  • ユーザーが何をどのように探すかを意識する
  • 状況,原因,対処を伝える

図解で視覚的に伝えるテクニック

  • 図解の効果
  • 図解の弱点
  • ルールを理解した上で使う
  • 図解のテクニック
    • ユーザーの視点から描く
    • 「囲む」「配置する」「つなぐ」を組み合わせる
    • 囲む
    • 配置する
    • つなぐ
  • 特定の意味を持つ図形に注意する
  • 細部は削って単純化する
  • フローチャートでトラブルを診断する
  • 色の基本を理解する
    • 色相
    • 彩度と明度
    • ドミナント
    • アクセントカラーでポイントを強調する

第7章 記事を検索最適化する

記事の検索最適化

  • トピックごとに記事を分ける
  • タイトルと見出しに検索キーワードを入れる
  • わかりやすいURLを付ける
  • タイトルの重複を避ける
  • リンク先の記事の内容がわかるリンク名を付ける

HTMLの検索最適化

  • リッチエディターのデメリット
  • HTMLの役割は情報への意味付け
  • サイト全体の構成を示す
  • 記事のアウトラインを示す
  • 強調を示す
    • 重要度,深刻度や緊急度が高い情報の記述
    • 操作画面上のボタンやリンクを表す記述
  • リッチスニペットで検索結果に記事のカテゴリーを表示する

第8章 データからヘルプを改善する

KPI(改善の効果を測る指標)を決める

  • KPIとは
  • ヘルプのKPI
    • アンケートの回答結果
    • 平均解決時間
    • 検索結果ページでの離脱率
    • 結果が0件になる検索の割合

アンケートから改善する

  • アンケートでフィードバックを取得する
    • アンケートの質問項目を検討する
    • デザインを工夫して回答率を高める
    • ヘルプにアンケートを設置する
  • アンケート結果を集計する

アクセスログから改善する

  • アクセスログを集計する
    • アクセスが多いページを確認する
    • 直帰率と離脱率を確認する
    • 検索頻度が高いキーワードを確認する
    • 検索結果ページでの離脱が多いキーワードを確認する
  • わかりやすい集計レポートを自動的に作成する
    • Googleデータポータルの用語
    • 期間を設定する
    • ヘルプ全体の情報を表示する
    • わかりやすい見出しを付ける
    • 月ごとの集計値の変化を表示する
    • アクセス数が多いページを表示する
    • レポートのサイズを調整する
    • 検索頻度の高いキーワードを表示する
    • 検索結果ページでの離脱が多いキーワードを表示する
    • アンケートの結果を表示する
    • レポートの表示を確認する
    • レポートを共有する

第9章 ユーザーテストでヘルプを改善する

カードソーティング――記事分類のユーザーテスト

  • 運用中のヘルプのカテゴリー構成をテストする場合
  • 新規ヘルプのカテゴリー構成を検討する場合

ナビゲーションと記事のユーザーテスト

  • 目的を設定する
  • タスクを設定する
  • シナリオを用意する
  • テスト前のストレッチ――思考発話の練習
  • テストを実施する
  • テスト後のインタビュー

第10章 アジャイル開発に対応するヘルプ管理システム

ヘルプを取り巻く環境の変化――アジャイル開発への対応

アジャイル開発に対応したヘルプ管理システム

  • 記事制作を効率化する
    • マークダウン記法を使って記事を作成する
    • バージョン管理システムを使って記事を管理する
  • チェックを効率化する
    • プルリクエストを使って記事をチェックする
    • 文章やリンクのチェックを自動化する
  • 翻訳を効率化する
    • 翻訳支援システムと連携する
    • 機械翻訳
    • CMSへの取り込みを効率化する

GitHubを使ったサイト運用のワークフロー

  • ブランチとは
    • 幹がない
    • ブランチをほかのブランチに合流させることができる
  • ブランチを活用するメリット
    • 公開のタイミングを調整できる
    • 開発要件の変更に合わせやすくなる
    • プルリクエストを活用できる
  • ブランチの種類と用途
  • プロダクトの更新に合わせてヘルプを更新する場合のフロー
    • リリース用ブランチを作成する
    • 作業用ブランチを作成する
    • 作業用ブランチをリリース用ブランチにマージする
    • リリース用ブランチを公開用ブランチにマージする
  • プロダクトの更新と対応しないヘルプ更新のフロー
    • 作業用ブランチを作成する
    • 作業用ブランチを公開用ブランチにマージする
  • 参考文献,参考Webサイト
  • 索引

著者プロフィール

仲田尚央(なかたなおひろ)

サイボウズ株式会社にて,システムエンジニア経験を経て,ヘルプ制作チームでテクニカルライターとしてサイボウズ製品関連の技術情報発信,ヘルプやマニュアルの制作,製品画面のメッセージ設計などに従事。Webサイトの設計から,コーディング,ライティング,アクセスログ分析まで幅広く取り組む。現在はチームマネージャーとして,多言語の大規模Webサイトを効率的に運用する仕組み作りに注力中。


山本絵理(やまもとえり)

新聞社での整理記者を経て,サイボウズ株式会社に入社。ヘルプ制作チームでテクニカルライターとしてサイボウズ製品関連のヘルプやマニュアルの制作,製品画面のメッセージ設計などに従事。近年はヘルプのアクセスログやオンラインアンケートの分析,改善アクションにつながる分析レポートの制作,およびヘルプのアクセシビリティ向上に注力