ウェブ創世記からサイトデザインに関わってきた立場より、企業トップページデザインの変遷を考察したレポートです。


【1】開設期 1995〜1996年 


■アイキャッチ画像+社名+ウェルカムメッセージ

トップページの上部には、インターネットの新しい世界を示すハイテク調のグラフィックがバナーのように入り、企業のロゴ、Welcome to XXXXX Site!といった歓迎メッセージ、English | Japanese といったリンクが配置されていた。
世界に発信する者のネットワーク上のマナーとして、小さな日本企業でも英語サイトを作ることが必須だと謳われていた。

海外のサイトからは、世界からの情報がリアルタイムで手に入り、エキゾチックなデザインの画像などが次々とダウンロードできた。それまでなんとかOCSの航空便で3日でとどいた雑誌だけが情報源だった日本でも、労せずしてシリコンバレーの最新情報などが収集できることに大きな感動を覚えた。

 SGI社の印象深いSilicon Surfのイメージ
 (SGI Image Galleryより)




1997

1998

舵のトレードマークが印象的だったネットスケープ社サイト。
トップページは、製品・サービス紹介ではなくポータルに変化した。



【2】差別化期 1997〜1998年


グリッドシステム導入前の独BMWサイト。(1996)
この後、縦フレームの導入と同時に、
全世界的に統一フォーマットを導入することになる。

■クリッカブルマップによる大型画像

以前は電子メディアといえば、CD-ROMが最も普及していた。そのDirectorで作ったゲームライクな画面のオーサリングムービーのデザインが、ウェブにも広まっていった。その要因として、クリッカブルマップという新しいリンクボタンのプログラムが可能になったことが挙げられる。それまでは、リンクはテキスト内の単語、小さくスライスされた画像のみ、という状況であったが、クリッカブルマップにより、大きな1枚画僧の中に、複数のリンクエリアを作ることができるようになったのである。

1枚画像なので、背景と混在するボタンや、微妙な位置のボタンなどのデザインがしやすくなり、いままで出来なかったエンターテイメント性の高いグラフィックが可能になった。そこでトップページは、ロゴ、製品、キャッチコピーなどを派手派手しく印象的に組み合わせた画像で飾られることとなった。




【3】フレーム活用期 1997〜1998年


フレーム活用期のトレンドだった左メニューを導入しているが、フレームは使用していないAppleサイト(1997)。Cyberdogというフレームに対応していないブラウザを自社開発していたためか?

■フレーム導入でメニュー+コンテンツの組み合わせ

Netscape2.0は、画期的な規格を導入してくれた。それは2つ以上のHTMLファイルを1つに組み合わせて表示できる、フレームという規格である。たとえば、いままでは1ページごとに同じナビゲーションを配置しなければならなかったが、ページを分割することにより、繰り返し表示されるナビゲーションデータを常駐させるといったことが可能になった。

追記: フレームを使用して同じページを使い回す、というのはこの頃のナローバンド環境で少しでもダウンロード時間を減らしたい、というテクニックである。

現在のブロードバンド環境では、むしろ下記3点の問題がクローズアップされており、フレーム構造は廃止するサイトが多くなっている。

1.検索結果で適切に表示できない
もし検索エンジンを導入した際、検索結果はフレーム内のHTMLを表示することになるが、そのHTMLにはトップに戻るようなリンクメニューがないため、訪問者はそれ以外の情報をとることができない。

2.確実なページ指示ができない
フレーム構造にすると、ブラウザの「アドレス」にはフレームの親URLしか表示されない。そのため、たとえばPVA1020のページのアドレスをメールで伝えようとしても、親URLを伝えることしかできない。

3.サイト全体が統一したフレーム構造になっている必要がある
フレーム構造ではないページからフレーム構造の特定のページに飛ぶには、その特定のページへのリンクを張るだけでなく、フレームセットのページを作り、そのフレームセットのページへのリンクを作らないと、メニュー部分がないページへ飛ぶような問題が発生する。




【4】ポータル・トレンド期 1999〜2000年


1997年のYahoo!Japan。
まだ1列でジャンルが収まっていた。

■全てを包含するポータルサイトデザイン

ユーザーの囲い込み、ゲートウェイ機能、スティッキーなサイトといった流れで、ウェブにより多くの機能が求めれるようになった結果、トップページにはより多くのメニューが配置されることになる。

どのサイトも「ポータル化」により、トップページには、一覧できるメニューやお勧めのトピックスなどが所狭しとならぶようになった。




【5】高機能化期 2001〜2002年


メニューにマウスを重ねると、ピロピロと出てくるメニュー。内容が盛りだくさんなのはわかるが...。

■新規格によるFinder化

トップページの面積には限りがある。そのため、増え続ける表示要素に対し、新しい機能を導入してなんとか要素を押し込める/隠しておくといった手段が取られるようになった。たとえばウィンドウズ/マックOSのFinderのように、プルダウンメニューで必要なときだけ表示できるようにする仕組みや、オンマウスで詳細情報が表示される仕組みなどが導入された。これらテクニックの普及には、ブラウザのバージョンアップにより、JavaScriptやDHTMLに対応したブラウザの使用率が上がってきたことも要因であろう。

しかし、実際の利用者の立場として、プルダウンメニューサイトの使用感というものを考えるとどうだろう? 的確なマウス動作を要求し、ちょっとでもずれると別のメニューを選んでしまうし、どこにどのメニューがあるのかを探すのにも苦労する。まるで複雑なアプリケーションの使い方を新たに覚えさせられているような不快感はないだろうか? 利用者に親切にナビゲートするというよりは、逆に送り手の都合で組み立てられたシステムの仕様を勉強させられているというイメージである。




【X】これからのスタイル


(〜2001/6前半


(〜2001/6後半
製品デザインの急速な改善が見られる日産自動車トップページ。上段のものに比べ、下段のリニューアル後はとにかくすっきりした。美しくダイナミックなビジュアルはブランドイメージに貢献するだろう。サイトのほうも、製品同様センス改善が図られているようだ。

■大画像+必要最小限のタイトルとメニュー&サイトマップの機能分け〜雑誌スタイル

そこで改めて考えるべきデザインとして、あえて「雑誌」という紙媒体に目を向けたい。雑誌のデザインは、ウェブサイトの10年足らずの歴史には遠く及ばないR&Dの繰り返しの上に作られている。

雑誌表紙デザインの特徴として、雑誌コンセプトを端的に表現するグラフィック、おすすめの記事や人気連載記事タイトル、発行日などがデザイナーによる優れたセンスでレイアウトされている。トップページのデザインとしては、画面一杯に使った画像、大小メリハリのある画像タイトルなどの要素でレイアウトすることになる。また、記事タイトルをすべて表紙にレイアウトできないので(むしろ必要最小限のタイトルだけなので)、残りは雑誌の始めか終わりに「目次ページ」として整然と配置してある。それはウェブサイトでいえば、「サイトマップ」に当たる。

トップページでは、実は「大画像+必要最小限のタイトルとメニュー」&「サイトマップ」という、この当たり前でシンプルな構造と機能が認識されつつあると考えている。

しかし、そんな雑誌スタイルのトップページが好まれない理由として、2つが考えられる。

1つ目の問題は、デザイン的に画像サイズが大きいページは、どうしてもデータサイズが大きくなるということだが、近年のブロードバンドの普及でこれは大きな問題では無くなるであろう。回線が1.5Mbpsになれば、200キロバイトを越えるデータ量でも数秒でダウンロードできるからだ。

もう1つの問題は、作業時間がかかるか、もしくは労力を補うために制作コストがかかるということである。ポータルサイトのようにテキストですでに必要なものが網羅されていれば、更新の手間は少ない。しかし、作業に時間がかかるという考えの方は、その制作ステップを見直す必要がある。まず、レイアウトイメージをまとめるまでに時間がかかる、という方は、サイトコンセプトとデザインコンセプトの確立がなされていないか、それを理解していないということだ。それらがきちんとまとまっていれば、作業はその考えに沿って行えばよいのであって、考える時間はごく短時間で済むはずだ。

それでもどうしても作業そのものに時間がかかる、ということであれば、設計自体が問題だったと考えられる。ウェブサイトは当然こまめな更新作業が必要になるため、スムーズな更新作業が行えるデザインシステムが必要なのは当然である。たとえば、トップページにフラッシュムービーを使用する場合も、更新時にフラッシュファイルを修正し、わざわざムービーを書き出さなければならないとなると、更新作業ができるスタッフは限られるし、時間もかかることになる。フラッシュムービーを使うのであれば、更新部分は別にテキストファイルからインクルードできるようなシステムがベストだ。

効率的な更新作業のための解決策の一つとして、さまざまな要素をすべてユニット構造とし、部分ごとに差し替えが可能になるようなシステムでページを構成するという方法がある。そのためには、下に述べるグリッドシステムの導入をお勧めする。

■グリッドシステムの導入

グリッドシステムとは、年から培われてきたノウハウである。特にヨーロッパでは、多言語文化であるため、一つのコンテンツをスピーディーに多言語化する必要がある。そのための解決策として、整然と文字や画像を組み込み、わかりやすく情報の整理されたレイアウトを可能にする、グリッドシステムが考案されたのである。

グリッドシステムを簡単に説明すると、レイアウト面を縦横にマスの目状に区切り、その区切り線(グリッド)に沿って、一定のルールの下、レイアウトしていく仕組みである。これにより、右の3つのメリットが享受できる。




1. 同じグリッドを使ったページは、すべて統一されたレイアウトでわかりやすい。

2. だれがやっても、そのルールに則ってレイアウトすれば、一定のクオリティのデザインに仕上がる。

3. バリエーションの展開がしやすい。といったメリットが挙げられる。



Homeへ ページトップへ

サービスのご案内:
ホームページ制作・運営
ウェブ・データベース構築
(株)マジェスティック

  03enterprise Web Magazine
業務内容 ●ウェブサイト・デザイン●ウェブ・データベース構築■ウェブサイト運営●インターネット・イントラネットサーバー構築●CD-ROM制作●各種DTP(カタログ、パンフレット等)制作 ■会社案内 ■人材募集
Phone:03-5762-7156(ダイヤルイン)  ■お問い合わせページ E-Mail:info08(at)03enterprise.com

 

ホームページ制作,ホームページ製作,ホームページデザイン,ホームページ制作代行,ホームページ作成代行,制作会社,製作会社,ウェブサイト制作,ウェブサイトデザイン,ウェブサイト制作代行,ウェブサイト作成代行,ウェブサイト構築,インターネット,イントラネット,www,html,css,stylesheet,ホームページ,ウェブサイト,制作,製作,デザイン,システム,ショックウェーブ,フラッシュ,shockwave,flash,コンテンツ制作,webデザイン,ウェブ制作,WEB制作,ウェブ製作,web製作,ウェブ作成,WEB作成,インターネット・イントラネットサーバー構築,ファイルメーカーPro,CDML,MySQL,ウェブ・データベース構築,MySQL,PHP,MacOS,マックOS,MacOSX,MacOSX Server,Postfix,Qpopper,ネットワーク,LAN,ホームページ制作,ホームページ製作,ホームページデザイン,ホームページ制作代行,ホームページ作成代行,制作会社,製作会社,ウェブサイト制作,ウェブサイトデザイン,ウェブサイト制作代行,ウェブサイト作成代行,ウェブサイト構築,インターネット,イントラネット,www,html,css,stylesheet,ホームページ,ウェブサイト,制作,製作,デザイン,システム,ショックウェーブ,フラッシュ,shockwave,flash,コンテンツ制作,webデザイン,ウェブ制作,WEB制作,ウェブ製作,web製作,ウェブ作成,WEB作成,インターネット・イントラネットサーバー構築,ファイルメーカーPro,CDML,MySQL,ウェブ・データベース構築,MySQL,PHP,MacOS,マックOS,MacOSX,MacOSX Server,Postfix,Qpopper,ネットワーク,LAN,ホームページ制作,ホームページ製作,ホームページデザイン,ホームページ制作代行,ホームページ作成代行,制作会社,製作会社,ウェブサイト制作,ウェブサイトデザイン,ウェブサイト制作代行,ウェブサイト作成代行,ウェブサイト構築,インターネット,イントラネット,www,html,css,stylesheet,ホームページ,ウェブサイト,制作,製作,デザイン,システム,ショックウェーブ,フラッシュ,shockwave,flash,コンテンツ制作,webデザイン,ウェブ制作,WEB制作,ウェブ製作,web製作,ウェブ作成,WEB作成,インターネット・イントラネットサーバー構築,ファイルメーカーPro,CDML,MySQL,ウェブ・データベース構築,MySQL,PHP,MacOS,マックOS,MacOSX,MacOSX Server,Postfix,Qpopper,ネットワーク,LAN