ユーザビリティとレイアウトの明快さを向上させるために認知および視覚設計の原則を統合した、自動ユーザーインターフェース・プロトタイピング・フレームワーク

サマリー

本研究では、認知設計原則、知覚的色彩モデリング、およびディープラーニングを統合した自動ユーザーインターフェース・プロトタイピング・フレームワークを提示します。本システムは、アクセシビリティ、レイアウトの明快さ、色彩の調和、およびクロススクリーンの一貫性を向上させ、一貫性のあるユーザー中心のインターフェース設計を実現します。

要約

効果的なユーザーインターフェース（UI）設計には、視覚的な訴求力、認知的ユーザビリティ、およびレイアウトの一貫性の調和のとれたバランスが必要です。しかし、現在の自動UI生成手法は主に視覚的な外観やコンポーネント検出に焦点を当てており、認知原理、カラーインテリジェンス、および構造的推論を統合した統一的なフレームワークを欠いています。さらに、既存の手法は、レイアウトの汎用性の低さ、解釈性の不足、静的な色選択、および画面間での動作の不整合という課題を抱えています。このような背景から、本研究では、Faster region-based convolutional neural network（Faster R-CNN）ベースのコンポーネント検出と、CIECAM02一様色空間（CAM02-UCS）による知覚的な色モデリングを統合し、認知・視覚設計原理を組み込んだ自動UIプロトタイピングフレームワークを提案します。Faster R-CNNを用いて、大規模なインターフェースデータセットからUIコンポーネントを特定し、階層構造を推論します。強化された色生成モジュールは、ブランド画像や参照画像を分析し、CAM02-UCSを用いて知覚的に一様で調和が取れた、ユーザビリティに準拠したカラースキームを保証します。これらの出力は、ゲシュタルトの群化法則、フィッツの法則、ヒックの法則、注意ベースの間隔配置、および視覚的階層モデリングを含む認知設計ルールを通じてさらに最適化され、洗練されたタスク指向のUIレイアウトを自動的に生成します。RICO、ENRICO、およびGuoのUI Colorデータセットを用いた実験の結果、提案システムは92.4%のコンポーネント検出精度を達成し、レイアウトの明快さと読書順の精度を18.7%向上させ、ベースライン手法と比較してデザイナーから24.5%より調和的であると評価されたカラーパレットを生成しました。ユーザー評価では、知覚される認知負荷が31%減少し、画面間での設計の一貫性が28%向上したことが示されました。これらの知見は、ディープラーニングベースの構造的理解を、知覚に基づいた色モデリングおよび認知設計原理と組み合わせることで、極めて効率的で、審美的に一貫しており、ユーザーフレンドリーなUIプロトタイプを構築できることを証明しています。本フレームワークは、インテリジェントで人間中心の自動UIプロトタイピングに対する、新しいエンドツーエンドのアプローチを確立するものです。

概要

グラフィカルユーザーインターフェース（GUI）は、人間とコンピュータシステムの間の基本的な通信手段として機能し、ユーザビリティ、アクセシビリティ、および全体的なユーザーエクスペリエンス（UX）に大きな影響を与えます^1,2。現代のソフトウェアシステムは、ユーザーを引き付け、維持するために、直感的で視覚的に魅力的なインターフェースに依存しています。従来、UIデザインではグラフィカルなレイアウトを作成し、それを後にエンジニアがフロントエンドコードに変換するという手法が取られてきました。しかし、オペレーティングシステムによってプラットフォーム固有のプロトコルが異なるため、繰り返し適応させる必要があり、開発の複雑さと工数が増大します。そのため、手作業による工数を削減し、開発効率を向上させる自動UIコード生成が、重要な研究方向として台頭しています。

自動UI生成への初期のアプローチでは、領域検出および分類のために、従来の画像処理技術とディープラーニングモデルが組み合わされていました^3,4。現在、GUIコード生成の主要な戦略では、コンピュータビジョン技術を用いてUI画像を分析し、それらを構造化されたフロントエンド表現に変換しています^5,6,7。画像処理手法が手作業で設計された特徴量に依存するのに対し、ディープラーニングアプローチは大規模データセットから階層的な表現を抽出します。その結果、堅牢性と精度を向上させるために、ディープラーニングとドメイン固有の画像処理技術を組み合わせたハイブリッドアプローチが研究されています。

色はUIデザインにおけるもう一つの重要な要因であり、ユーザーの認識、ユーザビリティ、および審美的な魅力に影響を与えます¹。視覚的な入力が色相やコンテキストによって異なる場合、画像コンテンツとUIの配色スキームとの間で一貫性を維持することは困難になります^8,9,10。その結果、自動的なカラーパレット生成および知覚的な色モデリングに重点を置いた重要な研究が行われてきました。既存の色生成手法には、CIELAB色空間に基づいた技術が含まれます¹¹。また、k-meansなどのクラスタリングアルゴリズムを用いて画像から支配的な色を抽出するアプローチもあります¹²。その結果、近年の研究では、色モデリングにデータ駆動型の機械学習ベースのアプローチを採用することが増えています。

並行して、ディープラーニングの手法により、UIコンポーネントの検出とレイアウトの理解が大幅に向上しました。ニューラルネットワークにより、モバイルインターフェースのより正確な構造解析が可能になりました¹³。しかし、これらの手法は主に検出精度に焦点を当てており、認知的なユーザビリティ、レイアウトの階層構造、インタラクション効率といったより高次の側面が見落とされがちです。UIレイアウト合成のための生成モデルも提案されていますが^14,15、画面間の一貫性の維持や、解釈可能なデザイン決定の提供という課題に直面しています¹⁶。その他のアプローチは視覚的な類似性やレンダリング品質に焦点を当てていますが、コンポーネントのセマンティクス、色彩の調和、およびユーザビリティの制約を組み合わせた統一的なフレームワークを欠いています¹⁷。また、UIコンテンツを理解するためにはテキスト認識も重要です。畳み込み回帰ニューラルネットワーク（CRNN）などの手法により、インターフェース画面上の複雑なテキストパターンの正確な認識が可能になっています^18,19,20。

スケッチや画像からUIコードを生成するためのいくつかのシステムが提案されています。Sketch2Codeは物体検出を用いてスケッチをコード表現に変換しますが^21,22、画像品質に左右されるという課題があります。REDRAWは、データ収集とモデル学習のための自動化パイプラインを提供し、畳み込みニューラルネットワークとリカレントニューラルネットワークを組み合わせて構造化されたUI表現を生成します^23,24。その後の研究では、生成されたUIの品質を評価するための改良された評価指標が導入されました²⁵。より最近のアプローチには、オートエンコーダー法を用いない拡散レイアウトトランスフォーマーや、トランスフォーマーベースのGUI配置グラフを用いたGUIレイアウト生成、大規模言語モデルによる誘導型UIレイアウト生成など、レイアウト生成のための拡散ベースおよびトランスフォーマーベースのモデルが含まれます^26,27,28。これらのアプローチの比較概要を表1に示します。

参考文献および主要手法	目的	長所	短所
Automated Image-Based User Interface Color Theme Generation: prominent-color extraction + CAM02-UCS perceptual color modeling¹	調和とユーザビリティを最適化しつつ、参照画像からUIカラーテーマを自動生成する。	強力な知覚的根拠（CAM02-UCS）に基づいている。調和とユーザビリティ（コントラストと多様性）を明示的にバランスさせており、ウェブベースの実装とデザイナーによる評価を含んでいる。	色とテーマのみに焦点を当てており（レイアウトやコンポーネント構造は対象外）、エンドツーエンドで学習されたUI合成ではなく、ルールやヒューリスティックに基づいている。
Unifying Layout Generation with a Decoupled Diffusion Model (LDGM)²⁵	グラフィックシーンおよびUI向けの、統一的で柔軟なレイアウト生成を実現する。	レイアウト生成における最先端の多様性と制御性を備え、条件付き生成や複数の属性タイプをサポートしている。	制約を設けない限り、拡散モデルベースの出力ではアライメントや微細なレイアウトの問題が発生する場合がある。モデルの複雑さと推論コストが高い。
Diffusion Layout Transformers without Autoencoder Methods: transformer + diffusion for layout generation (no autoencoder)²⁶	レイアウト生成ベンチマーク（FID、アライメント、およびオーバーラップ指標）における忠実度とアライメントを向上させる。	隣接するオブジェクト間の意味的な相関関係をより適切に捉えており、FIDおよびアライメント指標で高い性能を示す。	UIの意味論よりも、主にレイアウトの幾何学的形状（位置、サイズ、カテゴリ）に焦点を当てている。
GUI Layout Generation with Transformer-based Models from GUI Arrangement Graphs (GUI-AGs)²⁷	デザイナーを支援するため、位置的・グラフ的な制約からGUIレイアウトを作成する。	グラフ表現により関係性の制約を捉えることができ、Transformerによって柔軟な制約条件付き生成が可能となる。	デザイナーによる明示的な制約グラフが必要となる場合がある。色やユーザビリティ指標への重視が限定的である。
UI Layout Generation with LLMs Guided by UI Grammar: Large Language Models (LLMs) + hierarchical UI grammar²⁸	レイアウト生成にLLMを応用し、文法表現を通じて説明可能性と制御性を向上させる。	高いレベルの制御性と説明可能性を備え、LLM（GPTタイプ）によるインコンテキスト学習を活用できる。	実証的な検証が限定的な初期段階の研究である。文法設計およびUI全般にわたる堅牢性に課題がある。

表1：既存のUIカラーモデリングおよびレイアウト生成手法の比較。 この表は、カラーテーマ生成、拡散モデルに基づくレイアウト生成、Transformerベースの手法、および大規模言語モデル（LLM）誘導によるレイアウト生成など、ユーザーインターフェース設計における代表的なアプローチをまとめたものである。各手法について、基盤となる技術、目的、利点、および限界を提示し、知覚モデリング、レイアウト生成能力、制御可能性、およびユーザビリティに関する考慮事項における相違点を明らかにしている。

これらの進展にもかかわらず、重要な制限が依然として残っています。それは、コンポーネント検出、知覚的カラーモデリング、認知的設計原則、およびマルチスクリーンレイアウトの一貫性を、単一のエンドツーエンドフレームワーク内で統合的に組み込んだ既存システムが存在しないことです¹。現在のアプローチでは、通常、検出、レイアウト、色などの1つまたは2つの側面のみを最適化しており、それらの相互依存性は考慮されていません。このような断片化は、統一された人間中心の自動UIプロトタイピングシステムの開発における決定的な研究上の空白を浮き彫りにしています。特に、ゲシュタルト法則、フィッツの法則、ヒックの法則といった認知的設計原則は、計算モデルに正式に統合されるのではなく、概念的に扱われることが多くなっています。

これらの制限に対処するため、本研究では、コンポーネント検出、知覚的カラーモデリング、および認知設計原則を統合したシステムによる、エンドツーエンドの自動UIプロトタイピングフレームワークを提案します。このフレームワークは、レイアウト品質の向上、認知負荷の軽減、色彩調和の強化、および全体的なユーザビリティの向上を実現するように設計されています。これらの改善は、RICO、ENRICO、およびGuoのUIカラーデータセットを用いた実験を通じて検証されており、単一の自動UIプロトタイピングパイプライン内で構造的、知覚的、および認知的側面を組み合わせることの有効性が示されています。ディープラーニングベースのコンポーネント検出、知覚的カラーモデリング、および認知設計原則を統一されたフレームワークに統合することで、既存の手法と比較してUIプロトタイプの品質が大幅に向上するという仮説を立てています。具体的には、H1では、本フレームワークが配置、グループ化、および読書順を含むレイアウト品質を向上させることを提案します。H2では、本フレームワークがユーザーの認知負荷を軽減することを想定しています。H3では、知覚的カラーモデリングが色彩のコーディネートと視覚的な調和を改善することを示唆しています。H4では、UIプロトタイプの全体的なユーザビリティと審美的品質が向上することを述べています。

プロトコル

本研究では、公開されているデータセットを使用しており、ヒトまたは動物の被験者は含まれていません。

提案された自動UIプロトタイピングフレームワークは、ディープラーニングベースの構造理解、知覚的に均一なカラーモデリング、および認知設計原則を統合し、一貫性のあるユーザー中心のインターフェースプロトタイプを生成します。本手法は、まずRICOおよびENRICOデータセットで学習させたFaster R-CNNアーキテクチャを用いてUIコンポーネントを検出し、その階層関係を抽出することで、多様な画面レイアウトの正確な解釈を可能にします。検出されたコンポーネントは次にカラーインテリジェンスモジュールで処理され、ブランドや画像に基づいたカラーキューを抽出し、CAM02-UCSを用いて知覚的類似性をモデル化し、調和が取れ、コントラストを考慮し、アクセシビリティに準拠したカラーパレットを生成します。続いて、ゲシュタルトのグループ化法則、フィッツの法則、ヒックの法則、アテンションベースの間隔配置、および視覚的階層の制約を含む認知設計原則が、認知最適化エンジンを通じて適用され、空間配置とコンポーネントの整列が洗練されます。最終的に、レイアウト推論レイヤーが構造的、知覚的、および認知的制約を統合し、ユーザビリティ、審美性、および機能的な明快さを両立させた、マルチスクリーンで一貫性のあるUIプロトタイプを生成します。この統合パイプラインにより、知覚的な一貫性が確保され、認知負荷が軽減され、人間中心の設計原則に準拠することが保証されます。提案手法の完全なワークフローを図1に示します。

図 1. 提案する自動ユーザーインターフェース・プロトタイピング・フレームワークの全体構成。この図は、入力UI画像から始まる完全なパイプラインを示している。インターフェース要素を特定するために、Faster R-CNNを用いてコンポーネント検出を行う。検出されたコンポーネントは、その後、階層およびレイアウト抽出のためにCAM02-UCSに基づく知覚モデリングを用いて処理される。続いて、ゲシュタルト原則、フィッツの法則、ヒックの法則、および注意ベースの調整を用いて、認知的な最適化が適用される。矢印はモジュール間のデータフローを示しており、最終的にUIプロトタイプの出力に至る。こちらのリンクをクリックして、この図の拡大版を表示してください。

フレームワークの概要

図 1は、生のUIスクリーンショットを認知的に洗練されたプロトタイプへと変換する、提案された自動UIプロトタイピングフレームワークのエンドツーエンドのワークフローを示しています。プロセスは入力UI画像から始まり、Faster R-CNNに基づくコンポーネント検出モジュールに渡されます。このモジュールは、ボタン、アイコン、テキストフィールド、コンテナなどのインターフェース要素を特定し、それらに対応するバウンディングボックスとクラスラベルを出力します。検出されたコンポーネントは、次に階層およびレイアウト抽出ステージで処理されます。空間的な関係性と構造的なパターンに基づき、システムはユーザーが自然に画面構成をどのように認識するかを反映した階層的なレイアウトツリーを構築します。この表現により、UI要素間の視覚的なグループ化と構造的な依存関係が捉えられます。抽出されたレイアウトは、その後、人間中心設計の原則を適用した認知的最適化を通じて洗練されます。これには、視覚的クラスタリングのためのゲシュタルトグループ化、タッチターゲットのサイズとアクセシビリティを最適化するためのフィッツの法則、意思決定の複雑さを軽減するためのヒックの法則、および視覚的階層を改善するためのアテンションベースの間隔調整が含まれます。その結果、レイアウトはユーザーインタラクションにとってより直感的で読みやすく、効率的なものになります。最後に、最適化されたレイアウトを知覚的カラーモデリングと組み合わせることで、一貫性のあるUIプロトタイプを生成します。得られたインターフェースは、構造的に正確で視覚的に調和し、人間のユーザビリティの期待に沿ったものとなります。

本フレームワークは、Ubuntu 22.04上のPyTorch 2.0を用いて実装されました。実験は、NVIDIA RTX 4090 GPU (24 GB VRAM) を搭載したシステムで実施されました。Faster R-CNNモデルには、ImageNetデータセットで事前学習済みのResNet-50バックボーンを採用しました。学習には、学習率0.001、バッチサイズ16、最大60エポックの設定で、確率的勾配降下法（SGD）オプティマイザーを使用しました。過学習を防ぐため、データの20%で構成される検証セットを用いて早期終了（Early stopping）を適用しました。学習は最大60エポックまで設定していましたが、検証損失に基づく早期終了により、通常はそれより早い段階で収束しました。モーメンタムは0.9、荷重減衰（weight decay）は0.0005に設定しました。データ拡張には、正規化、ランダムな水平反転、およびランダムなクロッピングとリサイズを含めました。

データセットの準備

提案された自動UIプロトタイピングフレームワークをサポートするために、3つの補完的なデータセット（ENRICO²⁹、RICO³⁰、およびGuoのUI Color Dataset¹）が利用されました。RICOデータセットには、9,700個のアプリケーションから収集された66,261枚のAndroid UIスクリーンが含まれており、コンポーネント検出と階層的なレイアウト抽出のための大規模な多様性を提供します。ENRICOには、手動で20のデザインパターンに分類された1,464枚の高精度なUIスクリーンショットが含まれており、構造的推論とレイアウトの一貫性モデリングにおける汎用性の向上を可能にします。GuoのUI Color Datasetは、カラーテーマがアノテーションされた精選済みの128枚のUI画像で構成されており、知覚的な色モデリングとパレット評価に使用されます。ただし、このデータセットは相対的にサイズが小さいため、レイアウト特性に変動が生じる可能性があります。本研究では、トレーニングと評価のために、合計5,128枚のスクリーンからなる統合データセットを準備しました。具体的には、RICOからの約4,000枚の画像をコンポーネント検出用Faster R-CNNモデルのトレーニングに使用し、ENRICOからの1,000枚の画像をレイアウトパターンの学習と構造的一貫性モデリングに使用し、Guoのデータセットからの128枚の画像を色評価タスクに使用しました。すべての画像は480 × 800 pixelsの解像度に正規化され、統一されたsRGB色空間に変換され、データセット間の互換性を確保するために標準化されたバウンディングボックスと階層的メタデータで再アノテーションされました。本研究で使用したデータセットの概要をTable 2に示します。RICOデータセットはUIコンポーネントの大規模検出と構造分析をサポートし、ENRICOはレイアウトパターンの認識能力とスクリーン間の一貫性を強制する能力を高めます。GuoのUI Color Datasetは、規模は小さいものの、知覚的な色の調和とコントラストモデリングの評価において重要な役割を果たします。これらのデータセットを併用することで、提案された自動UIプロトタイピングフレームワークのトレーニング、検証、および評価のための、包括的でバランスの取れた基盤が提供されます。

データセット	利用可能な総画像数	研究で使用された画像	提案された枠組みにおける目的
RICOデータセット30	66,261	4,000	UIコンポーネント検出、構造レイアウト抽出
ENRICOデータセット29	1,464	1,000	デザインパターン学習、レイアウト一貫性モデリング
GuoのUIカラーデータセット1	128	128	カラーテーマ抽出、知覚的色彩評価
合算合計	67,853	5,128	検出、レイアウト、カラーモデリングのための包括的なデータセット

表2：提案フレームワークで使用されたデータセットの概要。本表は、RICO、ENRICO、およびGuo’s UI Colorデータセットを含む、トレーニングおよび評価に使用したデータセットを示しています。また、利用可能な画像総数、本研究で使用したサブセット、および提案フレームワークにおけるコンポーネント検出、レイアウトモデリング、知覚的色解析における各データセットの具体的な役割を報告しています。

RICO、ENRICO、およびGuoデータセットにおけるUIコンポーネント、レイアウト構造、および色の分布の多様性を維持するため、層化サンプリング戦略を採用した。データセットは、層化サンプリングを用いてトレーニング用（70%）、検証用（15%）、およびテスト用（15%）のサブセットに分割した。画像は、平均値（0.485, 0.456, 0.406）および標準偏差（0.229, 0.224, 0.225）を用いて正規化した。データ拡張には、ランダムな水平反転（確率 = 0.5）およびランダムクロッピング（スケール範囲：0.8–1.0）を含め、トレーニング中に224 × 224ピクセルへのリサイズを適用した。

コンポーネントのアノテーションと前処理

RICO、ENRICO、およびGuoのUI Color Datasetは、提案された自動UIプロトタイピングフレームワークの3つの核となる機能コンポーネント、すなわちコンポーネント検出、レイアウトモデリング、および知覚的カラー最適化を包括的にサポートしています。RICOデータセットは、66,000以上のモバイルUIスクリーンを収集した大規模なコレクションであり、主にコンポーネント検出モジュールのトレーニングに使用されます。その多様性により、Faster R-CNNモデルは、幅広いアプリケーションにわたるボタン、画像、テキストフィールドなどの一般的なUI要素の堅牢な表現を学習することができ、これにより、さまざまなデザイン条件下でのUIコンポーネントの正確な検出とローカライズが保証されます。ENRICOデータセットは、構造的関係とレイアウトパターンの学習のために、パターンラベルが付与された高品質なUIスクリーンを提供します。これにより、システムはコンポーネント間の関係、階層構造、および一般的なデザインテンプレートを理解することが可能になります。このデータセットは、レイアウト構造のモデリングとマルチスクリーンの一貫性の維持において重要な役割を果たし、フレームワークが確立されたデザイン慣習に沿ったレイアウトを生成することを可能にします。対照的に、GuoのUI Color Datasetは、知覚的および認知的カラーモデリングに特化して使用されます。構造的側面に焦点を当てたRICOやENRICOとは異なり、このデータセットにはカラーテーマがアノテーションされた精選済みのUI画像が含まれています。これらのアノテーションは、色の抽出および調和評価モジュールのトレーニングに使用されます。色の関係をCAM02-UCSなどの知覚色空間にマッピングすることで、フレームワークはコントラスト、アクセシビリティ、および美的整合性のバランスが取れたカラーパレットを生成することを学習します。これらのデータセットが一体となることで、統合されたパイプラインが形成されます。すなわち、RICOがコンポーネント検出をサポートし、ENRICOがレイアウトパターンの理解と構造的一貫性を可能にし、Guoのデータセットが知覚的カラー最適化を促進します。この統合により、生成されたUIプロトタイプが構造的に正確で、視覚的に調和し、かつ認知的に最適化されることが保証されます。

正規化は、平均 [0.485, 0.456, 0.406] および標準偏差 [0.229, 0.224, 0.225] を用いて行われました。モデルの汎化性能を向上させるため、ランダムクロッピング、水平反転、回転などのデータ拡張手法を適用しました。さらに、ピクセル値を [0, 1] の範囲にスケーリングし、データセット間の一貫性を確保するためにすべての画像を 480 × 800 pixels の解像度にリサイズしました。学習中のデータ拡張には 224 × 224 pixels にリサイズした画像を使用し、レイアウト解析には元の 480 × 800 pixels の解像度を保持しました。バウンディングボックスは、事前定義されたしきい値を用いて、不要なアノテーションをフィルタリングするように調整されました。データセット間で均一性を達成するため、すべての UI 要素を LabelImg アノテーションツールを用いて手動でアノテーションしました。アノテーションに先立ち、UI 要素をボタン、テキスト、画像、アイコン、コンテナなどのカテゴリに分類するための事前定義済みスキーマを策定しました。バウンディングボックスの表現には統一された座標系を適用し、要素間の空間的関係およびレイアウトツリー内での親子関係に基づいて階層情報を構築しました。さらに、RICO、ENRICO、および Guo データセット全体で、要素の一貫したアノテーション、重複するコンポーネントの適切な処理、および最小サイズしきい値の適用を確実にするためのガイドラインを策定しました。

コンポーネント検出のトレーニングおよびレイアウトパターンの抽出に関する詳細な数式は、付録ファイル1に記載されています。

Faster R-CNNモデルは、モメンタム0.9、ウェイトディケイ0.0005のSGDを用いて学習させました。初期学習率は0.001に設定し、検証データのパフォーマンスに基づいたステップディケイポリシーを用いて調整しました。学習はバッチサイズ16で最大60エポックまで行いました。過学習を防ぐため、学習データの20%で構成される検証セットを用いて早期停止を適用しました。

マッピング関数 f(.) は、検出されたUI要素を入力として受け取り、階層的なレイアウト表現を出力します。この関数は、空間的距離とアライメント基準に基づいてUI要素間の隣接関係を計算し、これらの関係を表す隣接行列を構築します。次に、DBSCANなどのクラスタリングアルゴリズムを適用して、関連するコンポーネントをグループ化します。最終的に、クラスタリングされた要素を親子関係に基づいて階層構造に整理し、構造化されたレイアウト表現を形成します。

色彩調和モデリングの詳細な定式化および統合最適化目的関数については、補足ファイル 1に記載されています。

この目的関数は、構造検出、レイアウト推論、および知覚的カラーモデリングの統合を数学的に定式化したものであり、フレームワークのすべての構成要素が連携して、一貫性のあるユーザー中心のUIプロトタイプを生成することを保証します。最適化は、フレームワークの各コンポーネントに対してモジュール方式で実行されます。コンポーネント検出モジュールの学習にはSGDが使用され、統合目的関数の共同最適化にはAdamオプティマイザが使用されます。結合された目的関数は、システム全体のパフォーマンスを導くために用いられます。共同最適化ステージでは、学習率0.001、バッチサイズ16のAdamオプティマイザを用いて目的関数を最小化します。学習は最大60エポックまで行われ、検証損失の変化が5エポック連続で10⁻⁴未満となった場合に早期停止（early stopping）を適用します。

Faster R-CNNを用いたコンポーネント検出

提案するフレームワークでは、ボタン、アイコン、テキストフィールド、画像、コンテナなどのUIコンポーネントを自動検出するためにFaster R-CNNを採用しています。Faster R-CNNは、高い物体検出精度と効率的な領域提案生成を兼ね備えており、要素が密集した複雑なUIレイアウトを処理する上で不可欠であるため、このタスクに適しています。本モデルは、ImageNetデータセットで事前学習済みのResNet-50バックボーンを利用し、各UI画面から畳み込み特徴マップを抽出します。学習時、一般的な視覚的特徴を保持するために初期層は凍結し、上位層（conv4_xおよびconv5_x）はUI固有のコンポーネント検出に合わせて微調整（ファインチューニング）されました。これらの特徴マップは、視覚的構造、エッジ、テクスチャ、およびコンポーネントの境界を捉えます。検出時には、領域提案ネットワーク（RPN）がUIコンポーネントが含まれている可能性が高い候補領域（アンカー）を特定します。アンカーは、さまざまなサイズのUI要素に対応するため、複数のスケール（128、256、512）とアスペクト比（1:1、1:2、2:1）を用いて定義されています。学習において、正解ボックス（ground truth boxes）とのIoU（intersection-over-union）が0.7より大きいアンカーは正例としてラベル付けされ、IoUが0.3未満のものは負例としてラベル付けされます。中間的なIoU値を持つアンカーは無視されます。各アンカーには、コンポーネントが存在する確率が割り当てられます。その後、非最大値抑制（NMS）を適用して冗長で重複する提案を排除し、混雑したインターフェースにおいても意味のあるUI要素を効率的に局在化させます。候補領域が生成されると、各提案は定義済みのコンポーネントカテゴリに分類され、そのバウンディングボックスの座標が精緻化されます。ROI（region of interest）Align操作により、各提案から固定サイズの特徴表現が抽出され、全結合層によって分類と回帰処理が行われます。分類ブランチはクラス確率を出力し、回帰ブランチは精密なバウンディングボックス座標を予測します。Faster R-CNNモデル全体は、RPNの損失と最終的な検出損失を組み合わせた結合損失関数を最適化することにより、エンドツーエンドで学習されます。これにより、システムはUIコンポーネントを正確に認識するだけでなく、多様なインターフェース構造全体で精密に局在化させることが可能になります。RPNステージ、ROI分類、バウンディングボックスの精緻化、および最終的な最適化目標を含むFaster R-CNNコンポーネント検出の詳細な説明は、Supplementary File 1に記載されています。

アルゴリズム S1に、コンポーネント検出および構造抽出の詳細なワークフローを記載しています（付録ファイル 1）。ここでは、生のスクリーン画像からUIコンポーネントを自動的に検出し、その構造を抽出する完全なプロセスについて説明しています。まず、入力画像に前処理を施し、CNNバックボーンに通して深い視覚的特徴を抽出します。これらの特徴をRPNで利用して候補となるバウンディングボックスを生成し、その後、分類と回帰を通じて精緻化します。NMSによって冗長な検出結果を排除し、正確な位置特定を保証します。検出後、DBSCAN（density-based spatial clustering of applications with noise）を用いて、空間的な近接性に基づいたコンポーネントのグループ化を行います。このクラスタリングステップにより、コンポーネント間の親子関係や論理的なグループ化を捉えた階層的なUIツリーの構築が可能になります。この階層的な表現が、その後のレイアウト解析およびUI理解の基礎となります。図 2は、モバイルUIスクリーンにおけるFaster R-CNNを用いたコンポーネント検出プロセスを示しています。入力インターフェース（左）にはボタンやテキストブロックなどのUI要素が含まれており、これらが自動的にバウンディングボックスで囲まれます。検出されたこれらの領域は、ラベル付きの接続線で示されているように、コンポーネントカテゴリ（例：ButtonおよびText）に分類されます。Faster R-CNN検出モジュール（右）は、バウンディングボックスの座標を精緻化し、意味的なラベルを割り当て、構造化されたコンポーネントレベルの情報として出力します。このステップは、UIコンポーネントの正確で意味的に有意義な表現を提供することで、レイアウト抽出、認知的最適化、UIプロトタイプ生成などの後続プロセスにおける重要な基盤となります。

図 2. Faster R-CNNを用いたユーザーインターフェース要素のコンポーネント検出。入力インターフェースのスクリーンショットからUIコンポーネントを検出する様子を示している。バウンディングボックスを用いて関心領域を特定し、ボタンやテキストフィールドなどの要素をFaster R-CNNで分類する。矢印は、検出されたコンポーネントから対応するセマンティックラベルへのマッピングを示している。こちらのリンクをクリックして、この図の拡大版を表示してください。

レイアウトパターンの抽出と階層的モデリング

Faster R-CNNを用いたコンポーネント検出の後、各UI要素はバウンディングボックスで表現されます。しかし、これらのバウンディングボックスだけでは、例えばどの要素がヘッダー、ナビゲーションバー、またはグループ化されたコンテンツ領域に属しているかなど、インターフェース内で要素がどのように構造的に整理されているかを伝えることはできません。この制限に対処するため、検出されたコンポーネントは論理的なUIツリーに変換され、各コンポーネントがノードとして扱われ、機能的または視覚的に関連するコンポーネントは共通の親ノードの下にグループ化されます。意味のあるレイアウトグループを特定するために、DBSCANや階層的凝集クラスタリングなどのクラスタリング手法が適用されます。これらの手法は、コンポーネント間の空間的な近接性とアライメントパターンを分析し、UI要素間の関係性を検出します。人間のデザイン手法と同様に、システムはヘッダー、フッター、グリッド、コンテンツブロックなどの一般的な構造パターンを認識することを学習します。グループ化が確立されると、アライメント、グリッド構成、および読書順を含む追加の構造的特性が分析され、包括的なレイアウト表現が構築されます。例えば、等幅の列に整列したコンポーネントはカードベースのレイアウトを示している可能性があり、垂直に積み重ねられた要素はフォームまたはフィードベースのインターフェースを示している可能性があります。クラスタリング、空間的推論、およびアライメントルールを統合することで、本フレームワークは視覚的なグループ化と機能的な関係性の両方を捉えた階層的なUIツリーを構築します。この階層的表現は、その後のレイアウトの精緻化およびマルチスクリーン一貫性モデリングの基盤となり、システムが構造的で一貫性のあるユーザー中心のインターフェースデザインを生成することを可能にします。

空間的距離およびアライメント類似性の詳細な定式化は、補足ファイル1に記載されています。

レイアウトグループ化のためのクラスタリング (DBSCAN)

レイアウトグループを特定するために、DBSCANを適用します。DBSCANでは、(1) ε = 隣接コンポーネント間の最大距離、および (2) = クラスターを形成するために必要な最小コンポーネント数の2つのパラメータを使用します。本解析では、正規化されたUI解像度（480 × 800 pixels）に基づき、DBSCANのパラメータを経験的に選択しました。隣接するUIコンポーネント間の空間的な近接性を捉えるため、近傍距離パラメータは ε = 50 pixels に設定しました。また、重要でないUIコンポーネントのグループや偽のグループが形成されるのを避けるため、クラスター形成に必要な最小ポイント数は MinPts = 3 に設定しました。

詳細な論理的UIツリー構築の定式化は、補足ファイル1に記載されています。

CAM02-UCSを用いた知覚的色モデル化

知覚的な色モデリングにより、生成されたUIで使用される色が調和し、判読可能で、認知的に効率的であることが保証されます。支配的な色は、クラスタリング手法を用いてUI画像などの入力ソースから抽出されます。具体的には、K-meansクラスタリングとK-means++初期化を300回反復適用し、代表的なカラーパレットを取得します。しかし、RGB色空間は人間の視覚的な知覚を正確に反映していないため、数値的に類似した色が知覚的に異なって見えることがあります。この制限を解消するため、抽出されたすべての色は、知覚的に均一なCAM02-UCSに変換されます。この空間では、等距離が知覚される等しい色の差に対応するため、色の調和やコントラストのモデリングに適しています。CAM02-UCSにマッピングされると、ユークリッド距離を用いて知覚的な色の差が計算され、システムによる色間のコントラスト、調和、およびバリエーションの定量化が可能になります。判読性を向上させるために、類似しすぎている色は分離され、一方で過度にコントラストが強い色は、視覚的な不快感を避けるために調整されます。生成されたパレットは、WCAG AAおよびAAAなどのアクセシビリティ標準にも準拠しており、前景要素と背景要素の間で十分なコントラストが確保されます。さらに、意図するUIテーマに応じて、パレットの関係性を補色、類似色、または三色補完（トライアド）スキームに制限することで、色の調和が強制されます。これにより、結果として得られるカラーパレットは、視覚的に魅力的なだけでなく、機能的にアクセシブルで認知的に最適化されたものになります。パレットをさらに洗練させるため、知覚的な類似性、コントラスト、調和、およびブランドの一貫性という制約の下で最適化プロセスが適用されます。まず主色（例：ブランドアイデンティティから）が選択され、視覚的な階層を維持するために、補助色の輝度と彩度が調整されます。ルールベースの評価メカニズムが、知覚的な距離とアクセシビリティ指標に基づいて候補パレットを評価し、審美的なバランスを維持しながら認知的負荷を最小限に抑えます。その結果、本フレームワークは、プロレベルの整合性、可読性、および知覚的な一貫性を備えたUI配色を生成します。

CAM02-UCSに基づく知覚的な色モデリングの詳細な数式は、補足ファイル 1に記載されています。

アルゴリズム S2 (補足ファイル 1) は、調和およびアクセシビリティの制約条件下における、CAM02-UCSに基づいた知覚的な色の抽出および最適化ワークフローについて説明しています。まず、入力画像から支配的な色を抽出し、色の差が人間の知覚に対応するようにCAM02-UCSに変換します。次に、色間の知覚的距離を計算し、明瞭性と調和の両方を維持するために、あらかじめ定義された範囲内に制限します。続いて、WCAGガイドラインに従って輝度コントラスト比を評価することで、アクセシビリティを強制します。最終的なパレットは、知覚的な間隔、コントラスト要件、および色の調和制約をバランスさせた複合目的関数を最適化することで得られます。これにより、生成されたUI配色が視覚的に魅力的なだけでなく、可読性が高く、アクセシブルで、知覚的に一貫していることが保証されます。

認知設計の最適化

認知設計の最適化により、自動生成されたUIプロトタイプが視覚的に一貫しているだけでなく、理解しやすく、操作しやすいことが保証されます。本モジュールでは、ゲシュタルト原則、フィッツの法則、ヒックの法則などの主要な認知設計原則を統合し、UIコンポーネントの配置、グループ化、および間隔を誘導します。認知設計最適化に関する詳細な数式は、Supplementary File 1に記載されています。

統合的な認知最適化目標

統合的な認知最適化目的関数の数式は、Supplementary File 1に記載されています。 視覚的グルーピング、インタラクション効率、および意思決定の複雑性の重要性を表す係数は、それぞれα、β、γで定義されます。本研究では、α、β、およびγの値は検証データセットを用いて経験的に決定されました。今回の実験では、係数を α = 0.5, β = 0.3, γ = 0.2 と設定しました。この構成により、視覚的グルーピング、インタラクション効率、および意思決定の簡便性の間で効果的なバランスが実現されます。

マルチスクリーンの一貫性とUI生成

マルチスクリーン整合性モデリングは、アプリケーション内の異なる画面間で、一貫した視覚的アイデンティティ、構造的レイアウト、およびインタラクションパターンを共有させるためのものです。ユーザーが画面を遷移する際、要素の配置、タイポグラフィ、間隔、および視覚的階層に関する期待を形成します。これらの期待に応えるため、本システムはRICOおよびENRICOデータセットから導出されたテンプレートを用いて、画面横断的なパターンを分析します。これらのテンプレートは、ホーム・詳細レイアウト、リスト・詳細パターン、マルチステップフォーム、ダッシュボードフローなどの一般的なUI構造を捉えています。コンポーネントの配置とグループ化の挙動を比較することにより、システムは画面横断的な構造プロファイルを構築し、どの要素を一貫して維持すべきか、またどの要素を変更可能かを特定します。構造的パターンが特定されると、フレームワークはタイポグラフィのスケール、間隔の比率、グリッドレイアウト、およびナビゲーションアンカーの整合性を強制します。例えば、ヘッダーバーは一貫した高さを維持し、プライマリボタンは均一なサイズと配置を保持し、コンテンツブロックは予測可能な視覚的順序に従います。これは、各画面をグローバルな構造的制約に照らして評価するレイアウト正則化プロセスを通じて実現されます。不整合なパディングやタイトルのずれなど、画面が学習済みテンプレートから逸脱している場合、システムは自動的にレイアウトを調整して整合性を回復させます。これらの修正により、シームレスなUXが保証され、画面間の認知的切り替えコストが削減されます。さらに、本フレームワークは画面間のナビゲーショングラフを分析し、インタラクションフローの整合性を維持します。前進・後退遷移、タブナビゲーション、マルチステップワークフローを含む一般的なナビゲーションパターンを特定し、適用します。各遷移はユーザーのメンタルモデルとの整合性が検証され、これによりユーザビリティが向上し、混乱が軽減されます。その結果、マルチスクリーン整合性モデルは視覚的なノイズを最小限に抑え、親しみやすさを高め、統一されたインタラクション体験を促進します。

マルチスクリーンの一貫性とUI生成に関する詳細な数式は、補足ファイル1に記載されています。

最後に、レンダリングエンジンがSVGワイヤーフレーム、HTML/CSSプロトタイプ、またはピクセルベースのUIモックアップなどの形式で視覚的な出力を生成します。得られたUI画面は、正しい読取順序、調和のとれた配色関係、正確なグリッド配置、および複数の画面にわたる一貫した視覚的階層を示します。

アルゴリズム S3は、認知・視覚的なレイアウト最適化およびマルチスクリーンの一貫性ワークフローを提供します（補足ファイル 1）。アルゴリズム S3では、ユーザーフレンドリーなUIレイアウトを生成するために用いられる、統合的な認知および構造の最適化プロセスについて記述しています。このプロセスでは、知覚的グループ化（ゲシュタルト原則）、インタラクション効率（フィッツの法則）、および意思決定の簡素化（ヒックの法則）を単一の最適化フレームワーク内で組み合わせています。まず、コンポーネント間の空間的関係を評価して知覚的グループ化を確立します。次に、コンポーネントのサイズと配置を調整してインタラクション効率を最適化し、同時にユーザーに提示される選択肢の数を制限することで意思決定の複雑さを制御します。さらに、本アルゴリズムは、各画面を学習済みのレイアウトテンプレートに合わせることでマルチスクリーンの一貫性を強制し、タイポグラフィ、間隔、および構造的構成の均一性を確保します。その後、多目的最適化関数を用いて、配置、間隔、および認知コストのバランスを調整してレイアウトを洗練させ、視覚的に一貫し、かつ認知的に効率的なインターフェースを実現します。総じて、このアルゴリズムは、生成されたマルチスクリーンレイアウトが高水準の視覚的一貫性、ユーザビリティ、および知覚的明快さを維持することを保証します。

結果

提案された自動UIプロトタイピングフレームワークの評価は、3つのソースからなる5,128枚のUIスクリーンを統合したデータセットを用いて行われました。具体的には、4,000枚のRICO画像、1,000枚のENRICOスクリーン、およびGuoのUI Color Datasetからの色注釈付きUIサンプル128枚が含まれます。この統合データセットは、コンポーネント検出の精度、レイアウト構造の明瞭性、マルチスクリーンにおける一貫性、および知覚的な色の調和を評価するための、バランスの取れたベンチマークを提供します。

実験結果から、Faster R-CNNベースの検出モデルは92.4%のコンポーネント検出精度を達成し、多様なモバイルUIスタイルにわたって効果的に汎用化できることが示されました。さらに、ENRICOパターンのアノテーションを組み込むことでレイアウトの推論が強化され、レイアウトの明快さが18.7%向上し、読取順序の保持が改善されました。色評価実験では、CAM02-UCS駆動の色モデリングモジュールによって生成されたパレットは、デザイナーによる評価で24.5%調和性が高く、従来のRGBおよびLABベースのパレット生成手法と比較して高い知覚的均一性を達成しました。また、マルチスクリーン一貫性モデリングにより、クロススクリーンの整合性とタイポグラフィの一貫性が28%向上しました。30人の参加者を対象としたユーザー調査では、提案システムで作成されたプロトタイプとのインタラクションにおいて、知覚される認知負荷が31%軽減されることが示されました。以上の結果を総合すると、コンポーネント検出、知覚色モデリング、および認知的最適化を組み合わせることで、構造的に正確であるだけでなく、視覚的に整合し、認知的に効率的なUIプロトタイプを制作できることが分かります。表 3に、提案するUIプロトタイピングフレームワークの評価に使用したシミュレーション環境と技術的設定を示します。Faster R-CNNおよびレイアウト一貫性モジュールの計算負荷の高い学習プロセスは、高性能なNVIDIA RTX 4090 GPUによってサポートされました。すべての実験はUbuntu 22.04環境で実施され、ディープラーニングの実装にはPyTorch 2.0が使用されました。

パラメータ	構成
ハードウェア	NVIDIA RTX 4090 GPU (24 GB)、Intel i9 プロセッサー、64 GB RAM
オペレーティングシステム	Ubuntu 22.04 LTS
ディープラーニングフレームワーク	PyTorch 2.0
Faster R-CNNバックボーン	ResNet-50 + FPN
画像解像度	480 × 800（すべてのデータセットで正規化済み）
トレーニングバッチサイズ	8
最適化アルゴリズム	AdamW (学習率 = 1e−4, ウェイトディケイ = 0.01)
エポック数	40
色モデル空間	CAM02-UCS
パレット抽出のためのクラスタリング	K-means法 (k = 5)
レイアウトクラスタリング	DBSCAN (密度ベース空間クラスタリングのアプリケーション)ε = 20, min_samples = 3)

表3：提案フレームワークの実装パラメータおよび実験構成。本表は、計算リソース、オペレーティングシステム、ディープラーニングフレームワーク、モデルアーキテクチャ、画像解像度、トレーニングパラメータ、最適化戦略、カラーモデリング空間、およびパレット抽出とレイアウトグループ化に使用したクラスタリング手法を含む、モデルのトレーニングと評価に使用したハードウェアおよびソフトウェアの設定をまとめたものである。

Faster R-CNNアーキテクチャでは、広範で詳細なUIコンポーネントを検出するために、FPNを備えたResNet-50バックボーンを採用しています。すべてのUI画像は、処理前に480 × 800ピクセルに均一にリサイズされます。学習はSGDオプティマイザーを用いて60エポックにわたって行われ、安定した収束を確保するためにバッチサイズを16に設定しています。カラーパレットジェネレーターにはK-meansクラスタリングを用いたCAM02-UCSを使用し、構造レイアウトのクラスタリングにはDBSCANを使用しています。これらの技術的な設定により、生成されるUI結果の再現性、安定性、および高忠実度が保証されます。提案する自動UIプロトタイピングフレームワークを包括的に評価するため、4つのカテゴリーの評価指標を用いています。

i) コンポーネント検出性能。RICOおよびENRICOデータセットにおけるUIコンポーネントのFaster R-CNNモデルによる識別精度の定量化として、適合率（precision）、再現率（recall）、F1スコア、IoU（intersection-over-union）、およびmAP（mean average precision）を用いて分析しました。

ii) レイアウトの明瞭性と構造的一貫性。これは、設計パターンの制約から導出されるアライメント誤差（AE）、グループ化精度、読取順の正確性、および画面間一貫性スコアを通じて測定されます。

iii) 知覚的色の品質：CAM02-UCS知覚距離（ΔE_UCS）、WCAG 2.1コントラスト比、多様性指数、およびGuoのUIカラー評価フレームワークに基づいた色調調和スコアを用いて評価しました。

iv) NASAタスク負荷指標（NASA-TLX）で測定した認知負荷、美的整合性の評価、およびタスク完了効率を含む、ユーザー中心の認知効率指標。

これらの指標により、検出精度だけでなく、知覚的な調和、ユーザビリティの質、および認知体験の観点からもフレームワークを評価することが可能になります。

コンポーネント検出指標

適合率（Precision）は、偽陽性を生成せずにUIコンポーネントを予測するモデルの正確性を表します。適合率が高いことは、予測されたバウンディングボックスの大部分が有効なUI要素に対応していることを意味します。再現率（Recall）は、画面上のすべての関連UIコンポーネントを特定するモデルの能力を測定します。再現率が高いことは、モデルがほとんどの正解コンポーネントを正常に検出したことを示します。適合率と再現率の調和平均として定義されるF1スコアは、バランスの取れた評価を提供し、特にUIコンポーネントがデータセット間で不均一に分布している場合に有用です。

IoU指標は、予測されたバウンディングボックスが正解のバウンディングボックスとどの程度重なっているかを測定します。物体検出タスクでは、中程度の評価条件と厳格な評価条件を表すために、一般的に0.5および0.75のIoU閾値が使用されます。mAPは、複数のIoU閾値における検出性能をまとめたものです。mAP@0.5:0.95指標は、0.5から0.95まで0.05刻みの閾値にわたって適合率を平均化することでより堅牢な評価を提供するため、物体検出の標準的なベンチマークとして広く受け入れられています。

3つのデータセットにおける検出結果は、提案したコンポーネント検出モジュールが一貫して良好に機能していることを示しています。定量的な結果を表4に示します。RICOデータセットは、UIコンポーネントのアノテーションが大規模かつ多様であるため、適合率0.91、再現率0.88、F1スコア0.89という最高の性能を達成しています。ENRICOは、構造がより簡素化されており、アノテーションされたコンポーネントの種類が少ないため、スコアがわずかに低くなっています。Guoデータセットは、視覚的な変動が大きく、標準化されたレイアウトパターンが少ないため検出がより困難となり、F1スコアが最低（0.81）となりました。全体として、これらの結果は、本モデルが異なるUIデザインスタイルやデータセットの特性にかかわらず、堅牢なコンポーネント検出性能を維持していることを裏付けています。

データセット	精度	再現率	F1スコア
RICO	0.91	0.88	0.89
エンリコ	0.87	0.84	0.85
郭	0.83	0.8	0.81

表4：データセット間におけるコンポーネント検出性能。この表は、RICO、ENRICO、およびGuoデータセットにおけるUIコンポーネント検出の適合率（precision）、再現率（recall）、およびF1スコアを示しており、検出モデルの有効性を証明している。

図 3 は、IoUしきい値 0.5 および 0.75 における RICO、ENRICO、および Guo データセットに対するモデルの性能を示しています。予想通り、IoU 0.5 では重なりの要件が緩和されているため、mAP 値が高くなっています。RICO は一貫して最も高い mAP 値（IoU 0.5 で 0.89、IoU 0.75 で 0.78）を記録しており、これはアノテーションの豊富さと一貫性を反映しています。ENRICO はわずかに低い値を示し、Guo はレイアウトスタイルやコンポーネント密度の変動が大きいため、最も低いスコアとなっています。IoU しきい値が厳しくなるにつれて値が低下する傾向は、データセットの複雑さが検出の堅牢性に直接影響することを表しています。

図3. 各データセットにおける、IoU（intersection over union）閾値0.5および0.75での平均適合率（mAP）。この折れ線グラフは、RICO、ENRICO、およびGuoデータセット間でのコンポーネント検出性能を比較したものである。x軸はデータセットを、y軸はmAP値を示す。2本の曲線はそれぞれIoU閾値0.5と0.75に対応しており、検出の厳格性のレベルが異なる場合における性能の変化を示している。この図の拡大版を表示するには、ここをクリックしてください。

図4は、各データセットにおけるmAP@IoU(0.5:0.95)を示しており、10個のIoU閾値にわたる検出性能のより広範な評価を提供しています。結果から、RICO (0.61)からENRICO (0.57)、そしてGuo (0.52)へと明確な低下傾向が見られ、提案した検出モデルが、より大規模で構造化されたデータセットにおいて最も高い汎化性能を持つことが確認されました。このより厳格な平均指標は、単一の閾値による評価では明らかにならないわずかな性能低下を浮き彫りにしています。これらの知見は、モデルがすべてのデータセットで強力に機能しているものの、レイアウトの多様性やコンポーネントの変動性の増加が、厳格なCOCO形式の評価においてさらなる課題となることを示しています。検出結果は図3および図4に示されており、異なるIoUレベルにおけるmAPの定量的な比較を提供しています。

図 4. 各データセットにおける、IoU（intersection over union）閾値 0.5 から 0.95 で平均化した平均適合精度（mAP）。折れ線グラフは、0.5 から 0.95 の IoU 閾値で平均化した mAP 指標を用いた、RICO、ENRICO、および Guo データセットにおけるコンポーネント検出性能を示している。x 軸はデータセットを表し、y 軸は 0～1 のスケールで報告された対応する mAP 値を示しており、異なる検出閾値におけるモデルの性能を反映している。ここをクリックして、この図の拡大版を表示してください。

レイアウト品質指標

レイアウトの品質は、AE、グルーピング精度（GA）、および読取順精度（ROA）を用いて評価されます。これらは、生成されたUIレイアウトの構造的な正確性、知覚的な組織化、および認知的な読みやすさを総合的に評価する指標となります。

アライメントエラー。

AE（ピクセルベースの偏差）は、UI要素が左、右、上、またはベースラインガイドなどの理想的な整列線にどの程度正確に沿っているかを示します。AEが低いほど、要素が視覚的な歪みを最小限に抑えて一貫して配置されており、可読性とデザイン全体の明快さが向上していることを意味します。この指標は、整列の乱れが視覚的な流れを妨げ、知覚される複雑さを増大させるため、認知的なレイアウトの精緻化を評価する上で特に重要です。図 5は、RICO、ENRICO、およびGuoデータセットにおけるAEを示しており、理想的な整列線からの平均ピクセル偏差として測定されています。結果から、RICOが最も低いAE（4.2 px）を達成しており、このデータセットのUIコンポーネントがより一貫した構造的パターンを示しているため、モデルにとって整列が容易であることがわかります。ENRICOは中程度の整列偏差である6.1 pxとなり、適切に構造化されたスクリーンレイアウトと多様なレイアウトが混在していることを反映しています。Guoデータセットは、コンポーネント配置の多様性が高く、非標準的なレイアウト構造が含まれているため、整列ベースの精緻化が困難となり、最も高いAE（7.4 px）を記録しました。全体として、これらの結果は、レイアウトの複雑さが増しても、本モデルがデータセット間で強力な整列精度を維持していることを実証しています。

図5. データセット間のアライメント誤差。図はデータセット間のアライメント誤差を示しており、値が低いほどアライメントの精度が高いことを示します。この図の拡大版を表示するには、ここをクリックしてください。

グルーピング精度 (GA)

GAは、近接性、類似性、連続性などのゲシュタルト原則に基づき、モデルが関連するUIコンポーネントをどれだけ効果的にグループ化したかを定量化します。グループ化精度が高いほど、モデルがUI要素の意図された構造を保持していることを示し、ユーザーがインターフェースをより自然に解釈することが可能になります。この指標は、レイアウト洗練モジュールがコンテンツを有意義な視覚的グループへと正常に整理できているかを評価する際に特に有用です。図6は、提案フレームワークが3つのデータセットで達成したGAの分布を示しています。ENRICOデータセットは、パターンラベル付きの明確に定義されたレイアウトであるため、中央値のGAが最も高く、四分位範囲が最も小さくなっており、安定して一貫したグループ化性能を示しています。RICOデータセットは、多様性とレイアウトの複雑さがより大きいためか、中程度のグループ化精度と高い変動性を示しています。Guo UI Colorデータセットでは、サンプルが視覚的に不均一で構造的レイアウトへの焦点が低いため、グループ化精度が低くなっています。全体として、これらの結果は、認知レイアウト洗練モジュールがデータセット間で信頼性高く動作し、構造的に一貫したデータにおいて最高のグループ化性能を達成することを示しています。

図6. データセット間におけるグループ化精度の分布。ボックスプロットは、RICO、ENRICO、およびGuoのUI Colorデータセットにおけるゲシュタルト原理に基づくグループ化精度を示している。ボックスは四分位範囲を、中央の線は中央値を、ひげは値の範囲を表す。x軸はデータセットを、y軸はグループ化精度のスコアを示す。サンプルサイズはn=5128のユーザーインターフェース画面（RICO: 4000、ENRICO: 1000、Guo: 128）である。こちらをクリックして、この図の拡大版を表示してください。

読取順序精度（ROA）。

読書順精度（Reading order accuracy; ROA）は、通常、上から下、左から右へと流れるUI画面の自然な読書フローをモデルがどの程度正確に予測できるかを測定する指標です。正しい読書順を維持することは、ユーザビリティ、ナビゲーションの明快さ、および確立されたデザイン慣習との整合性を確保するために不可欠です。ROAが高いほど、システムが期待される認知的なスキャンパターンを保持していることを示します。図7は、RICO、ENRICO、およびGuoデータセットにおける、異なる評価段階でのROAを示しています。ENRICOは、規則的でパターン指向のレイアウト構造を持つため、人間のような読書シーケンスをより正確に予測でき、一貫して最も高いROAを達成しています。RICOは、多様性と現実世界の複雑さが大きいため、わずかな変動を伴いながらも中程度のパフォーマンスを示しています。Guoデータセットは、多くの画面が視覚的に豊かである一方で、明確に定義された読書階層に欠けているため、最も低いROAを示しています。全体として、これらの結果は、提案された認知レイアウト洗練モジュールが、構造化されたデータセットで最も信頼性高く動作し、多様なUIデザインにわたって安定した読書順予測を維持していることを示しています。

図 7. 複数のデータセットにおける評価ステージごとの読取順序精度の推移。折れ線グラフは、RICO、ENRICO、および Guo's UI Color データセットにおける評価ステップごとの読取順序精度を示している。x軸は評価ステージを、y軸は読取順序精度を表す。各曲線はデータセットに対応しており、連続する評価ステージを通じて視覚的フローの保持がどのように変化するかを示している。評価ステージは、提案されたフレームワークの段階的な精緻化ステージを表している。こちらのリンクをクリックして、この図の拡大版を表示してください。

レイアウト一貫性スコア (LCS)

レイアウト一貫性スコア（LCS）は、同一アプリケーション内の複数の画面において、生成されたUIレイアウトがどれだけ一貫して維持されているかを測定する指標である。これには、間隔、アライメントルール、タイポグラフィ領域、およびグルーピングパターンの整合性が含まれる。スコアが高いほど画面間の整合性が向上しており、結果としてより統一感のある直感的なUXが実現される。図8は、RICO、ENRICO、およびGuoのUI Colorデータセットについて、複数の評価ステージで測定されたLCSを示している。ENRICOデータセットは、パターンラベルが付与され構造的に均一なUI画面を備えているため、画面間の一貫性をより安定して学習することができ、一貫して最高のLCS値を達成している。対照的に、RICOデータセットは中程度ながら着実に向上する一貫性を示しており、これは非常に多様なUIレイアウトにわたって汎化するモデルの能力によるものである。予想通り、Guoデータセットは構造的なレイアウトよりも主に色の特性に焦点を当てているため、複数画面の一貫性を維持することがより困難であり、最も低いLCS値を記録した。全体として、これらの結果は、提案された画面間一貫性モジュールがパターン指向のデータセットで最も効果的に機能しつつ、すべてのデータセットにおいて測定可能な改善をもたらすことを示している。

図 8. 複数のデータセットにおける評価ステージごとのレイアウト一貫性スコア。折れ線グラフは、RICO、ENRICO、およびGuo's UI Colorデータセットにおける評価ステージごとのレイアウト一貫性スコアを示している。x軸は評価ステージを、y軸はレイアウト一貫性スコアを表す。各曲線はデータセットに対応しており、評価ステージが進むにつれて生成されたインターフェースの構造的整合性が向上していることを示している。この図の拡大版を表示するには、ここをクリックしてください。

色品質指標

生成されたUIカラーテーマは、CAM02-UCSから導出された知覚に基づいた5つの指標を用いて評価されます。パレット内の色間の知覚的均一性を定量化するΔE（知覚的な色差）、前景と背景要素間の可読性を評価するコントラスト比（WCAG 2.1に基づく）、色相間の審美的な適合性を測定する色彩調和指数（CHI）、知覚的な色空間内のバリエーションを反映する色彩多様性スコア（CDS）、およびパレット内での色のバランスと支配性を評価する色彩顕著性スコア（CPS）です。これらの指標を総合することで、審美的な品質とユーザビリティ重視の色彩パフォーマンスの両方を包括的に評価することが可能になります。結果として、提案手法ではΔE値が4.12という低い値となり、色間の知覚的な均一性が向上していることが示されました。また、6.21というコントラスト比により、アクセシビリティ基準への準拠が確認され、可読性の向上が保証されました。表5は、提案するカラーモデリングモジュールとベースライン手法との定量的な比較を示しています。CHIは0.61から0.83に上昇し、色の遷移における審美的な凝集性が向上したことを示しています。さらに、CDSは50%以上増加しており、生成されたパレットが視覚的な乱雑さを導入することなく、より豊かなバリエーションを維持していることが実証されました。CPS値が高いことは、支配的な色がバランスよく配置されており、単一の色相による彩度過多が防止されていることを示しています。全体として、これらの結果は、調和のとれた読みやすく知覚的に最適化されたUI配色を生成する上で、CAM02-UCSに基づくカラーモデリングモジュールが有効であることを裏付けています。

指標	定義	提案手法	ベースライン1	改善率 (%)
ΔE (CAM02-UCS)	知覚的な色の差	4.12	7.85	47.5%低い
コントラスト比 (WCAG)	FG–BGペアの視認性	6.21	4.38	41.80%
CHI (色彩調和指数)	色相 & クロマハーモニー	0.83	0.61	36.10%
CDS（色多様性スコア）	Jにおける分散′a′b′ スペース	18.70	12.40	50.80%
CPS (カラープロミネンススコア)	優勢色の安定性	0.72	0.55	30.90%

表5：提案手法とベースライン手法における色品質指標の定量比較。本表は、知覚的色差（CAM02-UCSにおけるΔE）、コントラスト比（WCAG）、色彩調和指数（CHI）、色彩多様性スコア（CDS）、および色彩卓越性スコア（CPS）を含む、色品質の評価指標を示している。提案手法の結果をベースライン値と比較し、改善率を併記している。

参加者の属性および研究デザイン

評価プロセスには、計30名の参加者が関与しました。参加者の年齢は20歳から35歳の間でした（平均年齢：26.4 ± 3.2歳）。コホートには、ソフトウェアエンジニア、学生、UI/UXデザイナーなど、多様な経歴を持つ個人が含まれていました。自己申告によるコンピュータ習熟度に基づき、参加者の40%が中級者、35%が上級者、25%が初心者として分類されました。参加者の約半分はUI/UXデザインまたは関連分野での実務経験があり、残りの参加者は経験がありませんでした。この多様性により、技術的な専門知識やデザインへの習熟度のレベルが異なる間でのバランスの取れた評価が確保されました。

ユーザー調査指標

認知負荷、ユーザビリティ、視覚的魅力、効率性、および一貫性を評価するため、NASA-TLX、システムユーザビリティスケール（SUS）、美的調和スコア（AHS）、検索効率時間（SET）、および画面間一貫性評価（CSCR）を含む複数の指標を用いて、ユーザー中心の評価を行った。

NASA-TLX指標は、精神的負荷、努力、フラストレーションなどの要因を測定することで、メンタルワークロードを定量化します。スコアが低いほど、認知負荷が軽減され、インタラクションの容易性が向上していることを示します。提案されたフレームワークは、すべてのデータセットにおいて一貫して低いNASA-TLXスコアを記録し、精神的努力が軽減されたことを示しました。この改善は、ゲシュタルトのグループ化、最適化された間隔、および強化された視覚的階層を含む認知設計原則の統合によるものであり、これらが集合的に、より直感的なナビゲーションを促進します。SUS指標は0から100までの標準化されたユーザビリティスコアを提供し、値が高いほどユーザビリティと明瞭性が向上していることを示します。提案されたフレームワークは、ベースライン手法と比較して高いSUSスコアを達成し、構造的なレイアウトと色の明瞭性の両方における改善を反映しました。配置、間隔、およびナビゲーションフローの強化により、ユーザーがより直感的で機能的に一貫していると感じるインターフェースが実現しました。7段階のリッカート尺度で測定されるAHSは、知覚される視覚的な魅力と色の調和を評価します。CAM02-UCSベースの色モデリングモジュールを用いて生成されたインターフェースは、より高いAHS値を達成し、よりスムーズな色の遷移と視覚的にバランスの取れたパレットが実現したことを示しました。参加者は、コントラストの向上、色相の一貫性、および視覚的な乱雑さの減少により、一貫してこれらのインターフェースを好み、UI設計における知覚的な色モデリングの重要性が浮き彫りになりました。SETは、視覚探索タスク中にユーザーがターゲットとなるUI要素を特定するのに必要な時間を測定します。SET値が低いほど、視覚的な構成と階層が改善されていることを示します。提案されたフレームワークは、すべてのデータセットにおいてSETを大幅に短縮し、ゲシュタルトのグループ化、注意誘導的な間隔、および洗練されたレイアウト構造を統合することで、より迅速で効率的なインタラクションが可能になることを実証しました。CSCR指標は、複数の画面にわたるUI設計の一貫性を評価します。スコアが高いほど、レイアウト、色、および構造的構成の連続性が優れていることを示します。提案されたフレームワークはより高いCSCR値を達成し、インターフェース全体で安定した配色、間隔、および階層構造を維持するマルチスクリーン一貫性モジュールの有効性を反映しました。

図 9は、RICO、ENRICO、およびGuoデータセットにおけるすべての指標（NASA-TLX、SUS、AHS、SET、およびCSCR）の比較ユーザー調査結果を示しています。全体として、すべての評価指標において一貫した改善が観察されました。特に、Guoデータセットは、認知負荷の低減（NASA-TLX）、ユーザビリティの向上（SUS）、美的調和の改善（AHS）、検索効率時間の短縮（SET）、および画面間整合性の向上（CSCR）を含む、ユーザー中心の指標において優れた性能を示しています。しかし、これらの結果は慎重な解釈が必要です。Guoデータセットで観察されたUX指標の向上は、構造的なレイアウト品質の高さよりも、主に強力な色の整合性と比較的単純な視覚的構成によるものです。ユーザーはこれらのインターフェースをより視覚的に調和しており、認知的な負荷が低いと感じていますが、前述の結果では、Guoデータセットはアライメント、グルーピング、および読書順の点では性能が低いことが示されています。このことは、UIデザインにおける知覚的要因と構造的要因の重要な違いを浮き彫りにしています。色の調和などの知覚的属性はUXを大幅に向上させますが、機能的なユーザビリティには構造的な正確さとレイアウトの一貫性が不可欠です。したがって、最適なUIデザインには、知覚的な調和と構造的な正しさのバランスが求められます。

図 9. データセット間におけるユーザー調査指標の比較。グループ化された棒グラフにより、RICO、ENRICO、およびGuoのUI Colorデータセットにおけるユーザー調査指標を比較している。x軸は、NASA Task Load Index (NASA-TLX)、システムユーザビリティスケール (SUS)、美的調和スコア (AHS)、構造的効率時間 (SET)、および画面間一貫性率 (CSCR) を含む評価指標を表し、y軸は対応するスコアを示す。各棒は各データセットのパフォーマンスを表しており、ユーザビリティ、認知負荷、美的品質、およびインターフェースの一貫性の違いを示している。NASA-TLX (0–100、低いほど良好)、SUS (0–100、高いほど良好)、AHS (1–7 リッカート尺度)、SET (s、短いほど良好)、およびCSCR (0–1、高いほど良好)。こちらのリンクから、この図の拡大版をご覧いただけます。

仮説の統計的検証

提案された仮説（H1～H4）をさらに検証するため、レイアウト品質、認知負荷、色彩調和、およびユーザビリティ指標を含む主要な評価指標に対して統計的有意性検定を実施した（表 6）。結果は平均値 ± 標準偏差として報告し、統計的有意性は95%信頼区間（p < 0.05）を用いた対応のあるt検定によって評価した。その結果、提案したフレームワークは、アライメント精度、グルーピング精度、読書順、認知負荷（NASA-TLX）、および色彩調和指標を含む複数の指標において、ベースラインの手法よりも統計的に有意な改善を達成したことが示された。特に、認知負荷の低減とユーザビリティ指標の改善では、極めて有意な差（p < 0.01）が認められた。これらの知見は、認知設計原理と知覚的色彩モデリングの統合がUI品質の測定可能かつ統計的に有意な向上につながることを裏付けており、これにより仮説H1～H4が支持された。

指標	ベースライン（平均値 ± 標準偏差（SD）	提案（平均 ± 標準偏差（SD）	改善率 (%)	p値	意義
アライメントエラー（↓)	7.8 ± 1.2	4.2 ± 0.9	46.10%	0.003	有意な
グルーピング精度（↑)	0.68 ± 0.05	0.82 ± 0.04	20.50%	0.001	有意な
読取順序の正確性 (↑)	0.72 ± 0.06	0.87 ± 0.03	20.80%	0.002	有意な
NASA-TLX（NASAタスク負荷指数）↓)	68.5 ± 5.4	47.2 ± 4.8	31.10%	0.0005	極めて有意な
SUSスコア（↑)	71.3 ± 6.2	88.9 ± 4.5	24.70%	0.0008	極めて有意な
色彩調和指数（↑)	0.61 ± 0.07	0.83 ± 0.05	36.00%	0.001	有意な
コントラスト比（↑)	4.1 ± 0.6	6.2 ± 0.5	51.20%	0.002	有意な

表6：ベースライン手法と提案手法のパフォーマンス指標の統計的比較。 本表は、アライメント誤差、グルーピング精度、読取順精度、NASA Task Load Index (NASA-TLX)、システムユーザビリティスケール (SUS)、配色調和指数、およびコントラスト比を含む主要なパフォーマンス指標の平均値および標準偏差（平均 ± SD）を示している。改善率（%）、p値、および統計的有意水準を報告する。(↑)は値が高いほど良く、(↓)は値が低いほど良いことを示す。統計的有意性は p < 0.05 で評価した。

データセット固有の観察事項

Guoデータセットにおいて構造的メトリクスの性能が相対的に低かったことは、その固有の特性に起因すると考えられます。GuoデータセットはRICOやENRICOよりも規模が小さく、構造化されたレイアウトアノテーションよりも、主に知覚的な色特徴に焦点を当てています。その結果、コンポーネントの配置における変動性が高く、階層的な組織化が弱く、画面間でのレイアウト構造の一貫性が低いという特徴があります。これらの特性により、構造学習とレイアウト最適化がより困難となり、知覚的およびユーザー中心の評価で高い性能を示した一方で、アライメント、グルーピング、および読書順のメトリクスにおける性能低下を招いたと考えられます。

アブレーション解析

アブレーション研究では、提案フレームワーク内の各モジュールの寄与度を評価するため、個々のコンポーネントを系統的に除去し、レイアウトの品質、カラーモデリング、および検出性能への影響を分析します。レイアウト品質は、AE、GA、ROA、およびLCSを用いて評価します。AEはUI要素の位置偏差を反映し、値が高いほど空間構造が弱いことを示します。GAは、ゲシュタルト原則に従ってコンポーネントがどれだけ効果的に構成されているかを評価します。ROAは論理的な視覚的フローの保持度を測定し、LCSはアライメント、間隔、およびレイアウト構成の観点から、画面をまたぐ構造的な一貫性を定量化します。色の品質低下は、知覚的な色の差であるΔE、CHI、およびCDSを用いて評価され、これらは知覚的な均一性、審美的な一貫性、およびパレットの豊かさを総合的に評価します。検出性能はmAP、適合率（precision）、および再現率（recall）を用いて評価し、Faster R-CNNモジュールをより単純な検出モデルに置き換えた際の影響を定量化します。これらの指標を総合することで、各モジュールがシステム全体の性能にどのように寄与しているかを包括的に評価できます。

表 7に各モジュールの寄与をまとめ、提案したフレームワークと既存のUI生成手法を比較しています。フルモデルは、レイアウト品質、カラーモデリング、および検出に関するすべての指標において最高の性能を達成しており、認知設計、知覚的カラーモデリング、および深層視覚理解が相乗効果を持つことを示しています。カラーモデリングモジュールを削除すると、ΔEが大幅に増加し、一方でCHIとCDSが著しく低下します。これは、知覚的な均一性と色の調和が失われたことを示しており、美的および知覚的な品質を維持する上でCAM02-UCSに基づくモデリングが重要であることを裏付けています。認知レイアウトモジュールを削除すると、AEが大幅に増加し、GAとROAが顕著に低下します。これは、構造的に一貫性があり可読性の高いレイアウトを生成するために、認知設計原則が不可欠であることを示しています。マルチスクリーン一貫性モジュールを削除するとLCSが低下し、複数のスクリーン間で一貫したレイアウトパターンを維持する役割があることが確認されました。Faster R-CNN検出器をより単純なCNNに置き換えると、mAP、precision、およびrecallが急激に低下し、パイプライン全体において堅牢なコンポーネント検出が極めて重要であることが浮き彫りになりました。pix2code、REDRAW、LDGMを含むベースライン手法との比較において、提案したフレームワークは、レイアウトの正確性、視覚的な一貫性、および知覚的な色の品質のすべてにおいて、一貫してすべての手法を上回る性能を示しました。

手法 / モジュール	AE ↓	GA ↑	ROA ↑	LCS ↑	ΔE ↓	CHI ↑	CDS ↑	mAP ↑
カラーモジュール削除	0.14	0.86	0.92	0.84	7.85	0.61	12.4	0.9
認知レイアウトモジュール削除	0.18	0.72	0.73	0.69	4.21	0.79	17.9	0.89
マルチスクリーン一貫性削除	0.17	0.81	0.88	0.62	4.18	0.81	17.3	0.9
Faster R-CNNをSimple CNNに置換	0.16	0.85	0.91	0.85	4.15	0.82	18.1	0.74
Pix2Code	0.25	0.61	0.65	0.51	10.2	0.48	9.6	0.65
REDRAW	0.21	0.66	0.72	0.56	8.7	0.52	11.4	0.72
LDGM (Layout Diffusion)	0.19	0.74	0.79	0.63	6.9	0.59	13.8	0.8
提案フルモデル	0.12	0.89	0.94	0.87	4.12	0.83	18.7	0.91

表7：提案フレームワークとベースライン手法の切除研究および比較性能分析。本表では、提案するフルモデルを、特定のモジュール（カラーモジュール、認知レイアウトモジュール、マルチスクリーン一貫性、およびFaster R-CNNを単純なCNNに置き換えたもの）を削除した変異体、およびベースライン手法（pix2code、REDRAW、LDGM）と比較することで、個々のコンポーネントの影響を評価しています。性能は、アライメント誤差（AE）、グルーピング精度（GA）、読書順精度（ROA）、レイアウト一貫性スコア（LCS）、知覚的色差（ΔE）、色彩調和指数（CHI）、色彩多様性スコア（CDS）、および平均適合精度（mAP）を用いて評価されています。（↑）は値が高いほど良く、（↓）は値が低いほど良いことを示します。

データの可用性：

本研究で使用したデータセットは、以下のリンクから入手可能です。RICOデータセット：https://interactionmining.org/rico、ENRICOデータセット：https://github.com/luileito/enrico、Guo’s UI Color Dataset：https://github.com/guozhongke/UI-Color-Dataset

補足ファイル1. 数学的定式化および詳細な実装内容。このファイルでは、提案された自動UIプロトタイピングフレームワークを支える詳細な数学的定式化およびアルゴリズムのワークフローを提供します。これには、コンポーネント検出のトレーニング、レイアウトパターンの抽出、配色調和のモデリング、統合UIプロトタイピング目的関数、Faster R-CNN検出の詳細、空間距離およびアライメント類似度の算出、論理UIツリーの構築、CAM02-UCSに基づく知覚的色モデリング、認知設計の最適化、マルチスクリーンの一貫性モデリング、およびアルゴリズム S1–S3が含まれています。こちらのリンクをクリックしてファイルをダウンロードしてください。

ディスカッション

これらの知見は、ユーザビリティ、構造的組織化、および知覚的品質において統計的に有意な改善（p < 0.05）が認められたことを示しており、自動UIプロトタイピングに認知設計原則を組み込むことの有効性を裏付けている。視覚的な検出やルールベースのヒューリスティクスに主に依存する従来のUI生成システムとは異なり、提案されたフレームワークは、UI再構築プロセスの全体にわたって、ゲシュタルトグループ化、階層モデリング、間隔の制約、および知覚的な読みやすさを統合している。NASA-TLX、SUS、およびSETで観察された改善は、認知負荷の統計的に有意な減少（NASA-TLX, p.< 0.01）をさらに裏付けるものである。これらの結果は、自動UI生成が視覚的な再構築精度にとどまらず、実用的なユーザビリティを実現するために人間中心設計の知見を取り入れるべきであることを示唆している。加えて、策定されたすべての仮説（H1–H4）は、実験結果によって経験的に支持された。

レイアウトの改善に加え、CAM02-UCSに基づく知覚色モデリングの統合により、ΔE、CHI、CDS、およびコントラスト比の改善に反映されるように、色の調和、アクセシビリティ、および知覚的安定性において統計的に有意な向上が得られた (p < 0.05)。主に色の最適化に焦点を当てた自動画像ベースのUI配色テーマ生成などの従来研究と比較して、提案するフレームワークは、統一されたパイプライン内で色とレイアウトの両方の洗練を統合している。さらに、マルチスクリーン一貫性モジュールの導入により、シングルスクリーンUI生成のみに焦点を当てていた従来の手法の主要な制限が解消された。pix2code³¹、REDRAW^23,24、およびLDGM³²を含む既存手法との比較により、これらのアプローチは主に構造的な再構成や生成モデリングを強調しており、認知原理、知覚的な色の調和、またはマルチスクリーンの推論を組み込んでいないことが示された。提案するフレームワークは、レイアウト精度の指標（AE、GA、ROA）、知覚指標（CHIおよびΔE）、およびユーザビリティ尺度（SUSおよびCSCR）において、これらの手法よりも統計的に有意な改善を実証した (p < 0.05)。これらの知見は、認知設計原理、知覚色モデリング、およびディープラーニングを統一されたシステム内で組み合わせることの利点を強調している。

結果から得られた重要な知見は、UXに影響を与える構造的要因と知覚的要因の区別である。構造的な最適化は機能的な正確性とレイアウトの明快さを向上させる一方、知覚的な最適化（特に色の調和）は、ユーザーの知覚と認知負荷に大きな影響を与える。これらの結果は、最適なUIデザインには構造的な正確さと知覚的な一貫性のバランスが必要であることを示している。実証された改善点はあるものの、いくつかの限界も残っている。例えば、Guo UI Colorデータセットのような、より小規模で知覚的な側面に重点を置いたデータセットでは、レイアウト構成の変動や構造的アノテーションの不足により、構造的指標におけるパフォーマンスが低下する。これらの特性は、一貫したレイアウトパターンや階層関係の学習において課題となる。今後の研究では、このようなデータセットに対する堅牢性の向上に焦点を当てる。

理論的な観点から、本研究は、認知および知覚の原理をディープラーニングのワークフローに直接組み込むことで、UI生成を大幅に向上させることができることを示しています。本研究は、UI生成を単なるコンピュータビジョンやコード生成の問題とする従来の見方に疑問を投げかけています。その代わりに、知覚的一様性（CAM02-UCSによる）、認知負荷の軽減（ゲシュタルト原理と階層モデリングによる）、およびマルチスクリーン設計の一貫性を、自動UIシステムのコアコンポーネントとして組み込むことの重要性を強調しています。本成果は、UI生成において構造的な正確さだけでなく、心理的および知覚的な要因も考慮する、人間中心の計算モデルへの移行に寄与するものです。このようにして、本研究は自動デザインインテリジェンスにおける新たな理論的方向性を確立しました。

実用的な観点から、提案されたフレームワークは、UIデザイナー、プロダクトチーム、およびプロトタイピングツールに導入可能なソリューションを提供します。認知負荷を軽減し、検索効率を向上させることで、本システムはプロのデザイン基準を満たすために必要な手動の微調整を少なくて済むUIレイアウトを生成します。知覚的に最適化された配色テーマの使用により、WCAG 2.1などのアクセシビリティガイドラインへの準拠が保証され、実際のアプリケーションにおける即時のユーザビリティが可能になります。さらに、マルチスクリーン一貫性モジュールは、手動での調整を必要とせずに一貫したレイアウトとデザインパターンを維持することで、マルチページアプリケーションのより迅速な開発を促進します。総じて、このフレームワークは、生成されるデザインの品質とユーザビリティの両方を向上させつつ、UI開発時間を大幅に短縮できる可能性があります。

提案されたフレームワークは、認知設計原則、知覚的色空間モデル（CAM02-UCS）、およびマルチスクリーンレイアウトの一貫性を統一された計算パイプラインに統合することで、自動UIプロトタイピングへの人間中心のアプローチを導入します。構造的な再構成や視覚的な検出に主眼を置いていた従来の手法とは異なり、本フレームワークではゲシュタルト群化、階層構造、コントラストの最適化、および知覚的な均一性を明示的にモデル化しています。実験結果は、ユーザビリティ（SUSおよびNASA-TLX）、視覚的な調和（AHS、CHI、およびΔE）、および構造的性能（GA、ROA、LCS、およびmAP）において大幅な改善を示しており、認知および知覚的なモデリングがUIの品質とUXを向上させることが確認されました。今後の課題として、セマンティックな理解と構造的な推論を向上させるため、Transformerベースの視覚言語モデルの統合を検討します。さらに、適応的なパーソナライゼーション、デバイス対応のレスポンシブレイアウト、およびヒューマンインザループによる洗練を組み込むことで、システムの実用的な適用性をさらに高められる可能性があります。総じて、本研究は、視覚的に正確であるだけでなく、認知的に効率的で知覚的に調和し、かつ実用的な展開が可能な次世代のAI駆動型UI設計システムのための基盤を提供するものです。

材料

この記事で使用された材料の一覧

名前	会社	カタログ番号	コメント
CPU（プロセッサ）	AMD Ryzen 9 7950X (16-core, 32-thread, 4.5–5.7 GHz)	Advanced Micro Devices (AMD), USA	Ryzen 9 7950X
CUDA Toolkit	バージョン 11.8	NVIDIA Corporation, USA	CUDA Toolkit 11.8
cuDNN	バージョン 8.9	NVIDIA Corporation, USA	cuDNN v8.9
Faster R-CNN	物体検出モデル（Region Proposal Network 搭載）	Meta AI Research / Detectron2	Detectron2 フレームワーク
Matplotlib	バージョン 3.7	Matplotlib Development Team	v3.7.0
NVIDIA RTX 4090 GPU	24 GB GDDR6X グラフィックスカード	NVIDIA Corporation, Santa Clara, CA, USA	RTX 4090
NumPy	バージョン 1.24	NumPy Developers	v1.24.0
OpenCV	バージョン 4.8	OpenCV Foundation	v4.8.0
PyTorch	バージョン 2.0	PyTorch Foundation (Meta AI)	v2.0.0
FPN搭載ResNet-50	Feature Pyramid Network 搭載バックボーンCNN	Microsoft Research / Detectron2	ResNet-50-FPN
Scikit-learn	バージョン 1.3	Scikit-learn Developers	v1.3.0
SciPy	バージョン 1.10	SciPy Community	v1.10.0
システムメモリ (RAM)	64 GB DDR5	Corsair / Kingston (または同等品)	DDR5 64GB Kit
Ubuntu オペレーティングシステム	バージョン 22.04 LTS	Canonical Ltd., UK	Ubuntu 22.04 LTS