チャット窓口設置方法

【重要】よりプロフェッショナルに見せるための3つの工夫

単に埋め込むだけだと、少し味気ないかもしれません。文系DX的に「使いやすさ」を向上させるコツです。

1. 「ボタン型」に誘導する（スマホ対応）

埋め込み画面はスマホで表示すると縦長になりすぎる場合があります。

• 工夫： チャットを直接埋め込まず、「AIと相談する」という画像ボタンを置き、クリックすると別タブでチャットが開くように設定すると、サイト全体の読み込み速度も維持でき、非常にスッキリします。

2. 注意書きを添える（安心感の醸成）

埋め込みチャットの上部や下部に、必ず以下の文言を追記してください。

「AIプランニングパートナーについて」 「このAIは、私たちの活動記録を学習しています。あなたの質問が、新しい企画のヒントになります。回答はAIによる生成物です。正式なご相談は、[お問い合わせフォーム]までご連絡ください。」 これがあるだけで、ユーザーは「どういう目的のAIか」を理解し、安心して質問を投げられます。

3. チャット窓が「邪魔にならない」配置

• トップページには「私たちの想い（記事）」を優先して配置し、チャット窓は「企画のヒントを探す」という専用ページに配置するか、フッター付近に控えめに置くのがおすすめです。

「NotebookLM」以外の選択肢：よりサイトに溶け込ませるなら？

もし「もっと見た目をサイトのデザインに馴染ませたい」「自動で挨拶を表示させたい」という場合は、埋め込みコード（iframeコード）を直接書くことができる以下のツールがおすすめです。

• Dify (ディファイ): 最近人気のノーコードAIツールです。チャット画面の配色やロゴを自分のサイトに合わせてカスタマイズでき、Googleサイトの「埋め込みコード」機能を使って、非常に綺麗に設置できます。

• Coze (コーズ): デザイン性が高く、スマホでの動作も軽快です。

アドバイス： まずはNotebookLMの共有リンクをGoogleサイトに「埋め込み」で貼ってみてください。それだけで、「自分のサイトにAIが住んでいる」という状態が5分で完成します。実際に動かしてみて、「もっとここをこうしたい」という要望が出てきたら、その時にDifyなどに切り替えるのが、一番手戻りのない「文系DX」的な進め方です。