Discourse ウェルカムモーダル

テーマコンポーネント
1
:information_source: 概要 フォーラムの探索や参加を始めるための実用的な方法を、新規または再訪したコミュニティメンバーに提供するためのウェルカムモーダル
:eyeglasses: プレビュー Theme Creator (ログインが必要です)
:hammer_and_wrench: リポジトリ GitHub - noahLovell/discourse-welcome-modal
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourseテーマは初めてですか？ Discourseテーマ利用の初心者ガイド

このテーマコンポーネントをインストール

:rocket: なぜこれを使うのか？

多くのコミュニティでは高い登録率が見られますが、「初日の離脱」に苦しんでいます。実用的な道筋を提供することで、新規メンバーの認知的負荷を軽減し、長期的な定着につながる価値の高い行動へと導きます。

:camera_flash: スクリーンショット

デスクトップ

Screenshot 2026-02-03 at 23.08.08
Screenshot 2026-02-03 at 23.08.081920×1033 158 KB

Screenshot 2026-02-03 at 23.07.22
Screenshot 2026-02-03 at 23.07.221920×1034 164 KB

モバイル

Screenshot_20260203_231759_Chrome
Screenshot_20260203_231759_Chrome1080×2046 97.8 KB

仕組み

このモーダルは、すでにコミュニティに慣れている定期的なメンバーにプロンプトが表示されるのを防ぐため、ロジックに基づいたロールアウトを使用します。

  1. 新規ユーザー: feature_enabled_date以降に登録したすべてのユーザーに自動的に表示されます。
  2. 猶予期間: 設定可能な期間中、コンポーネントはアクティブなユーザーを「サイレントに」モーダルを見たものとしてマークし、中断させないようにします。
  3. レガシーユーザー: 猶予期間が終了した後、フォーラムに戻ってきた既存のユーザーに表示され、再オンボーディングを支援します。

注記: 「表示済み」の状態はユーザーのブラウザにローカルに保存されるため、デバイスを切り替えたりキャッシュをクリアしたりすると、モーダルが再表示される可能性があります。

:gear: 設定

設定 タイプ デフォルト 説明
enabled bool false メンバーに有効にする準備ができたら、Discourse Welcome Modalの切り替えを行います。
feature_enabled_date string \"2026-01-01\" YYYY-MM-DD形式で日付を入力します。
grace_period_months integer 3 既存のユーザーをサイレントに表示済みにマークする、機能有効化日からの月数。
card_layout enum \"grid\" ウェルカムモーダル内のカードの表示方法を選択します（gridまたはlist）。
card_content objects [] ウェルカムモーダルに表示されるカードを設定します（id、title、subtitle、imgUrl、altText、btnLabel、actionが必要です）。
title (翻訳) text Join the conversation モーダルの上部に表示されるメインの見出し。
close_btn (翻訳) text Done モーダルを閉じるボタンのラベル。

?show-welcome-modal=true を使用すると、機能が有効になっているか、以前に表示された状態に関係なく、Welcome Modalを強制的に表示できます。これは、コミュニティで公開する前のテストに最適です :slight_smile:

これは私の最初の本格的なテーマコンポーネントです :raised_hands: フィードバック、考え、もっと良くできた点などがあれば、ぜひ教えてください :smile:

「いいね！」 20
2

こんにちは、@noahl さん

これをテストして、デモ画像のようにタイルを見る最も簡単な方法はありますか？管理者がこの機能をより広範に PORD 環境で利用可能にする前にタイルを確認できるようにする特定の設定はありますか？

「いいね！」 2
3

@marksalterさん、こんにちは！あなたが私にとって最初の「機能リクエスター」です :raising_hands:

enable設定と、モーダルを強制的に表示するためのクエリパラメータ ?show-welcome-modal=true をプッシュしました。

これら両方を組み合わせることで、ユーザーに有効化する前に管理者としてテストできます :slight_smile:

例：有効をオフに設定し（誰にも表示されなくなります）、クエリパラメータを使用して強制的に表示させます。

「いいね！」 6
4

完璧に機能します！確認してくれてありがとう。

「いいね！」 3
5

次回の開発ラウンドに向けての提案です。猶予期間中に非アクティブだった既存ユーザーと新規ユーザーに対して、表示するメッセージを区別できると良いでしょう。

そうすれば、新規ユーザーにはウェルカムメッセージ（「はじめに」の資料をご覧ください）を、既存ユーザーには新機能やカテゴリなどを紹介する「新着情報」メッセージを表示できます。

「いいね！」 4
6

これは本当に素晴らしいですね！素晴らしい仕事です :clap:

フッターを削除することについてどう思いますか？CTAと閉じるボタンがあるので、「完了」は少し不要に感じますが、あなたの意見を聞きたいです。

7

このアイデアは素晴らしいです！最初のバージョンでは検討したのですが、初期リリースはシンプルに保つことにしました。

とにかく、このセグメンテーションを実装するアップデートをプッシュしました！異なるユーザーの状態を区別するためのロジックに小さな変更を加えましたので、邪魔にならないようにコンテンツを調整できます。

現在の仕組み:

1. 定義

  • 新規ユーザー: feature_enabled_date 以降に登録したユーザー。
  • 既存ユーザー: それ以前に登録したユーザー。
  • アクティブユーザー: 定期的に訪問しているメンバー（非アクティブ期間内）。
  • 復帰ユーザー: 非アクティブのしきい値を超えて離脱していた、以前アクティブだったメンバー。

2. ロジックフロー 最もアクティブなメンバーを煩わせないように、コンポーネントは特定の優先順位に従います。

  • 新規登録: モーダルがすぐに表示されます（new_users または both とマークされたカードが対象）。
  • 猶予期間: 「既存ユーザー」が設定ウィンドウ中に訪問した場合、コンポーネントはサイレントに既読としてマークするため、中断されることはありません。
  • 非アクティブ期間: ユーザーが「既読」としてマークされると、コンポーネントはローカルで訪問を追跡します。毎日訪問すれば、アクティブなままであり、二度と表示されることはありません。表示されるのは、訪問の間隔が returning_user_inactivity_months の設定（新しい設定です :slight_smile: ）を超えた場合のみです（この場合復帰ユーザーとして）。

3. カスタマイズされたコンテンツ 各カードで displayFor 設定を使用できるようになりました。

  • new_users: 「投稿方法」や「自己紹介」に最適です。
  • returning_users: 「あなたがいない間に何が変わったか確認してください」に最適です。
  • both: ガイドラインやFAQなどの必須リンク。

また、これらのフローを簡単にテストできるようにプレビューパラメーターも追加しました: ?show-welcome-modal=true&user-type=new または &user-type=returning。

後押ししていただき、重ねて感謝します！

「いいね！」 3
8

@noahl それは素晴らしいですね！

今日中か月曜日にこれを確認して、状況を知らせるようにします。

「いいね！」 1