第二回

分かりやすく美しいサイトを考える

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

中嶋淳＋及川直彦

中嶋淳

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

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

332 INTERNET magazine 1997/5

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D■前回のおさらい

第一回では「優れたウェブサイト」とは何かということを考えてみました。おさらいすると…

「情報発信者またはウェブマスターである主体が、そのサイトのトップページに何らかのきっかけでアクセスをしてくれた人に対して、〜次の画面、次の画面へとクリックしてもらい〜それを通じて何かを感じてもらったり理解してもらい〜それに基づいたレスポンスを促し、そのきっかけを作り〜レスポンスをしてくれた人との、個別のコミュニケーションを展開し〜さらに、そのコミュニケーションを通じて、自分自身をも変えていく〜という対話的な関係を築くこと」というようなことでした。

そして、このようなサイトを作るための第一歩であり最も重要なこととして挙げたのが「どんな対話的な関係を目指していくか？」ということであり、それがウェブサイト構築にとっての「目的」の部分であると述べたつもりです。ここがしっかりしていれば、優れたサイトを作るための八合目くらいまで来ているとも申し上げました。

今回は、この部分まではすでに到達しているという前提で、編集とデザインについて説明したいと思います。企業ウェブサイトの構築をしている私たちの仕事の流れで言えば、基本方針が固まって、いよいよ「編集者」と「デザイナー」とが登場し、腕を振るう段階です。

γ

WEB
PRODUCERが、たまに自社製品へのリンクが一切ないメニュー「分かりやすいサイト」「便利なサイト」＝［論理性］もあるのです。企業情報であれば、どうしても「自社商品」と関連のない項目は入れない傾向にありますが、ユーザーのことを考えれば別の価値判断が生まれるわけです。このことも先ほどの「商品の文脈■「商品の文脈」をデザインしているをデザインする」と言えるでしょう。つまり、商品RAGU 社のサイト主として編集者の力が発揮されるのは、論理的なベネフィット、たとえば「分かりやすさ」や「便利を見せないことで「コンテンツの文脈」をデザインしているのです。

さ」を実現する「編集コンセプト」の部分です。ここの「マガジン」型のサイトで優れたものの日本の部分で優れているサイトには（今や古典的な名作での例としてはトヨタ自動車が挙げられます。頻繁となった） R A G U 社 のウェブサイト（ h t t p : / /に更新される製品関連の情報（Virtual Showroom）www.eat.com/）があります。

やトヨタ自動車に限定しないクルマファンが楽しめ

RAGU 社のサイトは、のちに私たちが「マガジンる、世界歴代の名車を集めたヴァーチャル博物館型」と呼ぶもののパイオニアと言えるでしょう。こ（Museum）などを通じて、製品以外も含めたコミ

こには「イタリアの食」とその周辺の豊富な情報がュニケーションを展開しています。

掲載されています。たとえば、イタリア料理のレシ

ここで改めて大切だと思うのは、1 つ1 つの情報ピなどは頻繁に追加されるので、イタリア料理のフをどういう体系で見せていくかという「コンテンツァンにはとても評価が高いサイトなのです。の文脈」のデザインです。
「編集者」という肩書き

さて、このレシピ集には重要なポイントが2 つあ「Mama's Diner Room」

jhttp://www.eat.com/

であっても、もはや「デザイン」とは無縁ではいられないのがウェブサイトビジネスなのでしょうか。

ります。
1 つ目は、RAGU 社の製品情報をレシピ情報の中で見せているということ。もし、サイトの中に「製品案内」というコーナーくらいしか項目がなく、製品の瓶や袋の写真がズラ〜ッと縦に並んでいて、そのローディングに時間がかかるようなサイトだったら……。イタリア料理のファンでも、おそらく二度と訪れることはなかったでしょう。と言うのも、それだけでは商品の魅力が十分に伝わらないからです。
このように、レシピというある文脈の中で商品を紹介していくような方法を私たちは「商品の文脈をデザインする」と言っています。
2 つ目は、自社の商品の告知よりもレシピ情報の充実を優先させていること。気が付かないことです「Toyota Internet Drive」

jhttp://www.toyota.co.jp/

イタリア料理のレシピ。材料の中で自社商品のところにリンクが張ってある。

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

INTERNET magazine 1997/5333



「美しいサイト」「楽しいサイト」＝［感覚性］■利用者との対話を美しくデザインした「編集コンセプト」と「世界観」とのコラボレーションを導くのは誰？

■ウェブ構築は編集、デザイン、技術のLEVI'S のサイト

総合プロデュース

一方、デザイナーの力が発揮されるのは、感覚さて、ここまで説明してきた「編集コンセプト」と的なベネフィット、「美しさ」「楽しさ」を実現する「世界観」。このように書くと別の存在のように見え「世界観」の部分です。この部分で優れているサイてしまいますが、この 2 つのレイヤーは独立したもトは 、や はり古 典 的な 名 作となっています が 、のではなく、むしろ表裏一体のものなのです。現

LEVI'S でお 馴染みの Levi Strauss 社（http://在の最先端のウェブサイトが「雑誌」というメタファwww.levi.com/）でしょう。

ーにとどまらない、多様で高度な表現の世界を生このサイトのすべてのページには、LEVI'S が対み出しつつある中では、編集者とデザイナー、そし話したい若い世代の感覚にフィットした、非常にシてエンジニアがそれぞれの知識や能力を背景としャープで高度なデザインが施されています。まさに、ながらも、それぞれの固定的な役割を超えていかデザイナーが一画面一画面を思う存分「遊んでいなければなりません。アクセスする人に新鮮な驚きる」楽しさが伝わってくる力作です。ほかにもファや共感を提供する優れたアイディアや表現、仕組ッション関連のサイトはどこもデザインクオリティみなどをコラボレイティブに発想でき、それが 1 つーが高いのですが、LEVI'S のサイトが成功していのサイトに統合されていかなければ、優れたサイトるのは、デザイナーたちが利用者との対話を重視を作ることは不可能です。

しており、それぞれが持っている「世界観」をどのそして、このような発想の場を作り、それを統合ように伝えたらいいのか日常的に苦慮しているたするのが今回の連載で展開していく「ウェブプロめだと思われます。

デューサー」の役割なのです。
「こんな奴、どこにlevi.com
jhttp://www.levi.com/
製品紹介のほかに「Denim Dictionary」（用語辞典）やスクリーンセーバーが用意されている。

いるんだ！」というご指摘もあるかと思います。しかしながら、「編集者」に デザイン視点 を持たせ、■デザイナーにも技術的理解が不可欠に
こうした感覚的に優れているデザインのサイトは「デザイナー」に 技術的観点 を前提にしたデザともすると先端的なコミュニケーションやコンテンインを行わせる（さらには「エンジニア」に 編集視ツを持つサイトだけに限られると思われがちですが、点でスクリプト を書いてもらえるようになれば最たとえば先月「優れたデザイン」として取り上げた高!?）ことがどれだけ重要なことか、私たちは日常

Bank of America（http://www.bankamerica.com/）

業務で痛いほど感じているわけです。などのように金融業でもユーザーとの関わり合いを考えることで、よいデザインによる優れたサイトが誕生するのです。

■ウェブプロデューサーが必要な理由
たかがウェブサイトと言ってしまえばそれまででこのように、自社の「世界観」を自分たちで作すが、ウェブプロデューサーにも演劇や映画のプり上げるのではなく外部の視点から見ることでよロデューサーと同じくらいの心意気が求められるとりユーザーの共感や理解に近い発想から構築するという手法はインターネットの世界でもよく行われています。Bank of America の場合は、先鋭的な手法を持つウェブスタジオ（Vivid Studio 〜
http://www.vivid.com/〜世界でも最高峰のウェブスタジオ）に依頼して、グッとくる企業イメージをしかし、そのようなサイトを作るには、デザイナーが 技 術 的 な 要 素 、たとえ ば J a v a S c r i p t やShockwaveといった領域にどれだけ入り込まなければならないかという問題があります。先ほど「編集者」がデザインという言葉に無関心ではいられないという指摘をしましたが、今日のウェブサイトデザ
インでは「デザイナー」にも技術的な理解が必要であると言 え るでしょう（現実は大変なのですけど…）。

334 INTERNET magazine 1997/5

ζjhttp://www.totalny.com/
ニューヨークに関するトピックスを大きめのビジュアルで紹介し、頻繁に更新している。

WEBPRO
DUCE

ネット上で打ち出すのに成功している例と言えるでしょう。

Total NY

Vivid Studiojhttp://www.vivid.com/
このウェブスタジオが制作したクライアントのホームページを一覧できる。

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

思っています。たとえば、映画では俳優や監督と同わる企業ウェブサイトの場合のチームですが、個等に、音楽だと歌手や作曲者と同じくらい必要な存人の方が 1 人でウェブサイトを作るときにも確実に在としてプロデューサーが注目されつつあります。

当てはまることだと思います。個人ウェブマスター

ユーザーや観客の目が肥えてきた今日では、それの方、みなさんの頭の中でいろいろな役割と視点ぞれが個別に才能を光らせるのではなく、一貫したからもう一度自分ならではのウェブサイトを発想しコンセプトやテーマを全体的に構築することが求て、それを熟成させてみてください。きっと素敵なめられているからでしょう。つまり、目の肥えたユーアイデアが浮かんでくるはずです。

ザーが多いインターネットの世界でもまったく同じ✛メタファーインターフェイス活用例

さあ、これからはウェブマスターからウェブプロことが言えるわけです。

デューサーへと自らの立場を変えて「グッと」くる■ウェブマスターからウェブプロデューサーへゲーションまでの具体的な話をしたいと思います。

サイトを作りましょう。次回はサイトの構造からナビ

もちろん、これは多くのプロフェッショナルが関Hot Word

それでは、また来月。

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

MetaphorInterface✛メタファーインターフェイス

前回のキーワード「第三世代のウェブサイト」論風景）を 1 つのメタファーとして取り上げる手法もでも説明したかと思いますが、初めて来たユーザグッとくるものがあります。やはり本物にはかなわーにどういう印象を持ってもらいながら、そのサイないと言ったところでしょうか？

トの構造を理解させるかを演出するために「メタフまた、ビジュアルデザインにそれほど凝らなくてァー（比喩）手法」がよく用いられます。ショッピン

も、グリッドシステムを用いたメタファー（あるときグモールなどで用いられる架空の街などがそうでは方眼紙、昆虫箱、小物入れ、引き出し、格子戸なす。しかし、現実的な話、「街メタファー」にはみなど、いろいろありますよね）的なデザインなら、あまさんうんざりしているかと思います。より現実空間り絵のセンスがない人でも伝えたいことをより魅的に演出しようとすればするほど、うんざりするの力的に表現できるかもしれません。

Pyramid Breweries

jhttp://www.pyramidbrew.com/
ウェブサイト全体をビアホールに見立てている。
ドアをクリックして中に入る仕掛けがグッド。

たとえば、このサイト（ http://www. bordereはなぜでしょうか？
答えは簡単、現実の空間や街のほうが魅力的だ

qualszero.com/entomology/index.html）ではその名のとおり「昆虫学」についてのイメージを 展からです。お店メタファーも同じですよね。
しかし、インターフェイスとして、あるいは表現手開しています。それぞれのキャプション、全体のデ法として、テキストベースだけのウェブサイトではザイン、そして怒涛のフレーム分割（HTMLが分か

Couting Crows

つまらない。何とか「グッと」くるメタファーを探そるデザイナーなら誰もが一度はトライしてみたくな

j http://www.countingcrows.com/
indexx.html

うと世界中が懸命になっています。今回取り上げたる悪魔のような作業〜はまります）という3 つの要「マガジン」
スタイルもある種のメタファーなわけです。

素をうまくミックスして 1 つの世界観を形成した事どうしても街や店のメタファーで構築したい場合例と言えるでしょう。の解決策の 1 つとしてあるのが、なるべくユニーク●なビジュアルデザインや手書き風のデザインを用何にせよ、メタファー利用の際のポイントは、いるというのがあります。どうやっても 3D 風なポリ

1）
そのメタファーが本当に直感的に自分の伝えたゴン系の街メタファーや、空から見た雰囲気の現実的な街というのは、違和感があるものです。それよりも一貫したユニークな「世界観」を持ちながら、い世界を伝えるために十分な品質か？
2）意味のあるビジュアル（つまりクリッカブルやメニュー）か？

ユーザーにマウスでコンテンツを発見させるような

3）
そのデータサイズは軽量か？

もののほうが、より「インタラクティビティー」があ4）
ツルツルピカピカな色調でないか？
（グラデーシると考えます。よい事例として Pyramid Breweries

ョンはサイズも増えるし、モニターによってはき（http://www.pyramidbrew.com/）
を挙げておきれいに出ないし、何よりもコンピュータの 中のます。

「コンピュータ」的イメージにはもううんざり）といったところでしょうか？

●
一方、アメリカのバンド「Couting Crows」のサイト（http://www.countingcrows.com/indexx.html）

サイトをステージに見立てた例。

ウェブサイトにおける「インターフェイス道」はか
くも険しい道のりのわけです。

entomology

j http://www.borderequalszero.com/
entomology/index.html
フレームを意識させないフレームの使い方のお手本。のように、実際の風景（この場合はレコーディング

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

INTERNET magazine 1997/5335［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この 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.