![ウェブデザインの体系的分類に関する研究
－ 分類学の視点でウェブデザイン史の系統樹を試みる －
Study on systematic classification of web design
－ From a viewpoint of taxonomy, the phylogenetic tree of web design history is attempted to be built －
村井貴
Takashi MURAI
北海道大学
It is thought that we can make clear the whole image of Web
design history more by classifying the characteristics of websites
systematically. In this study, we try to create a phylogenetic tree,
selecting a website that became a milestone in particular from
among the websites of corporations and group organizations, and
classifying it base on its individual characteristics. The
phylogenetic tree is a kind of info graphics that can visualize a
theme to be treated clearly. In this article, we presented a study
concept that is a pre-stage of study. In classification, we showed
elements such as fashion, operational environment, Web
marketing, Web promotion, and so on.
Key Word : Web Design, Phylogenetic Tree, Taxonomy
１．研究の背景
ウェブデザインの歴史を考える上で重要なことは、なにがその
デザインに影響を与えたのかを知ることである。特に、時代ごと
の流行と、動作環境による影響が大きい。前者でいえば、鏡面反
射の効果を取り入れた Web2.0 や、最近広まっているフラット
デザインやグリッドデザインがある。後者であれば、ブラウザや
端末の仕様が挙げられる。PC、スマートフォン、タブレットにひ
とつのソースで対応し、端末ごとにデザインを変化させるレスポ
ンシブデザインなどはまさにその典型例である。これらの影響が
インターネット上に広がると、似たデザインや同じような文書構
造のウェブサイトが急速に広がり、また、淘汰され、生存競争が
行われていく。このプロセスは生物の進化に近いと考えられる。
２．研究の目的
本研究の目的は、ウェブデザインの変遷を多角的にとらえ、各
要素の特徴を具体化し、その特徴がどの系統の影響を受けている
かを分類学的アプローチで顕在化させ、形質[1]
ごとに分類し、系
統樹でまとめることである。単に時系列でまとめるのではなく、
個々のウェブデザインの持っている特徴を進化の過程や外的要
因でとらえていくことが、本研究の重要な点である。ウェブデザ
インはデザイン分野の中でも比較的新しく、その変遷を的確にま
とめた先行研究は多くないのが現状である。その理由として、ウ
ェブデザインの変化があまりにも激しく、分析や考察をしように
も、追いつかない状況が挙げられる。系統立ててまとめることは
進めるべきであり、その中でウェブデザインの進化の可能性や展
望を見出だせるのではないかと考える。
３．先行研究の事例
ウェブデザイン史の初期の頃の変遷は「教科書には載らないニ
ッポンのインターネットの歴史教科書[2]
」が詳しい。デザイン史
をまとめた書物は多々あるが、ウェブデザイン史についてページ
を多く割いたものはあまり見られない。その点で、本書は貴重な
資料といえる。ただし、デザイン学的な視点でまとめられていな
い点と、発行が 2005 年である点で、情報に不足があり、そこに
本研究を進める意義を見出すことができる。
４．系統樹とはなにか
生物同士の関係性を樹の枝のように線で示したもので、進化の
プロセスを表すのに用いられる。図１にチャールズ・ダーウィン、
図 2 にエルンスト・ヘッケルが描いた系統樹を示す[3]
。枝分かれ
していく様はまさに“樹”といえる。
系統樹の構成[4] [5]
を考えていくにあたり、留意しなければなら
ない点は各要素のなにを基に枝分かれ（以下、分岐）させるのか、
進化の程度や時間の経過を示す枝の長さと高さをどうするのか、
という点である。特に、分岐の考え方が重要である。上述したよ
うに、ウェブデザインは流行や動作環境に影響を受けることが多
いが、これら以外にもウェブマーケティングやウェブプロモーシ
ョン、あるいはサイト全体の階層構造や HTML と CSS といった
ソースコードの要素も加味していかなくてはならない。本研究で
は、ウェブサイトのひとつひとつの要素を形質ととらえ、形質が
より色濃く表面化している時に、分岐させて、系統樹を描くこと
を想定している。
５．対象
本研究の対象となるウェブサイトは広大なインターネット上
に存在する全てのウェブサイトの中から、企業あるいは団体組織
のマイルストーンとなり得たものとする。例えば、検索エンジン
でいえば、カテゴリ型検索の始祖である YAHOO!が挙げられる。
カテゴリ型は 2000 年頃に隆盛を極めたが、今は減少の一途であ
る。一方、ロボット型検索エンジンの代表格は Google である。
Google はロボット型検索エンジンの始祖ではなく、Google の誕
生以前にも多くのロボット型検索エンジンは存在していた。が、
いずれも使い勝手の点でカテゴリ型に勝っていなかった。リンク
ポピュラリティ[6]
を取り入れたインデックスの手法が Google に
よって開発されたことで、状況は一変し、YAHOO!は検索エンジ
ンのシェアを大きく落としていくことになり、現在 YAHOO!は検
索エンジンの機能そのものを Google にアウトソーシングしてい
る。この変遷は本研究にとって多くの示唆に富むものであり、参
考にしたい。本来であれば、ミクロの視点で全てのウェブサイト
を対象にするべきであるが、現存するウェブサイトの数は膨大で、
現実的とは言い難い。従って、上述したように企業あるいは団体
組織のウェブサイトの中で、特にマイルストーンとなったものを
重点的にとらえ、マクロの視点で、全体像を俯瞰することとする。
BULLETIN OF JSSD 2016 日本デザイン学会 デザイン学研究292](https://image.slidesharecdn.com/63160-171120075658/85/-1-320.jpg)
![６．方法
マイルストーンとしてのウェブサイトを検証する際に、その時
の状態がそのまま維持されているとは考えにくい。ウェブサイト
とは常に改定される性質のものであり、それがなされない状態は
管理側によって放棄されたことを意味する。古い情報が掲載され
ていたり、誰も使わなくなったサービスが展開されているウェブ
サイトは、ある種の“死”を迎えている状態といえる。しかしなが
ら、その現象もまた生物の進化の過程になぞらえることができ、
本研究にとっては重要な要素になる。
現在進行形で進化しているのか、存在するも役目を終えてしま
ったのか、それとも存在すらなくなってしまったのか、ウェブサ
イトの変遷を追う必要があるが、そのためのツールとして、
「 Internet Archive WayBack machine[7]
」（ 以 下 、 WayBack
Machine）を用いる。このサイトはあらゆるウェブサイトを定期
的にアーカイブしており、時間を遡って、当時の状態を確認する
ことができるようになっている。本研究では、過去のウェブサイ
トを参照することが多いため、WayBack Machine を使って、系
統樹の精度を高めていくものとする。
７．形質
ウェブサイトを分類するための形質として、以下のものを検討
している。今後の研究の中で、取捨選択あるいは加えながら、形
質をより具体化していく予定である。
・流行（Web2.0、フラットデザイン、グリッドデザインなど）
・動作環境（PC サイト、モバイルサイトなど）
・ウェブマーケティング
・ウェブプロモーション
・階層構造
・HTML と CSS のソースコードの構成
・ソーシャルネットワークによる情報発信
・映像を駆使したリッチコンテンツ
・「ISO9241-11」によるユーザビリティ評価
・アクセシビリティ評価
８．まとめと今後の課題
今回はウェブデザインを体系的に分類していくための基礎と
なる諸要素をまとめた。研究の初期段階であるので、これから調
査分析等を通して、軌道修正を行いながら、進める予定である。
一番大きな課題として認識しているのは、形質である。生物にお
ける分類学がそうであるように、本研究の分類もまた客観的に評
価されるものでなくてはならない。上述した形質が全てではない
であろうし、かつそれぞれの細目も見定めていかなくてはならな
い。
参考文献
[1] 形質：性質や特徴のこと
[2] ばるぼら：「教科書には載らないニッポンのインターネット
の歴史教科書」（翔泳社）2005
[3] Wikipedia「系統樹」：https://ja.wikipedia.org/wiki/系統樹
（visited on 2016.4.2）
[4] 三中：「系統樹思考の世界 すべてはツリーとともに」（講談
社）2006
[5] 三中、杉山：「系統樹曼荼羅」（NTT 出版）2012
[6]リンクポピュラリティ：外部から受けているリンクの数によ
って、ウェブページの価値を評価する指標
[7] Internet Archive「WayBack Machine」：
https://archive.org/web/（visited on 2016.4.2）
図 1 チャールズ・ダーウィンの系統樹 図 2 エルンスト・ヘッケルの系統樹
日本デザイン学会 デザイン学研究 BULLETIN OF JSSD 2016 293](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
Recently uploaded
Recently uploaded (17)
Featured
Featured (20)
ウェブデザインの体系的分類に関する研究:分類学の視点でウェブデザイン史の系統樹を試みる
- 1. ウェブデザインの体系的分類に関する研究 － 分類学の視点でウェブデザイン史の系統樹を試みる － Study on systematic classification of web design － From a viewpoint of taxonomy, the phylogenetic tree of web design history is attempted to be built － 村井貴 Takashi MURAI 北海道大学 It is thought that we can make clear the whole image of Web design history more by classifying the characteristics of websites systematically. In this study, we try to create a phylogenetic tree, selecting a website that became a milestone in particular from among the websites of corporations and group organizations, and classifying it base on its individual characteristics. The phylogenetic tree is a kind of info graphics that can visualize a theme to be treated clearly. In this article, we presented a study concept that is a pre-stage of study. In classification, we showed elements such as fashion, operational environment, Web marketing, Web promotion, and so on. Key Word : Web Design, Phylogenetic Tree, Taxonomy １．研究の背景 ウェブデザインの歴史を考える上で重要なことは、なにがその デザインに影響を与えたのかを知ることである。特に、時代ごと の流行と、動作環境による影響が大きい。前者でいえば、鏡面反 射の効果を取り入れた Web2.0 や、最近広まっているフラット デザインやグリッドデザインがある。後者であれば、ブラウザや 端末の仕様が挙げられる。PC、スマートフォン、タブレットにひ とつのソースで対応し、端末ごとにデザインを変化させるレスポ ンシブデザインなどはまさにその典型例である。これらの影響が インターネット上に広がると、似たデザインや同じような文書構 造のウェブサイトが急速に広がり、また、淘汰され、生存競争が 行われていく。このプロセスは生物の進化に近いと考えられる。 ２．研究の目的 本研究の目的は、ウェブデザインの変遷を多角的にとらえ、各 要素の特徴を具体化し、その特徴がどの系統の影響を受けている かを分類学的アプローチで顕在化させ、形質[1] ごとに分類し、系 統樹でまとめることである。単に時系列でまとめるのではなく、 個々のウェブデザインの持っている特徴を進化の過程や外的要 因でとらえていくことが、本研究の重要な点である。ウェブデザ インはデザイン分野の中でも比較的新しく、その変遷を的確にま とめた先行研究は多くないのが現状である。その理由として、ウ ェブデザインの変化があまりにも激しく、分析や考察をしように も、追いつかない状況が挙げられる。系統立ててまとめることは 進めるべきであり、その中でウェブデザインの進化の可能性や展 望を見出だせるのではないかと考える。 ３．先行研究の事例 ウェブデザイン史の初期の頃の変遷は「教科書には載らないニ ッポンのインターネットの歴史教科書[2] 」が詳しい。デザイン史 をまとめた書物は多々あるが、ウェブデザイン史についてページ を多く割いたものはあまり見られない。その点で、本書は貴重な 資料といえる。ただし、デザイン学的な視点でまとめられていな い点と、発行が 2005 年である点で、情報に不足があり、そこに 本研究を進める意義を見出すことができる。 ４．系統樹とはなにか 生物同士の関係性を樹の枝のように線で示したもので、進化の プロセスを表すのに用いられる。図１にチャールズ・ダーウィン、 図 2 にエルンスト・ヘッケルが描いた系統樹を示す[3] 。枝分かれ していく様はまさに“樹”といえる。 系統樹の構成[4] [5] を考えていくにあたり、留意しなければなら ない点は各要素のなにを基に枝分かれ（以下、分岐）させるのか、 進化の程度や時間の経過を示す枝の長さと高さをどうするのか、 という点である。特に、分岐の考え方が重要である。上述したよ うに、ウェブデザインは流行や動作環境に影響を受けることが多 いが、これら以外にもウェブマーケティングやウェブプロモーシ ョン、あるいはサイト全体の階層構造や HTML と CSS といった ソースコードの要素も加味していかなくてはならない。本研究で は、ウェブサイトのひとつひとつの要素を形質ととらえ、形質が より色濃く表面化している時に、分岐させて、系統樹を描くこと を想定している。 ５．対象 本研究の対象となるウェブサイトは広大なインターネット上 に存在する全てのウェブサイトの中から、企業あるいは団体組織 のマイルストーンとなり得たものとする。例えば、検索エンジン でいえば、カテゴリ型検索の始祖である YAHOO!が挙げられる。 カテゴリ型は 2000 年頃に隆盛を極めたが、今は減少の一途であ る。一方、ロボット型検索エンジンの代表格は Google である。 Google はロボット型検索エンジンの始祖ではなく、Google の誕 生以前にも多くのロボット型検索エンジンは存在していた。が、 いずれも使い勝手の点でカテゴリ型に勝っていなかった。リンク ポピュラリティ[6] を取り入れたインデックスの手法が Google に よって開発されたことで、状況は一変し、YAHOO!は検索エンジ ンのシェアを大きく落としていくことになり、現在 YAHOO!は検 索エンジンの機能そのものを Google にアウトソーシングしてい る。この変遷は本研究にとって多くの示唆に富むものであり、参 考にしたい。本来であれば、ミクロの視点で全てのウェブサイト を対象にするべきであるが、現存するウェブサイトの数は膨大で、 現実的とは言い難い。従って、上述したように企業あるいは団体 組織のウェブサイトの中で、特にマイルストーンとなったものを 重点的にとらえ、マクロの視点で、全体像を俯瞰することとする。 BULLETIN OF JSSD 2016 日本デザイン学会 デザイン学研究292
- 2. ６．方法 マイルストーンとしてのウェブサイトを検証する際に、その時 の状態がそのまま維持されているとは考えにくい。ウェブサイト とは常に改定される性質のものであり、それがなされない状態は 管理側によって放棄されたことを意味する。古い情報が掲載され ていたり、誰も使わなくなったサービスが展開されているウェブ サイトは、ある種の“死”を迎えている状態といえる。しかしなが ら、その現象もまた生物の進化の過程になぞらえることができ、 本研究にとっては重要な要素になる。 現在進行形で進化しているのか、存在するも役目を終えてしま ったのか、それとも存在すらなくなってしまったのか、ウェブサ イトの変遷を追う必要があるが、そのためのツールとして、 「 Internet Archive WayBack machine[7] 」（ 以 下 、 WayBack Machine）を用いる。このサイトはあらゆるウェブサイトを定期 的にアーカイブしており、時間を遡って、当時の状態を確認する ことができるようになっている。本研究では、過去のウェブサイ トを参照することが多いため、WayBack Machine を使って、系 統樹の精度を高めていくものとする。 ７．形質 ウェブサイトを分類するための形質として、以下のものを検討 している。今後の研究の中で、取捨選択あるいは加えながら、形 質をより具体化していく予定である。 ・流行（Web2.0、フラットデザイン、グリッドデザインなど） ・動作環境（PC サイト、モバイルサイトなど） ・ウェブマーケティング ・ウェブプロモーション ・階層構造 ・HTML と CSS のソースコードの構成 ・ソーシャルネットワークによる情報発信 ・映像を駆使したリッチコンテンツ ・「ISO9241-11」によるユーザビリティ評価 ・アクセシビリティ評価 ８．まとめと今後の課題 今回はウェブデザインを体系的に分類していくための基礎と なる諸要素をまとめた。研究の初期段階であるので、これから調 査分析等を通して、軌道修正を行いながら、進める予定である。 一番大きな課題として認識しているのは、形質である。生物にお ける分類学がそうであるように、本研究の分類もまた客観的に評 価されるものでなくてはならない。上述した形質が全てではない であろうし、かつそれぞれの細目も見定めていかなくてはならな い。 参考文献 [1] 形質：性質や特徴のこと [2] ばるぼら：「教科書には載らないニッポンのインターネット の歴史教科書」（翔泳社）2005 [3] Wikipedia「系統樹」：https://ja.wikipedia.org/wiki/系統樹 （visited on 2016.4.2） [4] 三中：「系統樹思考の世界 すべてはツリーとともに」（講談 社）2006 [5] 三中、杉山：「系統樹曼荼羅」（NTT 出版）2012 [6]リンクポピュラリティ：外部から受けているリンクの数によ って、ウェブページの価値を評価する指標 [7] Internet Archive「WayBack Machine」： https://archive.org/web/（visited on 2016.4.2） 図 1 チャールズ・ダーウィンの系統樹 図 2 エルンスト・ヘッケルの系統樹 日本デザイン学会 デザイン学研究 BULLETIN OF JSSD 2016 293