AI で変わる UI エンジニアリングの現在地
AI 以前、Web によるクロスプラットフォーム開発は優れた答えだった。今はコードを書くコストが下がったが、検証のコストは下がっていない。GPU UI にも、各プラットフォーム向けにネイティブアプリを直接生成する方法にも可能性がある。10 のフレームワークを実測した。
オリジナル許可なく、いかなる形式でも転載禁止

2025 年 12 月 12 日、Zed のエンジニア mikayla-maki が一つの PR をクローズした。GPUI にカスタム shader を追加する提案だった。返答は丁寧だった。貢献への感謝に続き、「we’re shifting focus to core product work at Zed, and without a Zed use case, I can’t validate this code」と説明し、最後には笑顔の絵文字も添えていた。
GPUI は Zed が自社開発した GPU UI フレームワークで、Electron の代替候補としてよく挙がる。その 4 カ月足らず前、Zed は Sequoia 主導で 3200 万ドルを調達し、累計調達額が 4200 万ドルを超えたと発表していた。
それから 9 カ月余り後の 2026 年 9 月 26 日、開発者 egoist が MyGo というリポジトリを作った。39 日後にはコミットが 1,042 件に達し、うち 890 件に Claude の署名があった。
Claude を開発するのは Anthropic。その Anthropic 自身のデスクトップアプリは Electron を使っている。
この三つを並べると、少しちぐはぐに見える。私たちは 2 台のマシンで 10 のフレームワークを実測し、この分野の現在地を確かめた。
01評価の背景
Claude や Codex などのデスクトップアプリは今も Electron を採用している。Web はエコシステムが成熟し、一つのコードベースで複数のプラットフォームに対応でき、モデルも扱い慣れている。AI で開発コストが下がっても、互換性の確保と保守には引き続き手間がかかる。
GPU による独自描画は別の選択肢だが、GPUI は今も Zed を優先している。クロスプラットフォームの描画とウィジェットの整備には長期的な積み重ねが必要だ。MyGo は AI と既存部品で初版の開発を速められることを示したが、本番運用の成熟度と長期保守の実力はまだ検証が必要だ。
Flutter、Compose、Slint、egui、iced なども、それぞれ異なる取捨選択をしている。そこで 10 のフレームワークを同じシナリオで実測し、滑らかさ、CPU、メモリ、デザインの再現度から各方式の実際のコストを確かめた。
02ローカルで実測した
Apple M4 Max と ThinkPad T14 Gen6 で、同じシナリオを使って 10 のフレームワークを測定した。両方で CPU とメモリを測り、Windows では PresentMon による外部フレーム測定も行った。Mac のフレームコールバックはフレームワークごとに定義が異なるため、比較には使わない。ハードウェアとメモリ指標も異なるので、比較は各プラットフォーム内に限る。
動效テストは密度の高いシーンです。96×64 論理ピクセルのカード 500 枚を 25 列に重ねて配置し、それぞれに半径 12 の角丸、135° のグラデーション、blur 16・下方向オフセット 4 の影を付けています。全カードをフレームごとに更新し、各中心の周りを半径 12、周期 4 秒で円運動させます。30 秒を 5 回実行し、中央値を掲載しています。
主に、効果付きの多数の要素が動き続ける際の UI 更新、描画準備、レンダリング送信に伴う CPU コストと、安定したフレーム出力を見ます。CPU はアプリのプロセスツリー全体の使用率であり、GPU 使用率や各処理段階の内訳ではありません。フレーム間隔と併せて読む必要があります。出力フレームが少なくても CPU 使用率は下がり得ます。500 はシーン内のカード数で、重なりやウィンドウのクリッピングにより、毎フレーム全カードが完全に描画されるわけではありません。
Windows
| フレームワーク | リスト間隔 | 動きの間隔 | ストリーム CPU | 編集 CPU | 動き CPU | 動きメモリ |
|---|---|---|---|---|---|---|
| WPF(ネイティブ) | 8.6 | 684 | 73% | 13% | 49% | 2,425 |
| Electron | 8.8 | 108 | 31% | 92% | 138% | 947 |
| Tauri | 無効 | 92 | 54% | 105% | 148% | 913 |
| GPUI | 8.6 | 16.7 | 24% | 4% | 22% | 142 |
| MyGo | 8.4 | 8.6 | 11% | 6% | 33% | 115 |
| egui | 8.8 | 8.5 | 12% | 20% | 49% | 388 |
| iced | 8.9 | 8.5 | 20% | 3% | 25% | 215 |
| Slint | 8.5 | 8.5 | 27% | 99% | 67% | 61 |
| Flutter | 8.4 | 80 | 22% | 105% | 91% | 4,934 |
| Compose | 8.8 | 160 | 34% | 106% | 102% | 2,422 |
リストのスクロールには全フレームワークが追従した。差が出たのはアニメーションだ。影とグラデーション付きのカード 500 枚では、Rust と Go の自前描画フレームワークがおおむね 120Hz を維持した。一方、Flutter、Electron、Tauri、Compose は表示間隔が 80〜160ms になった。WPF の 684ms は独立した影効果 500 個によるもので、無効にすると 8.3ms に戻った。一般的な弱点とは言えない。
テキスト編集も壁になる。5,000 行の文書に毎秒 10 文字を挿入すると、Flutter、Compose、Slint はいずれも 1 コアを使い切った。Windows の Flutter では入力の 3 割が欠落した。
Mac
| フレームワーク | ストリーム CPU | 編集 CPU | 動き CPU | リストメモリ | 動きメモリ |
|---|---|---|---|---|---|
| SwiftUI | 87.5% | 8.9% | 99.1% | 40 | 37 |
| Electron | 16.1% | 62.0% | 102.2% | 536 | 698 |
| Tauri | 42.1% | 86.9% | 78.7% | 753 | 555 |
| GPUI | 22.5% | 2.9% | 17.0% | 341 | 335 |
| MyGo | 8.2% | 2.8% | 16.3% | 368 | 371 |
| egui | 8.6% | 7.2% | 20.4% | 803 | 839 |
| iced | 18.2% | 7.5% | 15.0% | 489 | 491 |
| Slint | 18.4% | 52.1% | 26.7% | 423 | 416 |
| Flutter | 18.3% | 101.9% | 237.4% | 468 | 994 |
| Compose | 31.3% | 105.1% | 107.5% | 710 | 1,295 |
Mac のアニメーション時の CPU は、GPUI、MyGo、egui、iced が約 15%–20%、Flutter が 237%、Electron と Compose が約 100% だった。テキスト編集では Flutter と Compose が引き続きほぼ 1 コアを使い切った。Slint は 52% で、Windows の 99% より低かった。
リスト場面の SwiftUI 約 40 MiB、GPUI 約 340 MiB、egui 約 800 MiB は、まずアプリプロセスのメモリフットプリントです。ネイティブ UI はシステムのプロセス外描画サービスを利用できます。Apple は AppKit が通常レイヤーツリーをプロセス外で描画すると説明しています。描画・合成の一部はアプリ外で行われます。独自描画もシステム合成を利用しますが、両者の役割分担はアプリの数値だけでは比較できません。M シリーズのユニファイドメモリは CPU と GPU の物理メモリ共有を意味し、関連コストすべてがアプリの phys_footprint に計上されるという意味ではありません。
SwiftUI のリストと動效について各 5 回の短時間 GPU trace では、アプリ PID の GPU 実行イベントは観測されず、同時期の WindowServer には GPU 活動がありました。これは SwiftUI が GPU を使わないという意味でも、デスクトップ全体の活動をこのアプリに帰属できるという意味でもありません。WindowServer のメモリ基準値は約 205 MiB 変動し、スナップショットに大きな共有オブジェクトがなくても既存システム資源の再利用は否定できません。分かるのは SwiftUI のアプリプロセス占有が小さいことであり、描画全体のコストが低いことや、差額全体をシステムが負担することではありません。
数値は、この 2 台、これらのバージョン、私たちのテストプログラムに限った結果だ。手法と全データは第 05 節に記載した。
03最初から一つに絞る話ではない
エディタ、開発ツール、業務アプリでは、テキスト入力、アニメーション、メモリ、クロスプラットフォームでの提供、ウィジェットの充実度に求めるものが違う。それぞれに用途があり、どの取捨選択を受け入れられるかで選ぶことになる。
多くのフレームワークでは、保持、キャッシュ、部分更新によってレイアウトや描画の繰り返しを減らしている。GPUI は即時モードと保持モードを組み合わせた設計だ。どのモードを使うか、どの処理を再利用できるか、1 フレームをどれだけ速く描けるかは、それぞれ別の問題だ。
MyGo、iced、GPUI、Slint、egui はいずれもアニメーションの処理に対応できており、CPU 使用率も低い。Slint はメモリ使用量が最も少なく、egui は多めで、GPUI の編集コントロールは自分で用意する必要がある。MyGo は現在、主に作者自身のアプリで使われており、大規模な本番運用での検証はまだ受けていない。
今回のアニメーション負荷テストでは、Flutter、Electron、Compose ともフレーム間隔とリソース使用量に課題がありました。Tauri のパッケージはわずか 11 MB だが、実行時のメモリ使用量は Electron とほぼ同じだ。
04ボトルネックは検証
今は、描画よりも検証のほうが重要だと考えている。
コードを書くコストは下がったが、正しく書けているかを確かめるには今も時間がかかる。Stack Overflow の 2025 年開発者調査では、66% が AI の解答で「almost right, but not quite」を経験し、45.2% が AI のコードのデバッグには余計に時間がかかると答えた。Sonar が今年 1 月に公表した調査では、96% が AI 生成コードの機能的な正しさを完全には信頼せず、コミット前に必ず確認する人は 48% だけだった。Sonar はコード検査ツールを販売しているので数字は割り引いて見る必要があるが、前の調査とは整合する。
Slint と egui の二つのリリースは大きな話題にはならなかったが、描画の進展より重要だと思う。agent が入力を注入し、スクリーンショットを撮れてこそ、変更し、見て、また直せる。以前は人がマシンの前に座り、一つずつクリックして UI を検証していた。その仕事を機械に任せられるようになりつつある。
今は三つの方法がある。Web のクロスプラットフォーム開発は、手持ちの資産が最も多い。GPU での自前描画はブラウザーを抱えずに済み、構築のハードルも以前より下がった。各プラットフォームでネイティブを作るのは最も古い方法だ。かつては大企業にしか複数チームを維持できなかった。今の難しさは、Breunig の言う 3 倍の bug とサポート範囲にある。検証のコストが下がり品質が上がれば、各プラットフォームにネイティブアプリを直接生成する方法も成り立つかもしれない。
私たちも GPU UI を試作している。特徴は Web 開発の DX を多く持ち込むことだ。JSX 風のコンポーネント、CSS 風のスタイル、flexbox レイアウト、リアクティブな状態管理、ブラウザー風の DevTools を備え、最終的にネイティブコードへコンパイルする。まだ初期段階にある。
どの答えが勝つかは分からない。複数が長く共存する可能性もある。冒頭の三つの事実は今も変わらない。PR は閉じたまま、MyGo は成長を続け、Claude のデスクトップ版は今も Electron だ。とても興味深い時代だ。
05実験レポート
テストは2026年11月4日から6日に実施した。各フレームワークで同じシナリオを推奨の実装方法と既定の設定で作成し、リリースビルドを使用した。Compose はぼかしを修正した後、デザインページと、その実装を共用する静止シナリオを再測定した。
| 項目 | Mac | Windows |
|---|---|---|
| マシン | Apple M4 Max、16 コア、64 GB | ThinkPad T14 Gen6、Core Ultra 7 255H、Arc 140T 内蔵 GPU、32 GB |
| OS | macOS 26.4 | Windows 11 Pro 10.0.26300 |
| ディスプレイ | Studio Display,60Hz,2x | 2880×1800,120Hz,200% |
| ウィンドウ | 1440×900 論理ピクセル | 1280×720 論理ピクセル、デザインページは 1440×900 枠なし |
| メモリ指標 | phys_footprint | private commit(コミット済みプライベートメモリ。物理使用量とは異なる) |
| フレーム指標 | アプリのコールバック。意味が各フレームワークで異なるため比較には使わない | PresentMon 2.6.0 の表示間隔、外部測定 |
| マシン状態 | アイドルではなく、測定中も他の開発作業あり | 他のユーザー操作なし |
| フレームワーク | バージョン | Mac 描画経路 | Windows 描画経路 |
|---|---|---|---|
| SwiftUI / WPF | macOS 26.4 SDK / .NET Framework 4.8.1 | システム合成 | WPF 既定の D3D9 パイプライン |
| Electron | 45.2.2 | 未検証 | Chromium,ANGLE D3D11 |
| Tauri | 2.12.5 | WKWebView | WebView2 156,ANGLE D3D11 |
| GPUI | Zed c4273271 | Metal、既定設定 | 未検証 |
| MyGo | 86ec3b30 | 未検証 | 未検証 |
| egui | eframe 0.37.0 | Metal | Vulkan |
| iced | 0.14.0 | Metal | Vulkan |
| Slint | 1.18.1 | FemtoVG,OpenGL | FemtoVG,OpenGL ES |
| Flutter | 3.47.9 | Impeller,Metal | Impeller,ANGLE D3D11 |
| Compose | 1.12.2 | Skiko,Metal | Skiko,D3D12 |
| シナリオ | 処理内容 |
|---|---|
| 静止 | デザインページを表示して静止させ、アイドル時のコストを測る |
| リスト | 10,000 行の仮想リスト、行高 64、2,000 px/s で等速スクロール |
| ストリーム | 過去のメッセージを 200 件読み込み、最後の 1 件に毎秒 40 語を追加。常に最下部を表示 |
| 編集 | 5,000 行の文書、カーソル位置に毎秒 10 文字を挿入 |
| モーション | 96×64 のカード 500 枚、角丸 12、グラデーションと影付き。同じ式で円運動 |
| デザインページ | 11 のデザイン仕様:フォント、影、細線、グラデーション、P3、背景ぼかし、角丸、emoji、OpenType、中国語と英語の混植 |
各フレームワークの各シナリオを 5 回、1 回 30 秒、順序を入れ替えて逐次実行した。以下の表はすべて中央値。5 回の最大値と最小値の差は中央値で約 3%、9 割が 24% 以内だった。リストとアニメーションは仕様統一後に再測定したため、列ごとの測定時期は異なる。CPU は論理コア一つを 100% とする。複数プロセスのアプリは全子プロセスを含む。Mac の Tauri はシステムが起動した WebKit プロセスも含めた。Windows のフレームデータは、一つの swapchain に一意に対応し、記録の欠落がない回のみを採用した。
ストリームと編集は実際の完了量も確認した。Windows の Flutter は編集が 68% にとどまり、他はすべて 99% 以上だった。
| フレームワーク | 静止 | リスト | ストリーム | 編集 | モーション |
|---|---|---|---|---|---|
| WPF | 2.6 | 37.2 | 72.7 | 13.5 | 49.3 |
| Electron | 6.1 | 42.8 | 30.6 | 92.1 | 137.8 |
| Tauri | 31.6 | 58.2 | 53.7 | 104.9 | 147.8 |
| GPUI | 1.5 | 10.6 | 24.3 | 3.6 | 21.5 |
| MyGo | 0.0 | 17.9 | 10.6 | 6.3 | 32.8 |
| egui | 0.3 | 15.9 | 12.2 | 19.6 | 48.9 |
| iced | 0.3 | 21.3 | 20.2 | 3.0 | 24.5 |
| Slint | 0.3 | 62.7 | 26.9 | 99.1 | 66.8 |
| Flutter | 0.6 | 31.2 | 21.8 | 104.6 | 90.6 |
| Compose | 0.5 | 35.9 | 34.4 | 106.4 | 101.8 |
| フレームワーク | 静止 | リスト | ストリーム | 編集 | モーション |
|---|---|---|---|---|---|
| WPF | 157 | 193 | 250 | 206 | 2,425 |
| Electron | 280 | 397 | 392 | 556 | 947 |
| Tauri | 260 | 313 | 346 | 536 | 913 |
| GPUI | 135 | 142 | 160 | 138 | 142 |
| MyGo | 132 | 135 | 133 | 132 | 115 |
| egui | 379 | 386 | 396 | 460 | 388 |
| iced | 212 | 224 | 274 | 321 | 215 |
| Slint | 79 | 87 | 72 | 202 | 61 |
| Flutter | 636 | 396 | 374 | 667 | 4,934 |
| Compose | 421 | 544 | 574 | 3,372 | 2,422 |
| フレームワーク | リスト p95 | リスト p99 | 回数 | 動き p95 | 動き p99 | 回数 |
|---|---|---|---|---|---|---|
| WPF | 8.6 | 8.7 | 5 | 684.3 | 719.3 | 5 |
| Electron | 8.8 | 8.9 | 4 | 108.3 | 115.9 | 2 |
| Tauri | — | — | 0 | 91.7 | 100.0 | 5 |
| GPUI | 8.6 | 8.8 | 5 | 16.7 | 25.1 | 5 |
| MyGo | 8.4 | 8.7 | 5 | 8.6 | 16.7 | 5 |
| egui | 8.8 | 8.9 | 5 | 8.5 | 8.7 | 5 |
| iced | 8.9 | 8.9 | 5 | 8.5 | 8.6 | 5 |
| Slint | 8.5 | 8.8 | 5 | 8.5 | 8.7 | 5 |
| Flutter | 8.4 | 8.6 | 5 | 80.5 | 88.6 | 5 |
| Compose | 8.8 | 8.9 | 5 | 160.3 | 211.8 | 5 |
| フレームワーク | 静止 | リスト | ストリーム | 編集 | モーション |
|---|---|---|---|---|---|
| SwiftUI | 1.0 | 16.9 | 87.5 | 8.9 | 99.1 |
| Electron | 2.5 | 16.7 | 16.1 | 62.0 | 102.2 |
| Tauri | 6.3 | 32.0 | 42.1 | 86.9 | 78.7 |
| GPUI | 0.4 | 9.7 | 22.5 | 2.9 | 17.0 |
| MyGo | 0.1 | 13.2 | 8.2 | 2.8 | 16.3 |
| egui | 0.1 | 9.0 | 8.6 | 7.2 | 20.4 |
| iced | 0.1 | 24.2 | 18.2 | 7.5 | 15.0 |
| Slint | 0.1 | 13.1 | 18.4 | 52.1 | 26.7 |
| Flutter | 0.2 | 11.0 | 18.3 | 101.9 | 237.4 |
| Compose | 0.4 | 23.3 | 31.3 | 105.1 | 107.5 |
| フレームワーク | 静止 | リスト | ストリーム | 編集 | モーション |
|---|---|---|---|---|---|
| SwiftUI | 32 | 40 | 136 | 293 | 37 |
| Electron | 205 | 536 | 567 | 707 | 698 |
| Tauri | 101 | 753 | 601 | 570 | 555 |
| GPUI | 74 | 341 | 358 | 320 | 335 |
| MyGo | 75 | 368 | 361 | 356 | 371 |
| egui | 414 | 803 | 817 | 862 | 839 |
| iced | 75 | 489 | 541 | 598 | 491 |
| Slint | 151 | 423 | 386 | 434 | 416 |
| Flutter | 156 | 468 | 455 | 663 | 994 |
| Compose | 350 | 710 | 709 | 1,426 | 1,295 |
| フレームワーク | Mac 起動 | Windows 起動 | Mac 容量 | Windows 容量 |
|---|---|---|---|---|
| ネイティブ(SwiftUI / WPF) | 228 | 449 | 3.0 | <0.1 |
| Electron | 295 | 818 | 267.0 | 376.4 |
| Tauri | 565 | 622 | 12.5 | 11.2 |
| GPUI | 255 | 277 | 11.9 | 13.4 |
| MyGo | 742 | 126 | 13.1 | 11.5 |
| egui | 309 | 277 | 17.4 | 17.4 |
| iced | 257 | 590 | 14.4 | 14.2 |
| Slint | 261 | 272 | 18.5 | 17.0 |
| Flutter | 244 | 1,043 | 43.9 | 30.0 |
| Compose | 550 | 1,074 | 123.1 | 113.8 |
デザインの再現性
背景ぼかしの項目では、ウィンドウ内の指定パネルにある縞模様の境界をぼかす。Compose 1.12.2 で縞模様のレイヤーに 24 dp の Modifier.blur を適用すると、Mac と Windows のネイティブウィンドウのキャプチャーに滑らかな境界が現れた。SwiftUI でも同じように、既知の縞模様のレイヤーをぼかしてから半透明の白を重ねる。両方式の検証対象はこのレイヤーに限られる。 Compose Desktop API
GPUI、iced、egui、Slint のテスト実装は縞模様に半透明のレイヤーを重ねており、再テストでも色の境界は明瞭だった。GPUI の Blurred と iced の window::Settings::blur はウィンドウの背後に作用する。対象バージョンの組み込み描画 API に局所的な背景ぼかしは確認できなかった。iced はカスタム描画で局所的な効果を作成でき、egui は PaintCallback でレンダリングバックエンドに処理を渡せる。 GPUI · iced のウィンドウ設定 · egui の描画コールバック
Slint のテストは 1.18.1 と FemtoVG の組み合わせで行った。このバージョンには要素の backdrop-blur プロパティがなく、その後 Skia レンダラー向けに追加された。キャプチャーは 1.18.1 の FemtoVG によるものだ。 Slint の上流 Issue
デザインページは 11 項目です。今回の Mac 出力では GPUI、egui、iced、Slint、Compose の P3 色見本が再現されませんでした。Windows キャプチャには色プロファイルがないため P3 は判定せず、旗の絵文字は各実装で文字表示でした。
| フレームワーク | レイアウト | テキスト | アクセシビリティ |
|---|---|---|---|
| GPUI | Taffy | macOS は CoreText | AccessKit |
| egui | 即時モードのレイアウト | epaint + harfrust | AccessKit |
| iced | 独自の flex レイアウト | cosmic-text | システムとの橋渡しは確認できず |
| Slint | コンパイル時の lowering + 実行時レイアウト | Parley | AccessKit |
| Flutter | RenderBox の制約 | SkParagraph | Semantics ツリーを接続 |
| Compose | MeasurePolicy | Skiko の SkParagraph | Semantics、Windows は Java Access Bridge が必要 |
| Electron | Blink | Chromium テキストパイプライン | Chromium アクセシビリティツリー |
| Tauri | システム WebView | システム WebView | WebView 経由で公開 |
| SwiftUI | Stack / Layout | TextKit,Core Text | システム内蔵 |
レイアウトは似てきたが、テキストは違いが大きい。iced が macOS で PingFang 700 を要求すると、ラテン文字は Menlo Bold にフォールバックした。
制約:
- 各プラットフォームでマシンは 1 台のみ。アニメーションの結果は Intel 内蔵 GPU によるもので、独立 GPU に当てはまるとは限らない。
- Mac は測定中もアイドルではなく、フレームデータはアプリのコールバックのみ。フレームワーク間の比較には使わない。
- 影の blur の意味はそれぞれ異なり、egui、iced、GPUI は近似実装。編集コントロールも同等ではなく、GPUI はサンプルエディターを改変したものを使う。
- CPU・メモリ表はアプリと集計対象の補助プロセスのみです。WindowServer・ドライバーのコストをウィンドウごとに配分せず、システム共有資源の再利用効果も定量化していないため、システム全体の描画コスト順位は付けられません。
- 入力メソッドの候補ウィンドウ、Mac のアクセシビリティツリー、消費電力については、有効な測定結果を得られなかった。

