第31回websig会議セッション1「開発者から見た windows...

株式会社FIXER 皆川隆洋

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

1 © COPYRIGHT 2012 FIXER inc.

自己紹介

1

名前：皆川隆洋（みながわ・たかひろ）略歴：業務系ソフトウェア開発に１０年強従事。 C/C++、VB、Java、Javascript、 C#、ASP.NET などを経験。２０１２年４月にFIXER入社。６月から Windows ストアアプリの開発に参画。１１月現在、複数の Windows ストアアプリに携わる。

皆川と申します。


はじめに

2

Windows ８は、Windows ７までの従来の Windows の側面も持っていますが、タブレットを対象にした側面も持っています。２０１２年１２月現在、タブレット用OS といえば iOS か Android を指します。 Windows 8 はこの牙城を崩すことができる魅力ある OS に仕上がっていると思いますが、実際にそうなるかどうかは魅力あるアプリケーション次第とも思われます。本セッションでは、Windows 8、およびその機能美とポテンシャルについて紹介させていただきます。


Agenda

3

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

2. Windows 8 とは

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

4. まとめ


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

4

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


Windows 8 とは

5

Windows 8 とは？


Windows 8 とは

6

タブレット

用のUI

デスクトップ用のUI

２種類。


Windows 8 とは

7

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

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


Windows 8 とは

8

タブレット用UI 新しいUI

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


Windows 8 とは

9

Windows ストアアプリの特徴

タブレット用UIで起動するアプリです。タッチデバイスで操作されることを想定。従来のデザインとはがらりと変わり、コンテンツを見せることに主眼を置いたデザインのアプリです。


10

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

ニュース

アプリ

天気アプリ

Windows 8 とは


Windows 8 とは

11

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


12

W i n d o w s ストアアプリの種類

写真書籍グルメゲーム

ニュース＆天気

ライフスタイル

マネー音楽＆動画

スポーツヘルスケア

＆ビューティー

ショッピング

エンターテインメント

ビジネス

ソーシャル

仕事効率化

ユーティリティ

旅行

公共＆行政

セキュリティ

教育

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

Windows 8 とは


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

13

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


14

15

リンゴ

バナナ

みかん

なし

カレー

ハンバーグ

ナポリタン

オムライス

16

リンゴ

バナナ

みかん

なし

カレー

ハンバーグ

ナポリタン

オムライス

くだものごはん

17

リンゴ

バナナ

みかん

なし

カレー

ハンバーグ

ナポリタン

オムライス


18

リンゴ

バナナ

みかん

なし

カレー

ハンバーグ

ナポリタン

オムライス



19

■Windows UI・・・地下鉄に代表される交通機関の標識などからインスパイアされたデザインです。目的地に迷わずたどり着けるよう、見やすく分かりやすいのが特徴です。アプリでいうと、ユーザーがコンテンツに迷わず簡単にたどり着けるように、余計なものをそぎ落としたデザイン、ということになります。【特徴】・線やグラデーションなどをなるべく使わない。・コンポーネントなどを詰め込まない。・余白を確保してコンテンツに視線が行くようにする。



20

カリッとしたグラフィックでスッキリした表現にグループ化や階層化を線とボックスで表現しない通勤ラッシュの車内のように詰め込みすぎない →余白が大切


レイアウト

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


21


22

Metroはクリーンで美しいタイポグラフィの上に成り立っているタイポグラフィによって、コンテンツに構造とリズムが生まれる統一感のあるフォントサイズとウェイトが情報の階層を規定する


タイポグラフィ



23

9pt Rejular Bold


Meiryo UI Type ramp


11pt Rejular Bold

20pt Rejular Bold

42pt Rejular Bold

補足本文小見出し見出し


24

弊社事例ぴあ株式会社様『ぴあ映画情報』

アプリ（AFTER)



25

アプリ（BEFORE）



26

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

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



27

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



28

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



まとめ

29

Microsoft がタブレットを対象にしたOS まったく新しいものは、受入れ難いのは当たり前。批判もゼロではない。「批判者の９割は知ったかでものを言ってる」（私見）好きになるのも嫌いになるのも、まずは相手のことを知ってからにしましょう。

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


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

第31回websig会議セッション1「開発者から見た windows...

Technology