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

未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012...

Aug 23, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

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 未来をプロトタイプしよう

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

Page 3: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

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

Page 4: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

? ?

Page 6: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

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 未来をプロトタイプしよう

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 未来をプロトタイプしよう

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 未来をプロトタイプしよう
Page 10: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

再想像・再定義

REIMAGI

NA!ON

Page 17: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

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 未来をプロトタイプしよう
Page 19: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

ワークフロー/プロセス

評価・測定の仕方

コミュニケーション

Page 20: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう
Page 21: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

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 未来をプロトタイプしよう
Page 23: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

デザイン / ビジュアル

カンプ?

Page 24: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

「カンプみせて」のワケ

クライアント主導のワナ

ひっくり返るトリガー

Page 25: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう
Page 26: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

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 未来をプロトタイプしよう

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 未来をプロトタイプしよう
Page 29: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう
Page 30: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

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

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

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

Page 31: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう
Page 32: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

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 未来をプロトタイプしよう

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 未来をプロトタイプしよう

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

Page 35: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう
Page 36: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

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 未来をプロトタイプしよう

プロセスの理解

共創

改善

Page 38: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

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 未来をプロトタイプしよう

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

Page 40: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

未来は不透明

失敗は大前提

デザインのオープン化

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

Page 41: 未来をプロトタイプしよう - CSS Nite公式サイトcssnite.jp/lp/lp25/CSSNiteLP25-Shift6-s1-Keynote.pdf · CSS Nite LP, Disk 25 Yasuhisa Hasegawa December 15, 2012 未来をプロトタイプしよう

Thank You!Have a great holiday!

長谷川恭久

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