Pyside 【第3回 | デザイン編】Qt Designerの導入ガイド！ノーコードUI作成

PythonでGUIアプリを作るとき、毎回コードでボタンやテキストを配置するのは大変です。
Qt Designerは、ボタン・テキストボックス・レイアウトなどをドラッグ＆ドロップで配置できるGUI設計専用ツールです。

PySide6やPyQt6などのQtバインディングと組み合わせることで、ノーコードでデザイン → Pythonで動作実装という効率的な開発ができます。

この記事では、Qt Designerの概要・インストール方法・基本操作を順に解説します。

Qt Designerとは

Qt Designerは、Qtフレームワークに付属するGUIレイアウトエディタです。
GUIアプリを構成するウィジェット（ボタン、ラベル、入力欄など）を視覚的に配置し、プロパティを設定することで、.uiファイル（UI定義XML）を生成します。

Pythonからは .ui ファイルを次の2通りの方法で利用できます：

Qt Designerを使えば、プログラマがロジックに集中し、デザイナがUIを作るという分業も可能です。

Qt Designerのインストール方法

Qt Designerは以下のどちらかの方法で導入できます。

1. PySide6のパッケージから使う（おすすめ）

PySide6をインストールすると、Designerも一緒に導入されます。

pip install pyside6

インストール後、以下のコマンドでDesignerを起動します：

pyside6-designer

※ 実行ファイルの場所は環境によって異なります。where pyside6-designer（Windows）やwhich pyside6-designer（Mac/Linux）で確認可能です。

2. Qt公式サイトからQt Creatorをインストールする方法

Qt公式サイト から「Qt Creator IDE」をインストールすると、Designer機能が統合されています。
IDE上で .ui ファイルを編集できるため、大規模プロジェクト向けです。

• Qt CreatorはC++中心の開発に便利
• PySideユーザーは軽量な pyside6-designer 単体利用が簡単

Qt Designerの使い方（基本操作）

1. 新しいウィンドウを作成

Designerを起動すると、最初に「新しいフォーム」ダイアログが開きます。
以下のテンプレートから選択します：

• Main Window：メニューバーやツールバーを持つ一般的なアプリウィンドウ
• Dialog：OK/Cancelを持つダイアログ形式
• Widget：単体ウィジェット用。最も汎用的

選んで「作成」を押すと編集画面が開きます。

2. ウィジェットを配置する

左側の「ウィジェットボックス」からドラッグ＆ドロップでボタン・ラベル・入力欄などを配置します。
代表的なウィジェットは以下の通り：

3. プロパティを設定する

右側の「プロパティエディタ」で、各ウィジェットの設定を行います。
代表的な項目：

objectName はPython側でウィジェットを取得する際に必要です。

4. レイアウトを設定する

GUIの自動リサイズに欠かせないのが「レイアウト設定」です。

1. ウィジェットを選択
2. Layouts → VBox/HBox/Grid
3. 親ウィジェットに対しても同様に設定

これでウィンドウサイズを変えてもきれいにリサイズされるUIになります。

5. UIを保存する

完成したUIは .ui ファイルとして保存します。
例：mainwindow.ui

この .ui ファイルをPython側で読み込めば、GUIがそのまま再現されます。

6. PythonでUIを使う例

# load_ui_example.py
from PySide6.QtWidgets import QApplication
from PySide6.QtUiTools import QUiLoader
from PySide6.QtCore import QFile
import sys

app = QApplication(sys.argv)
loader = QUiLoader()
file = QFile("mainwindow.ui")
file.open(QFile.ReadOnly)
window = loader.load(file)
file.close()

window.show()
sys.exit(app.exec())

これだけで、Designerで作ったUIがそのまま表示されます！

よくある質問 Q&A

.ui ファイルを変更したらPython側も自動で更新されますか？

はい。QUiLoaderを使っている場合は、再読み込み時に自動で反映されます。
ただし pyside6-uic で .py に変換した場合は、再変換が必要です。

「pyside6-designer」が見つからないのですが？

パスが通っていない可能性があります。
where pyside6-designer（Windows）や which pyside6-designer（Mac/Linux）でパスを確認し、
Scripts フォルダ（例：C:\Users\あなたのユーザー名\AppData\Local\Programs\Python\Python311\Scripts）をPATHに追加してください。

作成したUIをPyQt6で使えますか？

はい。Qt DesignerはQt共通形式の .ui を出力するため、PySide6／PyQt6どちらでも利用可能です。
ただし、変換時のコマンドは異なります。

• PySide6 → pyside6-uic
• PyQt6 → pyuic6

ウィジェットの「objectName」を変えると何が起こりますか？

Pythonコードで findChild() や self.ui.pushButton のように参照できる名前が変わります。
命名規則を決めておくと、後のコードが読みやすくなります（例：btn_ok, txt_nameなど）。

スタイルをカスタマイズしたいのですが？

styleSheet プロパティでQSS（Qt Style Sheet）を指定できます。
HTMLやCSSに似た書き方で装飾できるため、ボタンの色やフォントを柔軟に変更可能です。

まとめ

• Qt DesignerはノーコードでUI設計できるツール
• .ui ファイルをPythonから簡単に読み込める
• 開発初期はDesigner＋QUiLoaderで高速開発、配布時は pyside6-uic 変換が定番

次の記事では、Designerで作ったUIをPythonコードと連携する方法（シグナル接続、QSS適用など）を詳しく解説します。