第31回websig会議セッション1「開発者から見た windows...
DESCRIPTION
【第31回WebSig会議】創り手が意識すべきタブレット,ユーザが使い始めるタブレット セッション1「開発者から見た Windows 8、その機能美とポテンシャル」資料。TRANSCRIPT
![Page 1: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/1.jpg)
株式会社FIXER 皆川 隆洋
開発者から見た Windows 8、その機能美とポテンシャル
![Page 2: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/2.jpg)
1 © COPYRIGHT 2012 FIXER inc.
自己紹介
1
名前: 皆川隆洋(みながわ・たかひろ) 略歴: 業務系ソフトウェア開発に10年強従事。 C/C++、VB、Java、Javascript、 C#、ASP.NET などを経験。 2012年4月にFIXER入社。 6月から Windows ストア アプリの 開発に参画。 11月現在、複数の Windows ストア アプリに携わる。
皆川と申します。
![Page 3: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/3.jpg)
2 © COPYRIGHT 2012 FIXER inc.
はじめに
2
Windows 8は、Windows 7までの従来の Windows の側面も持っていますが、タブレットを対象にした側面も持っています。 2012年12月現在、タブレット用OS といえば iOS か Android を指します。 Windows 8 はこの牙城を崩すことができる魅力ある OS に仕上がっていると思いますが、実際にそうなるかどうかは魅力あるアプリケーション次第とも思われます。 本セッションでは、Windows 8、およびその機能美とポテンシャルについて紹介させていただきます。
![Page 4: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/4.jpg)
3 © COPYRIGHT 2012 FIXER inc.
Agenda
3
1. 本セッションの目的とゴール
2. Windows 8 とは
3. Windows ストア アプリのデザインについて
4. まとめ
![Page 5: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/5.jpg)
4 © COPYRIGHT 2012 FIXER inc.
本セッションの目的とゴール
4
■Windows 8 の概要を理解する。 ■ Windows ストア アプリのデザインについて理解する。
![Page 6: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/6.jpg)
5 © COPYRIGHT 2012 FIXER inc.
Windows 8 とは
5
Windows 8 とは?
![Page 7: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/7.jpg)
6 © COPYRIGHT 2012 FIXER inc.
Windows 8 とは
6
タブレット
用のUI
デスクトップ用のUI
2種類。
![Page 8: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/8.jpg)
7 © COPYRIGHT 2012 FIXER inc.
Windows 8 とは
7
デスクトップ用UI 従来のWindowsのUI
●複数のウィンドウが表示されます
![Page 9: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/9.jpg)
8 © COPYRIGHT 2012 FIXER inc.
Windows 8 とは
8
タブレット用UI 新しいUI
●Windows Phone 7にて使われているグリッド デザインから踏襲
![Page 10: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/10.jpg)
9 © COPYRIGHT 2012 FIXER inc.
Windows 8 とは
9
Windows ストア アプリの特徴
タブレット用UIで起動するアプリです。 タッチデバイスで操作されることを想定。 従来のデザインとはがらりと変わり、コンテンツを見せることに主眼を置いたデザインのアプリです。
![Page 11: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/11.jpg)
10 © COPYRIGHT 2012 FIXER inc.
10
複数のウィンドウを表示することはできませんが、 スナップを使うことで2種類のアプリを起動できます
ニュース
アプリ
天気 アプリ
Windows 8 とは
![Page 12: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/12.jpg)
11 © COPYRIGHT 2012 FIXER inc.
Windows 8 とは
11
Windows ストアはアプリのお店です。
![Page 13: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/13.jpg)
12 © COPYRIGHT 2012 FIXER inc.
12
W i n d o w s ストア アプリの種類
写真 書籍 グルメ ゲーム
ニュース & 天気
ライフスタイル
マネー 音楽 & 動画
スポーツ ヘルスケア
& ビューティー
ショッピング
エンターテインメント
ビジネス
ソーシャル
仕事効率化
ユーティリティ
旅行
公共 & 行政
セキュリティ
教育
2012年10月26日時点、 4,920個のアプリが存在 2012年11月25日現在、12,495個のアプリが存在
Windows 8 とは
![Page 14: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/14.jpg)
13 © COPYRIGHT 2012 FIXER inc.
Windows ストア アプリのデザイン
13
Windows ストア アプリの デザインについて
![Page 15: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/15.jpg)
14 © COPYRIGHT 2012 FIXER inc.
14
![Page 16: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/16.jpg)
15
リンゴ
バナナ
みかん
なし
カレー
ハンバーグ
ナポリタン
オムライス
![Page 17: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/17.jpg)
16
リンゴ
バナナ
みかん
なし
カレー
ハンバーグ
ナポリタン
オムライス
くだもの ごはん
![Page 18: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/18.jpg)
17
リンゴ
バナナ
みかん
なし
カレー
ハンバーグ
ナポリタン
オムライス
くだもの ごはん
![Page 19: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/19.jpg)
18
リンゴ
バナナ
みかん
なし
カレー
ハンバーグ
ナポリタン
オムライス
くだもの ごはん
![Page 20: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/20.jpg)
19 © COPYRIGHT 2012 FIXER inc.
19
■Windows UI・・・ 地下鉄に代表される交通機関の標識などから インスパイアされたデザインです。 目的地に迷わずたどり着けるよう、 見やすく分かりやすいのが特徴です。 アプリでいうと、ユーザーがコンテンツに迷わず簡単にたどり着けるように、余計なものをそぎ落としたデザイン、ということになります。 【特徴】 ・線やグラデーションなどをなるべく使わない。 ・コンポーネントなどを詰め込まない。 ・余白を確保してコンテンツに視線が行くようにする。
Windows ストア アプリのデザイン
![Page 21: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/21.jpg)
20 © COPYRIGHT 2012 FIXER inc.
20
カリッとしたグラフィックでスッキリした表現に グループ化や階層化を線とボックスで表現しない 通勤ラッシュの車内のように詰め込みすぎない →余白が大切
Windows ストア アプリのデザイン
レイアウト
参考:Windows Developer Days 2012/4/24 MS春日井さんのセッション
![Page 22: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/22.jpg)
21 © COPYRIGHT 2012 FIXER inc.
21
![Page 23: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/23.jpg)
22 © COPYRIGHT 2012 FIXER inc.
22
Metroはクリーンで美しいタイポグラフィの上に成り立っている タイポグラフィによって、コンテンツに構造とリズムが生まれる 統一感のあるフォントサイズとウェイトが情報の階層を規定する
Windows ストア アプリのデザイン
タイポグラフィ
参考:Windows Developer Days 2012/4/24 MS春日井さんのセッション
![Page 24: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/24.jpg)
23 © COPYRIGHT 2012 FIXER inc.
23
9pt Rejular Bold
Windows ストア アプリのデザイン
Meiryo UI Type ramp
参考:Windows Developer Days 2012/4/24 MS春日井さんのセッション
11pt Rejular Bold
20pt Rejular Bold
42pt Rejular Bold
補足 本文 小見出し 見出し
![Page 25: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/25.jpg)
24 © COPYRIGHT 2012 FIXER inc.
24
弊社事例 ぴあ株式会社様 『ぴあ 映画情報』
アプリ(AFTER)
Windows ストア アプリのデザイン
![Page 26: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/26.jpg)
25 © COPYRIGHT 2012 FIXER inc.
25
アプリ(BEFORE)
Windows ストア アプリのデザイン
![Page 27: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/27.jpg)
26 © COPYRIGHT 2012 FIXER inc.
26
UI、UXのブラッシュアップのため、 デザインの見直しは幾度となく実施。
デザイン 開発 デザイン 開発 デザイン 開発
Windows ストア アプリのデザイン
![Page 28: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/28.jpg)
27 © COPYRIGHT 2012 FIXER inc.
27
弊社事例 アサヒビール株式会社様 『エクストラ コールド アプリ』
Windows ストア アプリのデザイン
![Page 29: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/29.jpg)
28 © COPYRIGHT 2012 FIXER inc.
28
アイコンにも「ビア感」を出して…
Windows ストア アプリのデザイン
![Page 30: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/30.jpg)
29 © COPYRIGHT 2012 FIXER inc.
まとめ
29
Microsoft がタブレットを対象にしたOS まったく新しいものは、受入れ難いのは当たり前。 批判もゼロではない。 「批判者の9割は知ったかでものを言ってる」(私見) 好きになるのも嫌いになるのも、 まずは相手のことを知ってからにしましょう。
開発者から見た Windows 8、その機能美とポテンシャル
![Page 31: 第31回WebSig会議セッション1「開発者から見た Windows 8、その機能美とポテンシャル」](https://reader034.vdocuments.net/reader034/viewer/2022052617/548127d7b4af9fe2158b5f49/html5/thumbnails/31.jpg)
30 © COPYRIGHT 2012 FIXER inc.
30
<お問い合わせ> -----------------------------------------------------------------------
We FIX your problem. [株式会社FIXER] web consulting firm
〒105-0013 東京都港区浜松町1-10-17 向陽ビル Phone:03-5777-5225 Fax: 03-5777-5226
-----------------------------------------------------------------------
web consulting firm