未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP,...

41
CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

Transcript of 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP,...

Page 1: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012

未来をプロトタイプしよう

Page 2: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

WHAT何を作るか?なにを使うか?

Page 3: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

WHY?なぜ作るか?なぜ使うか?

Page 4: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

? ?

Page 6: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

Wintel

~ 2005

Apple

Page 7: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

Android

Apple

Wintel

2012

Source: Public Fillings, Morgan Stanley Research, Gartner

Page 8: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

Katy Huberty, Ehud Gelblum, Morgan Stanley Research

2010 2011 2012

ノートパソコン

デスクトップタブレット

スマートフォン

Page 9: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう
Page 10: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

再想像・再定義

REIMAGI

NA!ON

Page 17: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

Webサイト制作の再想像とは?

REIMAGI

NA!ON

Page 18: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう
Page 19: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

ワークフロー/プロセス

評価・測定の仕方

コミュニケーション

Page 20: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう
Page 21: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

Webデザインプロセスの再想像

REIMAGNE!B DESIGN

PROCESS

Page 22: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう
Page 23: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

デザイン / ビジュアル

カンプ?

Page 24: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

「カンプみせて」のワケ

クライアント主導のワナ

ひっくり返るトリガー

Page 25: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう
Page 26: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

by Ed Yourdon

‣ 利用環境が大幅に異なる

‣ まだ新しい分野

‣ スクリーンが小さい

‣ 指を使ったインタラクション

Page 27: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

Opening�*8.,3��74(*88

Page 28: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう
Page 29: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう
Page 30: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

‣ 見て触れることができる

‣ 全体を見渡して考慮できる

‣ デザインプロセスのオープン化

Page 31: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう
Page 32: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

Testテスト

Reviewレビュー

Designデザイン

Page 33: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

Design

Test

Review

Design

Test

Review

Design

Test

Review

Page 34: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

カンプなしだとクライアントは理解してくれない

Page 35: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう
Page 36: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

Sass

Less

Page 37: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

プロセスの理解

共創

改善

Page 38: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

Webサイト制作の再想像 = クリエイティブのオープン化

REIMAGI

NA!ON

Page 39: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

WHY?なぜ作るか?なぜ使うか?

Page 40: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

未来は不透明

失敗は大前提

デザインのオープン化

プロトタイプに挑戦しよう

Page 41: 未来をプロトタイプしよう - CSS Nite公式サイト · 2019. 1. 22. · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

Thank You!Have a great holiday!

長谷川恭久

[email protected]@yhassyhttp://ww.yasuhisa.com