第31回websig会議【セッション2】 タブレットが与える影響について考える
DESCRIPTION
2012年12月1日(土)第31回WebSig会議「創り手が意識すべきタブレット,ユーザが使い始めるタブレット」【セッション2】タブレットが与える影響について考える~石橋秀仁(ゼロベース株式会社代表取締役社長/ウェブ・アーキテクト) http://websig247.jp/meeting/31/000254.htmlTRANSCRIPT
![Page 1: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/1.jpg)
タブレットが与える影響について考える石橋秀仁@zerobase
![Page 2: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/2.jpg)
概要•ユーザーインターフェイスの進化
•アーキテクチャの進化
•デバイスの多様化
•デバイスフリー化(コンテンツ/サービス)
•アビリティ
→
![Page 3: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/3.jpg)
UIの進化
•CUI
• GUI
• NUI
「UIの進化」を考えるための3つのキーワード
![Page 4: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/4.jpg)
CUICharacter User Interface
コンソール、俗に「黒い画面」。キャラクター=文字。
![Page 5: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/5.jpg)
CLICommand Line Interface
MacのTerminal。GUI OS内のCUI。CUIを別名CLIとも言う。
![Page 6: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/6.jpg)
GUIGraphical User Interface
グラフィカル=視覚的
![Page 7: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/7.jpg)
NUINatural User Interface
Wii、Kinnect、iPhone。CUI=文字のみ。GUI=視覚的。NUI=より自然。「自然」とは何か?掘り下げると深いので保留。
![Page 8: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/8.jpg)
iPad2010-
今日のテーマ「タブレット」
![Page 9: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/9.jpg)
UIの進化
•CUI
• GUI
• NUI
3つのキーワードを説明してきたので、ようやく「UIの進化」
![Page 10: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/10.jpg)
UIの進化
CUI GUI NUI ?
透明化
透明:道具が意識にのぼらない。道具を用いる対象のみが意識されている。
![Page 11: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/11.jpg)
透明
メガネは透明:道具を意識せず、道具を使う対象に意識を集中できる。障害(曇り)→半透明:道具が意識に上る。道具は手段。透明が理想。
![Page 12: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/12.jpg)
透明
箸は透明。麺がすべる→半透明(眼鏡の曇り)。未習熟→半透明(道具を用いる対象より、道具そのものに意識が向く)。ナイフとフォーク→フレンチ楽しめない→箸。
![Page 13: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/13.jpg)
UIの進化
CUI GUI NUI ?
透明化
ポイント:UIの透明化にはマシンパワーが必要。
![Page 14: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/14.jpg)
概要•ユーザーインターフェイスの進化
•アーキテクチャの進化
•デバイスの多様化
•デバイスフリー化(コンテンツ/サービス)
•アビリティ
→
![Page 15: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/15.jpg)
アーキテクチャの進化
コンソール クライアント ブラウザ アプリ
メインフレーム サーバー ウェブ
サーバー クラウド
コンピューターの歴史。リモート/ローカルのマシンパワー。
![Page 16: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/16.jpg)
共進化
ユーザーインタフェーイス アーキテクチャ
UIが進化→UI処理負荷が重く→デバイスへの要求が高まる→性能向上→高まったデバイス能力を使った、さらに自然なUI →リモート(ロジック)とローカル(UI)の役割分担
![Page 17: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/17.jpg)
アーキテクチャの進化
コンソール クライアント ブラウザ アプリ
メインフレーム サーバー ウェブ
サーバー クラウドロジック
UI
ローカルはUI処理。裏側のロジックをリモートに任せる。例えばAPI叩くだけのスマホアプリ。スマートデバイスのUIをどんどんリッチにしよう。そのためのマシンパワーはある。
![Page 18: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/18.jpg)
潤沢なマシンパワーをUIに振り向けよう。 増井俊之氏の提唱する「富豪的プログラミング」。
![Page 19: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/19.jpg)
概要•ユーザーインターフェイスの進化
•アーキテクチャの進化
•デバイスの多様化
•デバイスフリー化(コンテンツ/サービス)
•アビリティ
→
![Page 20: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/20.jpg)
スマートデバイス
![Page 21: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/21.jpg)
スマートデバイス
•携帯性
•タッチ操作
•アプリ(プログラマブル)
•周辺機器(Wi-Fi, Bluetooth, イヤホンジャック)
![Page 22: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/22.jpg)
イヤホンジャックSquare register
イヤホンジャックに差すと、iPhoneがクレジットカード決済端末に。
![Page 23: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/23.jpg)
![Page 24: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/24.jpg)
スマートフォンの為のお手軽センサーネットワーク(案)by Naoji Taniguchi (谷口直嗣) on Aug 30, 2012
イヤホンジャック
イヤホンジャックを使って各種センサーを拡張 → 発想次第で無限の可能性
![Page 25: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/25.jpg)
スマートデバイス
+αすでにある「何か」をつなぐ発想 → 独自のHWとアプリを一緒に開発する発想へ。すでに技術は安価になった。クラウドファンディングもある。デバイスを「+α」で考えてみよう。
![Page 26: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/26.jpg)
タブレットを活かす
•ミクロ発想:タブレットから
•マクロ発想:エコシステムから
•ユーザー中心発想(UX指向)
ミクロ:タブレットの機能や特徴から考える。マクロ:多様なデバイスのエコシステムから考える。クロスチャンネル。タブレットで何でもかんでもやらなくていい。モノではなくユーザーから考える。「タブレット」をほかのデバイスに入れ替えても同様。
![Page 27: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/27.jpg)
デバイスフリー化(コンテンツ/サービス)
デバイスの多様化
![Page 28: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/28.jpg)
概要•ユーザーインターフェイスの進化
•アーキテクチャの進化
•デバイスの多様化
•デバイスフリー化(コンテンツ/サービス)
•アビリティ→
![Page 29: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/29.jpg)
デバイスフリー化•マークアップ:HTML5 / RWD / PE
•セマンティクス:Web標準 / XML
•オブジェクトモデリング:UML / DDD
• API連携:JSON / REST / SOA
• ID連携:OpenID / OAuth
(コンテンツ/サービス)
デバイスフリー化を進めるためには裏側の技術が大事。RWDはレスポンシブウェブデザイン。PEはプログレッシブ・エンハンスメント。DDDはドメイン駆動設計。IAには馴染みのない言葉もありそう。
![Page 30: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/30.jpg)
IA & ITAInformation Architect IT Architect
“Technlogy” の “T” の違い。よいアーキテクチャを実現するためには協業が欠かせない。
![Page 31: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/31.jpg)
IA ITA
互いの歩み寄りで共通言語を。IAはUMLを。ITAもワイヤフレームやサイトマップを。
![Page 32: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/32.jpg)
概要•ユーザーインターフェイスの進化
•アーキテクチャの進化
•デバイスの多様化
•デバイスフリー化(コンテンツ/サービス)
•アビリティ→
![Page 33: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/33.jpg)
アビリティ•ユーザビリティ
•アクセシビリティ
•リーダビリティ
•ファインダビリティ
•****ビリティ
総称、アビリティ :できなかったことが、できるようになること。Webのアビリティを高める→ユーザーのアビリティが高まる。
![Page 34: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/34.jpg)
アビリティ予算の獲得
•デバイスフリー化
•未知のハードウェア
•クロスチャネル化
•プラットフォーム化
•オープンイノベーション
アビリティの推進は現場の良心(職業倫理)だけでは足りない。クライアントが求めなくても、やるべきことをやるには?→ビジネスメリットを示して予算を獲得。IAとITAの協力で推進。
![Page 35: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/35.jpg)
デバイスフリー化
HTML 4.01 書かれたのは 1999 年。13年前。いまでも読める。 未知のハードウェアに対応している。 デバイスフリー。→プログレッシブ・エンハンスメント。
![Page 36: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/36.jpg)
クロスチャネル化
Web標準、RWD、API→多様なデバイスに対応→クロスチャネル化。店舗との連携→裏側の情報システム/データベースも重要。
![Page 37: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/37.jpg)
プラットフォーム化
Twitter。PC、iPhone、Android、iPad、iアプリ、携帯、Windows Phone 7、ノキア s40。
![Page 38: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/38.jpg)
オープンイノベーション
社外の開発者(サードパーティー)によるイノベーションを奨励。 API機能: Togetter、Twilog、iOS。ログイン機能:OAuth(ID連携、認証)。
![Page 39: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/39.jpg)
アビリティ予算の獲得
•デバイスフリー化
•未知のハードウェア
•クロスチャネル化
•プラットフォーム化
•オープンイノベーション
タブレットという新たなデバイスの登場を契機に、アビリティを推進しよう。
![Page 40: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/40.jpg)
アビリティ•ユーザビリティ
•アクセシビリティ
•リーダビリティ
•ファインダビリティ
•****ビリティ
Webのアビリティを高める→ユーザーのアビリティが高まる。
![Page 41: 第31回WebSig会議【セッション2】 タブレットが与える影響について考える](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c796284a795950518b4611/html5/thumbnails/41.jpg)
概要•ユーザーインターフェイスの進化
•アーキテクチャの進化
•デバイスの多様化
•デバイスフリー化(コンテンツ/サービス)
•アビリティ
おさらい。タブレットをコンピューティングの進化の歴史的文脈に位置づけた。次に、スマートデバイスの新たな可能性を考察した。最後に、デバイスフリー化と、アビリティ向上について考えた。以上。