Analyzed Websiteウェブサイトの解析

1
2
3

[Link]

4
6
10
5
7
9
IMGP6410

[Click ][Color]

11
14
15
12
13

[Text]

16
IMGP6409
17

Credit

ウェブサイトの解析

デザイン:
中野豪雄

プログラミング:
吉川義盛

2016. Oct

21_21Design Siteで開催された
企画展「デザインの解剖展」に出展した作品。
株式会社明治ウェブサイトと「きのこの山・たけのこの里」
ブランドサイトを解析し可視化している。

・ウェブサイトの解析[リンク]
約1万ページに及ぶ株式会社明治のホームページの中から、
商品情報に関するページのみを抜粋してそのリンク構造を可視化。
上から下に向かって下層ページへとリンクしていく様子を描いた。
円弧は同階層のリンクを、曲線は他階層へのリンクを示しており、
「きのこの山・たけのこの里」ブランドサイトに紐づくラインのみ
太くしている。また、最下層にある「きのこの山・たけのこの里」
ブランドサイトはより詳細にリンク構造を示しており、
各ページのアクセス数を円の面積で表している。

・ウェブサイトの解析[クリック]
「きのこの山・たけのこの里」ブランドサイト全ページにおいて
クリックされた場所と回数を解析し、クリック数に応じて
該当箇所が膨張しながら発光する様子を描いた。

・ウェブサイトの解析[色]
「きのこの山・たけのこの里」ブランドサイト全ページの色を解析し、
色相・彩度・輝度の3軸で構成した色立体上に、
色の使用頻度を円の面積に置き換えてマッピングした。
左側の図では、輝度ごとの色相・彩度のマッピングのみ示し、
配色の偏りをより分かりやすく見れるようにしている。

・ウェブサイトの解析[文字]
「きのこの山・たけのこの里」ブランドサイトの
各ページの言葉の使用頻度と繋がりの頻度を描いている。
言葉は形態素解析を用いて品詞ごとに分類し、
使用頻度を棒グラフの長さで、繋がりの頻度を曲線の太さで表している。

Analyzed Website

Design:
Takeo Nakano

Programming:
Yoshimori Yoshikawa

2016. Oct

Analyzed Websiteウェブサイトの解析