第六回 グッとくるウェブサイト紹介・その 1

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

中嶋淳＋及川直彦

中嶋淳

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

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

336 INTERNET magazine 1997/9

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

前回までのまとめ■前回までは…

これまで 5 回の連載を通じて「優れたウェブサイト」を コンセプト や 機能（勝負どころやインターフェイス） といったウェブサイトの全体や、それを紡ぐ要素から考えてみました。

しかしながら、ウェブサイトというものは、それ単独で「優れているかどうか」を問うことにはそもそも限界があります。というのも、そのウェブサイトがウェブマスターとアクセスする人との間の相互的な「コミュニケーション」と、そこから生まれる「関係性」を通じて初めて機能するものだからです。したがって、今回からは「アクセスする人に与える印象や、それを通じて築かれる関係性」という観点で、いくつかの代表例を抽出してみたいと思います。

ψWEB
PRODUCER

それによって、これまでしきりに我々が用いていた言葉である「グッとくる」という言葉のニュアンスやこだわってきた理由について解明してみましょう。

下の階層にどんなに価値のある情報があったとしてカッコいいデザインと分かりやすいコンテンツも、アクセスされずに終わってしまいます。
その際に対応する策として、これまでの連載では■なぜウェブサイトのデザインは明確なコンセプトと勝負どころに基づいたインターカッコよくなければならないかフェイスデザインを取り上げてきました。
トップペー

カッコいいウェブサイトをデザインするために、世ジやそのあとの何ページかを見て、「このサイト、ダ界中のデザイナーたちが新しいイメージとアイデアサイ」と思われたら、情報を見てもらえないだけでを日夜研究しています。そもそも、なぜウェブサイなく、その発信者に対しても「ダサイ」という印象トのデザインはカッコよくなければならないのでしを抱かせてしまいます。そうなると、先に述べたブょうか。理由は簡単。それが企業自体や商品など、ランドの資産価値を「負債」にしてしまうわけです。

伝えたい情報をユーザーが受け入れる「コンテクス

とくに大企業の場合、かなりの規模の広告費用と長い年月をかけた消費者との関係が一瞬にしてト」（文脈）を大きく左右するからです。
一般的に「コンテクスト＝コンテンツ+ ユーザ崩壊してしまうこともあるわけですから、これはもー・ビヘイビアー（ユーザー行為）」と定義されてう笑って過ごせません。ウェブサイトを作るといういます。
「この内容に対してユーザーはこう思ったことは、自分の（またはクライアントの）ブランドり、行動したりするだろう」ということを想定して資産を形成する行為なのだということを忘れないで作り上げられたさまざまな表現には、すべて「コンください。

テクスト・デザイン」が施されていると言っても過言ではありません。映画やテレビなど、さまざまなところにこのデザインが組み込まれているのに、ウ■コンテンツを充実させるためのストーリーテリング（Story-telling）

ェブサイトにないのは「？」と思うのは我々だけでもちろん、ブランドの資産価値を左右するのは、はないはずです。そして、これほどまでに「コンテデザインだけではありません。
コンテンツも重要です。

クスト」にこだわるのは、それがブランド資産を形ブランドへの信頼や好意を裏付けるための「ファク成する大きな要因となるからなのです。

ト」こそ、ブランド育成の王道と言えましょう。
ただし、身内向けのような分かりにくい説明を延々と展開しても、ほとんど誰も読んでくれませんし、読■ブランドの資産価値を高めるんでくれたとしても理解してもらえないでしょう。

ウェブデザイン
たとえば、企業や団体の「顔」となるウェブサ明快に理解してもらうためには「魅力的なストイトにおいても、そのブランドの資産価値を高めてーリーテリング」が必要です。優れたストーリーテおくことが「得」なわけです。

ラーによる魅力的なストーリーの構成と、そのリアウェブサイトにアクセスした人々がまず判断するリティを臨場感たっぷりに伝える「語り」が欠かせのは「共感できるかどうか」ということでしょう。

ません。たとえば、製品の材料や製法、作り手のとくに、明確な目的がないネットサーフィン時には、表情、あるいはその歴史や伝統など、あらゆる情感性的な共感を持たせることができなければ、その報がそのブランドの魅力を理解に導く「素材」にLevi Strauss

jhttp://www.levi.com/

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

INTERNET magazine 1997/9337

なります。

「FAQ / E-mail」、サイト全体の構造「Site Map」
、デザインとが必要です。先に挙げたウェブデザイン検索「Search」と教科書的な構成となっています。の問題も、実はこの「魅力的なストーリーテリン

こうして上下でメインコンテンツを挟むことによグ」のポイントの1 つなのです。

感覚性

可能な「Store Finder」、質問や問い合わせ先のただし、それをうまく料理するためには、編集と商品・サービスのブランドイメージって、デザイナーは比較的自由にコンテンツが制作できるのです。常に場所が表示されているナビゲー

ブランドの資産価値向上の成功例

信頼性

先進性

ションバーのおかげで安心して深い階層のコンテン企業のブランドロイヤリティ

ツを楽しめます。

■イメージ向上に成功した■ブランド資産形成のために

LEVI'Sのウェブサイト

整理されたコンテンツ

このような意味で、早くからブランドを意識しなでは、実際に個々のコンテンツがどのようにブラがら展開してきたのがLEVI'S（リーバイス）です。

ンド資産形成に貢献しているのか見てみましょう。

LEVI'S は「ジーンズならLEVI'S」というブラン

まず「Heritage」。これは同社の歴史をさまざまド資産を持つ企業として認知されていますが、最なトピックスで年代ごとに整理したいわば「LEVI'S

近の消費者の多様化や競争の激化に伴い、いくつミュージアム」といった感の強いコンテンツです。

かのラインアップを展開しています。501 に代表さなかでもユーザーと同社との手紙のやり取りが原文れるブルージーンズ、カジュアルパンツのドッカーのイメージで繰り広げられるのを見ると、本物のミズ、「パーソナル・ペア」と呼ばれる女性向けのオュージアムのショーケースをのぞいている感覚にさーダーメイドジーンズ（店頭のパソコンで1 人 1 人せられます。LEVI'S のサイトは同社の歴史を「当の体形データを分析して作られるジーンズ）などで社では同年…」といった切り口ではなく、「ユーザす。これらの商品を統合したスタイルでの企業ブラーからの手紙」という切り口、いわばストーリーテンド形成をインターネットでどのように展開していリング手法を用いることで、アクセスしている人にるのか検証してみましょう。

「親近感」を与えています（図 1）。

簡単にまとめると、企業のブランドロイヤリティ

次に「The Ads」
。ここではCM とShockwave形成のためには、企業の信頼性寄りの訴求と、将ムービーとスクリーンセーバーという、いわゆる広来的にもかかわっていくに値する先進性という、一告コンテンツがストックされているのですが、まず見背反する視点を両方持ちたいところです。また、圧巻なのがMicrosoft のActive Server Pages 言

商品のブランドイメージ形成という観点で見れば、語（本誌 7 月号 358 ページ参照）を用いてリンク機能やサービスといった論理性と、商品関連の付先を2 つに分け、ランダムにリンクさせる工夫を施加価値（ファッション性や使いごこち）といった感している点。

覚性の両極を展開していく必要があります。

論理性

表1：ブランドの資産形成のための必要要素マトリックス

図1 ：「Heritage」の中にあるユーザーからの手紙

さらに感心させられるのがShockwave ムービー。

これを座標軸にしたのが表1 です。この座標軸を同社のさまざまな商品ラインを裾の広さ別に整理効果的にカバーすることがウェブサイト上でのブラし（男性用だけでも7 種類）、メジャー上のポインンド資産形成へとつながるわけです。

ターを動 かすことで直 感 的 に見 せるこのShockwave は、前回ご紹介した「インタラクティ■王道の「上下ナビゲーションフレーム」

ブ・インフォメーションデザイン」の好事例と言えこの原稿執筆時点でのLEVI'S のウェブサイトをるでしょう（図 2）。

検証してみると、まず感心させられたのが上下にナある意味ではメインコンテンツである商品カタロ

ビゲーションフレームを導入し、全体のコンテンツグの「Living Denim」（ネーミングも粋です）。こ

へのアクセスを誘引している点です。

こもActive Server Pages を利用したランダムリンWEB
PRODUCE

この「上下ナビゲーションフレームシステム」（筆クで構成されており、直接商品カタログコンテンツ者命名）の場合、上部フレームには主に伝えたいに行く場合と、6 タイプの若い世代を代表するユー要素として商品やその背後のコンテンツを整理したザー像とジーンズの関係性を紹介するコンテンツにインデックスを展開することが多いのが特徴です。

行く場合があります（図 3）。

LEVI'S でもそのシステムにのっとり、同社の歴史

ここには、以前紹介したRagu（http://www.

を展開する「Heritage」、先端を行くビジュアルでragu.com/）のレシピ情報（直接商品説明をする構成された広告を紹介する「The Ads」
、ジーンズのではなく、レシピ経由でリンクさせて説明する）とカルチャーの接 点 を踏 まえた商 品 カタログ

スタイルと同じ「コンテキスト・デザイン」が施さ「Living Denim」、アンケートで構成されています。

れています。商品カタログ自体は以前から利用し一方、下部ナビゲーションは機能的な要素を配ているコンテンツですが、1 つ1 つのGIF にユーザー置するのが特徴であるため、同社でも店舗検索が338 INTERNET magazine 1997/9

図2 ：「Tha Ads」のShockwave ムービー。ジーンズが裾の幅ごとに紹介されているの気持ちを高めるデザインがなされています。

図3 ：「Living Denim」では、6 人の若者のジーンズはきこなし例を紹介

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

感覚性

でなく、全体を見据えたときにも統合デザインがな■ブランド資産を形成する
コンテキスト・デザインド・コンテンツ

されているLEVI'S ウェブサイトは現状では最高峰

こうしたコンテンツを表 1 のブランド資産座標にと言っても過言ではないでしょう。

LIVING DENIM

プロットしてみたのが表 2 です。各コンテンツがウ

このような高い次元でのウェブサイトはともするェブサイトの中でしっかりと役割を持っているのがと大企業だからこそと思いがちですが、逆に個人レ分かります。反対に、どこか特定のポジションに固ベルのほうが言いたいことが絞れるはずです。

HERITAGE信頼性

先進性

自分が本当に伝えたいことは何か、自分のブラめると、特定のユーザーにしか対応できません。
さらに、こうして1 つ1 つのコンテンツのポジシンド資産とは一体何なのか、という観点で、自らョニングを明確にデザインすることで、それぞれののウェブサイトをプロデュースし、アクセスしてく役割が引き立つわけです。コンテンツごとに気持ちれた人との関係性を再構築するところに「グッとくをつかむコンテキストデザインがなされているだける」秘密が隠されているのかもしれませんね。

THE ADSSTOREFINDER

E-MAIL,SEARCH
論理性

表2 ：www.levi.com のコンテンツマップ

Hot Word

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

BrainMode✛「左脳モードと右脳モード」「ストーリーテリングは、人間の右脳、左脳の両方だからこそ、感性的な部分も刺激しながら、情に働きかけます。子供のころに聞いた話はよく報を理解に導くようなデザインや語りかけのトー頭の中に入っていて、大人になっても当時の話ン＆マナーが重要になってくるわけです。そして、をよく覚えているものです。それはストーリーテこの左脳と右脳との両方に働きかける「左脳モーリングというものがちょうど好きな音楽のようド」と「右脳モード」に対応するような編集 + デザに、右脳と左脳との両方に語りかけるから強くインがウェブサイトでもますます重要になってくる記憶に残るのでしょう」（Jackie Torrence）のです。今回ご紹介したLEVI'S の「上下ナビゲー✘

ションフレームシステム」をご覧いただければ、そ前々回のこのコーナー（97 年 7 月号「情報建築の上部が「右脳モード対応」をしていて、下部は家」）でご紹介した「情報デザイン」という概念を「左脳モード対応」をしていることに気付くでしょう。

育んできたTED という会議があります。これは、今さらに、この左脳モード対応と右脳モード対応

年の2 月末に開催された「TED7」において米国のとのアイデンティティをそれぞれ生かすために、あ著名なストーリーテラー、Jackie Torrence が行っえてサイトを分けているところまであります。東京

たスピーチです。

デジタルホン（J-PHONE）のウェブサイトは、商

彼女はこの会議で実際にストーリーテリングのパ品やサービスブランドである「J-PHONE」のブラフォーマンスもしました。英語がネイティブではな

ンドを強調したコンテンツが h t t p : / / j - p h o n e .

い我々にもそのストーリーがすんなりと飛び込んでtdp.co.jp/に、会社や商品案内のコンテンツがくるような、一緒にワクワクしてしまうようなパフ

http://www.tdp.co.jp/に分かれています。

ォーマンスに会場にいたヴィジョナリーたちは、驚前者はマスメディアで展開されている広告やCMき、圧倒され、絶賛の拍手を送ったのでした。全のイメージと連動させながら、その相乗効果によっ世界が1 つの巨大なデータ空間に統合され、誰もて効果的なブランドイメージが形成されるように注がそれを共有して…という夢を実現しつつあるイン意深くデザインされています。Flash を利用したイターネットですが、ともすれば忘れられがちなのがンタラクションでブランドストーリーを右脳へ魅力

この「ストーリーテリング」です。

的に語っているのです。後者は機能重視のすっきテキストや画像がデジタル情報として自由にやり取りできる「データ」と、「データ」という言葉でJ-PHONE

jhttp://www.j-phone.tdp.co.jp/top.html
右脳に働きかける魅力的なウェブサイト

りしたデザインで、左脳モードの人に快適な情報アクセスを実現しています。

我々が連想する＜データ＞（編集やデザインがされ✘ていない生のファクトデータ）とは大きく違います。

今回取り上げた「ブランドの資産価値を高める論理的な思考に基づいて必要な情報を探し読みウェブデザイン」においてとくに強調したいのは、とるとき、つまり左脳を働かせているときには、かともすれば忘れられがちな右脳に語りかけるストー

えって＜データ＞に近いようなあまり編集されていリーテリングです。＜データ＞を魅力的な情報にきない情報のほうがいいこともあります。しかし、人ちんと編集して、デザインしたウェブサイトがもっJ-PHONE HOME PAGE

は左脳だけで生きているのではないため、注意や興と登場してくるといいですよね。

jhttp://www.tdp.co.jp/
左脳に働きかける機能的なウェブサイト

味が続かず、情報が頭の中に入ってこないのです。

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

INTERNET magazine 1997/9339

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