第31回WebSig会議セッション1「開発者から見た Windows...
-
Upload
websig -
Category
Technology
-
view
1.660 -
download
0
description
Transcript of 第31回WebSig会議セッション1「開発者から見た Windows...
株式会社FIXER 皆川 隆洋
開発者から見た Windows 8、その機能美とポテンシャル
1 © COPYRIGHT 2012 FIXER inc.
自己紹介
1
名前: 皆川隆洋(みながわ・たかひろ) 略歴: 業務系ソフトウェア開発に10年強従事。 C/C++、VB、Java、Javascript、 C#、ASP.NET などを経験。 2012年4月にFIXER入社。 6月から Windows ストア アプリの 開発に参画。 11月現在、複数の Windows ストア アプリに携わる。
皆川と申します。
2 © COPYRIGHT 2012 FIXER inc.
はじめに
2
Windows 8は、Windows 7までの従来の Windows の側面も持っていますが、タブレットを対象にした側面も持っています。 2012年12月現在、タブレット用OS といえば iOS か Android を指します。 Windows 8 はこの牙城を崩すことができる魅力ある OS に仕上がっていると思いますが、実際にそうなるかどうかは魅力あるアプリケーション次第とも思われます。 本セッションでは、Windows 8、およびその機能美とポテンシャルについて紹介させていただきます。
3 © COPYRIGHT 2012 FIXER inc.
Agenda
3
1. 本セッションの目的とゴール
2. Windows 8 とは
3. Windows ストア アプリのデザインについて
4. まとめ
4 © COPYRIGHT 2012 FIXER inc.
本セッションの目的とゴール
4
■Windows 8 の概要を理解する。 ■ Windows ストア アプリのデザインについて理解する。
5 © COPYRIGHT 2012 FIXER inc.
Windows 8 とは
5
Windows 8 とは?
6 © COPYRIGHT 2012 FIXER inc.
Windows 8 とは
6
タブレット
用のUI
デスクトップ用のUI
2種類。
7 © COPYRIGHT 2012 FIXER inc.
Windows 8 とは
7
デスクトップ用UI 従来のWindowsのUI
●複数のウィンドウが表示されます
8 © COPYRIGHT 2012 FIXER inc.
Windows 8 とは
8
タブレット用UI 新しいUI
●Windows Phone 7にて使われているグリッド デザインから踏襲
9 © COPYRIGHT 2012 FIXER inc.
Windows 8 とは
9
Windows ストア アプリの特徴
タブレット用UIで起動するアプリです。 タッチデバイスで操作されることを想定。 従来のデザインとはがらりと変わり、コンテンツを見せることに主眼を置いたデザインのアプリです。
10 © COPYRIGHT 2012 FIXER inc.
10
複数のウィンドウを表示することはできませんが、 スナップを使うことで2種類のアプリを起動できます
ニュース
アプリ
天気 アプリ
Windows 8 とは
11 © COPYRIGHT 2012 FIXER inc.
Windows 8 とは
11
Windows ストアはアプリのお店です。
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 とは
13 © COPYRIGHT 2012 FIXER inc.
Windows ストア アプリのデザイン
13
Windows ストア アプリの デザインについて
14 © COPYRIGHT 2012 FIXER inc.
14
15
リンゴ
バナナ
みかん
なし
カレー
ハンバーグ
ナポリタン
オムライス
16
リンゴ
バナナ
みかん
なし
カレー
ハンバーグ
ナポリタン
オムライス
くだもの ごはん
17
リンゴ
バナナ
みかん
なし
カレー
ハンバーグ
ナポリタン
オムライス
くだもの ごはん
18
リンゴ
バナナ
みかん
なし
カレー
ハンバーグ
ナポリタン
オムライス
くだもの ごはん
19 © COPYRIGHT 2012 FIXER inc.
19
■Windows UI・・・ 地下鉄に代表される交通機関の標識などから インスパイアされたデザインです。 目的地に迷わずたどり着けるよう、 見やすく分かりやすいのが特徴です。 アプリでいうと、ユーザーがコンテンツに迷わず簡単にたどり着けるように、余計なものをそぎ落としたデザイン、ということになります。 【特徴】 ・線やグラデーションなどをなるべく使わない。 ・コンポーネントなどを詰め込まない。 ・余白を確保してコンテンツに視線が行くようにする。
Windows ストア アプリのデザイン
20 © COPYRIGHT 2012 FIXER inc.
20
カリッとしたグラフィックでスッキリした表現に グループ化や階層化を線とボックスで表現しない 通勤ラッシュの車内のように詰め込みすぎない →余白が大切
Windows ストア アプリのデザイン
レイアウト
参考:Windows Developer Days 2012/4/24 MS春日井さんのセッション
21 © COPYRIGHT 2012 FIXER inc.
21
22 © COPYRIGHT 2012 FIXER inc.
22
Metroはクリーンで美しいタイポグラフィの上に成り立っている タイポグラフィによって、コンテンツに構造とリズムが生まれる 統一感のあるフォントサイズとウェイトが情報の階層を規定する
Windows ストア アプリのデザイン
タイポグラフィ
参考:Windows Developer Days 2012/4/24 MS春日井さんのセッション
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
補足 本文 小見出し 見出し
24 © COPYRIGHT 2012 FIXER inc.
24
弊社事例 ぴあ株式会社様 『ぴあ 映画情報』
アプリ(AFTER)
Windows ストア アプリのデザイン
25 © COPYRIGHT 2012 FIXER inc.
25
アプリ(BEFORE)
Windows ストア アプリのデザイン
26 © COPYRIGHT 2012 FIXER inc.
26
UI、UXのブラッシュアップのため、 デザインの見直しは幾度となく実施。
デザイン 開発 デザイン 開発 デザイン 開発
Windows ストア アプリのデザイン
27 © COPYRIGHT 2012 FIXER inc.
27
弊社事例 アサヒビール株式会社様 『エクストラ コールド アプリ』
Windows ストア アプリのデザイン
28 © COPYRIGHT 2012 FIXER inc.
28
アイコンにも「ビア感」を出して…
Windows ストア アプリのデザイン
29 © COPYRIGHT 2012 FIXER inc.
まとめ
29
Microsoft がタブレットを対象にしたOS まったく新しいものは、受入れ難いのは当たり前。 批判もゼロではない。 「批判者の9割は知ったかでものを言ってる」(私見) 好きになるのも嫌いになるのも、 まずは相手のことを知ってからにしましょう。
開発者から見た Windows 8、その機能美とポテンシャル
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