今のYahoo!やGoogleyサイトは、どのように形作られてきたのか? ウェブ美術館「Web Design Museum」でわかること
「Internet Archive」は、過去のウェブサイトをアーカイブしたコンテンツとして有名だ。
さらに、ウェブデザインの流れを時系列で展示するミュージアム「Web Design Museum」がある。
「Web Design Museum」は、
1995年から2005年の間にウェブデザインのトレンドを示すウェブサイトを展示した"電子美術館"だ。Internet Archiveや運営者自身の持つアーカイブから厳選した、900を超えるウェブサイトが展示されている。
集められているのは優れたデザインのウェブサイトで、かつ、そのサイトのデザインの変遷をタイムラインで見ることができる。
Web Design Museum.org
この「Web Design Museum」を使って、ウェブサイトのデザインの変化をいくつかの面から考えてみたい。
ファッションのトレンドのように、当然、ウェブサイトのデザインにも流行がある。
おもしろいのが、デザインの流行り廃りは、見た目のかっこよさという面よりも
・HTML仕様
・ブラウザ技術の進化
・ウェブで展開されるサービスの変化
といった要素に引っ張られる(考えてみれば、当然なのだが)。
◎レイアウトもテーブルからカラムへ
よく知られているようにウェブサイトは、基本、HTML(HyperText Markup Language)と呼ばれるマークアップ言語で書かれている。HTMLは国際的に標準化されている仕様だが、折々で新たな機能が追加されてきた。
当初は、テキストや画像を使ってページを表示できるだけだったが、次第に複雑なレイアウトが求められるようになる。といっても、当初は、複雑な調整ができるレイアウト機能がなかったので、「表」を表現するtableタグを使ってテキストや画像を配置するテーブルレイアウトなどが使われた。
tableタグを使った配置と思われる、Googleの1998年のトップ画像
また、この頃からブラウザ各社が独自仕様を打ち出していく。
その流れにフレームframe / frameset )があった。これは複数のHTMLファイルで1つのページを構成する方法だ。
Netscapeの1996年のトップページ。フレーム(frame / frameset )は当初、Netscapeの独自仕様だった
しかし、マークアップ言語としてのHTMLは文書構造を示すというのが一義。
表ではないのにtableタグが使われるのは、本来の用法と違うとして、テーブルレイアウトは廃れていく。
また、フレームも「1つのHTMLファイルが1つのページ」という原則からは外れる。
SEO、アクセシビリティ的にもポジティブな要素は少なく、人によって推奨・非推奨の評価が分かれた結果、frame / framesetはHTML5では廃止されている。
Webデザインで領域を分けてページレイアウトするには、CSSの本格的な仕様を待たねばならなかった。
そして2016年、HTML5.1が勧告され、構造を示すHTML、構造を表現するCSSによりウェブサイトが作られるようになっていく。
HTML5ではカラムレイアウトが主流になり、現在に至る。
そのほか複数のボックスをタイル状に配置するグリッドデザインもある。
◎"ウェブサイト"の位置づけ
こうした流れは、単純にニーズと機能の問題ではなく、ウェブサイトというものの位置づけの変化が影響している。
ウェブサイトが登場したばかりの頃、ウェブは紙の印刷物の代替と目され、そのため、レイアウトにも凝ったものが求められた。「ウェブページ」という言い方もそれを表している。
多くの人が本や雑誌のイメージをウェブに持ち込もうとしていたのだ。
またリアルな物理的なインタフェースが意識された。これも、ウェブがその代替としてとらえられていたからだ。
ボタンに影を表示するというように、リアルなインタフェースを模したデザインも意識された
しかし、ウェブが確立されていくと、ウェブサイトが「紙」や「板」ではなくなる。
ウェブの多くがウェブサービス的な作りになったからだ。
ウェブページは静的に、いつでも誰にでも同じものを返すものではなくなり、ユーザーのアクセスのタイミング、その入力に応じて動的に、そのときどきで生成され、表示されるようになったのだ。
今のウェブでは、"ページ"という概念は薄れている。
特に、スマートフォンやタブレット表示を意識した作りでは、ページ領域は分割されないし、わざわざ"ページ"を区切らない。スクロールで延々と要素を読み込み続けるイメージだ。
ただ例外もあって、ウェブメディアなどの記事はページ分割される。これはPVのカウントや広告表示などの事情が絡んでいるからだ。
紙のページではなく、ウェブサイトとして必要な情報を整理して見せる、現代のデザイン
ウェブサイトは永久に残るように思われているが、実は消滅していったサイトも数多い。
サイト自体はあったとしても、たとえば1年前のデザインのまま表示されることは少なく、同じデザインを継続するのは難しい。そういう意味で、意外に儚い。
Web Design Museumのような電子美術館は、ただ眺めるだけでも、古くからインターネットを使っている人であれば懐かしく思うだろう。
逆に、滅多に見ることはできない
・ディレクトリ型検索サービスであったときの「Yahoo!」のトップ画面
・「BETA」が付いているGoogleのロゴ
など、初めて見る人なら新鮮に映ることだろう。
Web Design Museumは企業ごとにアーカイブされているので、特定企業のデザインの流れを容易に見ることができるし、「Years」のほか、「Categories」や「Styles」としてのカテゴリー分けも可能だ(カテゴリーのラベルは少々、独特だが)。
デザインを時系列で確認できることで、現在に至るインターネットの流れやウェブの歴史をさかのぼって考えてみてもおもしろい。
◎ウェブデザインを展示する「Web Design Museum」というサイトがある
◎900以上のウェブサイトが集められ、デザインの変遷をタイムラインで見ることができる
◎ただ眺めるだけでも、デザインの流れを追ってみてもおもしろい
大内孝子
さらに、ウェブデザインの流れを時系列で展示するミュージアム「Web Design Museum」がある。
「Web Design Museum」は、
1995年から2005年の間にウェブデザインのトレンドを示すウェブサイトを展示した"電子美術館"だ。Internet Archiveや運営者自身の持つアーカイブから厳選した、900を超えるウェブサイトが展示されている。
集められているのは優れたデザインのウェブサイトで、かつ、そのサイトのデザインの変遷をタイムラインで見ることができる。
Web Design Museum.org
この「Web Design Museum」を使って、ウェブサイトのデザインの変化をいくつかの面から考えてみたい。
ファッションのトレンドのように、当然、ウェブサイトのデザインにも流行がある。
おもしろいのが、デザインの流行り廃りは、見た目のかっこよさという面よりも
・HTML仕様
・ブラウザ技術の進化
・ウェブで展開されるサービスの変化
といった要素に引っ張られる(考えてみれば、当然なのだが)。
◎レイアウトもテーブルからカラムへ
よく知られているようにウェブサイトは、基本、HTML(HyperText Markup Language)と呼ばれるマークアップ言語で書かれている。HTMLは国際的に標準化されている仕様だが、折々で新たな機能が追加されてきた。
当初は、テキストや画像を使ってページを表示できるだけだったが、次第に複雑なレイアウトが求められるようになる。といっても、当初は、複雑な調整ができるレイアウト機能がなかったので、「表」を表現するtableタグを使ってテキストや画像を配置するテーブルレイアウトなどが使われた。
tableタグを使った配置と思われる、Googleの1998年のトップ画像
また、この頃からブラウザ各社が独自仕様を打ち出していく。
その流れにフレームframe / frameset )があった。これは複数のHTMLファイルで1つのページを構成する方法だ。
Netscapeの1996年のトップページ。フレーム(frame / frameset )は当初、Netscapeの独自仕様だった
しかし、マークアップ言語としてのHTMLは文書構造を示すというのが一義。
表ではないのにtableタグが使われるのは、本来の用法と違うとして、テーブルレイアウトは廃れていく。
また、フレームも「1つのHTMLファイルが1つのページ」という原則からは外れる。
SEO、アクセシビリティ的にもポジティブな要素は少なく、人によって推奨・非推奨の評価が分かれた結果、frame / framesetはHTML5では廃止されている。
Webデザインで領域を分けてページレイアウトするには、CSSの本格的な仕様を待たねばならなかった。
そして2016年、HTML5.1が勧告され、構造を示すHTML、構造を表現するCSSによりウェブサイトが作られるようになっていく。
HTML5ではカラムレイアウトが主流になり、現在に至る。
そのほか複数のボックスをタイル状に配置するグリッドデザインもある。
◎"ウェブサイト"の位置づけ
こうした流れは、単純にニーズと機能の問題ではなく、ウェブサイトというものの位置づけの変化が影響している。
ウェブサイトが登場したばかりの頃、ウェブは紙の印刷物の代替と目され、そのため、レイアウトにも凝ったものが求められた。「ウェブページ」という言い方もそれを表している。
多くの人が本や雑誌のイメージをウェブに持ち込もうとしていたのだ。
またリアルな物理的なインタフェースが意識された。これも、ウェブがその代替としてとらえられていたからだ。
ボタンに影を表示するというように、リアルなインタフェースを模したデザインも意識された
しかし、ウェブが確立されていくと、ウェブサイトが「紙」や「板」ではなくなる。
ウェブの多くがウェブサービス的な作りになったからだ。
ウェブページは静的に、いつでも誰にでも同じものを返すものではなくなり、ユーザーのアクセスのタイミング、その入力に応じて動的に、そのときどきで生成され、表示されるようになったのだ。
今のウェブでは、"ページ"という概念は薄れている。
特に、スマートフォンやタブレット表示を意識した作りでは、ページ領域は分割されないし、わざわざ"ページ"を区切らない。スクロールで延々と要素を読み込み続けるイメージだ。
ただ例外もあって、ウェブメディアなどの記事はページ分割される。これはPVのカウントや広告表示などの事情が絡んでいるからだ。
紙のページではなく、ウェブサイトとして必要な情報を整理して見せる、現代のデザイン
ウェブサイトは永久に残るように思われているが、実は消滅していったサイトも数多い。
サイト自体はあったとしても、たとえば1年前のデザインのまま表示されることは少なく、同じデザインを継続するのは難しい。そういう意味で、意外に儚い。
Web Design Museumのような電子美術館は、ただ眺めるだけでも、古くからインターネットを使っている人であれば懐かしく思うだろう。
逆に、滅多に見ることはできない
・ディレクトリ型検索サービスであったときの「Yahoo!」のトップ画面
・「BETA」が付いているGoogleのロゴ
など、初めて見る人なら新鮮に映ることだろう。
Web Design Museumは企業ごとにアーカイブされているので、特定企業のデザインの流れを容易に見ることができるし、「Years」のほか、「Categories」や「Styles」としてのカテゴリー分けも可能だ(カテゴリーのラベルは少々、独特だが)。
デザインを時系列で確認できることで、現在に至るインターネットの流れやウェブの歴史をさかのぼって考えてみてもおもしろい。
◎ウェブデザインを展示する「Web Design Museum」というサイトがある
◎900以上のウェブサイトが集められ、デザインの変遷をタイムラインで見ることができる
◎ただ眺めるだけでも、デザインの流れを追ってみてもおもしろい
大内孝子