修士論文

Webサイトにおける面積比率による色彩効果 ‐トップページの印象と注目率‐

情報学研究科 情報学専攻

A6G51002 深野恵里子

Webサイトにおける面積比率による色彩効果‐トップページの印象と注目率‐

情報学研究科 情報学専攻 A6G51002 深野恵里子

概要 今日、ADSL や光ファイバーなどの高速回線の普及により、インターネットはさらに身近なものになっている。多くの企業や政府機関がWebサイトを持ち、ブログが登場し、個人でも簡単に作れるようになり、Webサイトを所有する人が増えている。 Webサイトを見るときに、最初に目にするのはトップページではないかと思う。Webサイトの玄関、いわば、「顔」といえる。

Webサイトにもさまざまなタイプがある。色や配置、その面積比率によって、どう印象や注目する場所が変化するのか。 デザインにおいて、色の良し悪しは配色によるところが大きい。面積によっても色の見えは変

化する。 本研究では、Webサイトを簡略化したサンプルを用い、配色による印象を検証してみる。明度

の差による印象の変化を調べるために、サンプルにはモノクロの画像を使用することにした。

目次 1. 序文…………………………………………………………………………………………………… 1 2. 色彩とレイアウトの効果…………………………………………………………………………… 1

2.1 色の分類………………………………………………………………………………………… 1 2.2 色の見えとは…………………………………………………………………………………… 2 2.3 配色とは………………………………………………………………………………………… 2

3. 研究の目的と手法…………………………………………………………………………………… 3 3.1 アンケートによる調査………………………………………………………………………… 3 3.2 調査の方法……………………………………………………………………………………… 3 3.3 提示したサンプルの説明……………………………………………………………………… 4 3.4 調査結果および考察…………………………………………………………………………… 7

4. まとめ…………………………………………………………………………………………………24

1

1. 序文 今日、パソコンとインターネットが普及したことで、行政や企業、個人などさまざまな場面で

Web サイトは使用されいる。行政による Web サイト上での手続きなどが行われ、企業では商品サポートや懸賞の応募などもある。ブログが登場し、Webサイト製作ツールを使って簡単に作れるようになり、個人でもWebサイトを持つ人が増えてきている。 Webサイトを見る際に最初に目にするのは、検索などでたどり着いた場合いきなり本文に移ることもあるが、おそらくトップページと呼ばれるところではないかと思われる。いわゆる、Webサイトの「顔」である。そのWebサイトの最初の印象を左右するページとも言えるかもしれない。近頃では、最初に Flash画像を使用しているサイトもあるので、次に目にするページとも言えるかもしれないが、実際に使用するという意味ではトップページが始まりのページだと思われれる。

企業でも個人でも内容にあったWebサイトを作ることは重要なのではないだろうか。例えば、病院など清潔なイメージが大切な機関が黒い背景を使っていたりすると、変わっているといえば、

確かにそうだろう。印象にも残るかもしれない。しかし、問題はその先である。果たして、商業

用のサイトなら使おうと思うかどうか、個人用ならば、内容まで読もうと思うかということであ

る。 私たちはそれをどう捉えるのだろうか。ある程度、Webサイトを作る上での法則というのが存在していると思われる。本研究はWebサイトにおける”配色とレイアウト”という特定の条件に限定された視点から Web サイトのデザインにおける好感度と注目率を模索するための基礎研究である。 2. 配色とレイアウトの効果 2.1 色の分類

人間が識別できる色は一般には約 750万~1000万といわれている。 色には、赤、黄、青、緑、紫などのように色味のある色と、白、黒、グレイなどの色のみの

ない色とがある。色みのある色を有彩色、色味のない色を無彩色という。すべての色は、この

2つのグループに分類することができる。 色を構成する要素は「明度」「彩度」「色相」である。3要素といわれているものである。

「明度」とは色の明るさのことで、度数で表現される。これは光の量によって決まる。目に入

ってくる光の量が多くなるほど、白っぽく明るい色になり、光の量が少なくなるほど、黒っぽ

く暗い色になる。 「彩度」とは色の鮮やかさのことで、これも度数によって表現される。彩度が低くなると、白

っぽく見えたり、くすんで見える。明度の場合は光の量が多くなるほど度数が高くなるが、彩

度の場合は白い光の量が増えるほど度数は低くなる。 「色相」とは赤や青、黄色といった色みの違いのことで、色の名前で区別することができる。

2

2.2 色の見えとは 現実の色は、見るもの（対象）、見る人（知覚する個人）、明るさ（照明光）の 3 条件が整う

ときに見える(認知)。(注 1) 色彩に関する感覚は当然ながら、個人によって違いがあり、ある人が好ましいと思うもので

あっても、別の人には好ましくないと思うこともあるだろう。「色の見え」とは、色を個人的に

どう認めるかということを一般化して考えることである。(注 2) 私たちがものを見るとき、あるものだけを単体で見ることはまずない。ほとんどの場合、周

囲の色と一緒に見ている。たとえば、皿に盛られた料理、料理の色だけでなく、器の色も考慮

されている。 色が他の色に影響されて、本来の色とは多少異なった見え方をする現象を「色の対比」と呼

んでいる。色の対比は色を見るときの見方によって「同時対比」と「継時対比」に分けられる。

「同時対比」とは 2 つの色を同時に見るときに起こる対比現象のことである。つまり『ある色が同時に見えている周りの色に影響されて、その色を単独で見る場合とは多少異なって見える

現象』(注 3)のことである。同時対比には「明度対比」「彩度対比」「色相対比」「補色対比」「縁辺対比」などがある。「継時対比」とは 2つのものを順次見ることで起こる対比現象のことである。つまり、『ある色をしばらく見続けた後に目をほかのものに移すと、先に見ていた色の影響

を受け、次に見た色が異なって見える現象』(注 4)のことである。 2.3 配色とは

配色というものは、「2色以上の色の組み合わせ」である。色の取り合わせであり、配色の仕方によってデザイン性を高めることが出来る。デザインにおいて、色が良い悪いは配色による

ことが多い。色自体には良し悪しはない。配色というのは、色の取り合わせを美的に演出する

技術であるという。これは、さまざま分野で使用されている。インテリア、建築、グラフィッ

クデザインなどが挙げられる。これらの配色の構成要素には、共通した法則性がある。それは

配色を選ぶ上で必要な基礎知識となっており、主に面積に比例するという。 網膜にはごく小さな面積では黄色と青色の色覚を失う性質がある。黄色が白に色が飛んでし

まったり、青が黒に見えたりすることがある。さらに面積が小さくなると、その色も無彩色化

してしまう。これらの現象は視力に関係なく起こるものである。したがって解像度、つまり細

かいところまで見えるかどうかにかかわる性質ではなく、視角による色の見えにかかわる性質

である。 同じ色でも面積の大きい小さいによって、明るさや鮮やかさが異なって見える。たとえば、

壁紙などを選ぶときに見本帳で見ていた色と実際に壁に貼ったときの印象が違う、といったこ

とを経験したり、聞いたりしたことはないだろうか。これが「色の面積効果」である。 この現象は「色を見る距離は関係なく、視角、視野で対象が占める割合にかかわって生じる

が、研究によるとそれは無限に生じる現象ではなく、だいたい視角が 20°あたりまでの範囲に生じる。その視角の範囲内では、対象が視野に広い面積を占めるほど、彩度が上がって見える。

だが、その範囲を超えると、かえって彩度の低下が認められる。」（注 5）

3

3. 研究の目的と手法 3.1 アンケートによる調査 今回の調査では明るさと面積によって受ける印象と注目する場所が変わるのかを検証してみる

ことにした。色相による印象の違いは個人によって差が大きく、主観的な要素であり、大きく異

なる。色相の与える印象に対する過去の研究は存在するが、時代や流行によってもその好みは大

きく変わってくるため、今回は適当でないと考えた。したがって、色相の要素を除外し、明度差

による配色のサンプルを取り上げた。 3.2 調査の方法 大学生 63名に、アンケート調査を行った。被験者は文教大学情報学部 2007年度秋学期受講生(2年生から 4年生)を対象にした。 サンプルはパソコンの画面に表示し、アンケートはすべて選択式で、提示したサンプルから質

問項目に最も適していると思われるサンプルを 1つずつ選んで答えてもらった。 アンケートの設問は、問 1．賑やか 問 2．静か 問 3．目を引く 問 4．地味 問５．暖かい

問 6．冷たい 問 7．明るい 問 8．暗い 問 9．うるさい 問 10．落ち着く 問 11．最初に目が行くのはどこか 問 12．1番いい(好き)だと思うもの 問 13．自分のホームページを作るとしたら、どのタイプにするか、である。問 1、2、9、10は動静、問 3、4は注目度、問 5、6は温感、問 7、8は明暗、問 11はサンプルごとの注視度、問 12および 13は好みを問う設問として設定した。 3.3 提示したサンプルの説明 サンプルには上下に分割したものの

下部を 2 分割したものを使用し、それぞれを白、淡グレー、濃グレーで色分

けしたものと、白、黒、グレーのみで

構成したものを使用することにした。3つに色分けしたサンプルの中で、似た

ようなタイプで同じような回答が予想

されるのものはまとめて 6 種類とし、単色のみのサンプルをあわせて９種類

とした。明るさによる比較ということ

で、本調査では色相や彩度を除外し、

モノクロの画像を使用することにした。

その際、イメージが湧きやすいように、

実際のWebサイトの画像を添付することにした。 以下に、アンケートに使用したサンプルとWebサイトの画像を示す。

表 3-3-1 サンプル一覧

4

サンプル①

図 3-3-1 サンプル画像①とWebサンプル①

サンプル②

図 3-3-2 サンプル画像②とWebサンプル②

サンプル③

図 3-3-3 サンプル画像③とWebサンプル③

https://www.izutsuya.co.jp/

井筒屋

引用日 2007/12/5

http://www.ds-base.com/

dive station base

引用日 2007/12/5

http://www.snowboard-senmon.com/

スノーボード専門ドットコム

引用日 2007/12/5

5

サンプル④

図 3-3-4 サンプル画像④とWebサンプル④

サンプル⑤

図 3-3-5 サンプル画像⑤とWebサンプル⑤

サンプル⑥

図 3-3-6 サンプル画像⑥とWebサンプル⑥

http://outdoor.geocities.jp/

outdoor_life2006/top.html

北海道教育大学岩見沢校ワンダーフォーゲル部

引用日 2007/12/5

http://newsit.blog54.fc2.com/blog-

date-200609.html

ハイウェイパトロールマン

2007/12/5

http://www.family.co.jp/

ファミリーマート

引用日 2007/12/5

6

サンプル⑦

図 3-3-7 サンプル画像⑦よWebサンプル⑦

サンプル⑧

図 3-3-8 サンプル画像⑧とWebサンプル⑧ サンプル⑨

図 3-3-9 サンプル画像⑨とWebサンプル⑨

http://www.geocities.jp/q_wv/

九州大学ワンダーフォーゲル部

引用日 2007/12/5

http://classic.music.coocan.jp/book/sekaishi

bourgogne/brg-history.htm

Kenichi Yamagishi's Web Site

2007/12/5

http://www.tivoli.co.jp/

倉敷チボリ公園

引用日 2007/12/5

7

3.4 調査結果および考察 アンケートで得られた結果を項目ごとにまとめたものを示す。なお、サンプル番号はすべての

項目で共通である。 問1 賑やか

1 位はサンプル⑨で 14 票、得票率は 22.2％、2 位はサンプル⑥で 11 票、17.5％、3 位はサンプル②と③で 8 票、12.7％、4 位はサンプル①で 6票、9.5％、5位はサンプル⑤で 3票、4.8％、6位はサンプル④と⑦で 2票、3.2％、最下位はサンプル⑧で 1票、1.6％という結果になった。 上位の 1位、2位、3位のサンプル⑥、サンプ

ル⑥、サンプル③は面積の大きな右側に白のあ

るタイプである。同じく 3位のサンプル②のみ、右側に淡いグレーのあるタイプであった。

4位、5位、6位になったサンプル①、サンプル⑥、サンプル④は右側に濃グレーもしくは黒

のあるタイプである。同率 6 位のサンプル①と最下位のサンプル⑧は右側が淡グレーであった。 ここから読み取れる傾向としては、白の面積の多いサンプルが「賑やか」と認識されやすく、

一部例外はあるが、淡グレーの面積が多いサンプルは「賑やか」とは認識されにくいと思われ

る。

表 3-4-1 問 1結果一覧

図 3-4-1 グラフ（問 1）

8

問2 静か 1位はサンプル⑧で 13票、得票率は 20.6％、

2位はサンプル⑥で 10票、15.9％、3位はサンプル①で 8票、12.7％、4位はサンプル②で 6票、9.5％、5位はサンプル⑤と⑦で共に5票、7.9％、6位はサンプル③と④で、4票、6.3％、最下位はサンプル⑨で 3票、4.8％といった結果になった。 サンプル⑧はグレーのみ、サンプル⑥は白

のみ、サンプル①は濃グレー、サンプル②は

淡グレー、サンプル⑤は黒のみ、サンプル⑦

は淡グレー、サンプル③は白、サンプル④は

濃グレー、サンプル⑨は白が主要な色となっ

ている。 同じ白を使ったサンプルでも単色の⑥は 2

位、③は 6 位、サンプル⑨は最下位となっていることから、ほかの色が入ると、印象が変わるということが伺われる。グレーも白よりも変化は乏しいが、グレーのみのサンプル⑧は 1位、②は 4位、⑦は 5位となっている。 このことから、3色使用しているサンプルよりも単色で構成されたサンプル、その中でも、グレーや白といった明度の高い色のほうが「静か」と認識されやすい傾向がある。

表 3-4-2 問 2結果一覧

図 3-4-2 グラフ（問 2）

9

問3 目立つ 1 位はサンプル⑤で 27 票、得票率 42.9％、2位はサンプル⑥で 7票、11.1％、3位はサンプル②と③と④が同率で 6 票、9.5％、最下位はサンプル①と⑨で 4 票、6.3％という結果になった。サンプル⑦と⑧を選択した被験者はい

なかった。 1位になったサンプル⑤はすべて黒、2位に

なったサンプル⑥はすべて白であった。3位となった３つはそれぞれ違うタイプのサンプル

だった。サンプル②は淡グレー、サンプル③は

白、サンプル④は濃グレーが主要色として使わ

れているものであった。4位はサンプル④が濃グレー、サンプル⑨が白、1票も入らなかったサンプル⑦と⑧は共に淡グレーが多く使われたものであった。 得票率はサンプル⑤が 42.9％と圧倒的に多く、ほかに 10％を超えるのは 2位のサンプル⑥

のみである。黒のみ、白のみのサンプル、白や濃グレーを多くサンプルが上位に、淡グレー

を多く使ったサンプルは下位になる傾向があると思われる。ことから、どちらかといえば、

はっきりした色が多く使われているほうが目立つと感じるようである。

図 3-4-3 グラフ（問 3）

表 3-4-3 問 3結果一覧

10

問4 地味 1 位はサンプル⑧で 39 票、得票率 61.9％、2位はサンプル⑥と⑦で 3票、4.8％、3位はサンプル①と⑨で 2 票、3.2％、最下位はサンプル③、④、⑤が同率で 1 票、1.6％となった。サンプル②を選んだ被験者は 1 人もいなかった。 サンプル⑧はグレー、サンプル⑥は白のみ、

⑦は淡グレー、サンプル①は濃グレー、⑨は白、

サンプル③は白、④は濃グレー、⑤は黒のみが

主要色である。 この設問ではすべての設問の中でもっとも

複数回答率が高かった。それだけ 1つに絞るのが困難だったと思われる。複数回答の中ではサ

ンプル⑧と⑦が同率で得票数が多かった。どち

らも、淡グレーが多く使われているサンプルで

ある。 サンプル⑧が圧倒的に得票数が多かった。2

位以下はすべて 5％に満たないという数値になっている。 このことから、もっとも地味と受け取られるサンプルはグレーのみを使ったものであると

思われる。

表 3-4-4 問 4結果一覧

図 3-4-4 グラフ（問 4）

11

問5 暖かい 1 位はサンプル⑨で 14 票、得票率 22.2％、

2 位はサンプル⑦で 12 票、19.0％、3 位はサンプル⑥で 7票、11.1％、4位はサンプル①と③と④が同率で 6 票、9.5％、5 位はサンプル②で 5票、7.9％、最下位はサンプル⑧で 2票、3.2％という結果になった。サンプル⑤には 1票も入らなかった。

1位のサンプル⑨は白、2位のサンプル⑦は淡グレー、3位のサンプル⑥は白のみ、4位のサンプル①は濃グレー、③は白、④は濃グレ

ー、⑤は淡グレーが主体のサンプルである。

最下位の⑧はグレーのみの構成となっている。1 票も入らなかったサンプル⑤は黒のみのものであった。 白が右部にある場合、左側に濃グレーのある③よりも左側に淡いグレーのある⑨のほうが、

グレーが右部の場合、左側に白があるよりも濃グレーが左側にあるほうが、得票率は高かった。 1 位と 2 位に集中しているようだが、票はだいぶ割れたように思われる。４位に 3 つのサン

プルが入るなど、接戦になったようだ。複数回答がなかったが、無回答は多めで、選出が難し

かったようである。 どちらかというと、白や淡グレーといった薄めの色が選ばれている傾向があるが、その一方

でサンプル②やサンプル⑧などが下位にあるなど、一概には言えない結果となった。また、黒

やグレーのみというサンプルは温かみを感じにくいようである。

表 3-4-5 問 5結果一覧

図３-4-5 グラフ（問５）

12

問6 冷たい 1 位はサンプル⑤で 20 票、得票率 31.4％、2位はサンプル⑥で 9票、14.3％、3位はサンプル④で 8票、12.7％、4位はサンプル①と⑧で 6票、9.5％、5位はサンプル③で 5票、7.9％、6 位はサンプル⑦で 3 票、4.8％、最下位はサンプル⑨で、1票、1.6％という結果となった。サンプル②に票を入れた被験者はいなかった。 1位のサンプル⑤は黒のみ、2位のサンプル⑥は白のみ、3 位のサンプル④は濃グレー、4位のサンプル①は濃グレー、同じくサンプル

⑧はグレーのみ、5位のサンプル③は白、6位のサンプル⑦は淡グレー、最下位のサンプル

⑨は白が主体の構成となっている。1票も入らなかったサンプル②は淡グレーが多く使われている。 この結果から、黒はより「冷たい」という印象をもたれやすいということが得ると思われる。

黒に近い濃グレーが多いサンプル①と④も上位にある。白や淡グレーを多く使ったサンプルは

濃いものを使ったサンプルより下位にある。その中でも淡グレーを使ったものは冷たさを感じ

にくいようである。白を使ったものでも単色の⑥は 2 位に位置していることから、単色のほうが効果が強まる傾向が見受けられる。

表 3-4-6 問 6結果一覧

図 3-4-6 グラフ（問 6）

13

問7 明るい 1 位はサンプル⑥で 18 票、得票率 28.6％、2 位はサンプル⑨で 15 票、23.8％、3 位はサンプル①で 9票、14.3％、4位はサンプル②と③で 4票、6.3％、5位はサンプル⑦で 3票、4.8％、最下位はサンプル④で3.2％となった。サンプル⑤と⑧には 1票もはいらなかった。 もっとも得票率が高かったサンプル⑥は白

のみで構成されているものである。しかし、

得票率は 28.6％でそれほど伸びず、問 8の「暗い」に比べるとばらつきが出ているように思

う。2位のサンプル⑨は右部に白、上部に濃グレー、左部に淡グレーのあるものだった。3位のサンプル①は濃グレー、4位のサンプル②は淡グレー、同じく 4位のサンプル③は白、5位のサンプル⑦は淡グレー、最下位のサンプル④は濃グレーが主要色である。1 票も入らなかったサンプル⑤は黒のみ、サンプル⑧はグレーのみで構成されたサンプルだった。 単色のサンプルは 1 位になった⑥を除けば、選んだ被験者はいなかった。黒のサンプル⑤は

予想していたが、グレーのサンプル⑧は意外な結果になった。 このことから見ると、白い面積が大きいほど明るいと感じる傾向がある。しかし、濃グレー

が主要色のサンプル①があることから、全体の色が暗いものでも明るいと感じることがあると

思われる。単色よりも複数色のほうが、明るいと感じる傾向も見受けられる。

表 3-4-7 問 7結果一覧

図 3-4-7 グラフ（問 7）

14

問8 暗い 1 位はサンプル⑤で 43 票得票率は 69.3％、

2位はサンプル④で 6票 9.5％、3位はサンプル①で 3票 4.8％、4位はサンプル②と⑧で 2票 3.2％、5 位はサンプル⑦と⑨で１票 1.6％という結果になった。

1 位となったサンプル⑤はすべて黒で構成されている。得票率も 69.3％と高く、7 割近くの被験者がこのサンプルを選んでいる。ほ

かに 10％を超えるサンプルはなく、圧倒的に得票数が多かった。2位のサンプル④は 1番面積の大きい右側が濃グレーになっている。3位のサンプル①も右側に濃グレーのあるものだ

った。4位になったサンプル⑧とサンプル②は右側が淡グレーとなっている。1 票しか入らなかったサンプル⑦と⑨は、それぞれ右側が淡グレー、白であった。右側に白があるサンプル③とすべて白のサンプル⑥には 1 人も投票しなかった。 複数回答については、すべての回答にサンプル⑤が入っていた。次いで、サンプル④と⑧が

並び、サンプル①と②と⑦となった。 このことから、もっとも面積の大きいところに濃い色が使われているものほど暗いと感じる

傾向があり、白の面積が大きいサンプルでは、暗いと感じにくい傾向があるのではないかと思

われる。

表 3-4-8 問 8結果一覧

図 3-4-8 グラフ（問８）

15

問9 うるさい 1 位はサンプル①と⑥で、12 票 19.0％、2

位はサンプル③と⑤で、８票 12.7％、3 位はサンプル②と⑨で、5 票 7.9％、4 位はサンプル④で 4 票 6.3％、5 位はサンプル⑧で 1 票1.6％、サンプル⑦には 1票も入らないという結果となった。

1 位となったサンプル①は右部に濃グレー・上部に淡グレー・左部に白、サンプル⑥

は白のみで構成されている。2位となったサンプル③は右部に白・上部に淡グレー・左部に

濃グレー、サンプル⑤は黒のみである。反対

に 1 票も入らなかったサンプル⑦は右部に淡グレー・上部に白・左部に濃グレーであった。最下位のサンプル⑧はすべてグレーという構成

である。上位に選ばれたサンプルは黒や白、濃いグレーが多いものが多く、下位のサンプルは

淡いグレーが多かった。 得票率は最高でも 12.7％とだいぶ票が割れた。回答なしも 7名と多く、選出が難しかったよ

うである。面積の大きいところが白や黒に近いほどうるさいと感じやすくなり、淡いグレーの

部分が多いとうるさいと感じにくくなる傾向があると思われる。

表 3-4-9 問 9結果一覧

図 3-4-9 グラフ（問 9）

16

問10 落ち着く 1 位はサンプル②で 15 票、得票率 23.8％、

2位はサンプル①10票、15.9％、3位はサンプル⑦と⑨で 7票、11.1％、4位はサンプル③で5 票、7.9％、5 位はサンプル④と⑥で 4 票、6.3％、最下位はサンプル⑤と⑧で 4.8％となった。

1位のサンプル②は淡グレー、2位のサンプル①は濃グレー、3位のサンプル⑦は淡グレー、サンプル⑨は白、3位のサンプル③は白、4位のサンプル④は濃グレーが主体、サンプル⑥

は白のみ、最下位のサンプル⑤は黒のみ、サ

ンプル⑧はグレーのみである。 この設問では上位には 3 色に色分けされた

サンプルが並び、単色で構成されたサンプル

は下位にある。1 位と 2 位は淡グレーと濃グレーが主体で、白の面積がもっとも少ないものになっている。グレーや黒が上位に来ると予想していただけに、意外な結果となった。 このことから、単色よりも、複数の色を使ったほうが、落ち着けると感じる傾向が窺える。

複数色の中では、グレーを多く使用したサンプルが落ち着けるようである。

表 3-4-10 問 10結果一覧

図 3-4-10 グラフ（問 10）

17

問11 最初に目が行く箇所 この設問はサンプルの中で、どこを最初に見るかということである。そのため、回答方法はサ

ンプルを答えてもらうのではなく、サンプルごとに色で区切った 1.上 2.右 3.左の 3 箇所で答えてもらった。面積比は右部＞上部＞左部の順である。

サンプル① 1 位は右部で 40 票、得票率 63.5％、2

位は上部で 15 票、23.8％、最下位が左部で 6票、9.5％であった。 このサンプルは右部が濃グレー、上部が

淡グレー、左部が白という構成になってい

る。 面積比はもっとも大きい右部、中間の上

部、最小の左部の順になっている。 色の順序としては、濃グレー、淡いグレ

ー、白となっている。 このことから、このサンプルでは面積比

も色の差も順序に少なからず、関与してい

ると思われる。 サンプル②

1 位は上部で 36 票、得票率 57.1％、2位は右部で 21 票、33.3％、最下位が左部で 4 票、6.3％であった。ほかのサンプルよりもはっきりと順位が出ていると思わ

れる。 このサンプルは上部が濃グレー、右部が

淡グレー、左部が白という構成になってい

る。 色の差では、濃グレー、淡グレー、白と

いう順である。面積比で考えてみると、中

間、最大、最小、となる。このことから見

ると、色の差の影響をより受けていると感

じられた。 このサンプルでは、もっとも注目されや

すい箇所はもっとも色の濃い上部であっ

た。

表 3-4-11 サンプル①結果一覧

表 3-4-12 サンプル②結果一覧

図 3-4-12 グラフ（サンプル②）

表 3-4-11 グラフ(サンプル①)

18

サンプル③ 1位は左部で 25票、得票率 39.7％、2位は上部で 19票、30.2％、最下位は 16票、25.4％であった。下、上と左と答えた被験者もいた。 このサンプルは上部が淡グレー、右部

が白、左部が濃グレーという構成になっ

ている。 結果として 1位は左部なのだが、上部と右部も 20％以上の得票があり、票が割れたように思われる。 面積比率では、左部が最小、上部は中

間、右部が最大なので、順序に及ぼす影

響は少ないように思われる。 色の順序としては、濃グレー、淡グレ

ー、白となっている。このサンプルでは

色が濃いものほど、注目度が高い傾向に

あるようである。 サンプル④

1位は右部で 39票、得票率 61.9％、2位は上部で 16 票、25.4％、最下位は左部で 7票、11.1％であった。 このサンプルは上部が白、右部が濃グ

レー、左部が淡グレーである。 色の差でみると 1 位から順に、濃グレ

ー、白、淡グレーとなっている。面積で

比べてみると、最大、中間、最小となる。

これを見ると、どちらも影響しているよ

うに思われる。 このサンプルではもっとも注目されや

すいのは右部であり、もっとも注目され

にくいのは左部であるようだ。

表 3-4-13 サンプル③結果一覧

表 3-4-14 サンプル④結果一覧

図 3-3-14 グラフ（サンプル④）

図 3-4-13 グラフ（サンプル③）

19

サンプル⑤ 1位は右部で 27票、得票率 42.2％、2位は上部で 25 票、39.1％、最下位は左部 8票、12.5％という結果になった。ほかに、下とすべてと回答した被験者もい

た。 このサンプルはすべて黒で構成され

ている。そのため、色による注目度の比

較は難しかったと思われる。 そこで、面積で比べると、1 位の右部

がもっとも面積が大きく、2 位の上部は中間、3 位の左部がもっとも面積は小さくなっている。 順位としては、右部が 1位になったが、2 位の上部との差は僅かである。左部は得票率が低く、画面の中でもっとも目が

行きにくい場所であるようだ。

サンプル⑥ 1位は右部で 47票、得票率 74.6％、2

位は上部で 10 票、15.9％、最下位は左部で 3 票、4.8％となった。すべてや上と右と答えた被験者もいた。 このサンプルは黒のみで構成されて

いる。そのため、サンプル⑤同様、色に

よる差を測ることは難しいと考えられ

る。 面積比でみてみると 1位から順に、最

大面積部、中間面積部、最小面積部とい

うようになっている。 もっとも目が行きやすいのは面積が 1

番大きい右部分であった。得票率も 75％近くあり、圧倒的に注目されやすいこと

が示されている。続いて、部と左部とな

るが、右部に比べると、目が行きにくい

ということが言えそうである。

表 3-4-15 サンプル⑤結果一覧

表 3-4-16 サンプル⑥結果一覧

図 3-4-16 グラフ（サンプル⑥）

図 3-4-15 グラフ（サンプル⑤）

20

サンプル⑦ 1 位は左部で 29 票、得票率は 46％、2

位は右部で 17 票、27.0％、最下位は上部で 15 票、23.8％となった。上と右と答えた被験者もいた。 このサンプルは上部が白、右部が淡グレ

ー、左部が濃グレーとなっている。 色の差をみてみると、1位から順に濃グ

レー、淡いグレー、白となり、面積で比較

してみると、1 位から順に、最小、最大、中間となっている。 このサンプルでもっとも目が行きやす

いのは濃グレーの左部であった。白の上部

と淡グレーの右部はほぼ同じくらいの比

率であった。 サンプル⑧

1位は上部で 28票、44.4％であった。2位は右部で 27 票、42.9％となり、3 位の左部は 6票で 9.5％という結果となった。

1位と 2位で 85％以上の得票率があり、大半の被験者が上部と右部に注目してい

ることがわかる。 このサンプルは、すべてグレーで構成さ

れた中間色のサンプルである。したがって、

色の変化による選択はないと考えられ、面

積比と位置関係による選択だと思われる。 結果として、得票率に差はほとんどなく、

微妙な順位ではあるが、このサンプルで最

初に目が行くのは上部で、次が右部であり、

左部は注目が集まりにくいといえそうで

ある。

表 3-4-17 サンプル⑦結果一覧

表 3-4-18 サンプル⑧結果一覧

図 3-4-18 グラフ(サンプル⑧)

図 3-4-17 グラフ（サンプル⑦）

21

サンプル⑨ 1 位は上部で 43 票、68.3％だった。次

が右部で、12 票、19.0％ととなり、左部は 5 票と少なく、7.9％という結果となった。 このサンプルは、上部は濃グレー、左部

は淡グレー、右部が白という構成になって

いる。 色の差を見てみると 1 位から順に、濃

グレー、白、淡いグレーとなっている。

面積で比べてみると中間、最大、最小と

なっている。どうやら、色の差と面積、

両方の影響を受けているのではないかと

思われる。 1位の上部を 70％近くの被験者が選択

している。このことからも、このサンプ

ルでもっとも注目を集めやすいのは上部

となり、逆にもっとも注目されにくいの

は左部となった。

問 11全体を通してみると、色に差のあるサンプルと同色で作られたサンプルに分けられる。 色分けされたサンプルでは、最初に目が行くと

被験者が答えたのは、色の 1 番濃いところであった。2 番目に目が行くところは、色が濃いところと面積が大きいところに分かれたが、より多く選

ばれたのは、面積が大きいところのほうだった。

左部は濃グレーがあるサンプル以外は、すべての

サンプルで最下位となっている。 同色のみで構成されたサンプルの中で、黒のサ

ンプル⑤と白のサンプル⑥は、右部・面積が大き

いところに目が行く傾向があるようだ。続いて、上部、左部となる。中間色のサンプル⑧では

上部が 1位、⑤と⑥で 1位となった右部は 2位であった。しかし、どのサンプルでも左部がもっとも得票数が少なかった点は同じである。 このことから、もっとも注目されやすいのは、色の変化のあるサンプルでは色が濃いところ、

同一色のサンプルではもっとも面積の大きいところとなり、反対にもっとも注目されにくいの

表 3-4-19 サンプル⑨結果一覧

表 3-4-20 位置別順位数

表 3-4-21 色別順位数(3色)

図 3-4-19 グラフ（サンプル⑨）

22

は左部だといえるのではないかと思われる。 問12 最もいい（好き）と思うもの

1 位はサンプル②で 14 票、得票率 22.2％、2 位はサンプル⑨で 11 票、17.5％、3 位はサンプル①と⑤で 10票、15.9％、4位はサンプル③で 8票、12.7％、5位はサンプル④と⑥で4票、6.3％、最下位がサンプル⑧で 1票、1.6％となった。サンプル⑦を選んだ被験者はいな

かった。 1位のサンプル②は淡グレー、2位のサンプ

ル⑨は白、3位サンプル①は濃グレー、サンプル⑤は黒、4位のサンプル③は白、5位のサンプル④は濃グレー、サンプル⑥は白、6位のサンプル⑧は淡グレーが主要色である。無投票のサンプル⑦は淡いグレーが多く使われているも

のである。 もっとも得票率の高かったサンプル②でも 20％を少し超える程度で、それほど高い数値では

ないが、低いともいいがたい数値である。10％を超えているサンプルも 4つと多く、票が割れているように思われる。

表 3-4-22 問 12結果一覧

図 3-3-20 グラフ（問 12）

23

問13 自分のWebサイトを作るなら、どのタイプにするか 1 位はサンプル⑨で 16 票、得票率 25.4％、

2 位はサンプル②で 10 票、15.9％、3 位はサンプル③で 9票、14.3％、4位はサンプル①と⑤で 7票、11.1％、5位はサンプル④と⑥で 5票、7.9％、最下位はサンプル⑦と⑧で 1 票、1.6％となった。

1 位となったサンプル⑨は上部が濃グレー、右部が白、左部が淡グレー、2位のサンプル②は上部が同じで、右部と左部が反転したタイ

プである。そのほかの、淡グレーが多く使わ

れたサンプル⑦と⑧は最下位となっているこ

とから、あまり好印象は受けていないようで

ある。続いて、上部が淡グレー、右部が白、

左部が濃グレーのサンプル③である。白のみを使用しているサンプル⑥は城を多く使用したサ

ンプルの中では最下位であった。もう 1つ、複数色を使用したサンプルの上部に注目すると、1位と 2位は濃いグレー、3位と 4位は淡グレー、5位と 6位は白となっている。 印象を問う設問ではないためか、少々ばらつきが見られる。しかし、1 位のサンプル⑨は 4分の 1 の被験者が選択しており、波がないわけではない。好みにもある程度、傾向があるのだといえるのではないかと思われる。

表 3-4-23 問 13結果一覧

図 3-4-21 グラフ（問 13）

24

「暗い」「地味」「目立つ」の設問は 1 位がはっきりと現れている。しかし、地味という設問では、複数回答率が最も高く、選択に迷ったようだ。設問の中でもっとも票が割れたのは、「う

るさい」で、15％に届くサンプルは 1つもなかった。そのほか、すべての設問で選ばれたサンプルは①、④、⑨の 3 つのみだった。サンプル⑧は「地味」や「静か」、「冷たい」以外の設問では全体的に得票が低かった。 もっとも目が行きやすいのは、サンプルの中でもっとも色の濃い場所であった。これは面積

の大小や位置に関係なく、すべてのサンプルで共通であった。ついで得票が多かったのは、1位になった場所の次に面積の大きいところであった。もっとも選ばれなかったのは、面積の少

ない左側の部分で、この部分に濃い色があるとき以外は、最下位となった。 問 12および問 13に関しては、個人の好みの問題でもある。そのためか、似通った結果が出

たように思われる。しかし、完全に同じというわけではなく、順位が入れ替わっている箇所も

ある。どちらにしてもサンプルの⑦と⑧はほとんど選ばれていない。サンプル②や⑦はWebサイトの所有者としてよりも、見る側としてのほうが得票率は高い。逆にサンプル⑨は所有者と

してのほうが得票率は高くなっている。 4. まとめ

今回、調査を行った結果、トップページで最初に注目する部分は明暗がはっきりしている

部分であるといえるのではないかと思う。問 11の「最初に目の行く場所」では単色のサンプルを除いて、すべてのサンプルで最初に見る箇所はそのサンプルの中で、場所や大きさは違

ってももっとも色の濃い箇所であった。視覚心理学の世界で言われている「対比現象」や「明

示度」の法則にも合致していると思われる。対比現象については「2.1色の見え」で記述したが、「明示度」とは 2つの色を遠くからみても、見分けられるかどうかということである。道路標識など、遠くからでも視認できなければならないものに用いられる。 とはいえ、すべての結果がこの法則に合致しているわけではない。明るかったり、暗かっ

たりと明暗のはっきりしたものは注目されやすいが、長時間物を見るには向かないこともあ

る。コントラストが高いということは、強い刺激を受けていることになる。あまり目には優

しくないだろうし、感覚的にも疲れやすいだろう。 目印になるものは明示度の高く目立つもののほうが良いが、目的のページを見つけ、内容

に目を通す段階になると、落ち着いて見たいと思うようになるのではないかと思う。 今回の調査である程度、傾向のようなものは見出せたのではないかと思われる。しかしな

がら、サンプル自体がWebサイトを単純化したものを 3つに色分けしたものということもあり、実際にはもっと複雑なデザインのもののほうが多いと思われる。 今回は、サンプルから受ける印象と注視度を測るための調査とした。色相のないモノクロ

のサンプルを使用しているだけに、青や赤といった色相の要素が加われば、また違った結果

が得られたのではないかと思われる。さらに、これに絵や写真、文字が加われば、また印象

も変わってくるだろう。しかし、大まかな配置で色の印象を考える上では参考にできるので

25

はないかと思う。

（注 1）参考文献 1）p.62 （注 2）参考文献 1）p.64 （注 3）参考文献 2）p.119 （注 4）参考文献 2）p.119 （注 5）参考文献 1）p.69

5. 参考文献 1） 東京工業会議所『カラーコーディネーション』中央経済社、2001年 2） 有本祝子、岡村美和『わかりやすい 色彩と配色の基礎知識 はじめて学ぶ「色彩能力検

定 3級」対応』永岡書店、2002年 3） 南雲治嘉『色彩デザイン 配色技術の専門マニュアル』グラフィック社、2006年 4） 松崎雅則『入門色彩学』繊研新聞社、2002年 5） 三井秀樹『美の構成学』中公新書、1996年 6） 川上元郎『色のおはなし』日本規格協会、1992年

Colors effect by the area ratio in the Web site -An impression and the attention rate of the top page -

Eriko Fukano Abstract Today, the Internet becomes imminent by the spread of high speed lines such as ADSL or the

optical fiber. Many companies and government offices came to have Web sites. Blog came to be able to appear, even the individual came to be able to make the Web site easily. And, the number of those who have the Web site has increased. When we look at the Web site, Our seeing it first is probably top page. It's entrance of the Web site,

so to speak, said that it is the face of the Web site. Web sites have various types. Colors and placement, by the area ratio, how does our impression

change?

In the design, the color quality is large depending on the arrangement of color. The seeing of color changes depending on the size. In this study, with the sample which simplified a Web site, I intend to inspect an impression by the

coloration. To examine the change in the impression according to the difference of brightness, I decided to use a monochromatic image for a sample.