第五回 ウェブサイトの更新について考える

ウェブプロデューサー養成講座
株式会社電通 CC 局

中嶋淳＋及川直彦

中嶋淳

1989 年入社。CC 局（当時はPR 局）配属。オリンピック招致コンサルティング、ビジネス情報ビデオ企画制作、デジタル関連企業戦略立案、CD-ROM 企画制作などの後、怒涛の企業ウェブサイト構築屋となる。

及川直彦（株）電通 CC 局業務推進 5 部 主事。
1988 年（株）電通入社。ビール、自動車、海外自治体などの PR 作業、情報通信産業関連の CC 作業などを経て、現在はウェブサイトの企画プロデュースを担当。

330 INTERNET magazine 1997/8

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

WEBPRO
DUCER■ case 1 ： What's New 型

前回のまとめ■前回は…
前回と前々回は、ウェブサイトで 重要な 3つ の「勝負どころ」、・ Expression：魅力的な世界観を醸成する表現
・ Function：効率的なアクセスを実現する機能
・ Update：情報の鮮度を保つ更新のうち、Expressionと Functionについて考えてみました。
今回は、残りの「Update：情報の鮮度を保つ更新」について考えてみます。

Suntory

jhttp://suntory.dec-j.co.jp/■ case 2 ： New マーク型



更新されないサイトと更新したのに見てもらえないサイト

Update しているならば、それを効果的に「伝える」「分からせる」ことが大切なわけです（こっちの「つもり」が相手の心に届くためには、誠意だけではなく、それなりの方法や演出が必要です）。

■流れの淀んだ水は腐る
最近、結構かっこいいデザインのウェブサイトが✘企業サイトでも個人サイトでも登場してきました。というわけで、今回はそんな伝え方のパターンをそういうサイトを訪れるのは楽しいものです。しかいくつか整理してみましょう。これも前回と同様、し、それらのサイトをブックマークしておいて、再技術の進化やウェブサイトに対しての考え方の進化

び訪ねてみても……前と同じ。しばらくしてから訪に伴い、さまざまな変遷をたどってきていますので、ねてみても……変わっていない。こうなると、「な順に追ってみましょう。

んだ、やる気がないのね」ということになってしまいます。
もちろん、あまり頻繁に更新する必要のないコンテンツもあります。前々回お話しした「UTILITY ：課題解決型」や「ENTERTAINMENT ：娯楽提供型」の中には、たとえば、「図書館」や「美術館更新を伝える方法とその進化の過程

CINEMA VIEW
jhttp://mixj.rnet.or.jp/cinemaview/■ case 3 ：新聞の見出し型■ case 1 ：What's New 型（テキスト）の常設展」のような、更新がそれほど重要ではな

まずは、みなさまおなじみの「What's New」。

いものもあるのですが、これらについても、「図書更新したページの履歴をテキスト形式の箇条書き館にきちんと新しい本が入っている」ことや、「新で並べるやつです。たとえば、Suntory のウェブサ

しい企画の特別展」といったものが要求されること

イトなどは、一番最初の項目がWhat's New で始があり、その場合、更新されたことが感じられないまっています。ページ数が多いサイトの場合は、更ウェブサイトは価値を失ってしまいます。

新履歴をそのまま並べると、かえって見にくくなっ

New York Times on the Web

このように考えてみると、ウェブサイトにおけるてしまう場合もありますので、そういうときはいく

jhttp://www.nytimes.com/

コミュニケーションはやっぱり「継続的な対話」がつかの目玉となる最新情報だけを紹介するコーナー

基本なのだと思うのです。そういう視点から、きちを作っている場合もあります。

んと更新され、対話を喚起していくようなウェブサ

この方式のメリットは、なんといってもメンテナ

イトを作るには、それなりの体制（個人の方の場ンスが楽だということ。デザイナーやプログラマー合は、それなりの覚悟？）が必要となるわけです。に作業をしてもらわなくても、HTML のタグだけで■ case 4 ： Topics GIF 型解決してしまうわけです。楽ということは、このWhat's New のページそのものが、時間差なく、頻■せっかく更新しているのに、繁にメンテナンスできるということになります。

なかなか見てもらえないのはなぜ？
その一方で、せっかく更新しているのに、なかなしかし、こうした構造にもかかわらず、Suntoryかそう見えないウェブサイトもあります。深い階層のように実際に頻繁に更新していなければ、この方のページを一生懸命更新していても、トップページ法はもともとページのビジュアルインパクトが低い

や、浅い階層のページでそのことが分からなければ、だけに、かえって悪い印象を与えてしまうというほとんどの人 はその更 新 には気 がつきません。

「両刃の剣」的な手法とも言えます。

Apple Computer

jhttp://www.apple.com/

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1997/8331

■ case 2 ：手間もかからず、しかも画面の全体感は印象深くNewマーク型（ビジュアルアイコン）残るのです。

2 つ目は「New マーク」
。たとえば、リクルート

唯一のマイナスポイントはトピックスのGIF を頻のCINEMA VIEW のサイトなんかをご覧いただけれ繁に作れるという余力のある人や企業があまりないば、ありますよね。Yahoo!などで新しい情報の入っということです。

■ case 5 ：スプラッシュページ型ている項目のうしろに"New"と付いているあれです。
これも一度New マークをデザインしておけば、あとはHTML のタグだけで解決しますから、メンテナ■ case 5 ：スプラッシュページ型（前表紙）

ンスの観点では楽。ただし、同時にあちこちの項目最近がらりとデザインが変わったメルセデス・ベがメンテナンスされるような場合だと、ずら〜っとンツU.S.A.のサイトは賛否両論分かれるところでどの項目にも"New"マークが並んでいて、何かすが、Update という観点から見ると面白いのは、「50%OFF」の赤札のようになってしまうので、こ最初のスプラッシュページ（「hot word」参照）かれは避けたいものです。

らそのページで紹介している車種の紹介ページにリつまり、たくさんあるインデックス項目のうち、ンクするか、ウェブサイト全体のインデックスにリ比較的少ない部分を更新するような場合は有効かンクするか、という2 つの入り口があることです。

もしれませんが、そうでない場合は注意が必要でこの例に見られるように、いわゆる「ホームページ」す。"New"のGIF をいちいち読み込むのも、ペー（私たちはコアページと呼びますが）の前に1 枚ジ全体をローディングしていると気になる部分です。

html ファイルを差し込んで、そのファイルをこまめ

Mercedes Benz
jhttp://www.usa.mercedes-benz.com/■ case 6 ：自動切り替え型に更新する手法もよく見掛けます。
この手法の場合、何もGIF を生成しなくても、■ case 3 ：新聞の見出し型

テキストだけでの展開も可能なので、メンテナンス（テキスト＋メインビジュアル）
ここまではわりと簡易なインターフェイスの構造しやすいのですが、ホームページ（とかコアページの中で、どうめりはりをつけるかという視点での工とかトップページ）に展開するまでに、何回もクリ夫でしたが、ここからはやや中級編。

ックさせなければならない場合、面倒くさがられる

Update する情報の「王様」と言えば、新聞。

可能性もあります。

CocaCola
jhttp://www.cocacola.com/というわけで、ウェブサイトの世界でも、新聞社系のサイトは、New York Times やasahi.com など、■ case 6 ：自動切り替え型

Update という観点から見ると、優れモノが多いでここまでは中級編といったところでしょうか。こす。写真などコンテンツを物語るビジュアルと、そこから先はプログラマーの技術やサーバー環境に負のサマリーのテキストを見ているだけで、ある程度うところも多いため、誰もが採用できる手法ではあ情報をブラウズし、理解することができます。ただりませんが、あえてご紹介します。

し、画面上でブラウズできる文字量には限界があちょっと亜流ですが、case5 のバリエーションとりますので、「文字を埋め尽くさない」レイアウトして、トップページやスプラッシュページの自動切の工夫が重要でしょう。

り替えというのもあります。これは、あらかじめいさらに、この方法はそもそもそれなりのコンテン

くつかのパターンのメインビジュアルを用意しておツが豊富にないと成立しないので、実際にはほとん

いて、アクセスするたびにランダムにローディング

どオンライン新聞・マガジンといったコンテンツにするというものです。
この方法を効果的に使っているのがCocaColaしか成立しない構造と言えるでしょう。のサイトです。ここでは8 個の基本ディレクトリに■ case 4 ：Topics GIF 型（メインビジュアル）

jhttp://www.bankamerica.com/bin/login?Tag=/&URI=/secbin/personalpg.pl

WEBPRODUCEと8 種類のコアページを用意しています。たとえば、■ case 8 ：電子メール型「brand」というディレクトリを強調させるスプラッシュページが最 初 に現 れ、 クリックするとたとえば、アップルコンピュータのサイトでは、「brand」ディレクトリを強調させるGIF がメイン

ホームページにその時々のトピックスが新しいビジにあるコアページ（インデックスページ）に展開さュアルパーツで構成され、頻繁に更新されていまれます。トピックスビジュアルの下にはきっちりとす。これは、What's New 型やNew マーク型よりテキストで全体のディレクトリも紹介されており、も効果てきめん。
「アップデート」したという宣言

なんとも不思議な構造の逸品です。と同時に、多くのコンテンツの中からそれを選んで最初に現れるスプラッシュページを手動でやって欲しいという情報の送り手の意志が明確となるイいるのかプログラムでランダム切り替えしているのンターフェイスとなるわけです。しかも、ホームペか私たちも知りたいところです。

ージのある一部分の領域だけを変えればよいので、

332 INTERNET magazine 1997/8

Build Your Own Bank

アクセスさせるために8 種類のスプラッシュページ

case 3 の手法を簡易化してメインとなるトピックスをビジュアル化したのがcase4 です。

■ case 7 ：カスタマイズ型

amazon.com

jhttp://www.amazon.com/

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

いメール」にならないためにも、この方法には、れている新刊の案内が電子メールで届いてくるサー・登録いただいた方に、そのようなフォローの電子ビスは圧巻です。さまざまな企業が取り組もうと苦Your Own Bank"では、ユーザー登録をしておいメールを希望するかどうかの意志を確認する

慮している「One-to-One マーケティング」の実例て、そこで自分の関心のあるテーマを指定しておく・できるだけ、それぞれの会員の関心にあった情報■ case 7 ：カスタマイズ型
Bank of America のカスタマイズページ"Buildがそこにはすでに存在しているのです。

✘と、その登録 ID でログインしたとき、自分専用のだけがいくように工夫するインデックスページが生成されます。ここに、自分というルールが必要です。もし、これがないと、ことまあ、いろいろ仕分けしましたが、情報の鮮度が前にこのサイトを訪れてから、それぞれのテーマちらが好意のつもりでも逆効果になってしまいます。

を保つ更新は基本的にはウェブプロデューサーや制で新たに更新された項目を表示してくれます。あな

この連載でも以前に取り上げたamazon.com で作チームによる不断の努力を前提とするのは当然た専用の"What's New"ができるというわけです。

は、欲しい本を自由キーワード検索できるのですのこと。せっかくの努力を無駄にせず、きっちりとが、たとえば、あなたがレジストレーション（名前アクセスしていただく方に「分からせて」いく手法

やe-mail、カード番号などを入力してID を発行しを見定めましょう。
「勝負どころ」、言い換えれば、ユーザー登録ができるのならば、その方々にサイてもらう）後に、「webmaster」という言葉で検インターフェイスについての解説は今回で終了。次トの更新情報を電子メールで送るのももちろん効果索したとします。当然、検索一覧として出力され回は、ウェブサイトにおけるコンテクスト（文脈）的です。ただし、それを送る相手にとって「煩わしるのですが、後日、webmaster という言葉が含まデザインについて考えてみます。

■ case 8 ：電子メール型

Hot Word

今月の気にキなるーワード

SplashPage✛「スプラッシュページ功罪」

本連載第一回のhotword で取り上げたデビッェブプロデューサーにとっては使いやすいものかもド・シーゲル氏が広めた概念の1 つがこのスプラッしれませんが、ユーザーにしてみれば、ひとつ間違シュページ（スプラッシュスクリーンとかフロントえると邪魔以外の何物でもありません。前述した

ドアとかさまざまな言葉で表現されますが）です。

デビッド・シーゲル氏のベストセラー「Creating「第三世代のウェブサイト」（第一回連載参照）

Killer Websites」にも、明確に モデムアクセスの重要な構成要素の1 つとしてあっという間に広まで15 秒以内のローディングで展開できるべき とり、多くのサイトが導入しています。平たく言え定義されているのですが、はたしてすべてのサイト

ば、スプラッシュページとは、コアページの前にペが忠実にこれを実行しているかどうかは疑わしいもージを挿入することで、そのサイトがどんな中身なのです。のか、自分が見たいと思っている内容に近そうなのまた考えてみれば、最良のモノとしてとりあげたか、といった内容をシンプルに盛り込み、多くのユPowerComputing 社のスプラッシュも「表紙あるーザーのアクセスを誘引する機能を持つページなの

いは1 枚目からPlug-in がインストールされているです。また、本文の中で紹介した使い方のように、ことを前提としなければ見れない」という ユーザ

アイデンティティだけでなく、キャンペーン内容やーにブラウズ環境を強いる という意味では、実は最新情報など、注目して欲しい内容を運営上も便ユーザーオリエンテッドではないサイトなのかもし利に展開できるのがスプラッシュページです。

れません。

前回紹介した「情報建築」という観点で見れば、こんな悪い事例を取り上げて、よいサイトを作るウェブサイトのアイデンティティを表現するというべきだという「辛口」ウェブサイト批評サイトが意味においてもスプラッシュページは単なる前表紙

Webに終わらない、ウェブデザインには欠かせない重要「Pretentious（もったいぶった、見えっぱりな）な要素となっています。典型的な事例としては、Front Page」という項目で、スプラッシュ批判がSaab USA などがあります。企業理念とも言える展開されています。

Saab USAjhttp://www.saabusa.com/

PowerComputing

Pages That Suck で す 。 こ こ で も言葉と企業ロゴが表示されたあと、<meta> タグに✘よるクライアントプルでコアページへと展開してい賢明な読者の方は、便利なスプラッシュページくものです。最近では、Shockwave Flash を利用もきっちりと役割を考え、ユーザーフレンドリーにし、大胆なタイポグラフィでメッセージを伝える構成する必要があることをお分かりになっているとPowerComputing なども迫力があり、アイデンテ思います。
「たかが1 枚」と思わずに力を入れたい

ィティの確立という点では最良のモノと言えるでしものですね。

jhttp://www.powercc.com/

ょう。

✘Web Pages That Suckjhttp://www.webpagesthatsuck.com/

しかし、このスプラッシュページ。一見するとウ

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1997/8333

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.