開発者から見た Windows 8、その機能美とポテンシャル～第31回WebSig会議セッション1

開発者から見た Windows 8、その機能美とポテンシャル

株式会社FIXER 皆川隆洋

自己紹介

皆川と申します。

名前：

皆川隆洋（みながわ・たかひろ）

略歴：

業務系ソフトウェア開発に１０年強従事。
C/C++、VB、Java、Javascript、
C#、ASP.NET などを経験。

２０１２年４月にFIXER入社。
６月から Windows ストアアプリの
開発に参画。
１１月現在、複数の Windows ストア
アプリに携わる。

1
© COPYRIGHT 2012 FIXER inc. 1

はじめに

Windows ８は、Windows ７までの従来の Windows の側面も持っ
ていますが、タブレットを対象にした側面も持っています。

２０１２年１２月現在、タブレット用OS といえば iOS か Android
を指します。

Windows 8 はこの牙城を崩すことができる魅力ある OS に仕上がっ
ていると思いますが、実際にそうなるかどうかは魅力あるアプリケー
ション次第とも思われます。

本セッションでは、Windows 8、およびその機能美とポテンシャル
について紹介させていただきます。

2

Agenda

1. 本セッションの目的とゴール

2. Windows 8 とは

3. Windows ストアアプリのデザインにつ
いて

4. まとめ

3

本セッションの目的とゴール

■Windows 8 の概要を理解する。

■ Windows ストアアプリのデザインにつ
いて理解する。

4

Windows 8 とは

Windows 8 とは？

5

Windows 8 とは

２種類。

タブレット
用のUI

デスク
トップ用
のUI

6

Windows 8 とは

デスクトップ用UI 従来のWindowsのUI

●複数のウィンドウが表示されます

7

Windows 8 とは

タブレット用UI 新しいUI

●Windows Phone ７にて使われているグリッドデザインから踏襲

8

Windows 8 とは

Windows ストアアプリの特徴
タブレット用UIで起動するアプリです。

タッチデバイスで操作されることを想定。

従来のデザインとはがらりと変わり、コンテンツを見せることに主眼を置いたデザインのアプリです。

9

Windows 8 とは複数のウィンドウを表示することはできませんが、
スナップを使うことで２種類のアプリを起動できます

ニュース
アプリ

天気
アプリ

10

Windows 8 とは

Windows ストアはアプリのお店です。

11

Windows 8 とは

Windows ストアアプリの種類

ユーティリ
ゲーム写真書籍グルメ旅行教育
ティ

音楽ニュース公共
ライフスタセキュリ
ソーシャル＆＆マネー＆
イルティ
動画天気行政

エンターテヘルスケアショッピン
スポーツ＆仕事効率化ビジネス
インメントグ
ビューティー

2012年10月26日時点、 4,920個のアプリが存在
2012年11月25日現在、12,495個のアプリが存在

12

Windows ストアアプリのデザイン

Windows ストアアプリの
デザインについて

13

14

リンゴみかんカレーナポリタン

バナナなしハンバーグオムライス

15

くだものごはん



16




17




18


■Windows UI・・・
地下鉄に代表される交通機関の標識などから
インスパイアされたデザインです。
目的地に迷わずたどり着けるよう、
見やすく分かりやすいのが特徴です。

アプリでいうと、ユーザーがコンテンツに迷わず簡単にたどり着け
るように、余計なものをそぎ落としたデザイン、ということになり
ます。

【特徴】

・線やグラデーションなどをなるべく使わない。
・コンポーネントなどを詰め込まない。
・余白を確保してコンテンツに視線が行くようにする。

19


レイアウト

カリッとしたグラフィックでスッキリした表現に

グループ化や階層化を線とボックスで表現しない

通勤ラッシュの車内のように詰め込みすぎない →余白が大切

参考：Windows Developer Days 2012/4/24 MS春日井さんのセッション

20

21


タイポグラフィ

Metroはクリーンで美しいタイポグラフィの上に成り立っている

タイポグラフィによって、コンテンツに構造とリズムが生まれる

統一感のあるフォントサイズとウェイトが情報の階層を規定する


22


Meiryo UI Type ramp

9pt

Rejular
11pt 20pt 42pt
Rejular
Rejular
Bold
Bold Rejular

Bold
Bold
補足本文小見出し見出し


23


弊社事例ぴあ株式会社様アプリ（AFTER)
『ぴあ映画情報』

24

アプリ（BEFORE）

25


デザイン開発デザイン開発デザイン開発

UI、UXのブラッシュアップのため、
デザインの見直しは幾度となく実施。

26


弊社事例アサヒビール株式会社様
『エクストラコールドアプリ』

27


アイコンにも「ビア感」を出して…

28

まとめ

開発者から見た Windows 8、
その機能美とポテンシャル

Microsoft がタブレットを対象にしたOS

まったく新しいものは、受入れ難いのは当たり前。
批判もゼロではない。

「批判者の９割は知ったかでものを言ってる」（私見）

好きになるのも嫌いになるのも、
まずは相手のことを知ってからにしましょう。

29

web consulting firm

＜お問い合わせ＞
-----------------------------------------------------------------------
We FIX your problem.
［株式会社FIXER］ web consulting firm
〒105-0013 東京都港区浜松町1-10-17 向陽ビル
Phone:03-5777-5225 Fax: 03-5777-5226
----------------------------------------------------------------------- 30

開発者から見た Windows 8、その機能美とポテンシャル～第31回WebSig会議セッション1

More Related Content

Similar to 開発者から見た Windows 8、その機能美とポテンシャル～第31回WebSig会議セッション1

More from WebSig24/7

Recently uploaded

開発者から見た Windows 8、その機能美とポテンシャル～第31回WebSig会議セッション1