研究紹介の一覧へ戻る

進行中2025年4月 〜修士研究

Webサイトの解釈可能な視覚統計量に基づく
審美性の定量評価モデルの提案

Webサイトの第一印象は一瞬で定まり、それが後のそのサイトの体験に深く影響します。この原理を機械学習などの不確定なものではなく定量的に評価を行うことで審美性を数値で表現できることを目指しています。

Webサイトの解釈可能な視覚統計量に基づく審美性の定量評価モデルの提案

この研究のポイント

  • Webサイトの第一印象を定決定する定量指標について独自の12指標を提案しました
  • 指標により寄与度を分析した結果複雑さが第一印象に深く影響することが分かりました

中間発表以前の内容はこちら →

Webサイトの解釈可能な視覚統計量に基づく審美性の定量評価モデルの提案[中間]

背景

Webページの視覚的な印象は提示から50ms程度で形成されると言われており1、その後の使いやすさや信頼性の評価にまで影響することが知られています2。 この印象を決める要因を特定できれば、制作者は根拠をもった効率的なデザインをすることができます。

Web デザインには,コントラスト・反復・整列・近接(CRAP)といった原則3をはじめ良いデザインの経験則が数多く蓄積されています。しかし、これらは経験則によるものであり、どの原理がどの程度評価に寄与するのかは,大規模なデータで確かめられていません。

どちらが直感的に「良さそう」なWebサイトでしょうか?言語化できますか?

サンプルサイト2つの比較画像
図1サンプルサイト比較4

目的

先行研究では以下の問題点があります

  • 色彩・複雑さの効果は先行研究5で確認されているが、説明できる範囲は限定的
  • CRAP などの原則は、計算可能な形で検証されていない
  • 視覚統計量間には相関があり、個々の有意性と実際の寄与は一致しない
  • 深層学習は高精度だが、判断根拠の要素を言葉や数値で説明できない

本研究は、デザイン原則を画像から自動計算できる視覚統計量(以下、指標)へ翻訳し、大規模な審美評価データとの線形回帰によって審美性を定量評価するモデルを構築することを目指します。

手法

以下のステップで行いました。

  • 視覚統計量指標への変換:既存研究で効果のあった色彩・複雑さに加え、説明力の高い独自の10指標を選定しました
  • 実測結果との線形回帰分析:12指標の線形モデルで実測審美評価とデータセットで検証しました
  • 寄与度の分析:各変数がどの程度審美評価に影響を及ぼしているかをShapley値による分析を行いました

手法全体のフロー図

指標には以下のような値を用いました

  • 圧縮複雑度:JPEGの符号量 / 画素数
  • 明度エントロピー:明暗の階調の幅広さ
  • タイポグラフィ(サイズ):文字の高さのばらつき
  • 要素数:エッジ分析による検出したUIの個数

などを12個の指標を標準化し、重みをかけて足し合わせました。

結果

交差検証

12指標の線形モデルで CV(Cross Validation、交差検証) R2=0.569R^2=0.569を達成しました。

CVR^2=0.569、r=0.773の棒グラフ
図2交差検証の結果

交差検証で R2=0.569R^2=0.569 の精度を達成しました(予測相関 r=0.773r=0.773)。

別の審美評価大規模データセットを適用したところ予測相関は r=0.591r=0.591 で有意でした。

寄与度分析

R2R^2寄与の割合(Shapley値による配分)は以下の図の通りです。

寄与度の棒グラフ、周波数の傾きが24.3%で大きい
図3R2R^2寄与度分析の結果

複雑さの寄与、次いで明度階調の寄与が大きく影響しています。赤い部分が一番説明力を持つ複雑さの指標群です。

注意したいのは、単純に1指標が説明するのではなく指標同士の相関により結果的に説明変数としての寄与度が高いのが上位に並んでいるというところです。

まとめ

  • 解釈可能な12個の視覚統計量と線形回帰で、CV R2=0.569R^2=0.569、深層学習の既報と同水準の予測相関 r=0.773r=0.773 を達成しました。
  • 説明力の約半分を周波数の傾き等を含む「複雑さ」の指標が占めていることがわかった。
  • 第一印象を説明する理論的枠組みを整理し直し、指標の拡張と吟味を続けます。

2026年度の修士論文の研究です。

参考文献

  1. G. Lindgaard, G. Fernandes, C. Dudek and J. Brown, Attention Web Designers: You Have 50 Milliseconds to Make a Good First Impression!, Behav. Inf. Technol., 25(2), 115–126 (2006) ↩

  2. N. Tractinsky, A. S. Katz and D. Ikar, What is Beautiful is Usable, Interact. Comput., 13(2), 127–145 (2000) ↩

  3. R. Williams, The Non-Designer’s Design Book, Peachpit Press (1994) ↩

  4. K. Reinecke and K. Z. Gajos, Quantifying Visual Preferences Around the World, Proc. CHI 2014, 2905–2914 (2014) ↩

  5. K. Reinecke, T. Yeh, L. Miratrix, R. Mardiko, Y. Zhao, J. Liu and K. Z. Gajos, Predicting Users’ First Impressions of Website Aesthetics with a Quantification of Perceived Visual Complexity and Colorfulness, Proc. CHI 2013, 2049–2058 (2013) ↩