はじめに
PythonでGUIアプリを作っていると、「ボタンをここに置きたい」「入力欄をもう少し右に寄せたい」など、画面の見た目を細かく調整したい場面が出てきます。
そんなとき、毎回コードでウィジェットを1つずつ配置していくのは、正直なところ手間も時間もかかりますよね。
そこで登場するのがQt Designer（キュート・デザイナー）です。
これは、GUIアプリの「見た目」をドラッグ＆ドロップで直感的に設計できるツールで、PySide6と組み合わせることで、開発のスピードも効率もグッとアップします。
GUIアプリの開発って難しそうに感じませんか？
でも実は、「画面のデザインはマウス操作で作って、あとはPythonで動かすだけ」でも、ちゃんとしたアプリが作れちゃうんです。今回は PySide6とQt Designer を使って、初心者でも手を動かしながら学べる内容にまとめました。「コードで画面を作るのが面倒…」と思ったことがある方は、ぜひ読んでみてください。
Qt Designerってなに？
Qt Designerは、Qtフレームワークに付属するGUI設計ツールです。
本来はC++開発者向けのものですが、PySide6を使えば、Pythonからもそのまま利用可能です。
画面をマウス操作で設計して「.uiファイル」として保存 → Pythonコードで読み込む、という流れで、UIとロジック（処理）を分けた設計ができるのが最大の特徴です。
この記事でできること
このブログ記事では、PySide6とQt Designerを組み合わせて、以下のことをステップバイステップで学びます：
- Qt Designerの基本操作とUIファイルの作成方法
- PySide6で.uiファイルを読み込む方法
- Python側からUIのウィジェットにアクセスして動作させる方法
- 実際にQt Designerで設計したToDoリストアプリのUIを動かす実践例
こんな方におすすめ
- PySide6でGUIアプリを作っているけれど、UIを手書きするのが面倒に感じている方
- デザイナーやノンエンジニアと画面設計を共有したい方
- 保守性の高いコードを書きたい、UIとロジックを分離した設計をしたい方
PySide6の基本的な使い方はわかるけど、もう一歩進みたい。
そんな方にピッタリの内容になっています。
使用環境と準備
この章では、PySide6とQt Designerを使って開発を始めるための環境構築と事前準備について解説します。
初心者の方でもスムーズに始められるよう、インストール手順やバージョン確認の方法も含めて丁寧に紹介します。
使用環境（執筆時点）
今回の記事は以下の環境で動作確認を行っています：
- OS：Windows 11（※macOSやLinuxでも基本的に同様の手順で対応可）
- Python：3.11.5
- PySide6：6.6.1
- Qt Designer：Qt 6 に付属のバージョン（スタンドアロンまたはパッケージ経由）
バージョンが異なっても大きな差はありませんが、できるだけ最新版を使用することをおすすめします。
PySide6のインストール
PySide6はpipから簡単にインストールできます。
pip install pyside6インストール後、バージョン確認をしておくと安心です。
python -m pip show pyside6これで、PySide6に含まれるGUI関連モジュール（QtWidgets、QtCoreなど）がすべて使用可能になります。
Qt Designerのインストール方法
Qt DesignerはPySide6に含まれているわけではなく、別途用意が必要です。主に以下の2つの方法があります。
方法1：pyside6-toolsをpipでインストール（おすすめ）
pip install PySide6[tools]これで、designerというコマンドが使えるようになります（コマンドラインまたはAnaconda Promptで起動可能）。
pyside6-designerうまく起動しない場合は、次のコマンドでインストール場所を確認して、パスを通す必要があるかもしれません。
where pyside6-designer # Windowsの場合- スタートメニューで「環境変数」と検索し、「システム環境変数の編集」を開く
- 「環境変数(N)…」をクリック
Pathを選択 → 編集 → 「pyside6-designerが配置されているパス」を追加
例：C:\Users\ユーザー名\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.11_qbz5n2kfra8p0\LocalCache\local-packages\Python311\Scripts\pyside6-designer.exe
方法2：Qt公式の「Qt Online Installer」を使う
Qt本体をGUI付きでインストールする方法です。以下のURLからインストーラーを入手できます。
この方法はGUIツール一式を揃えたい方に向いていますが、インストールサイズが大きめなので注意してください。
起動確認と基本操作
Qt Designerを無事にインストールできたら、試しに起動してみましょう。
pyside6-designer起動後は、以下のような画面が表示されます：
- 新しいUIファイル（フォーム）を作成する
- ボタンや入力欄をドラッグ＆ドロップで配置できる
- メニューから「保存」で
.uiファイルとして保存可能
この .ui ファイルが、後でPythonコードから読み込んで使う「設計図」になります。
Qt DesignerでUIを作成する
この章では、Qt Designerを使って実際にUI（ユーザーインターフェース）を作成する手順を解説します。
ウィジェットの配置やレイアウトの設定など、Pythonで手書きしていた部分をマウス操作だけで効率的に設計できるようになります。
新しいUIファイルを作成する
Qt Designerを起動すると、最初に以下のようなウィンドウが表示されます。
- 「New Form（新しいフォーム）」の選択画面
- フォームの種類が複数ある
ここでは、「Main Window」や「Dialog with Buttons Bottom」などがありますが、今回は一番シンプルな「Widget」を選びましょう。
📝 「Widget」は、自由にウィジェットを配置できる汎用的な画面で、PySide6でも最も使われる形式です。
ウィジェットの配置方法
画面右側にある**Widget Box（ウィジェット一覧）**から、使いたいパーツをドラッグしてフォーム上に配置します。
今回の例として、ToDoリストアプリに必要な以下の部品を配置してみましょう：
QLineEdit（タスク入力用のテキストボックス）QPushButton× 2（「追加」「削除」ボタン）QListWidget（タスク一覧表示）
操作のポイント：
- ウィジェットを選択してドラッグ → フォーム内でドロップ
- 配置後にクリックすると、右下の「プロパティ」ウィンドウで名前やテキストを設定できます
- 各ウィジェットには**objectName（オブジェクト名）**を設定しておきましょう
→ 例：taskInput,addButton,deleteButton,taskList
レイアウトの設定
複数のウィジェットを使う場合、レイアウトを正しく設定することで見た目が整い、リサイズにも強くなります。
以下の手順でレイアウトを適用しましょう。
ステップ1：ウィジェットを選択
- Ctrlキーを押しながら複数選択ができます。
ステップ2：レイアウトを適用
- メニューまたは右クリック→レイアウトから適切なレイアウトを選択します。
- 今回は以下のような構成をおすすめします：
[ QLineEdit ] [ 追加ボタン ]
[ QListWidget ]
[ 削除ボタン ]このような縦配置にしたい場合は、VBoxLayout（縦並び）が適しています。
✅ レイアウトを適用したあとに最上位のフォーム全体にもレイアウトを設定すると、ウィンドウサイズに応じて中身が自動調整されるようになります。
UIファイルとして保存
画面設計が完了したら、以下の手順で .uiファイル として保存します。
保存手順：
- メニューから「File > Save As（名前を付けて保存）」を選択
- ファイル名を例として
todo.uiとして保存 - 保存場所はPythonコードから読み込みやすい場所にしておくとよい
PySide6で.uiファイルを読み込む方法
前章で作成・保存した .ui ファイル（今回は todo.ui）は、画面の設計図のようなものです。
この章では、その設計図をPythonのコード内に読み込んで、PySide6でウィジェットにアクセスし、動作させる方法を解説します。
UIファイルを読み込む2つの方法
PySide6で .ui ファイルを使うには、大きく分けて以下の2つの方法があります。
| 方法 | 特徴 |
|---|---|
| ① QUiLoaderで動的に読み込む | .ui ファイルをそのまま読み込み。コード量が少ない。 |
| ② Pythonコードに変換して使う | .ui を .py に変換。IDEで補完が効く、保守性が高い。 |
今回は、①をメインに解説しつつ、②の方法も補足します。
方法①：QUiLoaderで.uiファイルを読み込む（おすすめ）
必要なインポート
from PySide6.QtWidgets import QApplication
from PySide6.QtUiTools import QUiLoader
from PySide6.QtCore import QFileUIファイルの読み込みと表示
import sys
app = QApplication(sys.argv)
loader = QUiLoader()
ui_file = QFile("todo.ui")
ui_file.open(QFile.ReadOnly)
window = loader.load(ui_file)
ui_file.close()
window.show()
sys.exit(app.exec())解説
QUiLoaderは、Qt Designerで作成した.uiファイルを動的に読み込むためのクラスです。QFileを使ってファイルを開き、その中身を読み込ませています。window.show()でGUIを表示、sys.exit(app.exec())でイベントループを開始します。
この方法は、とにかく簡単に動作確認したいときや、UIを頻繁に更新する開発初期にとても便利です。
UI内のウィジェットにアクセスする
読み込んだUIの中のウィジェット（ボタンや入力欄）にアクセスするには、Qt Designerで設定した objectName を使います。
task_input = window.findChild(QLineEdit, "taskInput")
add_button = window.findChild(QPushButton, "addButton")このように findChild() メソッドを使えば、ウィジェットを取得してPython側で操作できます。
方法②：pyside6-uic を使って.pyファイルに変換する
保守性や補完性を重視したい場合は、.ui ファイルを .py に変換して使うのもおすすめです。
変換コマンド
pyside6-uic todo.ui -o ui_todo.pyこれで、Pythonコードに変換されたファイル ui_todo.py が生成されます。
このファイルは普通のPythonファイルとしてインポートして使えます。
使用例
from PySide6.QtWidgets import QApplication, QWidget
from ui_todo import Ui_Form # Qt Designerで「Widget」ベースで作成した場合
class MainWindow(QWidget):
def __init__(self):
super().__init__()
self.ui = Ui_Form()
self.ui.setupUi(self)IDEの補完機能を活用したい方や、大規模なアプリ開発をする場合にはこちらが便利です。
実践：Qt Designerで作ったUIを使って簡単なToDoアプリを作る
ここまでで、Qt Designerを使ってUIを作成し、PySide6でそのUIファイルを読み込む方法を学びました。
この章では、それらを組み合わせて、実際にToDoリストアプリを動かしてみる実践編です。
UIの前提
Qt Designerで以下のウィジェットを配置して .ui ファイル（例：todo.ui）として保存してあることを前提とします：
| オブジェクト名 | ウィジェットの種類 | 用途 |
|---|---|---|
taskInput | QLineEdit | タスク入力欄 |
addButton | QPushButton | タスク追加ボタン |
deleteButton | QPushButton | タスク削除ボタン |
taskList | QListWidget | タスクリスト表示 |
※ 各ウィジェットの objectName は Qt Designer の「右下のプロパティ」で設定可能です。
Pythonコードの全体構成
次のコードで、Qt Designerで作ったUIを読み込み、タスクの追加・削除ができる簡単なToDoアプリを実装できます。
import sys
from PySide6.QtWidgets import QApplication, QLineEdit, QPushButton, QListWidget
from PySide6.QtUiTools import QUiLoader
from PySide6.QtCore import QFile
app = QApplication(sys.argv)
# UIファイルの読み込み
loader = QUiLoader()
ui_file = QFile("todo.ui")
ui_file.open(QFile.ReadOnly)
window = loader.load(ui_file)
ui_file.close()
# UI内のウィジェットを取得
task_input: QLineEdit = window.findChild(QLineEdit, "taskInput")
add_button: QPushButton = window.findChild(QPushButton, "addButton")
delete_button: QPushButton = window.findChild(QPushButton, "deleteButton")
task_list: QListWidget = window.findChild(QListWidget, "taskList")
# タスク追加の処理
def add_task():
task = task_input.text().strip()
if task:
task_list.addItem(task)
task_input.clear()
# タスク削除の処理
def delete_task():
selected_items = task_list.selectedItems()
if not selected_items:
return
for item in selected_items:
task_list.takeItem(task_list.row(item))
# ボタンに処理を接続
add_button.clicked.connect(add_task)
delete_button.clicked.connect(delete_task)
# ウィンドウを表示
window.show()
sys.exit(app.exec())補足：タイプヒントを活用しよう（初心者向け）
上記コードでは、task_input: QLineEdit = ... のように タイプヒントを使っています。
これは必須ではありませんが、エディタでの補完や型チェックがしやすくなるため、可読性・保守性が向上します。
実行結果
アプリを実行すると、以下のような動作を確認できるはずです：
- 入力欄に文字を入力して「追加」ボタンを押すと、リストにタスクが表示される
- リストから項目を選択し、「削除」ボタンで削除できる
- 空白で追加しようとすると無視される（適切なバリデーション）
GUIの見た目はQt Designerで設計した通りになっているため、コードに集中できる点が大きなメリットです。
コード全体と実行方法
この章では、前章で説明した内容を1つの完成コードとしてまとめ、あわせて実行手順や注意点、トラブルシューティングも解説します。
これからPySide6＋Qt Designerで開発を進めていくうえでのベースとなるコードです。
完成コード（QUiLoaderを使う方式）
まずは、Qt Designerで作成したtodo.uiファイルをPythonで読み込み、ToDoリストアプリを動作させるコードを再掲します。
import sys
from PySide6.QtWidgets import QApplication, QLineEdit, QPushButton, QListWidget
from PySide6.QtUiTools import QUiLoader
from PySide6.QtCore import QFile
# アプリケーションを初期化
app = QApplication(sys.argv)
# QUiLoaderを使って.uiファイルを読み込む
loader = QUiLoader()
ui_file = QFile("todo.ui")
ui_file.open(QFile.ReadOnly)
window = loader.load(ui_file)
ui_file.close()
# UI内のウィジェットにアクセス
task_input: QLineEdit = window.findChild(QLineEdit, "taskInput")
add_button: QPushButton = window.findChild(QPushButton, "addButton")
delete_button: QPushButton = window.findChild(QPushButton, "deleteButton")
task_list: QListWidget = window.findChild(QListWidget, "taskList")
# タスク追加処理
def add_task():
task = task_input.text().strip()
if task:
task_list.addItem(task)
task_input.clear()
# タスク削除処理
def delete_task():
selected_items = task_list.selectedItems()
if not selected_items:
return
for item in selected_items:
task_list.takeItem(task_list.row(item))
# ボタンに処理を接続
add_button.clicked.connect(add_task)
delete_button.clicked.connect(delete_task)
# アプリを起動
window.show()
sys.exit(app.exec())実行方法
Qt Designerで作成した todo.ui を同じフォルダに保存
- Pythonスクリプトと同じディレクトリに
todo.uiファイルを置いてください。 - ファイル名が異なる場合は、コード中の
QFile("todo.ui")を修正してください。
Pythonで実行
python todo_app.pytodo_app.pyは上記コードを保存したファイル名です。- 実行すると、Qt Designerで設計した見た目そのままのGUIアプリが立ち上がります。
実行時の注意点
Qt DesignerでobjectNameが正しく設定されていないとエラーに
たとえば taskInput という名前を付け忘れると、findChild(QLineEdit, "taskInput") で None が返ります。
その後の .text() などでエラーになるので、objectNameの設定は必ず確認しましょう。
QUiLoaderが動かない？ → PySide6 Toolsが必要
QUiLoader を使用するには、pyside6-tools がインストールされている必要があります：
pip install pyside6-toolsファイルパスに全角文字やスペースがあると不具合の原因になることも
ファイル名やパスに日本語やスペースがあると、読み込みに失敗することがあります。できるだけシンプルな半角英数字のパスを使いましょう。
まとめと次のステップ
ここまで、PySide6とQt Designerを組み合わせてGUI開発を効率化する方法を、初心者にもわかりやすく解説してきました。
コードだけでUIを組むよりも、視覚的にデザインできることで作業のスピードも正確さも大きく向上したはずです。
今回の学びを振り返り
この記事で取り組んだ内容を簡単におさらいしておきましょう。
- Qt Designerを使って、ドラッグ＆ドロップで直感的にUIを作成する方法
.uiファイルを QUiLoaderを使ってPythonから読み込む方法- Pythonコード内でウィジェットを操作し、イベント処理（ボタンの追加・削除）を実装
- GUIの設計とロジック（処理）を分離して保守性を高める開発スタイル
PySide6を使ったGUI開発において、Qt Designerの活用は間違いなく大きな武器になります。
今後のステップアップにおすすめのテーマ
今回のToDoアプリはとてもシンプルでしたが、以下のような応用テーマにチャレンジすると、さらに理解が深まります。
🔸 UIファイルをPythonコードに変換して使う（pyside6-uic）
- より厳密な構造管理や補完が可能に
🔸 データの保存機能を追加（SQLiteやJSONの活用）
- タスクの永続化で「実用アプリ」に一歩近づく
🔸 Qt Designerで複数画面（複数ウィンドウ）を設計
- タブや設定画面など、複雑なUIにも挑戦
🔸 GUIをEXE化して配布（PyInstallerの活用）
- 作ったアプリを他人にも配布できる形に！
関連記事もチェック！
ステップアップに役立つ関連記事を以下にご紹介します。
おわりに
GUIアプリ開発は、コードだけで完結するCLIツールに比べて、**「見て・触って・実感できる楽しさ」**があります。
Qt Designerを取り入れることで、その世界がぐっと身近になったのではないでしょうか。
今後もPySide6やGUI関連の解説記事を継続して公開予定です。
「また作ってみたい」と思ったら、ぜひ他の記事も参考にしてみてくださいね！
ここまで読んでいただきありがとうございます！
UdemyのPythonコースにはオンラインで学習ができる動画コンテンツがたくさんあります。
当ブログのような文章メインの説明では足りない箇所を補えると思うので、もっと詳しく勉強したいという方はぜひチェックしてみてください！
コメント