Comments
Description
Transcript
修士論文 Web サイトにおける面積比率による色彩効果
修士論文 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.1 アンケートによる調査 3 3.2 調査の方法 3 3.3 提示したサンプルの説明 4 3.4 調査結果および考察 7 3. 4. まとめ 24 1. 序文 今日、パソコンとインターネットが普及したことで、行政や企業、個人などさまざまな場面で Web サイトは使用されいる。行政による Web サイト上での手続きなどが行われ、企業では商品 サポートや懸賞の応募などもある。ブログが登場し、Web サイト製作ツールを使って簡単に作れ るようになり、個人でも Web サイトを持つ人が増えてきている。 Web サイトを見る際に最初に目にするのは、検索などでたどり着いた場合いきなり本文に移る こともあるが、おそらくトップページと呼ばれるところではないかと思われる。いわゆる、Web サイトの「顔」である。その Web サイトの最初の印象を左右するページとも言えるかもしれない。 近頃では、最初に Flash 画像を使用しているサイトもあるので、次に目にするページとも言える かもしれないが、実際に使用するという意味ではトップページが始まりのページだと思われれる。 企業でも個人でも内容にあった Web サイトを作ることは重要なのではないだろうか。例えば、病 院など清潔なイメージが大切な機関が黒い背景を使っていたりすると、変わっているといえば、 確かにそうだろう。印象にも残るかもしれない。しかし、問題はその先である。果たして、商業 用のサイトなら使おうと思うかどうか、個人用ならば、内容まで読もうと思うかということであ る。 私たちはそれをどう捉えるのだろうか。ある程度、Web サイトを作る上での法則というのが存 在していると思われる。本研究は Web サイトにおける”配色とレイアウト”という特定の条件に限 定された視点から Web サイトのデザインにおける好感度と注目率を模索するための基礎研究で ある。 2. 配色とレイアウトの効果 2.1 色の分類 人間が識別できる色は一般には約 750 万 1000 万といわれている。 色には、赤、黄、青、緑、紫などのように色味のある色と、白、黒、グレイなどの色のみの ない色とがある。色みのある色を有彩色、色味のない色を無彩色という。すべての色は、この 2 つのグループに分類することができる。 色を構成する要素は「明度」「彩度」「色相」である。3 要素といわれているものである。 「明度」とは色の明るさのことで、度数で表現される。これは光の量によって決まる。目に入 ってくる光の量が多くなるほど、白っぽく明るい色になり、光の量が少なくなるほど、黒っぽ く暗い色になる。 「彩度」とは色の鮮やかさのことで、これも度数によって表現される。彩度が低くなると、白 っぽく見えたり、くすんで見える。明度の場合は光の量が多くなるほど度数が高くなるが、彩 度の場合は白い光の量が増えるほど度数は低くなる。 「色相」とは赤や青、黄色といった色みの違いのことで、色の名前で区別することができる。 1 2.2 色の見えとは 現実の色は、見るもの（対象）、見る人（知覚する個人）、明るさ（照明光）の 3 条件が整う ときに見える(認知)。(注 1) 色彩に関する感覚は当然ながら、個人によって違いがあり、ある人が好ましいと思うもので あっても、別の人には好ましくないと思うこともあるだろう。 「色の見え」とは、色を個人的に どう認めるかということを一般化して考えることである。(注 2) 私たちがものを見るとき、あるものだけを単体で見ることはまずない。ほとんどの場合、周 囲の色と一緒に見ている。たとえば、皿に盛られた料理、料理の色だけでなく、器の色も考慮 されている。 色が他の色に影響されて、本来の色とは多少異なった見え方をする現象を「色の対比」と呼 んでいる。色の対比は色を見るときの見方によって「同時対比」と「継時対比」に分けられる。 「同時対比」とは 2 つの色を同時に見るときに起こる対比現象のことである。つまり『ある色 が同時に見えている周りの色に影響されて、その色を単独で見る場合とは多少異なって見える 現象』(注 3)のことである。同時対比には「明度対比」 「彩度対比」 「色相対比」 「補色対比」 「縁 辺対比」などがある。 「継時対比」とは 2 つのものを順次見ることで起こる対比現象のことであ る。つまり、 『ある色をしばらく見続けた後に目をほかのものに移すと、先に見ていた色の影響 を受け、次に見た色が異なって見える現象』(注 4)のことである。 2.3 配色とは 配色というものは、 「2 色以上の色の組み合わせ」である。色の取り合わせであり、配色の仕 方によってデザイン性を高めることが出来る。デザインにおいて、色が良い悪いは配色による ことが多い。色自体には良し悪しはない。配色というのは、色の取り合わせを美的に演出する 技術であるという。これは、さまざま分野で使用されている。インテリア、建築、グラフィッ クデザインなどが挙げられる。これらの配色の構成要素には、共通した法則性がある。それは 配色を選ぶ上で必要な基礎知識となっており、主に面積に比例するという。 網膜にはごく小さな面積では黄色と青色の色覚を失う性質がある。黄色が白に色が飛んでし まったり、青が黒に見えたりすることがある。さらに面積が小さくなると、その色も無彩色化 してしまう。これらの現象は視力に関係なく起こるものである。したがって解像度、つまり細 かいところまで見えるかどうかにかかわる性質ではなく、視角による色の見えにかかわる性質 である。 同じ色でも面積の大きい小さいによって、明るさや鮮やかさが異なって見える。たとえば、 壁紙などを選ぶときに見本帳で見ていた色と実際に壁に貼ったときの印象が違う、といったこ とを経験したり、聞いたりしたことはないだろうか。これが「色の面積効果」である。 この現象は「色を見る距離は関係なく、視角、視野で対象が占める割合にかかわって生じる が、研究によるとそれは無限に生じる現象ではなく、だいたい視角が 20 あたりまでの範囲に 生じる。その視角の範囲内では、対象が視野に広い面積を占めるほど、彩度が上がって見える。 だが、その範囲を超えると、かえって彩度の低下が認められる。」（注 5） 2 3. 研究の目的と手法 3.1 アンケートによる調査 今回の調査では明るさと面積によって受ける印象と注目する場所が変わるのかを検証してみる ことにした。色相による印象の違いは個人によって差が大きく、主観的な要素であり、大きく異 なる。色相の与える印象に対する過去の研究は存在するが、時代や流行によってもその好みは大 きく変わってくるため、今回は適当でないと考えた。したがって、色相の要素を除外し、明度差 による配色のサンプルを取り上げた。 3.2 調査の方法 大学生 63 名に、アンケート調査を行った。被験者は文教大学情報学部 2007 年度秋学期受講生 (2 年生から 4 年生)を対象にした。 サンプルはパソコンの画面に表示し、アンケートはすべて選択式で、提示したサンプルから質 問項目に最も適していると思われるサンプルを 1 つずつ選んで答えてもらった。 アンケートの設問は、問 1．賑やか 問 6．冷たい 問 7．明るい が行くのはどこか 問 2．静か 問 8．暗い 問 3．目を引く 問 9．うるさい 問 12．1 番いい(好き)だと思うもの 問 4．地味 問 10．落ち着く 問５．暖かい 問 11．最初に目 問 13．自分のホームページを作るとし たら、どのタイプにするか、である。問 1、2、9、10 は動静、問 3、4 は注目度、問 5、6 は温感、 問 7、8 は明暗、問 11 はサンプルごとの注視度、問 12 および 13 は好みを問う設問として設定し た。 3.3 提示したサンプルの説明 サンプルには上下に分割したものの 表 3-3-1 下部を 2 分割したものを使用し、それ サンプル一覧 ぞれを白、淡グレー、濃グレーで色分 けしたものと、白、黒、グレーのみで 構成したものを使用することにした。3 つに色分けしたサンプルの中で、似た ようなタイプで同じような回答が予想 されるのものはまとめて 6 種類とし、 単色のみのサンプルをあわせて９種類 とした。明るさによる比較ということ で、本調査では色相や彩度を除外し、 モノクロの画像を使用することにした。 その際、イメージが湧きやすいように、 実際の Web サイトの画像を添付することにした。 以下に、アンケートに使用したサンプルと Web サイトの画像を示す。 3 サンプル① http://www.ds-base.com/ dive station base 2007/12/5 引用日 図 3-3-1 サンプル画像①と Web サンプル① サンプル② https://www.izutsuya.co.jp/ 井筒屋 引用日 図 3-3-2 2007/12/5 サンプル画像②と Web サンプル② サンプル③ http://www.snowboard-senmon.com/ スノーボード専門ドットコム 引用日 図 3-3-3 サンプル画像③と Web サンプル③ 4 2007/12/5 サンプル④ http://outdoor.geocities.jp/ outdoor_life2006/top.html 北海道教育大学岩見沢校ワンダーフォーゲル部 引用日 図 3-3-4 2007/12/5 サンプル画像④と Web サンプル④ サンプル⑤ http://newsit.blog54.fc2.com/blogdate-200609.html ハイウェイパトロールマン 2007/12/5 図 3-3-5 サンプル画像⑤と Web サンプル⑤ サンプル⑥ http://www.family.co.jp/ ファミリーマート 引用日 図 3-3-6 サンプル画像⑥と Web サンプル⑥ 5 2007/12/5 サンプル⑦ http://www.geocities.jp/q_wv/ 九州大学ワンダーフォーゲル部 引用日 図 3-3-7 2007/12/5 サンプル画像⑦よ Web サンプル⑦ サンプル⑧ http://classic.music.coocan.jp/book/sekaishi bourgogne/brg-history.htm Kenichi Yamagishi's Web Site 2007/12/5 図 3-3-8 サンプル画像⑧と Web サンプル⑧ サンプル⑨ http://www.tivoli.co.jp/ 倉敷チボリ公園 引用日 図 3-3-9 2007/12/5 サンプル画像⑨と Web サンプル⑨ 6 3.4 調査結果および考察 アンケートで得られた結果を項目ごとにまとめたものを示す。なお、サンプル番号はすべての 項目で共通である。 問1 賑やか 表 3-4-1 問 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 7 グラフ（問 1） 問2 静か 1 位はサンプル⑧で 13 票、得票率は 20.6％、 表 3-4-2 問 2 結果一覧 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） 8 問3 目立つ 1 位はサンプル⑤で 27 票、得票率 42.9％、 表 3-4-3 問 3 結果一覧 2 位はサンプル⑥で 7 票、11.1％、3 位はサン プル②と③と④が同率で 6 票、9.5％、最下位 はサンプル①と⑨で 4 票、6.3％という結果に なった。サンプル⑦と⑧を選択した被験者はい なかった。 1 位になったサンプル⑤はすべて黒、2 位に なったサンプル⑥はすべて白であった。3 位と なった３つはそれぞれ違うタイプのサンプル だった。サンプル②は淡グレー、サンプル③は 白、サンプル④は濃グレーが主要色として使わ れているものであった。4 位はサンプル④が濃グレー、サンプル⑨が白、1 票も入らなかった サンプル⑦と⑧は共に淡グレーが多く使われたものであった。 得票率はサンプル⑤が 42.9％と圧倒的に多く、ほかに 10％を超えるのは 2 位のサンプル⑥ のみである。黒のみ、白のみのサンプル、白や濃グレーを多くサンプルが上位に、淡グレー を多く使ったサンプルは下位になる傾向があると思われる。ことから、どちらかといえば、 はっきりした色が多く使われているほうが目立つと感じるようである。 図 3-4-3 グラフ（問 3） 9 問4 地味 1 位はサンプル⑧で 39 票、得票率 61.9％、 表 3-4-4 問 4 結果一覧 2 位はサンプル⑥と⑦で 3 票、4.8％、3 位はサ ンプル①と⑨で 2 票、3.2％、最下位はサンプ ル③、④、⑤が同率で 1 票、1.6％となった。 サンプル②を選んだ被験者は 1 人もいなかっ た。 サンプル⑧はグレー、サンプル⑥は白のみ、 ⑦は淡グレー、サンプル①は濃グレー、⑨は白、 サンプル③は白、④は濃グレー、⑤は黒のみが 主要色である。 この設問ではすべての設問の中でもっとも 複数回答率が高かった。それだけ 1 つに絞るの が困難だったと思われる。複数回答の中ではサ ンプル⑧と⑦が同率で得票数が多かった。どち らも、淡グレーが多く使われているサンプルで ある。 サンプル⑧が圧倒的に得票数が多かった。2 位以下はすべて 5％に満たないという数値に なっている。 このことから、もっとも地味と受け取られるサンプルはグレーのみを使ったものであると 思われる。 図 3-4-4 グラフ（問 4） 10 問5 暖かい 1 位はサンプル⑨で 14 票、得票率 22.2％、 表 3-4-5 問 5 結果一覧 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 つのサン プルが入るなど、接戦になったようだ。複数回答がなかったが、無回答は多めで、選出が難し かったようである。 どちらかというと、白や淡グレーといった薄めの色が選ばれている傾向があるが、その一方 でサンプル②やサンプル⑧などが下位にあるなど、一概には言えない結果となった。また、黒 やグレーのみというサンプルは温かみを感じにくいようである。 図３-4-5 グラフ（問５） 11 問6 冷たい 1 位はサンプル⑤で 20 票、得票率 31.4％、 表 3-4-6 問 6 結果一覧 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） 12 問7 明るい 表 3-4-7 問 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） 13 問8 暗い 表 3-4-8 1 位はサンプル⑤で 43 票得票率は 69.3％、 問 8 結果一覧 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 グラフ（問８） 14 問9 うるさい 1 位はサンプル①と⑥で、12 票 19.0％、2 表 3-4-9 問 9 結果一覧 位はサンプル③と⑤で、８票 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） 15 問10 落ち着く 1 位はサンプル②で 15 票、得票率 23.8％、 表 3-4-10 問 10 結果一覧 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） 16 問11 最初に目が行く箇所 この設問はサンプルの中で、どこを最初に見るかということである。そのため、回答方法はサ ンプルを答えてもらうのではなく、サンプルごとに色で区切った 1.上 2.右 3.左の 3 箇所で 答えてもらった。面積比は右部＞上部＞左部の順である。 表 3-4-11 サンプル① サンプル①結果一覧 1 位は右部で 40 票、得票率 63.5％、2 位は上部で 15 票、23.8％、最下位が左部 で 6 票、9.5％であった。 このサンプルは右部が濃グレー、上部が 淡グレー、左部が白という構成になってい る。 面積比はもっとも大きい右部、中間の上 部、最小の左部の順になっている。 色の順序としては、濃グレー、淡いグレ ー、白となっている。 このことから、このサンプルでは面積比 も色の差も順序に少なからず、関与してい ると思われる。 表 3-4-11 グラフ(サンプル①) サンプル② 表 3-4-12 1 位は上部で 36 票、得票率 57.1％、2 サンプル②結果一覧 位は右部で 21 票、33.3％、最下位が左部 で 4 票、6.3％であった。ほかのサンプル よりもはっきりと順位が出ていると思わ れる。 このサンプルは上部が濃グレー、右部が 淡グレー、左部が白という構成になってい る。 色の差では、濃グレー、淡グレー、白と いう順である。面積比で考えてみると、中 間、最大、最小、となる。このことから見 ると、色の差の影響をより受けていると感 じられた。 このサンプルでは、もっとも注目されや すい箇所はもっとも色の濃い上部であっ た。 図 3-4-12 17 グラフ（サンプル②） サンプル③ 1 位は左部で 25 票、得票率 39.7％、2 表 3-4-13 サンプル③結果一覧 位は上部で 19 票、30.2％、最下位は 16 票、25.4％であった。下、上と左と答え た被験者もいた。 このサンプルは上部が淡グレー、右部 が白、左部が濃グレーという構成になっ ている。 結果として 1 位は左部なのだが、上部 と右部も 20％以上の得票があり、票が 割れたように思われる。 面積比率では、左部が最小、上部は中 間、右部が最大なので、順序に及ぼす影 響は少ないように思われる。 色の順序としては、濃グレー、淡グレ ー、白となっている。このサンプルでは 色が濃いものほど、注目度が高い傾向に あるようである。 図 3-4-13 表 3-4-14 サンプル④ グラフ（サンプル③） サンプル④結果一 覧 1 位は右部で 39 票、得票率 61.9％、2 位は上部で 16 票、25.4％、最下位は左 部で 7 票、11.1％であった。 このサンプルは上部が白、右部が濃グ レー、左部が淡グレーである。 色の差でみると 1 位から順に、濃グレ ー、白、淡グレーとなっている。面積で 比べてみると、最大、中間、最小となる。 これを見ると、どちらも影響しているよ うに思われる。 このサンプルではもっとも注目されや すいのは右部であり、もっとも注目され にくいのは左部であるようだ。 図 3-3-14 18 グラフ（サンプル④） サンプル⑤ 表 3-4-15 サンプル⑤結果一覧 1 位は右部で 27 票、得票率 42.2％、2 位は上部で 25 票、39.1％、最下位は左 部 8 票、12.5％という結果になった。ほ かに、下とすべてと回答した被験者もい た。 このサンプルはすべて黒で構成され ている。そのため、色による注目度の比 較は難しかったと思われる。 そこで、面積で比べると、1 位の右部 がもっとも面積が大きく、2 位の上部は 中間、3 位の左部がもっとも面積は小さ くなっている。 順位としては、右部が 1 位になったが、 2 位の上部との差は僅かである。左部は 得票率が低く、画面の中でもっとも目が 行きにくい場所であるようだ。 図 3-4-15 サンプル⑥ 1 位は右部で 47 票、得票率 74.6％、2 グラフ（サンプル⑤） 表 3-4-16 サンプル⑥結果一覧 図 3-4-16 グラフ（サンプル⑥） 位は上部で 10 票、15.9％、最下位は左 部で 3 票、4.8％となった。すべてや上 と右と答えた被験者もいた。 このサンプルは黒のみで構成されて いる。そのため、サンプル⑤同様、色に よる差を測ることは難しいと考えられ る。 面積比でみてみると 1 位から順に、最 大面積部、中間面積部、最小面積部とい うようになっている。 もっとも目が行きやすいのは面積が 1 番大きい右部分であった。得票率も 75％ 近くあり、圧倒的に注目されやすいこと が示されている。続いて、部と左部とな るが、右部に比べると、目が行きにくい ということが言えそうである。 19 サンプル⑦ 表 3-4-17 サンプル⑦結果一覧 図 3-4-17 グラフ（サンプル⑦） 表 3-4-18 サンプル⑧結果一覧 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-18 20 グラフ(サンプル⑧) サンプル⑨ 表 3-4-19 サンプル⑨結果一覧 図 3-4-19 グラフ（サンプル⑨） 1 位は上部で 43 票、68.3％だった。次 が右部で、12 票、19.0％ととなり、左部 は 5 票と少なく、7.9％という結果となっ た。 このサンプルは、上部は濃グレー、左部 は淡グレー、右部が白という構成になって いる。 色の差を見てみると 1 位から順に、濃 グレー、白、淡いグレーとなっている。 面積で比べてみると中間、最大、最小と なっている。どうやら、色の差と面積、 両方の影響を受けているのではないかと 思われる。 1 位の上部を 70％近くの被験者が選択 している。このことからも、このサンプ ルでもっとも注目を集めやすいのは上部 となり、逆にもっとも注目されにくいの は左部となった。 表 3-4-20 位置別順位数 問 11 全体を通してみると、色に差のあるサンプ ルと同色で作られたサンプルに分けられる。 色分けされたサンプルでは、最初に目が行くと 被験者が答えたのは、色の 1 番濃いところであっ た。2 番目に目が行くところは、色が濃いところ と面積が大きいところに分かれたが、より多く選 表 3-4-21 色別順位数(3 色) ばれたのは、面積が大きいところのほうだった。 左部は濃グレーがあるサンプル以外は、すべての サンプルで最下位となっている。 同色のみで構成されたサンプルの中で、黒のサ ンプル⑤と白のサンプル⑥は、右部・面積が大き いところに目が行く傾向があるようだ。続いて、上部、左部となる。中間色のサンプル⑧では 上部が 1 位、⑤と⑥で 1 位となった右部は 2 位であった。しかし、どのサンプルでも左部がも っとも得票数が少なかった点は同じである。 このことから、もっとも注目されやすいのは、色の変化のあるサンプルでは色が濃いところ、 同一色のサンプルではもっとも面積の大きいところとなり、反対にもっとも注目されにくいの 21 は左部だといえるのではないかと思われる。 問12 最もいい（好き）と思うもの 1 位はサンプル②で 14 票、得票率 22.2％、 表 3-4-22 問 12 結果一覧 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-3-20 グラフ（問 12） 22 問13 自分の Web サイトを作るなら、どのタイプにするか 1 位はサンプル⑨で 16 票、得票率 25.4％、 2 位はサンプル②で 10 票、15.9％、3 位はサ 表 3-4-23 問 13 結果一覧 ンプル③で 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-21 グラフ（問 13） 23 「暗い」「地味」「目立つ」の設問は 1 位がはっきりと現れている。しかし、地味という設問 では、複数回答率が最も高く、選択に迷ったようだ。設問の中でもっとも票が割れたのは、 「う るさい」で、15％に届くサンプルは 1 つもなかった。そのほか、すべての設問で選ばれたサン プルは①、④、⑨の 3 つのみだった。サンプル⑧は「地味」や「静か」、「冷たい」以外の設問 では全体的に得票が低かった。 もっとも目が行きやすいのは、サンプルの中でもっとも色の濃い場所であった。これは面積 の大小や位置に関係なく、すべてのサンプルで共通であった。ついで得票が多かったのは、1 位になった場所の次に面積の大きいところであった。もっとも選ばれなかったのは、面積の少 ない左側の部分で、この部分に濃い色があるとき以外は、最下位となった。 問 12 および問 13 に関しては、個人の好みの問題でもある。そのためか、似通った結果が出 たように思われる。しかし、完全に同じというわけではなく、順位が入れ替わっている箇所も ある。どちらにしてもサンプルの⑦と⑧はほとんど選ばれていない。サンプル②や⑦は Web サ イトの所有者としてよりも、見る側としてのほうが得票率は高い。逆にサンプル⑨は所有者と してのほうが得票率は高くなっている。 4. まとめ 今回、調査を行った結果、トップページで最初に注目する部分は明暗がはっきりしている 部分であるといえるのではないかと思う。問 11 の「最初に目の行く場所」では単色のサンプ ルを除いて、すべてのサンプルで最初に見る箇所はそのサンプルの中で、場所や大きさは違 ってももっとも色の濃い箇所であった。視覚心理学の世界で言われている「対比現象」や「明 示度」の法則にも合致していると思われる。対比現象については「2.1 色の見え」で記述した が、 「明示度」とは 2 つの色を遠くからみても、見分けられるかどうかということである。道 路標識など、遠くからでも視認できなければならないものに用いられる。 とはいえ、すべての結果がこの法則に合致しているわけではない。明るかったり、暗かっ たりと明暗のはっきりしたものは注目されやすいが、長時間物を見るには向かないこともあ る。コントラストが高いということは、強い刺激を受けていることになる。あまり目には優 しくないだろうし、感覚的にも疲れやすいだろう。 目印になるものは明示度の高く目立つもののほうが良いが、目的のページを見つけ、内容 に目を通す段階になると、落ち着いて見たいと思うようになるのではないかと思う。 今回の調査である程度、傾向のようなものは見出せたのではないかと思われる。しかしな がら、サンプル自体が Web サイトを単純化したものを 3 つに色分けしたものということもあ り、実際にはもっと複雑なデザインのもののほうが多いと思われる。 今回は、サンプルから受ける印象と注視度を測るための調査とした。色相のないモノクロ のサンプルを使用しているだけに、青や赤といった色相の要素が加われば、また違った結果 が得られたのではないかと思われる。さらに、これに絵や写真、文字が加われば、また印象 も変わってくるだろう。しかし、大まかな配置で色の印象を考える上では参考にできるので 24 はないかと思う。 （注 1）参考文献 1）p.62 （注 2）参考文献 1）p.64 （注 3）参考文献 2）p.119 （注 4）参考文献 2）p.119 （注 5）参考文献 1）p.69 25 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.