Amazon Q Business でテーマのカスタマイズ内容が Web インターフェース上に反映されない問題がおきたので対応した

Amazon Q Business でテーマのカスタマイズ内容が Web インターフェース上に反映されない問題がおきたので対応した

2025.08.31

いわさです。

Amazon Q Business では Web Experience と呼ばれる Web インターフェースが提供され、そこからビジネス向けにカスタマイズした機能にアクセスすることが出来ます。
先日とある機能を試す機会があって触っていたのですが、その際に Web インターフェース画面をカスタマイズできることを知りました。

どんなもんなのかと思ってカスタマイズを試していたのですが、うまくカスタム内容が反映されない事象が発生しました。
本日はこちらを解決出来たのでその方法を紹介します。
おそらく私のようにドキュメントを読まずにまず試してしまう人は同じ問題が発生すると思います。

前提として、本日時点の Amazon Q Business デフォルト状態の Web インターフェースは次のようなデザインになっています。

48E9E922-C4AC-479B-AA78-2BA908013EF1.png

テーマのカスタマイズ

テーマのカスタマイズはアプリケーションごとの行うことが出来ます。
作成したアプリケーションごとに以下の「Customize web experience」から開始することが出来ます。

3FDCEA1E-0355-4CC2-9165-CD6CB7C7027C.png

そすうると Web インターフェースのプレビュー画面が表示されます。
右側にはカスタム項目が表示されており、Text と Theme の 2 つのタブが表示されています。

086C94BA-0177-436B-81E0-6AD6B6821DCD.png

テキスト

テキストタブではタイトル・サブタイトル・チャット起動時に表示されるウェルカムメッセージの3つのテキストを任意の値に設定することが出来ます。
タイトルは 25 文字まで、サブタイトルは 50 文字まで、ウェルカムメッセージは 300 文字まで設定が可能です。

BA1016FF-422B-4B68-9FCF-4B8B4C6618A2.png

「Display sample prompts」にチェックを入れると、サンプルプロンプト選択コントロールがチャット欄に表示されるようになります。
ただし、このサンプルプロンプトの内容のカスタマイズは出来ないみたいだったので

プレビュー上だと日本語も扱うことが出来たのですが、保存しようとすると次のようにタイトルとサブタイトルで入力チェックのエラーが発生しました。日本語使えないみたいですね。
ウェルカムメッセージについては使えました。

CBE4AB94-9E8B-41A6-8329-ED90BBD7B527.png

テーマ

テーマタブでは色やフォントなどの見た目の部分を変更できます。
Managed theming では UI 上でカスタマイズできる項目を設定していきます。Custom theming では CSS ファイルを埋め込んでそのままデザインのカスタマイズを行います。
前者の場合でも最終的には選択した内容で CSS が出力されます。

987599DA-2CA5-4CBB-A595-CE606F72AE13.png

背景色、タイトル色、フォント、ロゴを指定した時のプレビューがこんな感じです。
テキストの位置などは変更できません。

AA624CDB-494F-4784-BCC8-926960C33E5B.png

また、アドバンスドオプションではチャット内容のコンポーネントとフォントの色を指定することができます。ユーザー入力と Q の返答と色を分けることもできます。
ただし、プレビュー画面ではチャット内容のスタイル確認はできないようだったので、デプロイして実際に確認する必要があります。

62906120-CB76-405B-B640-B2495C1E9073.png

デプロイ方法ですが、S3 バケットを指定します。
そうすると CSS ファイルが画面で設定した内容に従って出力される感じですね。保存されるだけで、これを適用するとかの作業は不要です。

DFCB16E7-F3E7-46AD-919B-F86169BDF663.png

ただし、注意点が少しあるので紹介します。

テーマが反映されない

S3 バケットに CSS ファイルを保存した後に Web インターフェースにアクセスしてみたところ、テキストのカスタム内容は反映されていたのですが、テーマで設定した内容が反映されていませんでした。どうして...

F93D267E-6763-4DEF-A6C0-858AE1CB41F1.png

よくよくドキュメントを読み直してみると、S3 バケットに関する注意点などが記述されています。
先ほどのカスタマイズ画面で S3 バケットにテーマ内容を保存したと思いますが、Amazon Q からアクセスできるようにしておく必要があるみたいです。

https://docs.aws.amazon.com/amazonq/latest/qbusiness-ug/customizing-web-experience-themes.html

パブリックアクセス可能にするか、あるいはプライベートバケットの場合は Amazon Q Business がアクセスできるようにバケットポリシーの設定が必要になります。
本日時点では上記ドキュメントにプライベートバケットのポリシー設定内容が記述されていなかったので、パブリックアクセス可能なように設定してみました。

756AD6ED-8F94-4EDF-A3E1-89EAC3674993.png

そうすると、テーマで設定した内容も反映されることを確認しました。良いですね。

AFE6D30A-F8F9-48DF-904F-FE9A7DEDF318.png

さいごに

本日は Amazon Q Business でテーマのカスタマイズ内容が Web インターフェース上に反映されない問題がおきたの対応方法を紹介しました。
初めてカスタマイズする際はバケットポリシーの設定を忘れがちなので覚えておきましょう。

この記事をシェアする

facebookのロゴhatenaのロゴtwitterのロゴ

© Classmethod, Inc. All rights reserved.