1993年のトップWebデザインスタイル

Prof. Dr. スタイル

---

1993年のトップ10 Webデザインスタイル（Vernacular Web 3）

---

コードワード

インターフェースデザインの入門講座で、学生たちにいつもこう話します。世界のあらゆるデザインはPhotoshopやその他のAdobe製品で作られていると思い込んでいる学生が99%です。もしデザインがコンピューターで知覚されるべきものなら、これらのAdobeファイルは、グラフィックスに込められた崇高なアイデアに従って、それをインタラクティブにしたいと切望するプログラマーたちの部屋に投げ込まれるでしょう。だから、新しいメディアの非架空の課題を示し、なぜインターフェースデザインを学ぶべきかを説明するのです。（ここでは短く言いますが：インターフェースデザイナーは、グラデーションをボタンに適用するためにフォトショッパーに引き渡されるプロジェクトを開発します。）

ほとんどの学生は納得せず、グラフィックデザインを専攻することを選ぶでしょう。ウェブデザイナーになりたいと思っている学生でさえそうです。しかし、WWWの17年の歴史は、ウェブデザイナーにはかなり異なるスキルセットが必要であることを示しています。だからこそ、私に与えられた最後の3時間を、ウェブを専攻しないが、それでもウェブをデザインすることになるであろう人々に影響を与えるために、ウェブデザインスタイルの真の歴史を強調することに費やしました。真の歴史とは、1993年から今日までの、その時代の技術、信念、ニーズに根ざした本質的なデザインのトレンドを意味します。輸入されたビジュアルトレンド1はこのタイムラインからは除外します。

私の講演では、1990年代半ばに大きな重点が置かれます。この時代は、ウェブがアマチュアによって構築され、整理され、装飾され、非常にウェブ固有のジャンルとルックスが誕生し、信じられないほどの体験の場となった時代です。2

しかし、それ以前はどうだったのでしょうか？このインターネットブームの前、スターの背景、跳ねる封筒、工事中サインの騒ぎになる前に、ワールドワイドウェブはどのように見えていたのでしょうか？

さて、1991年に、ティム・バーナーズ＝リーはCERNの「nxoc01」というコンピューターのhypertext/WWW/フォルダ内にある最初のウェブページTheProject.htmlを公開しました。彼自身も、彼の同僚も、この最初のバージョンを保存しようとはしませんでした。私たちが知っている唯一のことは、URL http://nxoc01.cern.ch/hypertext/WWW/TheProject.html と、最初のページが1992年11月にどのように見えたかということです。これは十分早い時期であり、Mosaicブラウザがリリースされ、CERN外の人々が自分のページを作り始める半年前のことです。

1993年から1994年に作成されたページが、その原始的な方法で新千年紀まで生き残った数を推定するのは困難です。もしその頃オンラインに掲載されたものを見つけることができれば、最良の場合でも、Russian Space Science Internet のような1995年から1996年のスキンが表示されるでしょう。これは、当時の新しいNetscapeブラウザによって明らかに形作られたリデザインです。

しかし、1993年に永遠に生きるページを見つける方法があります。新しい学生たちにそれらを紹介するために、私はGoogleで「Prof. Dr.」を検索します。いくつかの学期前は、この検索でライブパフォーマンスを行うことが可能でした。学術的なスタイルのページがトップの結果でした。2010年6月現在、その魔法は消えたようです。この記事のために十分な例を集めるために、私は結果ページ110まで行かなければなりませんでした。

「Prof.Dr」はコードワードであり、巧妙な検索リクエストです。学術界以外にも、常に純粋なマークアップでサイトをデザインしてきた、あるいは最近1993年の基準に合わせてリデザインしたユーザーがいることは承知しています。それでも、この記事内では、上級学術職に就き博士号を持つ人物のページのみを使用し、この名前を学術的な称号に基づいて使用することを、歴史への敬意として、そしてインターネットの至るところで最初のページが大学で構築されたことのリマインダーとして提案します。

［画像］

URL

アドレスにチルダ（~）が含まれるページを確認するのは理にかなっています。しかし、今日、URLとページの見た目の間には直接的な関連はありません。「~」は、ページが実際のProf. Dr.スタイルで作られていることを保証するものではありません。企業大学風から一般的な企業風まで、さまざまなものが見られます。

チルダが存在しないにもかかわらず、初期ウェブのスタイルが100%存在する例は十分にあります。

Prof. Dr.が独自のドメインを登録しても、ウェブパイオニアのスタイルを維持している場合もあります。

しかし、ドメイン名があると、デザイナー、写真家、プロジェクトマネージャーがコンサルティングされた場合が多いです。

URLの「~」は、初期のコンピュータ文化、特に「ユーザー」が「開発者」と同義だった頃を思い出させる、見た目の一部であり続けています。3 そのため、可能な限りチルダ付きの例を使用します。

プリミティブで、すべて同じ

Prof. Dr.のページはウェブの物語を語ります。

レトロだからではありません。レトロという言葉や概念はこのケースでは間違っていることを言及することが重要です。Prof. Dr.は、サイトが1993年に作成され、最後に1995年に更新されたことを全く意味しません。その逆です。通常、現在の学期のコースリストで更新されたり、GoogleカレンダーやTwitterのような現代的なサービスへのリンクが含まれたり、Googleマップが埋め込まれたりしています。

それらは調査対象として魅力的です――それらは現在のものであり、時代を超越しています。Mosaic 1.0で開いてもクラッシュしません。

それでも、レトロではないなら、これらのページをどのように説明すればよいでしょうか？Prof. Dr.のページは独特の外観を持っています：プリミティブで、すべて同じ。そしてそれがそれらを歴史的に重要にしています。

プリミティビティは、ブラウザが単なるブラウザではなく、エディタでもあるという物語を伝えています。初期ウェブのすべてのユーザーはウェブコンテンツのプロデューサーでした。ウェブページは、それを見るためにブラウザで開かれるだけでなく、既存のページを新しいページのテンプレートとして使用して編集するためにも使われました。HTMLのシンプルなデザインにより、最初のユーザーは4〜5個の主要なタグだけで最先端のページを作成することができました。その結果、ウェブは急速に成長しました。選択肢が少なかったからこそ、多くのページが生まれました。

［画像］

次に、Prof. Dr.のページはひどく同じように見えます。ある学生が言ったように、まるでブラウザによって自動生成されたかのようです。しかし、皮肉なことに、それらはコンテンツ管理システムやサービスではなく、完全に人間によって生成された最後のページの一部です。

それらは、閲覧者のブラウザ設定に従って表示されます。これは、1990年代初頭の、あらゆるビジュアルデザインはユーザーの裁量に委ねられるべきだという考え方を明らかにしています。

ページ作成者は色、フォント、マージン、行長を定義しませんでした。その代わりに、エンドユーザーは自分のニーズや好みに応じて、ブラウザで色、フォント、リンク、グラフィックスの設定を行いました。インターネット上のすべてのページを白または灰色の背景で表示するかどうかを決めるのは、大したことではないかもしれません。しかし、色について考えるのではなく、コンセプトについて考えてください――各ユーザーは、自分自身のためにWWW全体の見た目を定義していました。

Wiredのジャーナリスト、ゲイリー・ウォルファーは1994年にこう書きました。

「このアプローチの美しさは、最大限のオープンさと柔軟性を許容することです。すべてのWorld Wide Webドキュメントは似ていますが、すべてのWorld Wide Webリーダー、つまりブラウザは異なることができます。」

［画像］

Mosaicの最初のバージョンでは、リンクの色を選択できました。その後、NCSA Mosaicは、多くの異なる方法でリンクを装飾し、RGBパレットから色を選択できるようになりました。これは、ユーザーが持つことができた「設定の自由」の最高の瞬間でした。

［画像］

「エンドユーザー＝デザイナー」というコンセプトは、とっくの昔に失われました。それは、接続された大学という非常に小さな4ウェブでのみ機能しました。

学術的なプロフィールや論文をオンラインで見栄え良くするために十分だったことは、私たち残りの人々には少なすぎました。ユーザーはブラウザ全体の設定をカスタマイズしたくありませんでした。彼らは自分のページを個性的で、その個性が他人のブラウザで失われないようにしたいと思っていました。

WWWが学術界の外へ進出するとすぐに、ブラウザのパラダイムは変化しました。1995年、Netscapeはブラウザの設定パレットを色とフォントに縮小し、同時にページのビジュアル表示を定義するための新しいHTML拡張機能を導入しました。5

［画像］

スイスの研究所で考案されたWWWは、人々のウェブになりました。

Prof. Dr. から Vernacular Web へ

1993年のプリミティブなマークアップスタイルから1996年の狂気への移行を、Prof. Dr.の検索結果をたどりながら見るのは非常に興味深いです。特定のProf. Dr.ウェブサイトがProf. Dr.スタイルの境界を越えることを可能にする、すべての小さな詳細を見ることができます。

また、Prof. Dr. スタイルは単なるスタイルであり、純粋なマークアップと同義ではないことを強調することも重要です。上記の例のどれもHTML1.0のバリデーションを通過しないでしょう。不思議ではありません、Prof. Dr.はプロのウェブ開発者ではありません。彼らは、自分たちも非専門家である学術界の同僚のコードを編集してページを作成しています。多くの場合、見出しは太字とフォントサイズのようなフォントスタイルのタグの組み合わせに置き換えられます。あるいは、意味論的な<address>タグが<pre>に置き換えられます。

視覚的なマークアップを構造的な目的で誤用しているページを、オンラインのホームに「生命を吹き込む」ステップを踏むページとは対照的に、私は依然としてProf. Dr.スタイルと見なします。

ウェブデザインの専門家でなくても、Prof. Dr. Stephen Darwallの個人的なホームページとProf. Dr. Harm Derksenのホームページの違いを見ることはできます。前者はProf. Dr.スタイルの典型的な代表者であり、後者はVernacular Webの顕著な例です。

Prof. Dr.のように見えるが、そうではないウェブサイトもあります。この2つを比較してください。

どちらもProf. Dr.のように見えますが、最初のページだけがそうです。Prof. Dr. Jankeのリンクは青色で下線が付いており、クリックすると短時間赤色に変わって、ブラウザがクリックを認識し、要求されたページがすぐに表示されることをユーザーにフィードバックします。これは、インターネット接続がそれほど速くなく、サーバーが接続してパッケージが到着するのを待ちながら、アクティブなリンクをしばらく見つめ、ベストエフォートネットワークの努力を感じることができた時代を思い出させます。そして、あなたは遠くまたは近くのどこかに連れて行かれます。他の青い下線付きリンクをたどってさらに進むこともできますし、戻ってクリックしたリンクが紫色に変わったのを見て、訪問済みリンクと未訪問リンクを区別することもできます。

Prof. Dr. Boucherieはリンクの色設定をデフォルトから変更しました（アクティブおよび訪問済みでも青色です）。これにより、Prof. Dr.のページとアマチュアウェブ、そしてその後のスタイルを分ける細い境界線を越えました。この視覚的に目立たない変更は、あらゆる種類の С анимацией やサウンドでページを飾ることとは比較になりませんが、アマチュアおよび「プロフェッショナル」ウェブへの道を開いたユーザーの自発的な行為です。

リンクの色を変更することは、ユーザーができる最初の、最も小さなことでした。時には、作者の好奇心とコードをいじる意欲の表れです。

しかし、多くの場合、ソースコードを見ると、リンクを作成できるが、生き生きとしたハイパーテキストを生成できないワードプロセッシングソフトウェアを使用して作成されたページであることが明らかになります。

興味深い例：Prof. Dr. KenderはProf. Dr.のページを作成しました。彼の博士課程の学生であるHassan H. Malikは、メンターのページをMicrosoft Wordで開き、自分自身のために1つ作成しました。リンクは存在し、青色で下線が付いていますが、生気がありません。

次のステップは、テキスト全般をいじることです。フォーマットしたり、フォントサイズを変更したり、色を付けたり…

…傲慢にも点滅させる6など、Prof. Dr. Günther Rüdigerはウェブサイトの見出し「Current Issues」にそれを行いました。点滅はHTMLタグの中の「ピンプ」であり、自分のページにそれを持つには非常に自信が必要です。

テキストに色を付ける次の論理的なステップは、背景色のカスタマイズです。

216色のウェブセーフカラーと、一般的に1600万色以上がありますが、自分のウェブページに本当に情熱を傾けている人にとっては、決して十分ではありません――そして背景色は背景画像に置き換えられます。

背景画像は、上記のページのように単なる素敵な模様であることもあれば、Prof. Dr.が活動している研究分野を示していることもあります。

もう一つの重要な変更点は、意味論的なマークアップ要素をグラフィックスに置き換えることです。リスト <li> は、箇条書き、バブル、アイコンになります。

水平線 <hr> は、より派手な線に変わります。

次に画像がアニメーション化され、下のページがますます真剣味を帯びなくなっていきます。

「真剣味を帯びなくなって」いますが、それは「専門家」の目から見ての話です。Prof. Dr. スタイルに関する記事は、アニメーションGIFについての発言を適切に記述する場所ではありませんが、我慢できません：ウェブページ上のアニメーションGIFは、低品質や軽いコンテンツの兆候ではありません。アイコンがアニメーション化されているということは、ページの作者が「ウェブデザインの10の最悪の間違い」、「今年のトップ10ウェブデザイン」などを読むよりも良いことをしているだけだということです。これはMyspaceのミュージシャンにも当てはまりますし、神経外科医であるProf. Dr. Ismail Hakki Aydinや、2002年ノーベル化学賞受賞者であるProf. Dr. Kurt Wüthrichにはさらに当てはまります。

1970年代に導電性ポリマーを発見したProf. Dr. Alan G. MacDiarmidは、1998年にサイトに「工事中」のサインを掲載し、2000年にノーベル賞を受賞しました。彼のサイトは、グリッドレイアウトのページの良い例でもあります。

テーブルを使ってウェブレイアウトを作成すること、つまりコンテンツを列とセルに配置することは、1990年代にはウェブページをデザインする一般的な方法でした。このテクニックで滑らかな見た目を達成できました（そして今でも可能です）。列とセルの間の境界線を非表示にしておけば。しかし、アマチュアのウェブデザイナーはこれらの境界線を表示することを好み、そのサイズ、色、量で実験しました。学術関係者も例外ではありませんでした。

そして、他のユーザーと同様に、彼らは他人のページを見て自分のページを作成する中で、ナビゲーションメニューの罠に陥りました。

…そしてフレームセット内のナビゲーションメニュー。

要約すると、新しいメディアへの好奇心、W3C勧告の無知、そして専門職への情熱を通じて、ウェブユーザー（科学的業績に関わらず）は、すべてが可能に思える環境を作り出しました。

• Prof. Dr. Winfried Kerkhoff は、ドゥルーズとガタリなら手放したくなるようなサイトで、自身の人生と仕事を紹介しています。
• Prof Dr. Civelek は、キラキラした文字で名前を書き、CVを無料ホスティングサーバーに載せています。
• 博士課程の学生Quanは、彼のメンターであるProf. Dr. Schneiderのためにホームページを作成しました。それは実際には読みにくく、教授の名前も記載されていませんが、それでもProf. Dr. Schneiderが大学から受け取った公式なインタラクティブ名刺よりも意味があります。

アマチュアスタイル7はかつて主流でした。1990年代後半に嘲笑され、ほとんど消去されましたが、「web2.0」の波の中で再び人々の注目を集めました。オリジナルのアマチュア文化はweb2.0とは大きく異なりましたが、その要素の多くは生き残り、今日のウェブではユーザーとメディアとの間の親密で真の関係の意味を担っています。Vernacular Webは認識された現象です。

そして、プリミティブで、すべて同じに見えるクラシックなProf. Dr.ページは、どのようなメッセージを伝えているのでしょうか？独立性です。学術界では、Prof. Dr.スタイルで作られたページは、機関のコーポレートアイデンティティやコンテンツ・ナレッジマネジメントシステムからの距離を示しており、これは達成するのが容易ではないステータスです。学術界の外では、そのようなページはインターネットについてすべてを知っているが、ウェブデザインをいじるにはクールすぎる人々によって作られています。

さらに、Prof. Dr.のページは、すぐにユニークになるであろう体験を提供します。

サイバーナショナルパーク

WWWはその17年の歴史の中で、何度も死ぬと宣言されました。単に生き残っただけでなく、すべてを包含するようになり、不死に近いものになりました。本当に悪いのはハイパーテキストです。

オペレーティングシステムのように進化するウェブブラウザは、相互リンクされたドキュメントのアイデアを置き去りにしています。ハイパーテキストは技術的にはまだ存在しますが、もはや重要ではなく、サーフィンやリンクも同様です。ウェブは主に、ユーザーが機能をアクティブ化するアプリケーションインターフェースで構成されています。

ページメタファーの廃止は、まだページであるウェブページがハイパーテキストを尊重せずに作成されている理由の説明にはなりません。例えば、自分がすでに表示されているページと同じページにリンクされているリンクを含まないページはほとんど残っていません。「about」リンクをクリックして「about」ページに来たとしましょう。「about」リンクはまだそこにあり、永遠にクリックして同じページを永遠にリロードできます。これは私たちが8「ゾンビリンク」と呼ぶものです。

GoogleやFlickrのような一部のインターネット巨大企業は、そのファサードでゾンビリンクを避けていますが、深く進むと泥沼に足を踏み入れます。他のほとんどは全く気にしません。なぜなら、彼らのリンクはナビゲーションにとって重要ではないからです。ユーザーはGoogleで検索するのであって、サーフィンはしません。

もう一つの理由は、コンテンツ管理システム（CMS）の広範な使用です。これらは複雑なプロジェクトのナビゲーションを作成し、その中のリンクを確立するのを容易にしますが、リンクがどこを指しているかを監視していません。もし監視していても、ほとんどはその情報から何も有用なことをしていません。

ユーザーはゾンビリンクや不格好なハイパーテキストに抗議しません。なぜなら、高速なインターネット接続の時代には、2〜3回の不要なクリックは大したことではないからです。ページはほとんどシームレスにリロードされ、リロードと呼ぶことさえできません、ただちらつくだけです。デザイナーは、ほとんどがグラフィックデザイナーであり、リンクの外観に関心があり、その動作をCMSに喜んで委任するため、気にしません。

絶え間ないリロードのちらつきは、今日のハイパーテキストの悲しい状態です。ハイパーテキストが中心であるプロジェクトであるWikipediaでさえ、自己リロードする疑似ナビゲーションリンクで覆われています。

クラシックなハイパーテキストは実際には十分に存在すると思われるかもしれません。例えば、Googleのリンクはすべて青色で、クリックすると赤く点滅し、訪問後に紫色に変わります。しかし、これらの色は偽物です！それらはサイトのデザインによって固定されており、私のブラウザの設定によるものではありません。Mosaicのクラシックなデフォルトのリンク色は、Prof. Dr.ウェブ時代から現在まで生き残った唯一の要素です――しかし、表面的なスタイリングの形でのみです。

本物のオンラインハイパーテキスト、手作りのリンク、リンクのように見え、振る舞うリンクを体験できる最後の場所は、初期のウェブ採用者とその精神を今も受け継ぐ人々のページです。お子さんと一緒に訪れてみてください。

Olia Lialina, 2010年7月

---

注釈

(1) ここにいくつかのWebデザインのトレンドがあります：2007年 2008年、2009年、および2010年（別ソース）、ウェブデザイン雑誌による。

(2) Drachenglut、Star Murals、Mr. Bui Quoc Quan、またはAccept Jesusを試してみてください。A Vernacular Web 1とA Vernacular Web 2を読んでください！

(3) ユーザー文化については、Digital Folkloreを参照してください。

(4) それは本当に小さかったです。厚いコンペンディウム『The Whole Internet』のわずか20ページでその内容全体を説明できました。

(5) 今日では、すべてのウェブページの見た目と動作が作成者によって完全に制御されているように見えます。ウェブ作成者はCSSでページの見た目を記述し、ブラウザはこの標準に忠実に従います。Mosaicのようにウェブ要素の見た目を変更する設定は、現在のブラウザではほとんどなくなりました。しかし、現在、ウェブユーザーは、ブラウザで遭遇するものの視覚デザインだけでなく、構造と機能さえも変更できる、はるかに大きな力を持っています：AddOns（Firefox）またはExtensions（Chrome）を使用すると、ウェブユーザーはブラウザで実行される小さな任意のコードを作成して共有でき、ウェブをひっくり返す可能性があります。最も一般的な用途は広告のフィルタリングですが、より過激な例はamazon.comのDVDストアをPirate Bayの対応する無料オファーに接続することです。現時点では、フォントサイズの設定を変更するよりも複雑であるため、この技術を実際に適用しているユーザーは多くありません。また、安定したウェブという幻想はほとんどのユーザーを安心させます。

(6) 本稿執筆時点では、ネイティブ<blink>タグをサポートしているブラウザはFirefoxとOperaのみです。

(7) 「Geocities 1996」、「Dirtstyle」、または「mid-90's」という名前でも表示されることがあります。

(8) Merz AkademieのIDパスウェイの教師たち。Dragan Espenschiedによって作られた用語です。