Python GUIが劇的に美しく！pywebview + HTML/CSSで「Web・GUI二刀流」ツールを作る方法

Python

2026.04.11

この記事は約4分で読めます。

前回の記事では、pywebviewの基本とインストール方法について解説しました。

前回の記事：Windows環境でも最高に動く！Python×Web技術でアプリを作る「pywebview」完全ガイド

今回は、外部のHTML/CSSファイルを読み込んで、プロ級のデザインを実現する方法を紹介します。この手法を使えば、「デスクトップアプリ」と「Web版」の両方で使える汎用性の高いツールが作れます！

デザインを「HTML/CSS」に全振りするメリット
2. pywebviewの導入方法
3. 【実践】外部ファイルを読み込むアプリ構成
4. 実行結果を確認してみよう
5. GUIとWeb版の「二刀流」が最強な理由
6. まとめ

デザインを「HTML/CSS」に全振りするメリット

pywebviewの真骨頂は、Web制作のスキルをそのままデスクトップアプリに流用できる点にあります。

Pythonコード内にHTMLを書くのではなく、外部ファイルを読み込むことで以下のメリットが得られます。

自由自在なデザイン: Tailwind CSSやBootstrapを読み込めば、モダンなUIが数分で完成します。
開発効率の向上: ブラウザで表示を確認しながらデザインを詰め、最後にPythonでラップするだけでアプリ化できます。
Webとの共通化: 同じHTML/CSS資産を使って、「Webサイト」としても「デスクトップアプリ」としても公開可能です。

2. pywebviewの導入方法

まずはおさらいです。

インストールには pip install pywebview を使います。

pip install pywebview

3. 【実践】外部ファイルを読み込むアプリ構成

もっとも管理がしやすい、フォルダを分けた構成で作ってみましょう。

ファイル構成

作業フォルダの中に ui というフォルダを作り、その中にHTMLとCSSを配置します。

my_project/
├── main.py        (Python実行ファイル)
└── ui/
    ├── index.html (UIデザイン)
    └── style.css  (見た目の調整)

Pythonコード（main.py）

import webview
import os

# Python側のロジック
class Api:
    def process_data(self, value):
        return f"Pythonが受信しました: {value}"

api = Api()
# HTMLファイルのパスを絶対パスで取得
file_path = 'file://' + os.path.abspath('ui/index.html')

# ウィンドウを作成
webview.create_window('Modern GUI Tool', file_path, js_api=api)
webview.start()

UI側（ui/index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <h1>Custom GUI Tool</h1>
        <p>PythonとHTML/CSSを連携させたモダンなツール</p>
        <input type="text" id="userInput" placeholder="何か入力...">
        <button onclick="sendToPython()">実行</button>
        <div id="response"></div>
    </div>

    <script>
        async function sendToPython() {
            const input = document.getElementById('userInput').value;
            // Python側の関数を呼び出す
            const res = await pywebview.api.process_data(input);
            document.getElementById('response').innerText = res;
        }
    </script>
</body>
</html>