個人開発でチャットボットを開発・運営しています。
「Webサイトにチャットボットを導入したいけれど、既存ツールだとサイトのデザインに合わなくて浮いてしまう」「もっと柔軟に表示位置やUIの入力をカスタマイズしたい」と思ったことはありませんか？
チャットボットの機能とUI設計のポイントを紹介します！
- チャポット: https://chapot.net/
🎨 1. ブランドに合わせて自由自在に変えられるデザイン・テーマ機能
Webチャットがサイトのデザイン（トーン＆マナー）から浮いてしまわないよう、カラーコーディネートの柔軟性に徹底的にこだわりました。
豊富に選べるプリセットテーマ
ブルーグレー、レッド、ピンク、オレンジ、グリーン、モノトーンなど、よく使われる配色テーマをあらかじめプリセットとして用意しています。ワンタップでサイトに合わせた配色に切り替えられます。
細部まで調整できるカスタムテーマ機能
さらにこだわりたい方向けに、パーツごとのカラー変更にも対応しています。
- チャットの背景色
- チャットタイトルの背景色
- 吹出し（受信 / 送信）の背景色
- ボタン・リンクの色
- ポップアップの背景色
サイトのメインカラーやアクセントカラーに合わせて完璧に色合わせが可能です。
📐 2. 設置サイトのレイアウトを邪魔しない細かな表示設定
PC・スマホ問わず、設置先のWebサイトのレイアウトを崩さないための表示調整機能を完備しています。
- チャットの幅・高さの自由調整: ページ内の配置スペースに合わせてサイズを変更可能
- 設置位置の細かなコントロール: 右下・左下などの位置指定や、z-index（前面/背面）の設定で他の要素（ヘッダーや「Topに戻る」ボタン等）とのバッティングを防止
- 最小化・最大化表示: 訪問者の操作の邪魔にならないよう、初期表示の最小化位置やタイトル、送信ボタンの挙動まで細かく設定可能
- 角丸・手書き風デザインの切替: サイトがポップなら角丸や手書き風に、フォーマルならシンプルなスクエアになど雰囲気に合わせて選択
✍️ 3. テキストだけじゃない！多彩な入力・共有機能
テキスト入力だけでなく、ユーザーが状況に合わせて多様なコミュニケーションを取れる工夫を施しています。
- 手書き入力機能: スマホやタブレット、マウスを使って画面上で直接イラストやメモを書いて送信可能
- 写真添付機能: 端末内の画像や撮影した写真をサクッとチャットに送信
- チャット上部のカスタムボタン: チャットの最上部に指定したリンクや案内ボタンを設置可能
- メール通知機能: 未対応のメッセージが届いた際や、ユーザーからの問い合わせをオーナーへメールで即時通知
🔗 4. 埋め込みからQRコードまで！あらゆる場面で共有可能
チャポットはHTMLサイトへのコード貼り付けだけでなく、様々な公開方法に対応しています。
- WEBサイト小画面（JavaScript埋め込み）: サイトの右下などに常駐するチャットウィンドウとして設置
- iframe埋め込み / リンク表示: ページ内の特定エリアに埋め込んだり、テキストリンクをクリックした時にポップアップで開く設定
- URL・QRコード共有: SNSのプロフィール欄にURLを掲載したり、ポスター・名刺にQRコードを印字してオフラインからチャットへ誘導
おわりに
個人開発でありながら、「導入するサイト側のUI/UXを損なわないこと」を一番に考えて各種機能を組み上げました。
現在、すべての機能を無料でお試しいただけますので、ご自身のポートフォリオサイトや店舗サイト、イベントページなどにぜひ設置してみてください！
「こういうデザイン設定が欲しい」「この機能があると嬉しい」といったフィードバックも大歓迎です！
- チャポット: https://chapot.net/
- 機能説明: https://chapot.net/docs