見やすい Web ページの構成法の一検討 ～リンクの階層と色についての

桑原研究室
見やすい Web ページの構成法の一検討
～リンクの階層と色についての実験的評価～
学籍番号：200403555 湯浅 雄太
200403584 小池 美佑紀
指導教員：桑原 恒夫
1．まえがき
2-1-2 色
【背景】今日、30 億ページを超えるともいわれる
Web ページの背景を白、文字は黒とし、大項目と
Web ページは日常生活でも欠かせない生活の一部
小項目の色をそれぞれ変化させ、10 種類の Web ペ
として急速に拡大してきている。また、FLASH な
ージを作成した。その各々について被験者に 7 項目
どを多用して視覚的に訴える Web ページが増加し
の主観評価をアンケートで回答してもらった。
ている。一方、企業にとっても Web ページは広報媒
2-2 被験者
体として重要であり、私たちの生活は Web ページな
しでは考えられないほどになってきている。
【従来技術】しかし、Web ページには多種多様の
デザイン、情報の構成法があり、現状では見やすく
神奈川大学情報科学科桑原研究室のゼミ生中心に
13 名を対象に実験を行った。
2-3 手順
2-3-1 リンクの深さに関する実験
探索しやすい Web ページであるための明確な様式
深さを 1 階層～3 階層まで 3 つに分けたサイトを
は決められていない。情報の構成については、ある
閲覧し、指定した箇所までたどり着くまでの時間を
程度研究されてはいるが、部分的な研究や研究者の
計測する。指定する場所は各階層の Web ページに 3
主観が多く含まれている研究例が多く、ガイドライ
問ずつ用意してあり計 9 問である。また時間を計測
ン的なものに終わってしまっていることが多い[1]。
するだけでなく、それぞれ見やすさ、疲労度、面白
また色については、色が人に与える影響は研究され
さ、
探索性についてアンケートにも回答してもらう。
ているものの、Web に関連付けての研究が進められ
被験者の Web ページを閲覧することによる学習効
た例は少ない[2]。
果の影響を排除するため、3 種類の Web ページ（小
【本研究の目的】この研究では、Web ページデザ
）
学校、動物公園、商店街 を用意した。
すい配色と適切なリンクの数について定量的な評価
表 1 のように、○、▲、×の 3 パ
ターンにわけて実験を行った。実験順序は小学校、
商店街、動物公園の順で行った。例えば○の被験者
を行うことを目的とする。
はリンク階層 1 の小学校、
リンク階層 2 の動物公園、
インの基本である色と、情報の構成法の大きな要素
であるリンクの深さに焦点をあてる。そして、見や
そして被験者を
リンク階層 3 の商店街の順に実験を行った。また、
2．実験方法
2-1 実験内容
同じパターンの被験者が隣り合わないよう、実験の
際にはバラバラの席順とした。
2-1-1 リンクの深さ
小学校
リンクの深さが及ぼす影響を数値化するためにリ
1層
ンクの深さを変えた複数の仮想の Web ページを作
2層
成した。そして被験者がその Web ページを見て、提
3層
示された質問を探し出すまでの時間を測定した。ま
たアンケート調査を行い、複数の項目について主観
評価を測定した。
表1
○
×
▲
動物公園
▲
○
×
商店街
×
▲
○
係
3 種類の Web ページとリンク階層の関 性
2-3-2 色に関する実験
被験者は提示された Web ページに対し、アンケー
地
刺激性、探
索性など７項目を 10 段階で評価するとともに、感
想を自由記述で回答してもらう。また最も見やすか
った Web ページ、最も見難かった Web ページを選
定してもらう。色の選定では、色彩体系としてマン
セル色彩体系を用いた[3]。色相環の 5Y を基準とし
て補色色相配色となる対の色を、色相を変化させて
選び出す。その際完全な補色とするものと、2 つの
明度を同一にすることを優先した対照色相配色など
平均探索時間はわずかの差で 2 階層
の Web ページが最も平均探索時間が短かった。一方、
を用いた。
主観的評価では 1 階層の Web ページや 3 階層の Web
トに答える。アンケートでは心 よさ、
図
この から、
結
3 実験 果
印
解
い 象を与えたことが る。
結
3-1 リンクの深さに関する実験 果
パターン○、
▲、×の配分が 4 人、4 人、5 人となった。実験結
果を偏りのないものとするために×のグループの 5
人のうちの 1 人の測定時間の結果は実験結果の分析
に使用することを避けた。
1 階層から 3 階層の 3 つ分の Web ページの 1 問当
たりの平均探索時間及び主観評価を図１に示す。こ
こで主観評価は 1 層から 3 層までそれぞれ「見づら
かった」と回答した人数から「見やすかった」と回
答した人数を引いたものとした。従ってより数値が
低いものが良好なものとなる。さらにその評価数値
がマイナスになるのを防ぐために 10 を足した。ま
た無回答者が 3 名あり、その人数分は結果に反映さ
実験は 13 名で行われたため 3 種類の
結
各サイトの総合得点は以下の表 2 の通りになった。
表 2 の色の表現は、マンセル色彩体系の表現法に準
じた。例えば No.1 の大項目の色 5YR7/14 であった
ら、5YR が色相、7 が明度、14 が彩度というように
「色相・明度/彩度」と表記される。また、総合得点
とは各アンケートの項目の平均値を足したものであ
る。表 2 では上から順に良い結果を示した順（点数
の良い順）に並べている。
総合得点の欄を見てみると、No.6 の Web ページ
が最良の 38、No.4 の Web ページが最悪の 43.6 と
3-2 色に関する実験 果
なった。
れていない。
Web ページ
良
ページよりも 2 階層の Web ページがはっきりと
大項目の色
小項目の色
No.6
5RP5/12
5G5/10
No.8
5Y5/8
5PB5/12
No.1
5YR7/14
5B5/8
No.5
5G5/10
5RP5/12
No.9
5B5/8
5YR5/10
No.10
5YR5/10
5B5/8
No.2
5B5/8
5YR7/14
No.7
5PB5/12
5Y5/8
No.3
5Y8/14
5PB5/12
No.4
5PB5/12
5Y8/14
表2
係
大項目と小項目の色の関 性
補色色相配色
○
○
○
○
○
○
○
○
○
照 相
対 色 配色
○
同
○
○
明度 一
○
○
○
○
総合得点
38.0
39.3
39.8
39.9
40.1
41.0
41.7
42.0
42.4
総合得点の関係性
Web ページと色、
43.6
自由記述欄からの結果では、総合得点
で最も悪かった No.4 の Web ページのアンケート自
由記述欄には「黄項目が多いと見にくい」という意
見がある一方、
「強い色ではないので疲れない」とい
った良い印象を持った意見もあった。No.4 だけでな
く、他の Web ページでも良い印象と悪い印象を持っ
た意見が入り混じっていることが多くみられた。
次に項目ごとにどれが色の影響を受けやすいのか
を分析した。
図 2 に刺激性と探索性の平均値を示す。
図 2 より探索性の最良値である No.9 の値 5.4 と、
最悪値である No.4 の値 6.3 の差は 0.9 とあまり差が
ない。しかし刺激性の最良値である No.1 の値 5.2
と、最悪値である No.5 の値 7.8 の差は 2.6 と差が大
きくでた。この他に見やすさと疲労度は 2.0、心地
よさは 1.0 の差がそれぞれ出た。
アンケート
比較すると、1 問目で
は階層ごとに合計探索時間に差が出ているが、2 問
目 3 問目と進むにつれて時間がほぼ同じになってい
く。このことから、データ量がほぼ同じの Web サイ
ト上でリンク階層が違うだけなら、慣れてしまえば
探索にかかる時間はほぼ同じだという仮説が見出せ
また、3 つの Web ページを
た。
次に項目別でのアンケート結果にも着目してみた。
その結果を図 4 に示す。図 4 では点数が低いほど良
く、高いほど悪い Web ページだと判断される。
察
4 考
察
ここでは、さらに詳細な問題について調査するた
めにすべての問題の回答結果を Web ページ別及び、
それらを 1 問目～3 問目別に分け、それぞれの合計
探索時間を分析した。その結果を図 3 に示す。
どのリンク階層の Web ページでも比較的 1 問目
に時間がかかり、2 問目以降では探索時間が短縮し
ていく傾向が見られた。これには Web ページに慣れ
が生じていると考えられる。
4-1 リンクの深さについての考
ここで 1 階層の Web ページは 1 問目と 2 問目の
差が大きく、最初は探索が困難だったことがわかる。
これが 1 階層の Web ページの主観評価が悪かった
原因かもしれない。
注 み
イトのみが突出して優れているという結果がでた。
つまりリンク階層が深すぎても浅すぎても探索性に
は影響を及ぼし、適度なリンクの深さを保つことが
Web ページには求められるという仮説が見出せた。
また、最も疲労するという回答を得た Web サイト
は最も階層の浅い 1 階層の Web ページであった。
1 階層と 3 階層では探索性は同じでも、疲労度は
大きく異なることがわかる。
このように Web ページの探索ではほぼ同じ情報
量の Web ページでもそのリンク階層によってユー
ザー主観評価には大きく差が出ることが明らかとな
ここで探索性に 目して ると 2 階層の Web サ
った。
察
4-2 色についての考
組み合わせについて
考察してみる。表 2 に着目すると最も総合得点でよ
かった No.6 の色の組み合わせで、大項目小項目の
色を逆転させた Web ページは No.5 である。No.6
と No.5 の 総合得 点を見 て み る と 上位 に お り、
5RP5/12 と 5G5/10 の組み合わせは比較的見やすい
色の組み合わせであるということがわかった。逆に
最も総合得点が悪かった No.4 の大項目と小項目の
色を逆転させた Web ページは No.3 である。No.3
は 下 から 2 番目に 総合得 点が 悪 く、 5PB5/12 と
5Y8/14 の組み合わせは今回の実験ではあまり良い
色の組み合わせではないということがわかった。
色の明度について考えてみると、大項目と小項目
の明度が同じ Web ページは 10 ページ中 6 ページあ
り、そのうち 4 ページが上位 5 番目の中にいる。こ
のことから、明度を固定したものの方がより全体的
な印象は良いという仮説がたつ。しかし、この実験
まずは大項目と小項目の色の
では明度 5 の時でしか実験を行っていないことから、
他の明度の時どのような実験結果になるかは不明で
ある。
自由記述欄からは、様々な意見が 1
つの Web ページに入り乱れていた。これより、デー
タでは測れない主観評価があることがわかった。ま
た、図 5 に総合的にみてどの Web ページがよかっ
たかというアンケート結果を示す。最も総合点数が
よかった No.4 でも最も見難かったという回答が 1
つ出ている。図 5 より、見やすい色は個人によって
大きく異なることを示している。
アンケートの
図 5 最も見やすい・見にくい Web サイトの統計
■　最も見やすい
Web ページ
と回答した人数
□　最も見にくい
Web ページ
と回答した人数
2
3
1
0
1
3
0
1
0
1
1
無回答
No.10
No.9
No.8
No.7
No.6
No.5
No.4
No.3
No.2
No.1
うに影響するものではないということ、主観的な評
刺激性は色の影響を人に与えることが多く、
探索性はあまり色の影響を受けないという仮説が見
価では
出せた。
5
まとめ
結
共通していえることは、人間
2 つの実験 果より
感
準
が、個人的なばらつきもみられるということだ。
の 性は一定の基 で示すことができることもある
リンクの階層についての実験では、Web ページを
一定時間閲覧することによる学習効果により、探索
左右されるという仮説が見いだせた。一方色の
実験においては、一般的に見やすい色の組み合わせ
が明らかとなり、さらに明度を固定したものの方が
全体的に良い印象をうけるのではないかという仮説
が見いだせた。さらに主観的な探索性に限って言え
ば、色はあまり探索性に影響することは少ないが刺
激性には大きく影響をしていることが解った。
一方、Web ページを閲覧する各個人の閲覧の仕方
や学習能力、そして感性などによって総合的な印象
性が
は変わってくることもこの実験で明らかとなった。
今回は対象を小学校や動物公園などにし、情報量
限
も 定しての実験であった。情報量がさらに多くな
章
雑
合
り、リンク構成や文 項目が複 化してきた場 、
別 結
もっと の 果が出るかもしれない。様々な情報量
持
望
を つ Web サイトで実験を行っていくことが ま
しいと考える。
2
0
1
1
2
0
1
4
0
1
1
最近では自分の好みによってテーマカラーが選べ
るポータルサイトが多くなってきているが、文字の
色まで視野に入れ、ユーザーによって大項目と小項
目の色まで変化させることが望ましいように思う。
また図 2 より人間の感性すべての人に色は同じよ
[1] 村田 厚生、森若 誠、
ウェブ画面の見やすさに関する若年者と高齢者の違い
－文字の大きさ、グループ化、画面密度、アイテムの設置方
法、リンク情報の分かり易やすさの影響－、
電子情報信学論 D vol.J90-D No.3 pp.788-797 (2007)
[2]北尾 和彦、杉田 慶子
ホームページによる情報の発信とビジュアルコミュニケー
ション・デザインの見地からの評価～大阪府下自治体の IT
への取り組みと実態について～、
2003 年大阪樟蔭女子大学論集 40 号、pp.103-118
[3]清野 恒介、島森 功
「配色辞典」新紀元社（2006）