BigBlueButtonのインターフェースとロゴをカスタマイズする方法

BigBlueButtonのブランディングには、サーバーのデフォルトWebページのロゴ変更、会議内でのロゴ表示、会議クライアント自体の再設計という3つの意味があります。目的に最も適した最小限の変更を選択してください。最初の2つは、ドキュメント化された設定変更またはアセット変更です。配色、文言、クライアントレイアウトの変更には、通常、カスタマイズされたHTML5クライアントの構築が必要です。

このガイドは、2026年10月6日に公開されたBigBlueButton 4.0の管理ドキュメントに基づいています。パスやデプロイメントパッケージは、リリースやホスティングプロバイダーによって異なる場合があります。ファイルを変更する前に、サーバーにインストールされているバージョンを確認し、必ず事前にバックアップを取ってください。

必要なブランディング変更を選択してください

サーバーのランディングページに表示されるロゴと会議中のロゴは別々です。一方を変更しても、もう一方は自動的に変更されません。

サーバーを編集する前に

BigBlueButtonサーバーを変更するには、シェルアクセス権限が必要です。また、ホストの管理を自社で行っているのか、マネージドサービスが行っているのかを把握しておく必要があります。プロバイダーがサーバーを管理している場合は、カスタムブランディングに対応しているか、メンテナンス中に変更内容が保持されるかを確認してください。

• インストールされているリリースを確認し、対応するBigBlueButtonサーバーカスタマイズガイドと比較してください。
• 現在のロゴと、編集予定の設定ファイルのコピーを保存してください。
• サイトや会議で表示されるサイズでも認識できる、鮮明なロゴファイルをご用意ください。ドキュメントには共通のピクセルサイズは指定されていないため、想定される寸法に頼るのではなく、実際の表示領域を確認してください。
• 会議参加者がログインせずにアクセスできる画像URLを使用してください。HTTPS接続を推奨し、使用前にサーバー外部からURLを検証してください。

デフォルトのウェブページロゴを変更する

BigBlueButton 4.0 の管理ガイドでは、デフォルトのロゴが に設定されています/var/www/bigbluebutton-default/assets/images/logo.png。これはサーバーが提供するデフォルトの Web サイトに影響します。HTML5 会議クライアント内に表示されるロゴは設定されません。

1. サーバーに接続し、記載されているパスにファイルが存在することを確認してください。パスが異なる場合は、推測したディレクトリにファイルをコピーするのではなく、インストール済みのバージョンのドキュメントを確認してから操作してください。
2. 既存のアセットをバックアップしてください。例えば、管理者は置き換える前に、同じディレクトリに日付付きのバックアップファイルにコピーすることができます。置き換えをインストールする際は、元のアクセス許可と所有権に注意してください。
3. ファイル名を指定して、新しいロゴを所定の場所に配置してくださいlogo.png。画像ファイルがPNGデータであること、およびページ背景とのコントラストが十分であることを確認してください。
4. BigBlueButtonの公開ランディングページをプライベートブラウザウィンドウで開くか、ブラウザのキャッシュをクリアしてください。新しいマークが引き伸ばされたり、切り取られたり、ぼやけたりすることなく表示されることを確認してください。

公式ガイドにはアセットの場所が記載されていますが、ローカルの代替ファイルがパッケージの更新後も常に保持されることを保証するものではありません。元のファイルと代替ファイルはデプロイメント記録に保存し、アップグレード後にランディングページを再確認してください。更新後にロゴが消えた場合は、インストールされたファイルと保存済みのアセットを比較し、最新のリリース手順を確認してから変更を再適用してください。

会議中にロゴを表示する

BigBlueButtonのドキュメントに記載されている会議ごとのブランディングオプションでは、参加者リストの上にあるブランディングエリアにロゴが表示されます。ただし、HTML5クライアントのdisplayBrandingArea設定が有効になっていること、および会議が画像URLを使用して作成されていることの2つの条件を満たす必要がありますlogo。ロゴパラメータだけでは、非表示のブランディングエリアは表示されません。

1. HTML5クライアントの設定で、 を有効にしてくださいdisplayBrandingArea。現在ドキュメント化されているインストール環境では、/etc/bigbluebutton/bbb-html5.ymlが推奨されるローカルオーバーライドファイルです。このファイル内の設定エントリは、対応するパッケージ化されたクライアント設定を上書きします。 ファイルを編集する際は、他の既存のYAML値を保持してください。
2. 設定変更を有効にするには、BigBlueButtonを再起動してくださいsudo bbb-conf --restart。再起動は進行中の会議を中断する可能性があるため、適切なメンテナンス時間帯に実行してください。
3. アプリケーションまたはAPIクライアントで会議を作成する際に、フォームにカスタムパラメータを含めてくださいlogo=https://your-domain.example/brand.png。カスタムパラメータを入力する正確な場所は、BigBlueButtonリクエストを送信する統合によって異なります/create。その統合の手順に従い、サーバーの共有シークレットをクライアント側のコードに公開しないでください。
4. 新しいテストミーティングを作成して参加してください。参加者リストの上にロゴが表示され、画像ホストにログインしていない参加者にも画像が読み込まれることを確認してください。

推奨されるオーバーライド箇所については公式の設定ファイルリファレンスを、会議作成パラメータについてはAPIリファレンスを参照してください。サーバーのバージョンが4.0でない場合は、対応するドキュメントを参照してください。

インターフェース全体のリブランディングが必要な場合

会議のブランディングエリアに表示されるロゴは、ホワイトラベルの会議アプリケーションとは異なります。インターフェースの色、ラベル、その他の組み込みクライアント要素を変更する必要がある場合は、BigBlueButtonのFAQに記載されているように、管理者は開発環境をセットアップし、独自のHTML5クライアントを作成する必要があります。プロジェクトのブランディングに関するFAQと開発ガイドが、その出発点となります。

このルートは開発と展開作業が必要です。サーバー設定は簡単ではなく、BigBlueButtonの進化に伴い変更にはメンテナンスが必要になる場合があります。カスタムビルドに投資する前に、変更が必要な画面や要素を正確に書き出し、組み込みのランディングページや会議ロゴのオプションで十分かどうかを確認してください。カスタムビルドを進める場合は、カスタマイズ内容をソース管理下に置き、再構築方法を文書化し、本番環境へのアップデート前にステージング環境でアップグレードをテストしてください。

結果を確認し、症状ごとにトラブルシューティングを行う

• ランディングページのロゴが変更されていない場合は、アクティブサーバーのアセットディレクトリ内のファイルを置き換えたことを確認しbigbluebutton-default、ブラウザのキャッシュをバイパスしてください。プロキシまたは別のポータルがパブリックページを提供している場合は、そのページを所有しているシステムを確認してください。
• 会議のロゴが表示されない場合：ブランディングエリアの設定が有効になっているか、サーバーが再起動されているか、新しい会議がlogoパラメータ付きで作成されているか、認証されていないブラウザで画像URLが機能するかを確認してください。
• ロゴは表示されるものの、見た目がおかしい場合は、元の画像の比率、透明部分、コントラストを確認してください。インターフェース上で画像を拡大縮小するのではなく、元の画像自体を調整してください。
• 一部の参加者には空白領域が表示されます。別のネットワークとデバイスから画像URLをテストしてください。ファイアウォール、アクセス制限、無効なTLS証明書、または有効期限切れのURLが原因で、参加者のブラウザが画像を読み込めない場合があります。
• 色や文言は変更されません。サーバーロゴを置き換えても、会議クライアントのインターフェースは変更されません。これらのインターフェース要素を変更する必要がある場合は、カスタムクライアント開発の手法を使用してください。

成功の判断基準は、結果の表示位置と一貫性です。ランディングページに置換マークが表示され、新しく作成されたテストミーティングでは、指定されたブランディングエリアにミーティングロゴが表示され、カスタムクライアントを構築した場合は、要求されたインターフェースの変更が参加からミーティングまでのフロー全体を通して維持されます。キャッシュされたブラウザタブを1つだけ確認するよりも、小規模なテストミーティングの方が安全な検証ポイントとなります。

BigBlueButtonのブランディングオプションは、設定レベルでは意図的に制限されています。組み込みのロゴパスは一般的なアイデンティティニーズに対応していますが、インターフェースの全面的な再設計には、カスタムクライアントの所有と継続的なメンテナンスが必要となります。