Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
デビッド・シーゲルと
クレメント・モックに学ぶ
ウェブデザイン
HCD-Net認定 ⼈間中⼼設計専⾨家
⽻⼭ 祥樹 @storywriter
1	
2019年5⽉25⽇(⼟)
2	
97年、冬。
僕は⼀⽣懸命に原稿⽤紙にむかっていた。
僕の⾼校には「卒業論⽂」があった。
3	
僕のテーマは「ウェブデザイン」。
1997年、ウェブの本は、まだ少なかった。
ウェブサイトのURLを集めた
イエローページ本が、市場にたくさん流れていた時代。
専⾨的なウェブデザインの書籍は、数えるほどしかない。
そもそも⼀般的な呼称は「...
4	
そのなかで憧れたのが・・・
5	
デビッド・シーゲル「Creating killer Web sites」
クレメント・モック「Webデザイン・ビジネス」
中嶋 淳、及川 直彦「ウェブプロデューサー養成講座」
佐々⽊ 博「ウェブデザインハンドブック」
David Sieg...
6	
これはひとりの⾼校⽣の
ウェブデザイナーへの憧れの回想記である。
7	
ちなみに、当時の⽇本のウェブデザインの梁⼭泊は
Web Design Consortium なのだが、憧れても、
⾼校⽣だった⽻⼭には、⼊会資格を満たせなかった。
ちなみに WDC 代表はキノトロープ ⽣⽥ 昌弘 さん。
⼊会資格は
「商...
⽻⼭ 祥樹 @storywriter
v  HCD-Net認定 ⼈間中⼼設計専⾨家
•  使いやすいWebサイトをつくる専⾨家
v  Web業界に20年くらい、Watsonは2年半ほど
•  IBM Champion for 2018-2019...
9	
メンタルモデル
ユーザーへの共感から⽣まれるUXデザイン戦略
Amazonで購⼊
http://amzn.asia/3cgueBZ
コンピュータ・IT > インターネット・Web開発 > Web開発 最⾼「1位」
コンピュータ・IT 総合...
10	
現場で使える! Watson開発⼊⾨
Watson API、Watson StudioによるAIアプリ開発⼿法
Amazonで購⼊
https://www.amazon.co.jp/dp/4798158496/
11	
デビッド・シーゲル
著書 「Creating killer Web sites」は、
96年(!)の Amazon 年間売上 第2位。
「クール」なウェブデザインで、みんなの憧れ!
spacer.gif を⽣み出した張本⼈。
(ちなみに...
12	
デビッド・シーゲル
デビッド・シーゲルのレストランモデル。
いいこと⾔っている。
1. ⼀⾒のお客にとって、店の造りが⾃分とフィットするかどうかの演出。
2. 扉を開けて、中を⾒渡して、店員に声をかけられて、⾃分の席まで歩いてもらう演出...
13	
デビッド・シーゲル
彼の提唱した
「第3世代のウェブサイト」
スプラッシュページがあるのが
当時はカッコよかった。
スプラッシュページとは扉ページのこと。
いまはやらない。
14	
デビッド・シーゲル
High Five という表彰サイトで、
イケてるサイトに認定バナーを出してた。
いま振り返ると、彼の褒めるものは、
⾒た⽬のカッコよさ偏重で、ファイルサイズばり重い。
ユーザー体験としてのウェブデザインというより、...
15	
Web デザインとは、そこに⽤いる技術ではなく、
それをつくり出す⼈の腕で良し悪しが決まるものです。
デビッド・シーゲル
16	
クレメント・モック
元 Apple のチーフデザイナー。
著書「Webデザイン・ビジネス」は、
監訳者がビジネス・アーキテクツの 林 亨 さん。
⽇本のウェブに「情報デザイン」という概念を
⽇本語で紹介した、はじめての本。
原題は De...
17	
クレメント・モック
グローバルナビゲーションの
アクティブ要素の
「へこみ表現」が
当時は斬新だった。
18	
FedEX
よくお⼿本にされていた FedEX。
トラッキングナンバーを⼊れると、
荷物がどこにあるか、わかる。
いまでは当たり前のサービスだが、当時は
「これぞインターネットによる⾰新!」
という事例だった。
19	
中嶋 淳、及川 直彦
電通CC局の⽅。
ウェブ業界をつくった雑誌「iNTERNET magazine」
誌上で「ウェブプロデューサー養成講座」を連載。
HTML & TIPS 全盛だった当時に、
「ビジネスに役⽴つウェブサイト」をロジカ...
20	
中嶋 淳、及川 直彦
「誰に何を伝え、どんな関係を築き、
 そして、それらを通じて
 ⾃分⾃⾝をどう変えていきたいか」
ブランドデザインの考えかたを、
具体的にウェブに応⽤したはじめての本。
21	
COSMOPOLITAN ONLINE
ファッション誌のウェブサイト。
よく事例として挙げられていた。
本誌と連動してトップモデルを起⽤した
⼤きなキービジュアルが特徴。
他にない⼤胆なビジュアルデザインが超カッコよかった。
22	
Apple
Apple の 97年当時のウェブサイト。
こんな感じ。
23	
「次の画⾯を⾒てみたい」そして
「これを作った⼈と会話してみたい」と思わせるものが
優れたウェブサイト。
中嶋 淳、及川 直彦
24	
佐々⽊ 博「ウェブデザインハンドブック」
ウェブサイトのデザインをロジカルに解説した
数少ない書籍のひとつ。
この本と「Webデザイン・ビジネス」の2冊が
卒業論⽂の底本になった。
25	
橋本 ⼤也「アクセス向上委員会」
⽇本のウェブマーケティングの草分けとなったサイト。
(1996)
みんな⾒てた。
26	
少年はその後、プロジェクトで⼀緒になった
ネットイヤーグループ 佐々⽊ 裕彦 さん 坂本 貴史 さんに
強い影響を受け、UXデザイナーへと歩むことになる。
27	
アルバイト時代の武勇伝をふたつ。(⽼害)
28	
Amazon で「なか⾒!検索」がはじまったのが、2003年。
(⽇本では2005年11⽉)
じつは99年には、僕が東進ハイスクールの
オンライン書店に「⽴ち読み」機能をつけた。
たぶん⽇本初。
29	
Infoseek や Yahoo! Japan トップの
フルサイズバナー広告をつくってた。
15KB 制限のなかで、GIFアニメを何コマ動かせるか。
2000年ごろ、最強はリクルートのISIZEの22コマだったが、
僕は32コマ動かし...
30	
いかに軽く⾼速にレンダリングされる
TABLEレイアウトを組むか、情熱を傾けた。
31	
ところで、このプレゼンで使っている
画⾯キャプチャは、
97年の卒業論⽂に引⽤掲載したもの。
32	
卒業論⽂は、どういう論旨だったのか?
33	
卒業論⽂
「情報デザイン」を軸に、
デビッド・シーゲル、
クレメント・モック、
中嶋 淳、及川 直彦、
各⽒の理論にふれ、
その後に、既存の理論へ提案する。
デビッド・シーゲル
クレメント・モック
中嶋 淳、及川 直彦
既存の理論への
...
34	
卒業論⽂
ウェブではビジュアルデザインすらままならない時代。
ウェブにおける「情報デザイン」の重要性を語った。
当時の、17才の⾼校⽣としては、とても先進的。
俺TUEEEE!
35	
卒業論⽂
いいことたくさん⾔ってる!
5つほど紹介。
36	
どんな企業であっても、coolなページはその企業のイメー
ジアップにつながり、かつ悪いページはイメージダウンに
つながる。しかもこの関係は⾮常に密接である。
ホームページの印象は、その企業のブランドイメージに直
結する。
⽻⼭祥樹, 1...
37	
通りでレストランを⼀⾒して選ぶとき、上品で綺麗な店と、
ぼろぼろで⾮衛⽣的な店の、どちらを選びたくなるだろう
か。
どんなに美味しい料理を⽤意していたとしても、店に⼊っ
てきてもらえなければ、⾷べてもらうことはできない。
⽻⼭祥樹, 1...
38	
コンパスと海図だ。ユーザーがこの情報の⼤海をぶじ航海
し、欲しい情報にすぐにたどり着けるように、そしてそれ
を理解できるようにしなければならない。これが「情報を
デザインする」ということである。
⽻⼭祥樹, 1997
これを97年の時点...
39	
情報デザインの⽀持者たちは、情報をわかりやすく、利⽤
しやすくすることに関しては、優れた理論を展開してきた。
しかし、情報そのものの質に関しては、まったく論じてこ
なかった。
腐った⿂をどんなに上⼿く料理しても、⾷べられるものに
はなら...
40	
まれに、こじんまりしてしなびた店の前に、⻑い⾏列がで
きていることがある。「外⾯的なcool」の部分は駄⽬であ
る。情報デザインの理論ではこの現象は説明できない。お
客が⾏列をつくるのは、料理が美味いからであり、すなわ
ち「内⾯的なco...
41	
⾼校⽣の俺TUEEEE!
42	
ありがとうございました。
⽻⼭ 祥樹
Twitter: @storywriter
Facebook: storywriter.jp
Facebook、ぜひ、つながってください!
⽻⼭のプレゼンのアレ が、
  スタンプになりました!
スタンプ名:ハーミィ(CSS編) 作者名:⽻⼭ 祥樹
https://store.line.me/stickershop/product/1228201/ja
Web・CSSネタ
全40種類
Próxima SlideShare
Cargando en…5
×

デビッド・シーゲルとクレメント・モックに学ぶウェブデザイン:インターネット老人会オフラインミーティング(Web風味)

484 visualizaciones

Publicado el

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

Publicado en: Diseño
  • Sé el primero en comentar

デビッド・シーゲルとクレメント・モックに学ぶウェブデザイン:インターネット老人会オフラインミーティング(Web風味)

  1. 1. デビッド・シーゲルと クレメント・モックに学ぶ ウェブデザイン HCD-Net認定 ⼈間中⼼設計専⾨家 ⽻⼭ 祥樹 @storywriter 1 2019年5⽉25⽇(⼟)
  2. 2. 2 97年、冬。 僕は⼀⽣懸命に原稿⽤紙にむかっていた。 僕の⾼校には「卒業論⽂」があった。
  3. 3. 3 僕のテーマは「ウェブデザイン」。 1997年、ウェブの本は、まだ少なかった。 ウェブサイトのURLを集めた イエローページ本が、市場にたくさん流れていた時代。 専⾨的なウェブデザインの書籍は、数えるほどしかない。 そもそも⼀般的な呼称は「ウェブサイト」じゃなくて「ホームページ」だった。
  4. 4. 4 そのなかで憧れたのが・・・
  5. 5. 5 デビッド・シーゲル「Creating killer Web sites」 クレメント・モック「Webデザイン・ビジネス」 中嶋 淳、及川 直彦「ウェブプロデューサー養成講座」 佐々⽊ 博「ウェブデザインハンドブック」 David Siegel Clement Mok
  6. 6. 6 これはひとりの⾼校⽣の ウェブデザイナーへの憧れの回想記である。
  7. 7. 7 ちなみに、当時の⽇本のウェブデザインの梁⼭泊は Web Design Consortium なのだが、憧れても、 ⾼校⽣だった⽻⼭には、⼊会資格を満たせなかった。 ちなみに WDC 代表はキノトロープ ⽣⽥ 昌弘 さん。 ⼊会資格は 「商⽤の実績がある⼈」 だった。 未経験の⾼校⽣にはムリ。
  8. 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. 9 メンタルモデル ユーザーへの共感から⽣まれるUXデザイン戦略 Amazonで購⼊ http://amzn.asia/3cgueBZ コンピュータ・IT > インターネット・Web開発 > Web開発 最⾼「1位」 コンピュータ・IT 総合 最⾼「9位」
  10. 10. 10 現場で使える! Watson開発⼊⾨ Watson API、Watson StudioによるAIアプリ開発⼿法 Amazonで購⼊ https://www.amazon.co.jp/dp/4798158496/
  11. 11. 11 デビッド・シーゲル 著書 「Creating killer Web sites」は、 96年(!)の Amazon 年間売上 第2位。 「クール」なウェブデザインで、みんなの憧れ! spacer.gif を⽣み出した張本⼈。 (ちなみに⽇本での spacer.gif 創始者は 森川 眞⾏ さん) 当時は、カッコいいサイトを「Cool」って⾔った。
  12. 12. 12 デビッド・シーゲル デビッド・シーゲルのレストランモデル。 いいこと⾔っている。 1. ⼀⾒のお客にとって、店の造りが⾃分とフィットするかどうかの演出。 2. 扉を開けて、中を⾒渡して、店員に声をかけられて、⾃分の席まで歩いてもらう演出。 3. 席についたあと、分かりやすく、シズル感のあるメニューを⾒せられるかどうかの演出。 4. ⼀つ⼀つの料理は当然おいしく。そして、それぞれがある種の全体感を醸し出す演出。 5. 会計したあとに、満⾜して席を⽴ち、店の外に出てもらえるかどうかの演出。 6. フッとしたときに、もう⼀度⾏ってみようと思わせる記憶の演出。 これらの演出の考えかたすべてがウェブデザインに当てはまる。
  13. 13. 13 デビッド・シーゲル 彼の提唱した 「第3世代のウェブサイト」 スプラッシュページがあるのが 当時はカッコよかった。 スプラッシュページとは扉ページのこと。 いまはやらない。
  14. 14. 14 デビッド・シーゲル High Five という表彰サイトで、 イケてるサイトに認定バナーを出してた。 いま振り返ると、彼の褒めるものは、 ⾒た⽬のカッコよさ偏重で、ファイルサイズばり重い。 ユーザー体験としてのウェブデザインというより、 アートとしてのウェブデザインの⼈だったような気がする。
  15. 15. 15 Web デザインとは、そこに⽤いる技術ではなく、 それをつくり出す⼈の腕で良し悪しが決まるものです。 デビッド・シーゲル
  16. 16. 16 クレメント・モック 元 Apple のチーフデザイナー。 著書「Webデザイン・ビジネス」は、 監訳者がビジネス・アーキテクツの 林 亨 さん。 ⽇本のウェブに「情報デザイン」という概念を ⽇本語で紹介した、はじめての本。 原題は Designing Business なのだが、邦題は⼤⼈の事情で「Web」がついた、らしい。
  17. 17. 17 クレメント・モック グローバルナビゲーションの アクティブ要素の 「へこみ表現」が 当時は斬新だった。
  18. 18. 18 FedEX よくお⼿本にされていた FedEX。 トラッキングナンバーを⼊れると、 荷物がどこにあるか、わかる。 いまでは当たり前のサービスだが、当時は 「これぞインターネットによる⾰新!」 という事例だった。
  19. 19. 19 中嶋 淳、及川 直彦 電通CC局の⽅。 ウェブ業界をつくった雑誌「iNTERNET magazine」 誌上で「ウェブプロデューサー養成講座」を連載。 HTML & TIPS 全盛だった当時に、 「ビジネスに役⽴つウェブサイト」をロジカルに考えた。 連載は1997年4⽉〜11⽉だからメチャ早い。
  20. 20. 20 中嶋 淳、及川 直彦 「誰に何を伝え、どんな関係を築き、  そして、それらを通じて  ⾃分⾃⾝をどう変えていきたいか」 ブランドデザインの考えかたを、 具体的にウェブに応⽤したはじめての本。
  21. 21. 21 COSMOPOLITAN ONLINE ファッション誌のウェブサイト。 よく事例として挙げられていた。 本誌と連動してトップモデルを起⽤した ⼤きなキービジュアルが特徴。 他にない⼤胆なビジュアルデザインが超カッコよかった。
  22. 22. 22 Apple Apple の 97年当時のウェブサイト。 こんな感じ。
  23. 23. 23 「次の画⾯を⾒てみたい」そして 「これを作った⼈と会話してみたい」と思わせるものが 優れたウェブサイト。 中嶋 淳、及川 直彦
  24. 24. 24 佐々⽊ 博「ウェブデザインハンドブック」 ウェブサイトのデザインをロジカルに解説した 数少ない書籍のひとつ。 この本と「Webデザイン・ビジネス」の2冊が 卒業論⽂の底本になった。
  25. 25. 25 橋本 ⼤也「アクセス向上委員会」 ⽇本のウェブマーケティングの草分けとなったサイト。 (1996) みんな⾒てた。
  26. 26. 26 少年はその後、プロジェクトで⼀緒になった ネットイヤーグループ 佐々⽊ 裕彦 さん 坂本 貴史 さんに 強い影響を受け、UXデザイナーへと歩むことになる。
  27. 27. 27 アルバイト時代の武勇伝をふたつ。(⽼害)
  28. 28. 28 Amazon で「なか⾒!検索」がはじまったのが、2003年。 (⽇本では2005年11⽉) じつは99年には、僕が東進ハイスクールの オンライン書店に「⽴ち読み」機能をつけた。 たぶん⽇本初。
  29. 29. 29 Infoseek や Yahoo! Japan トップの フルサイズバナー広告をつくってた。 15KB 制限のなかで、GIFアニメを何コマ動かせるか。 2000年ごろ、最強はリクルートのISIZEの22コマだったが、 僕は32コマ動かした。(究極の減⾊) 1ピクセルごと⼿で減⾊する。
  30. 30. 30 いかに軽く⾼速にレンダリングされる TABLEレイアウトを組むか、情熱を傾けた。
  31. 31. 31 ところで、このプレゼンで使っている 画⾯キャプチャは、 97年の卒業論⽂に引⽤掲載したもの。
  32. 32. 32 卒業論⽂は、どういう論旨だったのか?
  33. 33. 33 卒業論⽂ 「情報デザイン」を軸に、 デビッド・シーゲル、 クレメント・モック、 中嶋 淳、及川 直彦、 各⽒の理論にふれ、 その後に、既存の理論へ提案する。 デビッド・シーゲル クレメント・モック 中嶋 淳、及川 直彦 既存の理論への 提案
  34. 34. 34 卒業論⽂ ウェブではビジュアルデザインすらままならない時代。 ウェブにおける「情報デザイン」の重要性を語った。 当時の、17才の⾼校⽣としては、とても先進的。 俺TUEEEE!
  35. 35. 35 卒業論⽂ いいことたくさん⾔ってる! 5つほど紹介。
  36. 36. 36 どんな企業であっても、coolなページはその企業のイメー ジアップにつながり、かつ悪いページはイメージダウンに つながる。しかもこの関係は⾮常に密接である。 ホームページの印象は、その企業のブランドイメージに直 結する。 ⽻⼭祥樹, 1997 ウェブブランディングに⾔及している。 当時は「ウェブでブランド醸成」なんて夢物語だった。
  37. 37. 37 通りでレストランを⼀⾒して選ぶとき、上品で綺麗な店と、 ぼろぼろで⾮衛⽣的な店の、どちらを選びたくなるだろう か。 どんなに美味しい料理を⽤意していたとしても、店に⼊っ てきてもらえなければ、⾷べてもらうことはできない。 ⽻⼭祥樹, 1997 コンテンツの受容性が、そもそも読まれる前の要素に影響される、ということを⾔っている。
  38. 38. 38 コンパスと海図だ。ユーザーがこの情報の⼤海をぶじ航海 し、欲しい情報にすぐにたどり着けるように、そしてそれ を理解できるようにしなければならない。これが「情報を デザインする」ということである。 ⽻⼭祥樹, 1997 これを97年の時点で⾔っているのが先進的。
  39. 39. 39 情報デザインの⽀持者たちは、情報をわかりやすく、利⽤ しやすくすることに関しては、優れた理論を展開してきた。 しかし、情報そのものの質に関しては、まったく論じてこ なかった。 腐った⿂をどんなに上⼿く料理しても、⾷べられるものに はならない。 ⽻⼭祥樹, 1997「情報デザイン」がまだ新しい概念の時代に、 もう課題を指摘している。
  40. 40. 40 まれに、こじんまりしてしなびた店の前に、⻑い⾏列がで きていることがある。「外⾯的なcool」の部分は駄⽬であ る。情報デザインの理論ではこの現象は説明できない。お 客が⾏列をつくるのは、料理が美味いからであり、すなわ ち「内⾯的なcool」が優れているからである。 ⽻⼭祥樹, 1997 「cool」の要素を、「外⾯的なcool」と「内⾯的なcool」に 分けることを提唱している。
  41. 41. 41 ⾼校⽣の俺TUEEEE!
  42. 42. 42 ありがとうございました。 ⽻⼭ 祥樹 Twitter: @storywriter Facebook: storywriter.jp Facebook、ぜひ、つながってください!
  43. 43. ⽻⼭のプレゼンのアレ が、   スタンプになりました! スタンプ名:ハーミィ(CSS編) 作者名:⽻⼭ 祥樹 https://store.line.me/stickershop/product/1228201/ja Web・CSSネタ 全40種類

×