読むウェブ ~本とインタラクション

第2回 ページをめくる

この記事を読むのに必要な時間:およそ 3 分

Webブラウザの登場

Webブラウザとは,WWW(World Wide Web)の情報を閲覧するためのアプリケーションソフトウェアである。情報の拾い読み(ブラウジング)を可能にする。1990年,ティム・バーナーズ=リーはNeXT Computer社のワークステーション「NeXT」上で使用できる「WorldWideWeb」という世界初のブラウザを開発,翌年の8月には世界初のWebサイトを公開している。今から15,16年前のことである。私たちにとって忘れることのできないWebブラウザ「Mosaic(モザイク)」は1993年,イリノイ大学のNCSA(National Center for Supercomputing Applications :米国立スーパーコンピュータ応用研究所)に所属していたマーク・アンドリーセンらによって開発された。このMosaicによってWebがより身近になり,世界中のネットユーザーは玉石混交の情報にアクセスする楽しさに酔いしれた。

1994年,ジム・クラークとマーク・アンドリーセンらによって設立されたネットスケープ・コミュニケーションズ社(前身はモザイク・コミュニケーションズ)「Netscape Navigator」をリリース。1995年にはJavaScript,Cookieなどの独自拡張機能を搭載した「Netscape Navigator 2.0」,そしてマイクロソフト社が「Internet Explorer」をリリースする。とにかく速いペースだった。多くのユーザーはベータ版が公開されると,すぐにダウンロードして試用していた(この頃はWeb制作業務にベータ版のブラウザを使うデザイナーも少なくなかった)。「rough consensus and running codes」というインターネットの行動原理を表す言葉がある。おおよその合意があれば実際にプログラムを走らせてみようという考え方だ。市場のシェア争い(ブラウザ戦争)が激化していた頃は,まさにラフ・コンセンサスで刺激的な時代であった。

Webページとデザイナー

「Webデザイナー」もしくは「Webクリエーター」という肩書きを目にするようになったのは,1996年以降だ。DTP業界やマルチメディア業界から人材が集まり,Webクリエイティブ業界が形成されつつあった。ビジュアル系のデザイナーがHTMLを習得し,大半の作業を担う時代だったといえるだろう。この頃はCSSをサポートしたブラウザがなく,視覚表現を分離するという概念は浸透せずHTMLによる物理マークアップが定着してしまう。たとえば,見出しの表現をおこなう場合,font要素で文字の大きさや色を決め,b要素で太字にするのだ。本来,大見出しのマークアップではh1要素が推奨されるが,あまり使用されなかった。ブラウザのデフォルトCSSでは極端に大きく,太く,そして上下に大きな余白が作られてしまうからだ。h1要素のマークアップは「みっともない」ということになる。当時はデザイナーがCSSを実践できる環境ではなかったため,デフォルトCSSを上書き(オーバーライド)するという発想も理解しにくいものだった。さらに,Webページ作成のビジュアルエディターが物理マークアップツールの機能価値を強調していたことも大きく影響している。「太字」アイコンをクリックするとb要素,「インデント」アイコンをクリックするとblockquote要素,といった感じである。ビジュアルエディターを使う多くのデザイナーは書き出されるHTMLを見ることはなく,ワープロやDTPソフトのように使っていたのだから,やむを得ない。

視覚表現におけるクライアントからの要求は,カタログやパンフレットなどの印刷物が基準になっていた。要するに,Webページでも同様のフォーマットを採用してクオリティを向上させてほしいということだ。デザイナーは,大見出しや中見出しだけではなく,小見出しや本文の一部も「画像」を使って表現することで印刷物を模倣することになる。画像だらけのページが作られ,ブラウザ内はGIFやJPEGのペーストボード状態だった。細かく分割されたグラフィックがレンダリングされる様は,パッチワーク・アニメーションのように表示された。

メタファの採用

CSSによる視覚表現が可能になってからは,フォントやカラー,余白,段組みなど多くのデザイン要素を詳細にハンドリングできるようになった。画像もimg要素による「伝達情報」とCSSによる「装飾」に分別され,(検索エンジンや音声読み上げソフトなどのプログラムに正しい情報を使える)マシンアプローチにも配慮されている。

ただ,雑誌や書籍,カタログなどの印刷物を模倣するWebページが無くなったわけではない。FlashやAjaxなどの技術を駆使したコンテンツが多数公開されている。「テレビ的表現のわかりやすさ」「使う楽しさ」,「驚きや感動の演出」といったドキュメントベースのWebページでは表現しにくい要素を,拡張技術で補っているといえる。スタンダードな手法としては,実世界のモノを取り入れて表現する「メタファ」がある。最も理解しやすい事例は,WindowsやMacなどのOSだ。机の上を模した「デスクトップ・メタファ」を採用している。その他,地図を取り入れた「マップ・メタファ」や実際の機械をそのまま表現した「メカニック・メタファ」などがある。

著者プロフィール

境祐司(さかいゆうじ)

インストラクショナル・デザイナー[Instructional Designer]として学校,企業の講座プラン,教育マネジメント,講演,書籍執筆などの活動をおこなう。2000年より情報デザイン関連のオンライン学習実証実験を始める。現在,教育デザイナー育成を目的としたフォーラムを立ち上げるため準備中。著書に「速習Webデザイン Flash CS4」(技術評論社),「Webデザイン&スタイルシート逆引き実践ガイドブック」(ソシム)などがある。

URLhttp://admn.air-nifty.com/monkeyish_studio/

著書

コメント

コメントの記入