未来をプロトタイプしよう - CSS...
Transcript of 未来をプロトタイプしよう - CSS...
![Page 1: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/1.jpg)
CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012
未来をプロトタイプしよう
![Page 2: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/2.jpg)
WHAT何を作るか?なにを使うか?
![Page 3: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/3.jpg)
WHY?なぜ作るか?なぜ使うか?
![Page 4: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/4.jpg)
? ?
![Page 5: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/5.jpg)
by Martino Sabia
![Page 6: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/6.jpg)
Wintel
~ 2005
Apple
![Page 7: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/7.jpg)
Android
Apple
Wintel
2012
Source: Public Fillings, Morgan Stanley Research, Gartner
![Page 8: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/8.jpg)
Katy Huberty, Ehud Gelblum, Morgan Stanley Research
2010 2011 2012
ノートパソコン
デスクトップタブレット
スマートフォン
![Page 9: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/9.jpg)
![Page 10: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/10.jpg)
再想像・再定義
REIMAGI
NA!ON
![Page 11: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/11.jpg)
by kris krüg
![Page 12: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/12.jpg)
by Hector Alejandro
![Page 13: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/13.jpg)
by David Baron
![Page 14: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/14.jpg)
by Public Information Office
![Page 15: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/15.jpg)
by Abel Gomez
![Page 16: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/16.jpg)
by Charles Wiriawan
![Page 17: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/17.jpg)
Webサイト制作の再想像とは?
REIMAGI
NA!ON
![Page 18: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/18.jpg)
![Page 19: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/19.jpg)
ワークフロー/プロセス
評価・測定の仕方
コミュニケーション
![Page 20: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/20.jpg)
![Page 21: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/21.jpg)
Webデザインプロセスの再想像
REIMAGNE!B DESIGN
PROCESS
![Page 22: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/22.jpg)
![Page 23: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/23.jpg)
デザイン / ビジュアル
カンプ?
![Page 24: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/24.jpg)
「カンプみせて」のワケ
クライアント主導のワナ
ひっくり返るトリガー
![Page 25: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/25.jpg)
![Page 26: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/26.jpg)
by Ed Yourdon
‣ 利用環境が大幅に異なる
‣ まだ新しい分野
‣ スクリーンが小さい
‣ 指を使ったインタラクション
![Page 27: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/27.jpg)
Opening�*8.,3��74(*88
![Page 28: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/28.jpg)
![Page 29: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/29.jpg)
![Page 30: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/30.jpg)
‣ 見て触れることができる
‣ 全体を見渡して考慮できる
‣ デザインプロセスのオープン化
![Page 31: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/31.jpg)
![Page 32: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/32.jpg)
Testテスト
Reviewレビュー
Designデザイン
![Page 33: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/33.jpg)
Design
Test
Review
Design
Test
Review
Design
Test
Review
![Page 34: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/34.jpg)
カンプなしだとクライアントは理解してくれない
![Page 35: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/35.jpg)
![Page 36: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/36.jpg)
Sass
Less
![Page 37: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/37.jpg)
プロセスの理解
共創
改善
![Page 38: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/38.jpg)
Webサイト制作の再想像 = クリエイティブのオープン化
REIMAGI
NA!ON
![Page 39: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/39.jpg)
WHY?なぜ作るか?なぜ使うか?
![Page 40: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう](https://reader036.fdocuments.net/reader036/viewer/2022063015/5fd26eae18d7aa5fef0d8a5e/html5/thumbnails/40.jpg)
未来は不透明
失敗は大前提
デザインのオープン化
プロトタイプに挑戦しよう