情報システム技術論’02 ＃ 5
久野靖∗

2002.6.13

はじめに

1• ただし大部分は概観でありデザイナが何をどうやっているかではない□ 今回の内容…

• 我々はフィールドでデザイナがやっていることに基づく← [3][8] にヒント

• 論文紹介 2 件• 皆様の作品 (現状) 紹介• 別の本から少し紹介

2.3

調査手法

□ 11 人の Web デザイナにインタビュー

論文紹介 (1)2• 10 人は 5 つの企業に所属、1 人はフリー□ Mark W. Neman, James A. Landay, Sitemaps,□ さらにデザイナが作ったものを収集

Storyboards, and Specifications: A Sketchof Web Site Design Practice, Proc. Designing
Interactive Systems 2000, pp.

• プロトタイプ、スケッチ、ドキュメント、プレゼン、最終生成物

263-274, 2000.

□ プロがどうやって Web サイトを作っているかというリ □ インタビュー、調査はすべて相手のオフィスで実施←作
サーチ
業環境や生成物が取材できる

2.1

introduction

2.4□ 内容→現在どのようなやり方で Web サイトが作られてい調査対象□ 5 つの企業のうち 4 つは Web 製作請負、1 つはポータル

るか企業□ 目的→ Web サイト製作に役立つツールを作ること□ 経験等は表 1a 参照• informal interface を探求したいという方向• 5 年以上の経験者はユーザインタフェース/アプリケー
ションデザインをやっていた (うち一人は印刷デザ□ デザイナがアイデアを探求している時は「あいまいなやインも)り方」□ バックグラウンドは 1b 参照• このやり方をサポートするツールはないか□ 業務はグライフィックデザイン/UI+情報アーキテクチャ/

2.2

両方 (1c 参照)

関連研究□ スピーチアプリケーション [17]、出版社 [1]2.5• デザイナ/編集者は複数の「中間表現」を駆使→本研

質問内容□ 最近完成した (ないし完成直前の) プロジェクトを対象

究とも類似として□ Web デザインについては色々書かれている [6][13]〜• その製作課程を順を追って説明してもらう[15]• どの段階で何をやって何を作ったか (4 人からは製作物を収集)∗ 筑波大学大学院経営システム科学専攻

1

2.6

観察内容について

2.8

あるデザインプロジェクトの例□ CAD ソフトのチュートリアルを作る□ 以下で観察したことについて記述• 多くは Web デザインに限らないことだと思われる• インタビューしたうちの短いものの 1 つ• 他のデザインと Web デザインの違いを探求してるわ• 各フェーズの長さについてはプロジェクトごとに大幅に違うけではないので OK• 各フェーズの相対的比率はわりあい一定• 用語等もデザイナが使っているものに準拠□ チーム→デザイナ、クリエータ、マネージャ(管理業務)

2.7

Web デザインにおける特徴点• デザイナが中心 (クリエータや他のデザイナも関与)□ デザイナは用語に敏感□ 最初の 2 週間 (#1、#2) →プロジェクトの背景情報を収集• information design →関連するコンテンツ群を識• チュートリアルの前バーションをレビュー別し、構造化された統一的な情報として組織する• クライアントと相談して新バーションに望むものを• navigation design →情報構造の中をたどってい知る

くやり方の設計• graphic (visual) design →色、画像、フォント、 □ 紙にアイデアをスケッチ
レイアウトなど見た目を通じての情報伝達のデザイ• 旧バージョンの構造、ナビゲーション、改良のアイン→個別ページ単位のデザイン• information architecture →デア

information□ フェーズの終了時点→「ニーズ分析」ドキュメント

desgin と navigation desgin の複合領域• user interface desgin → (Web のコンテキストでは) 主にナビゲーションシステムと一部グラフィック• ゴール、スケジュール、デザイン方針• クライアントに配付デザインに関わる部分。ユーザビリティのテスト/検□ クライアントとのミーティングの週 (#3)

証にも関わることが• 新版の最初のアイデアを提示□ 「ユーザ中心デザイン」を標榜するデザイナも→しかし系統的ではない□ 「initial desgin variations」□ 図 1 →デザインの各領域の関係• 構造やナビゲーションの概要□ 企業のうち 3 社では特定領域のスペシャリストが置かれ• 全体構造のスケッチ 20 枚 (図 2)ていた• 各ページのスケッチ (図 3)• 対話シーケンス (図 5)• 1 社では IA/UI を設計し、グラフィックデザインは下請けに• 2□ プレゼンテーションのため、2 つのバリエーションにつ社 で は「Information Architect / UI

いて Illustrator で描いて用意 (#4)

Designer」が職種にある□ 構造のウォークスルー→ Illustrator の画像を用いて• 残り 2 社は特に区別せずあるデザイナが場面ごとにDirectord で作成違う内容をこなす□ 画像→典型的なページのようす• フリーの 1 名はおもにグラフィックデザイン• 簡単なカラースキム (青、緑、黒) →違う色を使う部
分を示すためだけ□ ほとんどの場合、情報デザイン/ナビゲーションデザイ
ンはグラフィックデザインより前に行われていた• 画像やフォントはほとんどまだない→メンタルモデ• 1 社だけはグラフィクスが先行 (ないし並行) →広告

ルだけに注目

印刷業界から来たこと、娯楽系サイトを対象として□ 次の週 (#5) → Visual Design Variation の最初の版いることが理由かも• 先のプレゼンではわざと抜けていた画像などの細部を入れる
2

• ホームページと 2 レベル目のページの 1 つについて、• デザインプロセスの明示 (Web や資料などで) →クライアントの教育になる

高品質モックアップ (本者はないがたとえば図 7 のようなもの)• ポータルサイトとフリーのデザイナだけは明示的なプロセスなし (ポータルサイトでは準備していると□ バリエーションの作成→紙に荒いスケッチ→ Director言っていた)のペイント機能• 3 人のデザイナに協力してもらいそれぞれモックアッ □ 以下に各デザイナへのインタビューからまとめた一般的なプロセスを示す
プを用意• Discovery →□ 再度クライアントにプレゼン→クライアントが 2 つを選

Design Expolation →DesignRefinement → Production

んでそこから先に進めることに□ 次の週 (#6) →選ばれたデザインを Director を使ってさらにリファイン

2.10

Discovery• 次のプレゼンではホームページ、2 レベル目に加え □ プロジェクトのスコープ、クライアントの要望、対象ユーてコンテンツページもいくつか含まれたザなどを決定• クライアントは 2 案とも好みだと言ったので両方を• 前バージョンがあるなら、それを注意深く分析まぜることに• competitive analysis ←競合関係にあるデザイン□ クライアントが「3 週後のトレードショーのためにできを分析し改善点を探るるだけ早くプロトタイプが欲しい」と言ったので通常よ• インタビュー、観察、テスト、サーベイなどもり速く「生産モード」に移行 (#7、#8)• もう少しだけモックアップで作業 (本当はモックアッ2.11

プを完璧に仕上げるのだけど…)

Desgin Expansion• HTML による製作に着手。もはやモックアップは手直 □ 可能性のあるソリューション (前フェーズで発掘) を実際に探求するししない• PhotoShop で 画 像 、BBEdit で HTML を 編 集 、Netscape でプレビュー• information desgin、navigation desgin、ラフな graphic design• 複数のラフデザインを用意□ デザイナーによると、プロトタイプ製作に続いてガイドラインを作り、それとプロトタイプが対になったものが• 色、画像、フォントなどはまだ適当

本番製作用に渡される• 目標→クライアントに多くの選択肢を早く提示し選んでもらう• インタビュー時点ではまだガイドラインは作られていなかった• 顧客はこのプロトタイプから製作に移るか決断していない→ガイドラインを作成する労力に見合うか分

2.12

Design Refinement□ 選んだデザインを発展させるからないので保留中• 繰り返し改良し詳細を詰める

2.9• フォント、ラベル、文章なども用意、色も決める

デザインプロセス• 多くのサイト→全ページを個別にデザインする必要はない→テンプレート□ デザイナは反復プロセスに従ってデザイン• どれくらい明示的にプロセスを定義しているか→人や組織による

2.13

Production• 先の例ではわりと明示的 (プロセス進行に従って他□ デザインが十分煮詰まったら (または時間切れになったの人とやりとり)ら)、インプリメンタに手渡せるように用意□ 各ステージはクライアントへのプレゼンで区切られて• プロトタイプ、マニュアル、ガイドライン、仕様など
いる
3

2.14

デザインプロセスにおける生成物• どこにどこへ行くリンクがある、といった事柄がメインだから□ デザインプロセス→多くの中間生成物• 用途→コミュニケーション手段 (対デザイナ、顧客、…、自分)• 各生成物が複数のコミュニケーションに使われる• 情報デザイナがグラフィックデザイナに渡すのにも便利□ クライアントに見せることも• きれいにできているが完成品でないことも明らかな

2.15のがよい

サイトマップ• 完成品みたいだと細部に目が行ってしまう• しかしラフすぎるとプロっぽくなくて印象がよくない□ サイトの構造を示すダイアグラム (図 4)• 両方のバランスを取るのが重要• 情報構造とナビゲーション構造 (の一部) を示している• サイトマップは多くの場合内部むけ

2.18• 公開されるサイトマップもあるが元のとはだいぶ違う

モックアップ□ 実際のページのサンプル (図 7)。グラフィックデザイナによる。

□ サイトマップはプロジェクト中ずっと更新されながら使われる• モックアップは全ての組織で使われていた。納品物に含まれることも。

• 最初はおおまかな構成• プロジェクトが進むと細かいところまで• 場合によっては各ページをすべて載せて管理目的に使うことも

2.19□ システム全体を表すものとして使われる• information designer の領分。5 つの企業すべてでサイトマップあり• サイトマップ、スキーム、モックアップを集めたものであることも□ ラベルつきの箱 (ページ) と矢線 (リンク)• 多くの場合、「対話的プロトタイプ」→ HTML または• 主要なナビゲーション経路のみ示すことが多い

2.16

Director

ストーリーボード2.20□ 対話シーケンスを表す→ナレーション説明つき (図 5)仕様とガイドライン□ 仕様→デザインの意図を詳細に記述→イプリメンタ向け• ユーザがこういうことをする場合こういう風に進んで行く、という形• これに基づいて実際の各ページを製作する□ ガイドライン→仕様よりもうすこし緩い感じ• これも内部向けであることが普通• 開発者が詳細を決めてもよい• 代替手段→ウォークスルー (各ページを順次出しながらデモ)

2.17

プロトタイプ□ 両方の用語を区別しない企業もある

スキーマ

2.21

□ 特定のページに何が入るかを示す (図 6)

プレゼンテーション□ プレゼンテーションは重要な部分 (特にデザイン企業• 画像はそのもののこともラベルのこともある。

では)• グラフィックの細部はおおまかに示されているだけ• クライアントとやり取りできる少ない機会• 個別のページを記述するが情報/ナビゲーションデザ
インの領域• プレゼンテーション製作→「デザインプロセスそのもの」• 3 週間みっちりプレゼン作成を外注する企業
4

• プレゼンテーションようの「シアター」を持ってい• 「最初は紙でやるが、デザインを改訂して行くとなる企業

ると計算機のツールを使う、なぜなら変更が簡単だから」□ プレゼンでクライアントから望む反応を引き出すには戦略的な用意が必要□ 他のデザイナとのやりとり、ミーティングにも使う (白板は持ち運べないのでいまいち)• フィードバックが欲しいし OK ももらいたい• プリントアウトに書き込みとかも (図 8)• もう完成間近と誤解されることは避けなければならない• 詳細部分についてコメントをもらってもしょうがな

2.25

い場合もコンピュータ上のツール□ Photoshop、Illustrator、Director は他のデザイナ• しかしデザイナはさすがだと思ってもらう必要もあるも多く利用 (特にグラフィクス系)□ 4 つの企業において、プレゼンがフェーズの区切り□ しかし UI デザイナは違っていた• 特に最初においては。後の方ではもっとインフォー
マルにフィードバックがもらえるようになる (例:• 全部紙でやっている人 (計算機はワープロだけ)• Visio でダイアグラムを描く人

extranet 経由)• 内容はここまでに出て来たものすべて (モックアップ □ よく使うツールで全部やってしまう人が多いが多いがサイトマップやスキームも)

2.22

2.26

書かれたドキュメント

新しいデザインツール?

□ よりよく Web デザインをサポートするツールは作れない□ 仕様/ガイドライン以外にも書かれたものは多い

か→本リサーチの目的• 電子メールによるやりとり□ どのような特性が望まれるかについて…

• discovery の結果、コンセプト、マーケティング、などの文書も2.27• 企業によってばらばらだがとにかく多い

Informal User Interface□ スケッチはすべてのデザイナが使う→スケッチのサポー

2.23

トはいいのではツール• 今は無理矢理早めに別のツールを使っている→スケッ□ 先の例からも分かるように、デザインにはさまざまなチのまま計算機でサポートしたらよいと思うツールが使われている

2.24• インフォーマルなインタフェース→学ぶのも用意なはず

紙とペンによるスケッチ□ 最初の段階ではスケッチが多く使われる (図 2〜5)

2.28

Support Multiple Representations• information/navigation desgin にも、グラフィッ □ デザイナは一時に複数の表現を並行して使っている
クデザインにも• 1 つのツールでそれらをカバーできるとよい□ スケッチが見たいというと驚いてためらったりした• poor quality だとか really rought だとか言い訳

2.29

Focus on Early Design Phases• クライアントに見せるものはすべてプロっぽくない□ 早いステージ→スケッチが使われ、よいツールがないといけない• 後の方は詳細→既にあるツールであてはまる□ 「かってはもっとスケッチを使っていた」• 早く見せろと言われる→どんどん Illustrator やPhotoshop を使うのが早くなっていった
5

2.30

Integrate with Other Tools

5.1□ 早い段階でも完成度の高いものが必要なことも□ リンクは進化させてよい• Photoshop などとスケッチと組み合わせられるとよい

2.31• リンクに普通でない色/形を使うのはそれと分かるデザインならよい• リンクでないものを「青色下線つき」はダメManage History and Variations□ Web デザインのパターン□ さまざまなバリエーションを試す必要→それらをまとめて管理したい• スリーパネルレイアウト• バリエーションはデザインにおいて本質的• LSD デザイン (Logo、Search、Directory) ← Yahooみたいなの• 現状は…複数のバージョンをファイル名の付け方な• タブつきインタフェース←タブが適してないものまどで工夫して管理で乱用• バージョン管理ツールに興味を示したデザイナも

2.32

5.2

まとめ• (1) 複雑なものを分かりやすくすることを目的として、データに備わる固有のパターンを組織化する人□ 新しいツールの可能性を検討• (2) 第三者が情報への道筋を自分で見つけられるよ

論文紹介 (2)

うに、情報の構造もしくはマップを製作する人□ Mark W. Neman, Jason I. Hong, James A.

□ 見たい人に応じてよい見せ方は異なる→複数バージョン

Landay, DENIM: Finding a Tighter Fit Between
Tools and Practice for Web Site Design, Proc.
CHI 2000, pp.

を使い分けられるようにするのがよい• 対象によっては 1 種類だけということも

510-517, 2000.

□ 色々目新しい構造□ 詳しくやっている時間がないので簡単に…
□ 動かしてみる:

3 章「Web サイトの構造を探る」□ インフォメーションアーキテクトの定義□ デザイナのやり方を調査してみた3

2 章「インタフェースを統一しよう」「/u2/kuno/denim/denim」• マトリックス• インパルスバインディング

4

各自の現時点バージョン紹介

5

もう 1 つ別の本:• ユーバーツリー• スタックノミー

5.3□ ジェフリー・ヴィーン、戦う Web デザイン、MDN コーポ
レーション、2001。ISBN4-8443-5596-1。

□ ばらつきを考える→ CSS サポートが悪くてもそれなりに□ ニールセンよりもっとデザイン寄りな人という感じ。

□ 流体デザイン、比率で指定→ニールセンと同じ□ 書かれた時点が新しいので技術的な事柄も新しい。
□ オールカラーの本!

4 章「Web サイトの機能」• 比率だと小さくなりすぎないようにスクリプトで押える

Web デザインが注目され出してからの本。

• 使えるスペースに合わせてフォントサイズを調整する□ 全部やってるわけに行かないので面白いと思ったところ• →スクリプトを使えば色々な可能性があるだけ。

6

5.4

7 章「広告 vs ユーザビリティ」

6

本日の演習:

データベースからのHTML 生成□ Web 広告の効果測定法□ http://w3in/〜kuno/ist02/bbs/ ←簡単な BBS• 普通の広告媒体→どれくらい見られたかは推測するしかない□ 書き込みと読み出しを行なってみる• Web →何人がどれだけ見たかきっちり分かる→革命的!

□ 自分のところに読み出しスクリプトを持って来て直す• ページビューは増大してるが広告のクリック率は急• cd WWW; umask 022

降下• cp /u1a/kuno/WWW/ist02/bbs/readbbs.php□ 「表示の途中ですがここでお知らせを…」

readbbs.php• クリック率の低さ→広告主の不満→レート下げ→競争• これをそのまま動かして読めることを確認• 無理矢理見せる、無理矢理クリックさせる→ユーザ• 演習:

ビリティ低下スタイル指定やタグを追加して「読みやすく」してみる• 演習: 記事一覧を生成してみる (別のファイルにコピーしてやるとよい)□ ユーザ軽蔑型広告• 「代理店はバナーを OS インタフェースそっくりにすることを勧める」• 演習:

その他好きなように改良してみる• ユーザをだましてクリックさせる→クリック率は上がる

7• しかし効果はないと考える□ 「10 ページ程度の Web プレゼンテーションを作成し、そレポート課題□ メディアは (コマーシャル) メッセージの内容を報告せよ。またそこにおいて本科目で学んだこ• ターゲットを外しているから悪いに活用しているかについても論ぜよ」→〆切は 7/15(月)• 「無料メール」で検索したらそこに出る広告もメールであるべき一杯とします。とやその他 Web ユーザビリティに関する事柄をどのよう□ パーソナリゼーションの勧め• 各ユーザのプロファイルに合わせればより効果的なはず• プロファイリング→環境から調べる/好みから調べる/履歴から調べる• クッキー問題→クッキーに罪はないが…
□ よい広告をデザインするには• ユーザの目的にかなうように広告を入れる• 例:

地図を見たときにカフェ等の位置を入れられる• 実はそれらがスポンサーになっている

5.5

8 章「オブジェクト指向出版システム」□ 大量のデータを保持したサイトを最新に保つには…?
□ 人手で書き換えていたら絶対間に合わない□ コンテンツは論理構造にしてデータベースに入れる□ ページはデータベースとテンプレートから生成□ しかしクォリティのチェックは重要

7