OS標準の「窓」を卒業！pywebviewでプロ級の独自デザイン・タイトルバーを作る方法

雑記

2026.04.14

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

前回までの記事で、pywebviewを使ってHTML/CSSでUIを作る基礎と実践を解説しました。

今回はさらに一歩踏み込みます。標準のタイトルバー（閉じる・最小化ボタンがある枠）を消し、「完全に独自のUI」を持つフレームレスウィンドウの作り方を解説します。

1. フレームレスウィンドウにするメリット
2. 実装のキモ：消した後の「移動」と「ボタン」
3. 【実践】独自タイトルバーの実装コード
4. 実行画面を確認！
5. まとめ：さらに「プロっぽく」するために

1. フレームレスウィンドウにするメリット

通常のウィンドウ枠を消すことで、アプリの見た目は一気に「今風」になります。

自由なデザイン: タイトルバーの色や形、ロゴの配置もすべてHTML/CSSでコントロール可能。
没入感の向上: 余計な装飾を省き、コンテンツに集中させるUI（ウィジェットやミニプレイヤーなど）に最適。
ブランドイメージの統一: アプリ全体の世界観をOSの枠に邪魔されずに表現できます。

2. 実装のキモ：消した後の「移動」と「ボタン」

枠を消すと、以下の2つの問題が発生します。

ウィンドウをドラッグして移動できない。
「閉じる」「最小化」ボタンがなくなる。

pywebviewには、これらをスマートに解決する仕組みが用意されています。

3. 【実践】独自タイトルバーの実装コード

インストールには pip install pywebview を使います。（未導入の方はターミナルで実行してください）

Python側（main.py）

ポイントは frameless=True 設定と、JSからウィンドウ操作を受け取るAPIです。

import webview
import os

class WindowApi:
    def __init__(self):
        self.window = None

    def set_window(self, window):
        self.window = window

    # ウィンドウを閉じる
    def close_app(self):
        self.window.destroy()

    # ウィンドウを最小化
    def minimize_app(self):
        self.window.minimize()

api = WindowApi()
file_path = 'file://' + os.path.abspath('ui/index.html')

# frameless=True で標準の枠を消す
# easy_drag=True でHTMLのどこをドラッグしても移動可能にする（特定エリアのみにする場合は後述）
window = webview.create_window('Frameless App', file_path, js_api=api, frameless=True, easy_drag=True)
api.set_window(window)

webview.start()

UI側（ui/index.html）

CSSでタイトルバーを自作し、JavaScriptでPython側のAPIを叩きます。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="title-bar">
        <div id="drag-area">My Modern App</div>
        <div id="controls">
            <button onclick="pywebview.api.minimize_app()">ー</button>
            <button onclick="pywebview.api.close_app()" class="close-btn">×</button>
        </div>
    </div>

    <div class="content">
        <h2>フレームレスウィンドウの世界へようこそ</h2>
        <p>このウィンドウには標準の枠がありません。</p>
    </div>
</body>
</html>

スタイル（ui/style.css）

body { margin: 0; font-family: sans-serif; overflow: hidden; border: 1px solid #333; }

/* タイトルバーのデザイン */
#title-bar {
    display: flex;
    justify-content: space-between;
    background: #2c3e50;
    color: white;
    height: 30px;
}

/* ドラッグ可能エリア（easy_drag=Trueの場合、ここ以外も動かせますが視覚的なガイドとして） */
#drag-area {
    flex-grow: 1;
    line-height: 30px;
    padding-left: 10px;
}

#controls button {
    width: 45px;
    height: 30px;
    border: none;
    background: transparent;
    color: white;
    cursor: pointer;
}

#controls button:hover { background: #34495e; }
.close-btn:hover { background: #e74c3c !important; }