このページの本文へ

最新UIで懐かしのWebサイトを振り返る

13年間のWebデザインが分かる!資生堂のスゴいサイト

2008年11月21日 14時04分更新

小橋川誠己/企画報道編集部

  • この記事をはてなブックマークに追加
  • 本文印刷

 13年間に渡るWebデザインの変遷をビジュアルでたどる――。そんなユニークなWebサイトを資生堂が公開している。11月4日にオープンした「資生堂ウェブサイト 13年の歩み」という特設サイトだ。同社がコーポレートサイトを立ち上げた1995年から2008年現在までの主要ページのスクリーンショットを閲覧できるこのサイトからは、その時代ごとのWebデザインの動向を感じ取れる。

資生堂
「資生堂ウェブサイト13年の歩み」。公開されているのはトップページのほか、当時のキャンペーンサイトなどの「オススメ」サイトの一部だ

 たとえば、鮮やかなブルーが印象的な開設当初の“ホームページ”は、CI(ロゴ)/メインビジュアル/メニューと3つの役割を持つ1つの大きな画像に、「インターネットはスリリングな体験」と題した福原義春社長(当時)のあいさつ文が並ぶシンプルなもの。256色の限界の中で作られた画像、CSSなどまだなかった時代にテーブルタグを駆使して実現したであろうレイアウトなど、その当時Webサイトを作っていた人なら懐かしさを感じるデザインだ。

資生堂
「サイバーアイランド」と名づけられた1995年の資生堂ウェブサイト

 一方で翌96年にはいち早く「ShockWave」を採用したコンテンツを加えたり、Web上のフォームを埋めていくことで「オンライン肌チェック」ができるページを設けたりと、かなり実験的な取り組みも見られる。

資生堂
96年にはリリースされたばかりだったShockWaveを使って、地図から古い銀座の街並みを眺められるインタラクティブなページを開設

 リニューアルなどの動きが激しくなるのが、現在のサイトに近いデザインを採用している2000年以降だ。コーポレートカラーを取り込みブランドの統一感を図る一方、Flashなどを使って商品を効果的に見せるプロモーションサイトとして試行錯誤する姿が、ほぼ毎年のように実施されているリニューアルから見て取れる。「13年の歩み」をすべて見終わったあとに現在のサイトを改めて見ると、まったく違った重みが感じられてくるから不思議だ。


資生堂 資生堂
資生堂 左から、2000年、2003年、2004年のトップページ。これ以外にもほぼ毎年のようにトップページはリニューアルされている
資生堂
「13年の歩み」は見た目にも楽しい年表のようなデザイン
資生堂
当時のインターネット関連の動向と資生堂の歴史も分かる

 「過去のWebサイト」という、普通ならなかなか見られない貴重なコンテンツを公開している「13年の歩み」は、その取り組み自体もユニークなものだが、コンテンツの“見せ方”にも工夫がされている。Flashを全面に使ったユーザーインターフェイスの動作はさくさく軽快で、使い勝手がいい。純粋にビューアーサイトとしてもよくできている。

 年表のように時系列に並ぶアイコンをクリックすると、当時のサイトのサムネイルとともに、国内のインターネット関連の動向や、資生堂関連のできごとが表示される。より詳細が見たい場合は「拡大する」のボタンから実際のWebページに近いサイズで見られるし、現在も該当するページがある場合には「現在のページを見る」というリンクをたどって過去と現在のページを見比べることもできる。

 Webデザインの歴史的資料としても、ビューアーとしても興味深い「13年の歩み」。最新のWebサイトから“ホームページ”と呼ばれていた時代を振り返りながら、これからのWebデザインを考えてみるのも楽しい。

カテゴリートップへ

ソーシャルランキング
  1. SEOはもう不要? それでもいまやるべきSEOの基本がわかる記事まとめ 52
  2. 用途別!WordPressプラグイン選びに迷ったら参考になる記事まとめ 17
  3. これから使い始めたいWebフォント&Google Font活用法まとめ 14
  4. もっと速く! Web制作の生産性ぐっと引き上げる最新便利ツールまとめ 7
  5. 失敗しない独立のために会社員時代にやるべき3つのこと 5
  6. 商業写真で首切りと串刺しがダメな理由 2322
  7. 明朝体は絶滅するのか? AXIS Font生みの親の挑戦 2079
  8. アダルト検索エンジン「Boodigo」が公開 - 元Google社員ら立ち上げ 1587
  9. Apple Musicが流行らない理由をユーザー視点で考えてみた 1015
  10. 3限目:「看板」から学ぶ「見出し」の基本設計とは!? 640
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング