§23-01
ヘルプ widget (右下バブル)
画面右下のボタンからヘルプとチャットを開く。
どの画面からでも同じ場所からヘルプや問い合わせに入れる。困った瞬間に離脱せず質問できるので、導入初期の挫折を減らす。
実装のポイント右下の起動ボタンは aria-label と aria-expanded を持たせ、開いたパネルにフォーカスを移して Esc で閉じる。他の固定要素と重ならない位置にする。
- 状態管理
§23
ヘルプ・サポート
Help & Support
- Patterns
- 10
- Demos
- 10
§23-02
FAQ アコーディオン
よくある質問を開閉式に並べて回答を折りたたむ。
質問の一覧を素早く見渡し、気になる項目だけ開いて読める。ヘルプや料金ページの疑問解消で、問い合わせを減らしたいときに使う。
実装のポイント開閉ボタンは aria-expanded と aria-controls でパネルと結び、見出し要素の中に置く。ページ内検索で閉じた回答も見つかるよう hidden=until-found も検討する。
- アクセシビリティ
- キーボード操作
§23-03
検索可能ナレッジベース
カテゴリと検索でヘルプ記事を探せるようにする。
利用者が問い合わせる前に自力で答えを見つけられるようにする。同じ質問が繰り返し届くサポートの負荷を減らす。
実装のポイント検索は入力をデバウンスして候補を即時表示し、0 件時はカテゴリやサポート連絡への導線を出す。カテゴリはリンクとして記事数を添える。
- 状態管理
§23-05
サポート ticket フォーム
問い合わせ内容を添付ファイル付きで送信する。
不具合の画面や資料を添えて問い合わせでき、やり取りの往復を減らす。メールより状況を正確に伝えたいサポート窓口に向く。
実装のポイント添付はファイル種別とサイズを送信前に検証し、プレビューと削除を付ける。送信後はチケット番号と返信目安を示す。
- フォーム
§23-06
ステータスページ link
サービスの稼働状況ページへのリンクを置く。
不具合が自分の環境か全体の障害かを利用者が自分で確かめられる。障害時の問い合わせを減らし、ヘルプやフッターに常設する。
実装のポイントステータスページは本体と別ドメイン・別基盤で配信し、本体障害時も参照できるようにする。リンクには現在の状態を色と文言で添える。
- 状態管理
§23-07
Tour 再生ボタン
初回に見た案内ツアーをもう一度再生する。
初回に飛ばした説明や忘れた使い方を後から見直せるようにする。機能を思い出せず問い合わせになるのを防ぐ。
実装のポイントツアーの既読フラグを消して再開するだけの単純な実装にし、設定やヘルプメニューの中に置く。途中の画面からでも開始位置へ遷移させる。
- 永続化
§23-08
Contextual help (?)
入力欄のそばの ? から補足説明を開く。
用語や入力形式が分からないときに、別ページへ移らずその場で確認できる。専門的な設定項目が並ぶフォームで効く。
実装のポイントヘルプは button で開閉してクリック・フォーカスに応じ、aria-describedby でフィールドと結ぶ。ホバーだけに頼るとタッチ端末で開けない。
- アクセシビリティ
§23-09
動画チュートリアル埋込
使い方を説明する動画をページ内に埋め込む。
文章で伝えにくい操作の流れを動画で見せ、読む負担を減らす。ヘルプページや機能紹介で、実際の画面の動きを示したいときに使う。
実装のポイント埋め込みは最初はサムネイルだけ表示し、クリック時に iframe を差し込む遅延読み込みにする。字幕と再生時間を添える。
- ブラウザ API
§23-10
Feedback / "issue を報告"
一度の操作で意見や不具合を送れる入口を置く。
困ったその場で報告でき、問い合わせ先を探す手間がない。小さな不満を早く拾いたい運用で効く。
実装のポイント送信時に URL・ブラウザ情報・任意のスクリーンショットを自動で添付し、ユーザーには本文の入力だけを求める。
- フォーム