Qt GUI デザインスキルのご紹介：エージェンティックワークフローにおける開発者向けデザイン

 このブログは「Introducing Qt's GUI Design Skill: Design for Developers in Agentic Workflows」の抄訳です。 

UI 開発者がデザインサポートを必要とする場面、そしてスキルがその課題を解決する方法 

すべての UI 開発者が UX デザイナーのサポートを受けられるわけではありません。中小企業の R&D チームの多くは、UI デザインの専門家なしにUIを構築しなければならない状況にあります。 

現在のフロンティア LLM は Qt Quick や QML のコードを生成する能力が非常に高い一方、特に組込みデバイス向けには UI デザインの観点で最適とは言えないインターフェースを生成する傾向があります。理想は専門のデザイナーと協力することですが、それが難しいチームも少なくありません。 Qt GUI デザインスキルは Qt の AI 活用開発ツールの一部として、コーディングを始める前に AI エージェントへ確かなデザイン知識を提供し、そのギャップを解消します。 

スキルは AI エージェントに対して、UI 開発作業を行う前に UX デザイン原則を検討するよう指示します。体系的なヒアリングプロセスを定義し、広く知られている UX の法則のライブラリをエンコードし、デスクトップと組込みターゲット向けのプラットフォーム固有の制約テーブルを提供し、アクセシビリティチェックリストを含み、構造化されたデザイン監査の実施方法を説明しています。エージェントがこのスキルに従うことで、生成される QML はただ動作するだけでなく、階層構造、タッチターゲット、タイポグラフィ、モーション、ローカリゼーション、エラーハンドリングについての意図的な判断が反映されたものになります。 

動画：VS Code の GitHub Copilot における画像の UI デザインレビューの様子（一部シーケンスは短縮・加速されています） 

AI エージェントが優れたデザインをするために明示的な UX 知識が必要な理由 

大規模言語モデルは多くの人間のデザイナーが生涯に読む量を超えるデザインドキュメントを学習していますが、構造化されたプロンプトがなければその知識を一貫して適用することができません。「フィットネスマシンのコントロールパネルを作って」と依頼されたエージェントは、一度に表示するメトリクスの数、タッチターゲットのサイズ、状態の区別に色だけを使うかどうか、480×272 の組込みディスプレイと 1920×1080 のデスクトップモニターへの対応方法など、多くの暗黙的な判断を行います。これらの判断はランダムではありませんが、指針がなければ UX 原則の意識的な適用ではなく、学習データの統計的なパターンマッチングによって行われます。

Qt GUI デザインスキルはこれらの判断を明示的でレビュー可能なものにします。エージェントがスキルファイルを持つ場合、そのデザイン上の判断は具体的な原則に紐づけて説明できます。オプションの同時表示数の削減はヒックの法則（Hick's Law）によるもの、グループ化戦略はミラーの法則（Miller's Law）に基づくもの、48 px のタッチターゲット最小値は組込み制約テーブルから、カラー＋アイコンのアプローチは WCAG アクセシビリティルールから、といった具合です。この違いが実際にどう現れるかは目に見えてわかります。

スキルあり・なしの UI 実装比較

ジムのステッパーマシンの UI 実装をインタラクティブなプロトタイプで比較してみましょう。どちらも同じデザインブリーフ（ワークアウトメトリクス、プログラム選択、傾斜制御、タイマーを備えたジムのステッパーマシンのコントロールパネル）から生成され、入力プロンプトは同一です。唯一の違いは Qt GUI デザインスキルが読み込まれているかどうかです。 

スキルなしで作成したジムステッパーコンソール 

汎用的な「ジムのステッパーマシンの UI を作って」というプロンプトで生成した UI です。AI エージェントはレイアウト、カラー、階層のすべての判断を LLM の事前学習知識に基づいて行いました。 

問題点 :

• 視覚的なノイズの過負荷： モノスペースフォントとネオンオンダークのカラーパレットは開発者のターミナルを想起させます。ジムのユーザーは一目で明確に把握できることを求めており、コマンドプロンプトのような画面ではありません。4つの異なるアクセントカラーが同時に注目を競い合っており、フォン・レストルフ効果（von Restorff Effect）に違反しています。すべてが強調されていると、何も際立ちません。 
•  状態の伝達を色のみに依存： 心拍数メトリクスは色のみで変化し（緑→橙→赤）、補助的なアイコンやテキストラベルがありません。色覚異常のあるユーザーや画面を斜めから見るユーザーは状態を確実に区別できません。これは WCAG 1.4.1 およびスキルの意味的カラールールに違反しています。  
• タッチターゲットが最小値以下： 右パネルのプログラム選択ボタンは約 38×30 px で、スキルで定義された組込み向け最小値 48 px を大きく下回ります。運動中のタッチスクリーン操作では誤タップが頻発する可能性が高いです。
• 情報アーキテクチャ： 中央のドーナツ型タイマーが視覚的に支配的ですが、最も行動につながるデータ（現在の心拍数と出力）は副次的な統計と同じ視覚的ウェイトで左カラムに埋もれています。逆ピラミッド原則（Inverted Pyramid）が適用されておらず、重要なデータが前面に出ていません。

Qt GUI デザインスキルありの場合 

同じデザインブリーフで、エージェントに Qt GUI デザインスキルを先に与えました。ヒアリングを実施し、明確なコンテンツ階層を確立し、組込み制約テーブルを適用し、すべてにテキストラベルを伴う意味的なカラーを使用しています。

改善点 :

• 明確な主要メトリクスのヒーロー表示： エージェントは逆ピラミッドを適用しました。最重要メトリクス（心拍数）が 52 px のヒーローカードとして左パネルに配置されています。副次的なメトリクスはその下に均一なタイルで並び、タイルをクリックするとヒーローに昇格します（プログレッシブ・ディスクロージャー）。詳細へのアクセスを失わずに画面を読みやすく保っています。
• カラー＋テキストによる状態ラベリング： すべての状態変化にカラーとテキストラベルがペアで表示されます。心拍数バッジにはカラーとゾーン名（「ゾーン3 - 有酸素運動」）の両方が表示されます。GO ボタンは START → PAUSE → RESUME → COOL DOWN の状態遷移時に、カラー、アイコン、テキストラベルが同時に変化します。
• タッチターゲットを 48 px 以上に確保： 傾斜の −/+ ボタンは 56×60 px。タイマー調整ボタンは 40 px の高さ。メインの GO ボタンは 62 px で、運動中でも確実に押せるサイズです。すべてのターゲットがスキルの 4.3 節に定める組込み向け最小値を満たしています。
• 意味的で一貫したタイポグラフィ： デザインは2ファミリーの文字システムを使用しています。メタデータ向けに 10 px のスペースを空けたすべて大文字ラベル、メトリクス値向けに 20〜52 px の太字。スケールはモジュラー比（約 1.4 倍）に従い、ゾーンごとにアクティブなサイズは3つ以下で、ミラーの法則のチャンキングと一致しています。
  
  

Qt GUI デザインスキルが UI 開発者にもたらすもの 

スキルは、ユーザーが AI エージェントに Qt、QML、その他の組込みデバイスの UI・アプリケーション・プロジェクトの作成、レビュー、または監査を依頼するときに起動します。エージェンティックハーネスが自らの作業を計画する性質上、ヒアリングが確実に実施されるようにするには、プロンプトの冒頭で /qt-gui-design コマンドを使用することをお勧めします。 

デスクトップおよび組込みデバイスアプリケーションへの UI デザイン原則の適用方法 

スキルは以下の6つのステップで構成されています。 

1. ヒアリング： スキルはエージェントに対して、レイアウトに触れる前に7つの必須質問を行うよう指示します。対象プラットフォーム、画面の形状、解像度と DPI、Figma のデザインシステムの有無、コンテンツの優先度ランキング、視聴距離、ロケール/入力要件です。エージェントはこのステップをスキップできません。コードを書く前にこれらの回答を収集することで、最も一般的なデザインエラー（間違ったディスプレイや間違ったユーザーに向けた最適化）を防ぎます。 
2.  一般的なデザイン原則の適用： 18の名前付きデザイン法則（ヒックの法則、ミラーの法則、フォン・レストルフ効果、ピーク・エンドの法則（Peak-End Rule）、ドハーティのしきい値（Doherty Threshold）など）を読み込みます。これらはデザイン中に適用されます。エージェントは各判断を逐一説明しませんが、各判断は名前付き原則に紐づけられていなければなりません。「なぜこのレイアウト構造なのか？」と問えば、具体的な回答が得られます。 
3.  組込みデバイス UI 原則の適用（該当する場合のみ）： デスクトップ向けのデザインガイドラインを適用するか、組込みデバイス向けに UI をデザインするかを判断します。レンダリング制約（GPU のないハードウェアではグラデーションやブラーなし）、固定ピクセルレイアウトの要件、使用環境別のタッチターゲット最小値（標準 48 px、手袋着用の産業文脈では 60〜72 px）、視聴距離別のビットマップフォントサイズテーブル、および安全クリティカルなエラー状態プロトコル（すべてのアラーム状態に対してカラー、形状、テキストという3つの独立したキューを必須）を定義しています。 
4. アクセシビリティ原則の適用： UI を WCAG 2.1 標準にマッピングし、コントラスト比、キーボードナビゲーション、フォーカスリングの可視性、すべての状態変化のカラー非依存性を検証します。これらの要件は対象プラットフォーム（デスクトップ/組込み）に関係なく適用されます。 
5. AI ユーザビリティ原則の適用： ほとんどのデザインシステムが見落としているカテゴリ、AI 自体が可視的なアクターとなる画面のガイドラインを扱います。ストリーミング出力インジケーター、長時間処理向けのスケルトンスクリーン、AI がユーザーデータを読み取る前の明示的な同意、確率的な出力の不確実性の伝達が必要です。 

6. UI デザイン監査（レビュータスクのオプション）： 新規作成ではなく既存のデザインをレビューする場合、エージェントはこのステップに直接進み、すべての発見事項を「クリティカル」「警告」「機会」に分類します。これは Qt 独自のツールで使われている重大度モデルに合わせています。 

画像：Claude Desktop における Qt コーヒーマシンサンプルアプリケーションの UI デザインレビューのスクリーンキャプチャ 

一般的な UI デザイン原則 

スキルが持つ UX 法則の一部を以下に示します。これらは単なる参考情報ではありません。それぞれがエージェントの従うべき具体的な指示に紐づいています。 

組込みデバイス向け UI デザイン原則 

組込みデバイスの制約とそれが UI デザインに与える影響を理解することは、AI エージェントによる UI 実装を成功させる上で不可欠です。デスクトップを前提としたデザインの考え方（フルードグリッド、グラデーション塗り、ドロップシャドウ、ホバー状態、ツールチップによる情報開示）は、GPU のないハードウェア上では気づかないうちに機能しなくなります。スキルはこうした前提を固定ピクセルの考え方に置き換えます。エージェントがデザインの対象が組込みデバイスであると判断または指示された場合、他の作業より先に組込みデバイス向け UI の推奨事項を適用します。 

Qt GUI デザインスキル vs. デザイナーツール：何が違うのか？ 

Qt GUI デザインスキルは、UI/UX デザイナーではなく UI 開発者を対象としています。Figma to Qt や Qt Design Studio などの UI/UX デザイナー向けツールは、UI/UX デザイナーが優れたエクスペリエンスを作成するためのものです。

Figma to Qt は、UI/UX デザイナーが Figma で GUI デザインを作成し、プレビューし、問題を早期に発見・修正し、検証済みのデザインをデベロッパーが Qt Creator、Visual Studio Code、または Qt Design Studio で扱える QML コードに変換できる Figma プラグインです。

Qt Design Studio は、Figma では不十分な場面（3D 要素を含む GUI の構築や高度なアニメーションやトランジションの作成など）に UI/UX デザイナーが使用できるスタンドアロンの  UI デザインツールです。

Figma to Qt と Qt Design Studio は大規模チームや複雑なプロジェクト向けです。Qt は組込みデバイス上でエクスペリエンスを構築する際にプロがそれぞれ好みのツールとワークフローを使えるよう取り組んでおり、デザインサポートなしの中小企業の UI 開発者を支援するために Qt GUI デザインスキルを今回リリースします。

Qt Creator 20 を使用している開発者は、Claude、Codex、その他のエージェンティックハーネス向けの AI エージェント拡張機能を通じて Qt GUI デザインスキルを活用できます。

Qt GUI デザインスキルの入手方法 

スキルは Qt エージェントスキルプラグインの一部です。プラグインは Qt の GitHub リポジトリからダウンロードするか、Claude マーケットプレイスのプラグイン「qt-development」からインストールできます。

エージェントスキルプラグインには qt-qml コーディングスキルも含まれており、QML 固有の実装パターンをカバーしています。両スキルが有効な場合、エージェントはまずデザインのヒアリングを実施し、その判断を反映した QML を生成します。

UI 開発ワークフローにおける Qt GUI デザインスキルの活用事例 

スキルはさまざまな出発点に自然に適合します。言葉による説明やスケッチしかない状態から始める場合でも、スキルは固定のエントリポイントを要求するのではなく、あなたのワークフローに合わせて動作します。 

1. 入力：仕様のみ → 出力：UI デザイン 

 ビジュアルデザインツールは一切使用しません：プロダクトオーナーまたは開発者が画面を言葉で説明します（例：「言語セレクターと次へボタンを持つ Qt アプリケーションの Windows デスクトップ向けインストーラーウェルカムスクリーンを作成して」）。スキルなしでは、エージェントは1つの妥当なレイアウトを生成して終了し、すべての構造的な判断をサイレントに行います。 

• エージェントはまずヒアリングを実施し、階層構造（主要なアクションは何か？）、ロケール要件（RTL サポートは必要か？）、タイポグラフィのベースラインを確立します。 

• 次に、構造的に異なる2〜3つの提案を生成できます。プログレッシブ・ディスクロージャーで言語セレクターを前面に出すもの、Z型の視線誘導で CTA へ目を導くもの、情報密度の高いインストーラーフローに最適化したモジュラースケールを適用するものです。 

•  各提案が名前付き原則に基づいているため、最良の要素を組み合わせることは推測ではなく意図的な行為になります。「オプション2の CTA の処理とオプション3の言語コントロールの配置を採用する」という指示が一貫した結果を生むのは、どちらの判断も同じ原則的な根拠を持つからです。 

主なメリット： 複数のソリューションを恣意的に組み合わせるのではなく、インテリジェントに統合できます。 

2. 入力：ワイヤーフレーム → 出力：UI デザイン実装 

開発者またはデザイナーが大まかなワイヤーフレーム（描画ツールまたは紙のスケッチ）を用意し、構造的な出発点としてアップロードします。ワイヤーフレームはゾーンの配置とコンテンツ領域の大まかな位置を示しますが、カラー、タイプスケール、スペーシング、インタラクションモデルについてのデザイン判断は含みません。スキルなしでは、エージェントはそのギャップを任意に埋め、完成しているように見えるが測定されていないタッチターゲットと恣意的な階層を持つものを生成します。 

• ワイヤーフレームは構造の土台、スキルはそこにデザインの詳細を加えます。 

• エージェントはワイヤーフレームのゾーンを読み込み、近接性と類似性（Proximity and Similarity）を適用してグループ化を確認し、すべてのインタラクティブゾーンがプラットフォームのタッチターゲット最小値を満たしているかチェックし、ヒアリングで指定された視聴距離からタイプスケールを導出し、装飾的なカラーではなく意味的なカラーロールを割り当てます。 

• ワイヤーフレーム作成者の構造的な意図が保持され、スキルの原則に基づく制約が測定可能な品質基準を満たすことを保証します。 

• ローファイなデザイン言語で素早くコードに移行するチームにとって、このアプローチは特に効果的です。 

主なメリット：構造的な意図を保持しながら、測定可能な品質のギャップが自動的に補完されます。 

3.  入力：既存の UI 実装 → 出力：構造化された UX 監査レポート 

UI 開発者が既存の UI 実装を改善したい場合、スキルなしでエージェントに「このデザインをレビューして」と頼むと、一貫した重大度モデルのない一般的な印象のリストが返ってきます。 

• AI エージェントは監査モードに切り替わり、構造化された3段階分類を適用します。クリティカルな問題（WCAG 違反、組込みターゲットでの安全キューの欠如、最小値以下のタッチターゲット）は出荷前に必ず修正が必要です。 

• 警告は、認知負荷の上昇、一貫性のないアフォーダンス、ユーザーの操作を妨げるパターンの不一致 を示します。 

• AI 搭載機能のストリーミング出力インジケーターや、ピーク・エンドの法則を適用した完了状態など、改善の余地を特定します。 

• 監査は Figma ファイル、スクリーンショット、既存の QML コンポーネント、または実行中のアプリケーションに対して実施できます。 

• 出力は、開発チームがそのままトリアージして担当者に割り当てられる優先順位付きのアクションリストです。 

主なメリット：監査の発見事項は優先順位が付けられ、実行可能で、名前付きの標準に紐づいています。主観的な意見ではありません。