Windowsで作成したAIチャットボットのデザインをChatGPT風にする方法

前回の記事では、Windowsで簡易的なAIチャットボットを作成してアプリ化するまでを解説しました。

まだ前回の記事を読まれていない方は、読んで頂ければ今回の記事の題材でもある「AIチャットボットの見た目を変更」もスムーズに行えます。Pythonのインストールからステップを踏んで解説しています。

早速ですが、AIチャットボットの見た目をChatGpt風に変更するステップを解説します。

作成したAIBOTの見た目

Windowsで作成したAIBOTはあくまで簡易的なものであったため、チャット入力ボックスも狭かったり、GUIがいまいちでした。

この見た目を下画像のように改良します。

必要なもの

コードの安全性について

本記事で紹介しているコードは、すべて基本的に安全な処理のみで構成されていますが、実行環境や設定によっては意図しない動作が発生する可能性があります。

安心して使用するために、以下のポイントを確認してください。

実行前のコード確認

コードをそのまま実行する前に、内容を一度確認することを推奨します。
特に以下の処理には注意してください：

* 外部通信（APIリクエスト）
* ファイルの読み書き処理
* 環境変数の使用

仮想環境での実行を推奨

Pythonの仮想環境（venvなど）で実行することで、PC本体への影響を最小限に抑えることができます。

自己責任での利用

本記事のコードは学習目的で提供しています。実行・応用はご自身の責任で行ってください。

💡 不安な方へ

まずはテスト環境やサブPCでの実行から始めるのがおすすめです。

ステップ①　PowerShellを起動する

PowerShellの起動方法はいくつかあります。

PowerShellを起動してAIBOTフォルダに移動します。

cd C:\Users\Desktop\AIBOT

ステップ②　仮想環境を起動する

前回の記事で作成した仮想環境を起動します。

.\venv\Scripts\Activate.ps1

（venv）が表示されていることを確認。

ステップ③　必要ライブラリをインストールする

「customtkinter」と言うGUIをカスタマイズできるライブラリをインストールします。

pip install customtkinter

ステップ④　pyファイルを編集する

AIBOTフォルダにあるAIBOT.pyをメモ帳で開きます。※コードをコピペする前に、元に戻したい時のためにAIBOT.pyファイル自体をコピーして他の場所にバックアップしておくことを推奨します。

📁 AIBOTフォルダ
├── 📁 venv
├── 📁 dist
├── 📄 AIBOT.py　←このファイルをメモ帳で開く
└── 📄 .env

元のコードを丸ごと削除して以下のコードをコピペします。

import customtkinter as ctk
import google.generativeai as genai
import os
import threading

# ===== 定数 =====
MODEL_NAME = "models/gemini-flash-lite-latest"

# ===== APIキー取得 =====
api_key = os.getenv("GEMINI_API_KEY")
if not api_key:
    raise ValueError("GEMINI_API_KEY が設定されていません")
genai.configure(api_key=api_key)

# ===== テーマ設定 =====
ctk.set_appearance_mode("dark")
ctk.set_default_color_theme("blue")

# ===== メインウィンドウ =====
class ChatApp(ctk.CTk):
    def __init__(self):
        super().__init__()
        self.title("AI Chatbot")
        self.geometry("760x680")
        self.resizable(True, True)
        self.configure(fg_color="#1a1a2e")

        self.model = genai.GenerativeModel(MODEL_NAME)
        self.chat_session = self.model.start_chat(history=[])

        self._build_ui()

    def _build_ui(self):
        # ===== ヘッダー =====
        header = ctk.CTkFrame(self, fg_color="#16213e", corner_radius=0, height=56)
        header.pack(fill="x")
        header.pack_propagate(False)

        ctk.CTkLabel(
            header,
            text="✦  AI Chatbot",
            font=("Segoe UI", 18, "bold"),
            text_color="#e0e0ff"
        ).pack(side="left", padx=20, pady=10)

        self.status_label = ctk.CTkLabel(
            header,
            text="● オンライン",
            font=("Segoe UI", 11),
            text_color="#4ade80"
        )
        self.status_label.pack(side="right", padx=20)

        # ===== チャット表示エリア =====
        self.chat_box = ctk.CTkTextbox(
            self,
            font=("Segoe UI", 13),
            fg_color="#0f0f23",
            text_color="#e0e0e0",
            corner_radius=12,
            wrap="word",
            state="disabled",
            border_width=1,
            border_color="#2a2a4a"
        )
        self.chat_box.pack(padx=16, pady=(12, 8), fill="both", expand=True)

        # テキストタグ設定
        self.chat_box._textbox.tag_config("user_tag",   foreground="#60a5fa", font=("Segoe UI", 11, "bold"))
        self.chat_box._textbox.tag_config("user_text",  foreground="#dbeafe")
        self.chat_box._textbox.tag_config("ai_tag",     foreground="#4ade80", font=("Segoe UI", 11, "bold"))
        self.chat_box._textbox.tag_config("ai_text",    foreground="#dcfce7")
        self.chat_box._textbox.tag_config("error_text", foreground="#f87171")

        # ===== 入力エリア =====
        input_frame = ctk.CTkFrame(self, fg_color="#16213e", corner_radius=14)
        input_frame.pack(padx=16, pady=(0, 16), fill="x")

        self.entry = ctk.CTkEntry(
            input_frame,
            placeholder_text="メッセージを入力... (Enterで送信)",
            font=("Segoe UI", 13),
            height=46,
            fg_color="#0f0f23",
            border_color="#2a2a4a",
            text_color="#e0e0e0",
            corner_radius=10
        )
        self.entry.pack(side="left", fill="x", expand=True, padx=(12, 8), pady=10)
        self.entry.bind("<Return>", lambda e: self._send_async())

        self.send_btn = ctk.CTkButton(
            input_frame,
            text="送信  ➤",
            width=100,
            height=46,
            font=("Segoe UI", 13, "bold"),
            fg_color="#3b82f6",
            hover_color="#2563eb",
            corner_radius=10,
            command=self._send_async
        )
        self.send_btn.pack(side="right", padx=(0, 12), pady=10)

    # ===== メッセージ追加（メインスレッドからのみ呼ぶこと）=====
    def _append(self, text, tag):
        self.chat_box.configure(state="normal")
        self.chat_box._textbox.insert("end", text, tag)
        self.chat_box.configure(state="disabled")
        self.chat_box._textbox.see("end")

    
    def _append_message(self, label, label_tag, body, body_tag):
        self._append(label + "\n", label_tag)
        self._append(body + "\n\n", body_tag)

    # ===== UI のロック／アンロック =====
    def _set_ui_busy(self, busy: bool):
        """送信中は入力欄とボタンを無効化して連打・誤操作を防ぐ"""
        state = "disabled" if busy else "normal"
        btn_text = "送信中..." if busy else "送信  ➤"
        status_text = "● 応答中..." if busy else "● オンライン"
        status_color = "#facc15" if busy else "#4ade80"

        self.entry.configure(state=state)         
        self.send_btn.configure(state=state, text=btn_text)
        self.status_label.configure(text=status_text, text_color=status_color)

    # ===== 非同期送信（メインスレッドから呼ぶ）=====
    def _send_async(self):
        user_input = self.entry.get().strip()
        if not user_input:
            return
       
        self._set_ui_busy(True)
        self.entry.delete(0, "end")
        threading.Thread(target=self._send, args=(user_input,), daemon=True).start()

    # ===== 送信処理（別スレッドで実行）=====
    def _send(self, user_input):
        self.after(0, lambda: self._append_message("You", "user_tag", user_input, "user_text"))

        try:
            
            response = self.chat_session.send_message(user_input)
            reply = response.text
            self.after(0, lambda: self._append_message("AI", "ai_tag", reply, "ai_text"))
        except Exception as e:
            self.after(0, lambda: self._append(f"Error: {e}\n\n", "error_text"))
        finally:
           
            self.after(0, lambda: self._set_ui_busy(False))


if __name__ == "__main__":
    app = ChatApp()
    app.mainloop()

コピペできたらメモ帳の「ファイル」→「上書き保存」から保存します。

これで準備が整いました。

ステップ⑤　AIBOT.pyを実行する

PowerShellで以下のコマンドを実行します。

python AIBOT.py

GUIが改良されたAIチャットボットが表示されれば完了です。

UIカスタマイズガイド

コードのどの部分を変更すればカスタマイズできるかを書いておきます。

テーマ・カラーモード

ctk.set_appearance_mode("dark")   # "dark" / "light" / "system"
ctk.set_default_color_theme("blue")  # "blue" / "green" / "dark-blue"

ウィンドウサイズ・背景色

self.geometry("760x680")      # 幅x高さ を変更
self.configure(fg_color="#1a1a2e")  # ウィンドウ背景色

ヘッダー

header = ctk.CTkFrame(self, fg_color="#16213e", height=56)
#                           ↑ヘッダー背景色         ↑高さ

ctk.CTkLabel(header, text="✦  AI Chatbot", ...)
#                          ↑ タイトル文字を変更

self.status_label = ctk.CTkLabel(..., text="● オンライン", text_color="#4ade80")
#                                       ↑ステータス文字       ↑色（緑）

チャット表示エリア

self.chat_box = ctk.CTkTextbox(
    fg_color="#0f0f23",    # チャット背景色
    text_color="#e0e0e0",  # デフォルト文字色
    corner_radius=12,      # 角丸の大きさ（0で四角）
    border_color="#2a2a4a" # 枠線の色
    font=("Segoe UI", 13), # フォント・サイズ
)

発言の色分け（タグ設定部分）

self.chat_box._textbox.tag_config("user_tag",  foreground="#60a5fa")  # Youラベル色
self.chat_box._textbox.tag_config("user_text", foreground="#dbeafe")  # ユーザー本文色
self.chat_box._textbox.tag_config("ai_tag",    foreground="#4ade80")  # AIラベル色
self.chat_box._textbox.tag_config("ai_text",   foreground="#dcfce7")  # AI本文色

入力エリア・ボタン

input_frame = ctk.CTkFrame(self, fg_color="#16213e", corner_radius=14)
#                                ↑入力エリア背景色        ↑角丸

self.entry = ctk.CTkEntry(
    placeholder_text="メッセージを入力...",  # プレースホルダー文字
    height=46,              # 入力欄の高さ
    fg_color="#0f0f23",     # 入力欄背景色
    border_color="#2a2a4a", # 枠線色
    text_color="#e0e0e0",   # 入力文字色
)

self.send_btn = ctk.CTkButton(
    text="送信  ➤",         # ボタン文字（絵文字も使える）
    width=100,              # ボタン幅
    height=46,              # ボタン高さ
    fg_color="#3b82f6",     # ボタン色
    hover_color="#2563eb",  # ホバー時の色
    corner_radius=10,       # 角丸
)

カラーコード

カラーコードは coolors.co や colorhunt.co でお好みのものを探せます。

まとめ

今回はWindowsで作成したAIチャットボットのデザインを変更する方法を解説しました。

いくら簡易的なチャットボットでも、デザインを変えるだけで少し洗練されたものになります。

PowerShellやPythonの使い方の勉強にもなるので、お時間がある時に試してみてはいかがでしょうか。