2019年5月25日 インターネット老人会オフラインミーティング（Web風味） のスライドです。1997年のウェブデザインと時代の熱量について、語っています。

1. デビッド・シーゲルと
クレメント・モックに学ぶ
ウェブデザイン
HCD-Net認定 ⼈間中⼼設計専⾨家
⽻⼭ 祥樹 @storywriter
1
2019年5⽉25⽇（⼟）

2. 2
97年、冬。
僕は⼀⽣懸命に原稿⽤紙にむかっていた。
僕の⾼校には「卒業論⽂」があった。

3. 3
僕のテーマは「ウェブデザイン」。
1997年、ウェブの本は、まだ少なかった。
ウェブサイトのURLを集めた
イエローページ本が、市場にたくさん流れていた時代。
専⾨的なウェブデザインの書籍は、数えるほどしかない。
そもそも⼀般的な呼称は「ウェブサイト」じゃなくて「ホームページ」だった。

4. 4
そのなかで憧れたのが・・・

5. 5
デビッド・シーゲル「Creating killer Web sites」
クレメント・モック「Webデザイン・ビジネス」
中嶋 淳、及川 直彦「ウェブプロデューサー養成講座」
佐々⽊ 博「ウェブデザインハンドブック」
David Siegel Clement Mok

6. 6
これはひとりの⾼校⽣の
ウェブデザイナーへの憧れの回想記である。

7. 7
ちなみに、当時の⽇本のウェブデザインの梁⼭泊は
Web Design Consortium なのだが、憧れても、
⾼校⽣だった⽻⼭には、⼊会資格を満たせなかった。
ちなみに WDC 代表はキノトロープ ⽣⽥ 昌弘 さん。
⼊会資格は
「商⽤の実績がある⼈」
だった。
未経験の⾼校⽣にはムリ。

8. ⽻⼭ 祥樹 @storywriter
v HCD-Net認定 ⼈間中⼼設計専⾨家
• 使いやすいWebサイトをつくる専⾨家
v Web業界に20年くらい、Watsonは2年半ほど
• IBM Champion for 2018-2019
v 主な実績など
• 2009年 ⽇経パソコン 企業サイトランキング2009
⽇本の主要企業696サイト中、ユーザビリティ／アクセシビリティ分野で第3位
• 2011年 Webユーザビリティランキング2011 企業サイト編
⽇本の⼤⼿企業150サイト中、第4位
v 主な専⾨分野
• ユーザーエクスペリエンス、⼈間中⼼設計、情報アーキテクチャ、
アクセシビリティ、ライター、NOREN、IBM Watson
8
ユーザー⼼理を
つかむプロです

9. 9
メンタルモデル
ユーザーへの共感から⽣まれるUXデザイン戦略
Amazonで購⼊
http://amzn.asia/3cgueBZ
コンピュータ・IT > インターネット・Web開発 > Web開発 最⾼「1位」
コンピュータ・IT 総合 最⾼「9位」

10. 10
現場で使える! Watson開発⼊⾨
Watson API、Watson StudioによるAIアプリ開発⼿法
Amazonで購⼊
https://www.amazon.co.jp/dp/4798158496/

11. 11
デビッド・シーゲル
著書 「Creating killer Web sites」は、
96年（！）の Amazon 年間売上 第2位。
「クール」なウェブデザインで、みんなの憧れ！
spacer.gif を⽣み出した張本⼈。
（ちなみに⽇本での spacer.gif 創始者は 森川 眞⾏ さん）
当時は、カッコいいサイトを「Cool」って⾔った。

12. 12
デビッド・シーゲル
デビッド・シーゲルのレストランモデル。
いいこと⾔っている。
1. ⼀⾒のお客にとって、店の造りが⾃分とフィットするかどうかの演出。
2. 扉を開けて、中を⾒渡して、店員に声をかけられて、⾃分の席まで歩いてもらう演出。
3. 席についたあと、分かりやすく、シズル感のあるメニューを⾒せられるかどうかの演出。
4. ⼀つ⼀つの料理は当然おいしく。そして、それぞれがある種の全体感を醸し出す演出。
5. 会計したあとに、満⾜して席を⽴ち、店の外に出てもらえるかどうかの演出。
6. フッとしたときに、もう⼀度⾏ってみようと思わせる記憶の演出。
これらの演出の考えかたすべてがウェブデザインに当てはまる。

13. 13
デビッド・シーゲル
彼の提唱した
「第3世代のウェブサイト」
スプラッシュページがあるのが
当時はカッコよかった。
スプラッシュページとは扉ページのこと。
いまはやらない。

14. 14
デビッド・シーゲル
High Five という表彰サイトで、
イケてるサイトに認定バナーを出してた。
いま振り返ると、彼の褒めるものは、
⾒た⽬のカッコよさ偏重で、ファイルサイズばり重い。
ユーザー体験としてのウェブデザインというより、
アートとしてのウェブデザインの⼈だったような気がする。

15. 15
Web デザインとは、そこに⽤いる技術ではなく、
それをつくり出す⼈の腕で良し悪しが決まるものです。
デビッド・シーゲル

16. 16
クレメント・モック
元 Apple のチーフデザイナー。
著書「Webデザイン・ビジネス」は、
監訳者がビジネス・アーキテクツの 林 亨 さん。
⽇本のウェブに「情報デザイン」という概念を
⽇本語で紹介した、はじめての本。
原題は Designing Business なのだが、邦題は⼤⼈の事情で「Web」がついた、らしい。

17. 17
クレメント・モック
グローバルナビゲーションの
アクティブ要素の
「へこみ表現」が
当時は斬新だった。

18. 18
FedEX
よくお⼿本にされていた FedEX。
トラッキングナンバーを⼊れると、
荷物がどこにあるか、わかる。
いまでは当たり前のサービスだが、当時は
「これぞインターネットによる⾰新！」
という事例だった。

19. 19
中嶋 淳、及川 直彦
電通CC局の⽅。
ウェブ業界をつくった雑誌「iNTERNET magazine」
誌上で「ウェブプロデューサー養成講座」を連載。
HTML & TIPS 全盛だった当時に、
「ビジネスに役⽴つウェブサイト」をロジカルに考えた。
連載は1997年4⽉〜11⽉だからメチャ早い。

20. 20
中嶋 淳、及川 直彦
「誰に何を伝え、どんな関係を築き、
そして、それらを通じて
⾃分⾃⾝をどう変えていきたいか」
ブランドデザインの考えかたを、
具体的にウェブに応⽤したはじめての本。

21. 21
COSMOPOLITAN ONLINE
ファッション誌のウェブサイト。
よく事例として挙げられていた。
本誌と連動してトップモデルを起⽤した
⼤きなキービジュアルが特徴。
他にない⼤胆なビジュアルデザインが超カッコよかった。

22. 22
Apple
Apple の 97年当時のウェブサイト。
こんな感じ。

23. 23
「次の画⾯を⾒てみたい」そして
「これを作った⼈と会話してみたい」と思わせるものが
優れたウェブサイト。
中嶋 淳、及川 直彦

24. 24
佐々⽊ 博「ウェブデザインハンドブック」
ウェブサイトのデザインをロジカルに解説した
数少ない書籍のひとつ。
この本と「Webデザイン・ビジネス」の2冊が
卒業論⽂の底本になった。

25. 25
橋本 ⼤也「アクセス向上委員会」
⽇本のウェブマーケティングの草分けとなったサイト。
（1996）
みんな⾒てた。

26. 26
少年はその後、プロジェクトで⼀緒になった
ネットイヤーグループ 佐々⽊ 裕彦 さん 坂本 貴史 さんに
強い影響を受け、UXデザイナーへと歩むことになる。

27. 27
アルバイト時代の武勇伝をふたつ。（⽼害）

28. 28
Amazon で「なか⾒！検索」がはじまったのが、2003年。
（⽇本では2005年11⽉）
じつは99年には、僕が東進ハイスクールの
オンライン書店に「⽴ち読み」機能をつけた。
たぶん⽇本初。

29. 29
Infoseek や Yahoo! Japan トップの
フルサイズバナー広告をつくってた。
15KB 制限のなかで、GIFアニメを何コマ動かせるか。
2000年ごろ、最強はリクルートのISIZEの22コマだったが、
僕は32コマ動かした。（究極の減⾊） 1ピクセルごと⼿で減⾊する。

30. 30
いかに軽く⾼速にレンダリングされる
TABLEレイアウトを組むか、情熱を傾けた。

31. 31
ところで、このプレゼンで使っている
画⾯キャプチャは、
97年の卒業論⽂に引⽤掲載したもの。

32. 32
卒業論⽂は、どういう論旨だったのか？

33. 33
卒業論⽂
「情報デザイン」を軸に、
デビッド・シーゲル、
クレメント・モック、
中嶋 淳、及川 直彦、
各⽒の理論にふれ、
その後に、既存の理論へ提案する。
デビッド・シーゲル
クレメント・モック
中嶋 淳、及川 直彦
既存の理論への
提案

34. 34
卒業論⽂
ウェブではビジュアルデザインすらままならない時代。
ウェブにおける「情報デザイン」の重要性を語った。
当時の、17才の⾼校⽣としては、とても先進的。
俺TUEEEE！

35. 35
卒業論⽂
いいことたくさん⾔ってる！
5つほど紹介。

36. 36
どんな企業であっても、coolなページはその企業のイメー
ジアップにつながり、かつ悪いページはイメージダウンに
つながる。しかもこの関係は⾮常に密接である。
ホームページの印象は、その企業のブランドイメージに直
結する。
⽻⼭祥樹, 1997
ウェブブランディングに⾔及している。
当時は「ウェブでブランド醸成」なんて夢物語だった。

37. 37
通りでレストランを⼀⾒して選ぶとき、上品で綺麗な店と、
ぼろぼろで⾮衛⽣的な店の、どちらを選びたくなるだろう
か。
どんなに美味しい料理を⽤意していたとしても、店に⼊っ
てきてもらえなければ、⾷べてもらうことはできない。
⽻⼭祥樹, 1997
コンテンツの受容性が、そもそも読まれる前の要素に影響される、ということを⾔っている。

38. 38
コンパスと海図だ。ユーザーがこの情報の⼤海をぶじ航海
し、欲しい情報にすぐにたどり着けるように、そしてそれ
を理解できるようにしなければならない。これが「情報を
デザインする」ということである。
⽻⼭祥樹, 1997
これを97年の時点で⾔っているのが先進的。

39. 39
情報デザインの⽀持者たちは、情報をわかりやすく、利⽤
しやすくすることに関しては、優れた理論を展開してきた。
しかし、情報そのものの質に関しては、まったく論じてこ
なかった。
腐った⿂をどんなに上⼿く料理しても、⾷べられるものに
はならない。
⽻⼭祥樹, 1997「情報デザイン」がまだ新しい概念の時代に、
もう課題を指摘している。

40. 40
まれに、こじんまりしてしなびた店の前に、⻑い⾏列がで
きていることがある。「外⾯的なcool」の部分は駄⽬であ
る。情報デザインの理論ではこの現象は説明できない。お
客が⾏列をつくるのは、料理が美味いからであり、すなわ
ち「内⾯的なcool」が優れているからである。
⽻⼭祥樹, 1997
「cool」の要素を、「外⾯的なcool」と「内⾯的なcool」に
分けることを提唱している。

41. 41
⾼校⽣の俺TUEEEE！

42. 42
ありがとうございました。
⽻⼭ 祥樹
Twitter: @storywriter
Facebook: storywriter.jp
Facebook、ぜひ、つながってください！

43. ⽻⼭のプレゼンのアレ が、
スタンプになりました！
スタンプ名：ハーミィ（CSS編） 作者名：⽻⼭ 祥樹
https://store.line.me/stickershop/product/1228201/ja
Web・CSSネタ
全40種類