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

サマリー

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

要約

効果的なユーザーインターフェース（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エポックまで学習を行いましたが、通常は検証損失に基づく早期停止によって、より早い段階で収束しました。モーメンタムおよび荷重減衰（weight decay）は、それぞれ0.9および0.0005に設定しました。データ拡張には、正規化、ランダムな水平反転、およびランダムなクロッピングとリサイジングを含めました。

データセットの準備

提案された自動UIプロトタイピングフレームワークを支援するため、ENRICO²⁹、RICO³⁰、およびGuoのUI Color Dataset¹という3つの相補的なデータセットを利用した。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ピクセルの解像度に正規化され、統一されたsRGB色空間に変換された後、データセット間での互換性を確保するために、標準化されたバウンディングボックスと階層的メタデータを用いて再アノテーションを行った。本研究で使用したデータセットの概要をTable 2に示す。RICOデータセットはUIコンポーネントの大規模な検出と構造分析をサポートし、ENRICOはレイアウトパターンの認識能力と画面をまたいだ一貫性の強制力を向上させる。GuoのUI Color Datasetは、規模こそ小さいものの、知覚的な色の調和およびコントラストモデリングを評価する上で重要な役割を果たす。これらのデータセットを統合することで、提案した自動UIプロトタイピングフレームワークのトレーニング、検証、および評価のための、包括的かつバランスの取れた基盤が提供される。

データセット	利用可能な全画像数	研究に使用した画像数	提案フレームワークにおける目的
RICO Dataset30	66,261	4,000	UIコンポーネント検出、構造レイアウト抽出
ENRICO Dataset29	1,464	1,000	デザインパターンの学習、レイアウト一貫性のモデリング
Guo’s UI Color Dataset1	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%で構成される検証セットを用いて早期終了（early stopping）を適用した。

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

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

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

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）を用いて定義されます。トレーニング時、グランドトゥルースボックスとの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コンポーネントを検出する過程を示している。バウンディングボックスを用いて関心領域（ROI）を特定し、Faster R-CNNを用いてボタンやテキストフィールドなどの要素を分類する。矢印は、検出されたコンポーネントとそれに対応するセマンティックラベルとのマッピングを示している。こちらのリンクをクリックして、この図の拡大版を表示してください。

レイアウトパターンの抽出および階層モデリング

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

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

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

レイアウトグループを特定するために、DBSCANを適用します。DBSCANでは2つのパラメータを使用します：(1) ε = 近接コンポーネント間の最大距離、および(2) = クラスターを形成するために必要なコンポーネントの最小数です。本解析において、DBSCANのパラメータは、正規化されたUI解像度（480 × 800 pixels）に基づいて経験的に選択されました。隣接する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コンポーネントの配置、グループ化、および間隔を誘導します。認知設計の最適化に関する詳細な数式は、補足ファイル1に記載されています。

統合的な認知最適化目標

統合的な認知最適化目的関数の数式は、Supplementary File 1に記載されています。 視覚的グループ化、インタラクション効率、および意思決定の複雑性の重要性を表す係数を、それぞれalpha、beta、gammaで示します。本研究では、検証データセットを用いてalpha、beta、gammaの値を経験的に決定しました。今回の実験では、係数を α = 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から得られた128枚の色注釈付きUIサンプルです。この混合データセットは、コンポーネント検出の精度、レイアウト構造の明瞭性、複数画面間の一貫性、および知覚的な色彩調和を評価するための、バランスの取れたベンチマークを提供します。

実験結果により、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 (LR = 1e−4, Weight Decay = 0.01)
エポック数	40
色モデル空間	CAM02-UCS
パレット抽出用クラスタリング	K-means (k = 5)
レイアウトクラスタリング	DBSCAN (ε = 20, min_samples = 3)

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

Faster R-CNNアーキテクチャでは、ResNet-50バックボーンとFPNを採用し、広範囲にわたる詳細なUIコンポーネントを検出しています。すべての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コンポーネントを識別するモデルの能力を測定します。再現率が高いことは、モデルがほとんどの正解（ground-truth）コンポーネントを正常に検出していることを示します。適合率と再現率の調和平均として定義されるF1スコアは、バランスの取れた評価を提供し、特にデータセット内でUIコンポーネントが不均等に分布している場合に有用です。

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

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

データセット	適合率	再現率	F1スコア
RICO	0.91	0.88	0.89
ENRICO	0.87	0.84	0.85
Guo	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. 各データセットにおける、0.5から0.95のIoU (intersection over union) 閾値で平均化した平均適合精度 (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）。

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

図7. 複数のデータセットにおける評価ステージごとの読書順精度。折れ線グラフは、RICO、ENRICO、およびGuoの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）です。これらの指標を合わせることで、審美的な品質とユーザビリティ重視の色彩性能の両方について包括的な評価が可能になります。結果として、提案手法は4.12という低いΔE値を達成し、色間の知覚的な均一性が向上していることが示されました。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)	前景・背景ペアの視認性	6.21	4.38	41.80%
CHI (Color Harmony Index)	色相および彩度の調和	0.83	0.61	36.10%
CDS (Color Diversity Score)	J′a′b′空間における分散	18.70	12.40	50.80%
CPS (Color Prominence Score)	支配色の安定性	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スコアとなり、精神的努力が軽減されたことが示されました。この改善は、ゲシュタルトのグループ化、最適化された間隔、および強化された視覚的階層を含む認知設計原則の統合によるものであり、これらが collectively（総合的に）より直感的なナビゲーションを促進しています。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タスク負荷指数（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が支持された。

指標	ベースライン (Mean ± SD)	提案手法 (Mean ± 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 (↓)	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タスク負荷指標（NASA-TLX）、システムユーザビリティスケール（SUS）、色彩調和指標、およびコントラスト比を含む主要なパフォーマンス指標の平均値と標準偏差（mean ± SD）を示している。改善率（%）、p値、および統計的有意水準が報告されている。(↑)は値が高いほど良好であることを示し、(↓)は値が低いほど良好であることを示す。統計的有意性は p < 0.05 で評価した。

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

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

アブレーション研究

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

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