シャウトアウト作成のベストプラクティス

Last Updated 5月 1, 2026

概要

シャウトアウトは、重要な情報を強調表示したり、重要な瞬間にユーザーを案内するために使用される注意を引くバルーンです。 この記事では、基本を理解したら、シャウトアウトを効果的に使用するためのベストプラクティスを説明します。

シャウトアウトには主に2つのタイプがあり、それぞれ異なる使用ガイドラインがあります:

  1. 必須
  2. 非中断

同じユースケース内でこれらのタイプを混在させることは避けてください。 各々は、メッセージの緊急性に基づいて、意図的に文脈に応じて使用する必要があります。

ShoutOuts: Getting Started Guide

Essential シャウトアウト

ユーザーの注意をすぐに引き付け、メッセージを確実に表示する必要がある場合は、Essential シャウトアウトを使用します。

ベストプラクティス

  • スポットライトをオンにすると、ユーザーの注意を集中できます
  • ユーザーがシャウトアウトの外側をクリックするのを防ぎます
  • メッセージを明確に伝える簡潔でアクション指向のテキストを使用します
  • このシャウトアウトを中断として扱います。ユーザーはシャウトアウトを閉じる可能性が高くなります
  • 新しいページが読み込まれた際に、アクション中に表示される代わりにシャウトアウトをトリガーします

ユースケース

  • 必須ステップまたは確認
  • 重要な発表または変更
  • 即時の注意が必要なブロッキングの問題

非中断シャウトアウト

非中断シャウトアウトを使用して、ユーザーの流れを中断せずに役立つコンテキストを提供します。

ベストプラクティス

  • スポットライトをオフに保ちます
  • ユーザーがページとインタラクションを継続できるようにします
  • シャウトアウトを配置し、主要なUI要素をブロックしないようにします
  • ミッションクリティカルシャウトアウトよりも小さいインジケーターを使用します
  • メッセージを短く明確で、情報を提供するようにします
  • ユーザーがページを確認できるように、起動を少し遅らせます

ユースケース

  • ヒントとコツ
  • 機能ハイライト
  • オプションのガイダンスまたはリマインダー

シャウトアウト一般ガイドライン

  • シャウトアウトは、現在のページまたはタスクに関連する場所に常に配置します
  • シャウトアウトの過剰使用を避ける。頻繁な中断は効果を低下させるため
  • 関連するシャウトアウト全体で一貫した言語とトーンを使用します
  • 配置とタイミングをテストし、シャウトアウトがユーザー体験を中断するのではなく、向上させることを確認します

Tip Tuesday動画

シャウトアウトの背景画像、カルーセル、遅延

Lottieアニメーションでシャウトアウトを向上させます

トレーニング中にシャウトアウトを開いたままにする方法!

この記事は役に立ちましたか?

ご意見ありがとうございます!

Be part of something bigger.

Engage with peers, ask questions, share ideas

Ask the Community
×