2012年9月にWebTouchMeetingで発表したスライドです。デザイナー向け

1. Windowsストア アプリケーション概要
-デザイン編-

2. 自己紹介
株式会社システムフレンド
Windows Phone ハンズオン in 広島
EC-CUBE公式エバンジェリスト
眠るシーラカンスと水底のプログラマー
http://coelacanth.heteml.jp/blog/

3. 自己紹介
Windows 8アプリ
ShopBank
トレトレ
EC-CUBE大全
現在進行中が一つ・・・

4. Agenda
• Windows8概要
• デザイン
PhotoShoper
XAMLer

5. Windows 8 概要

6. Windows 8概要
そもそもWindows8知ってる？

7. Windows 8概要
・マウス+キーボード用のUI(クラシックデスクトップ)
・タッチ操作用のUI(スタート画面)

8. Windows 8概要
Windowsストア アプリケーション
• Metro(暫定)スタイルUI
• 新しいランタイム(WinRT)
• Windowsストア
• 新しい実行環境

9. Windows8概要

10. Windows8概要

11. Windows8概要
Windows 8 = ノートPCにもタブレットにもなる
デスクトップPCにもタブレットにもなる
iOS,Android = デスクトップとタブレットのOSは別
デスクトップ、ノートPCの雄らしい展開

12. Windows8概要
・電源オンオフ/アプリの終了
・アプリの切り替え
・Charm
・検索コントラクト
・IE10
・タイル

13. Metro(暫定)スタイルUI
Metro(暫定)スタイルUI
• Immersive
• infographic
• そぎ落とす、コンテンツが最優先
• レイアウト
• 作法に従う→一貫性

14. Metro(暫定)スタイルUI
Immersive
没入した、没入できる、どっぷりつかった、実体験のように感じる

15. Metro(暫定)スタイルUI
従来のブラウザ=情報が多く没入できない

16. Metro(暫定)スタイルUI
Metro版IE=情報が少なく没入できる

17. Metro(暫定)スタイルUI
infographic
Information(情報)とgraphic(図)を組み合わせた用語

18. Metro(暫定)スタイルUI
そぎ落とす、コンテンツが最優先
コンテンツこそがエクスペリエンスの中心
スクリーン上には、コンテンツに関係のある要素だけを配する
ユーザーの気を逸らす要素は最小限に
ユーザーがコンテンツに没頭できること。それがゴール

19. Metro(暫定)スタイルUI
レイアウト
カリッとしたグラフィックでスッキリした表現に
グループ化や階層化を線とボックスで表現しない
通勤ラッシュの車内のように詰め込みすぎない →余白が大切

20. Metro(暫定)スタイルUI

21. Metro(暫定)スタイルUI

22. Metro(暫定)スタイルUI
作法に従う→一貫性
コンテンツを優先するためにそぎ落とした
コンテンツ以外の要素が隠れてしまった=使い難い

23. Metro(暫定)スタイルUI
再びIE10 これらの情報は普段隠れている

24. デザイン

25. PhotoShoper
• PhotoShopでデザインして納品する人を想定
• Windowsストアアプリに力を入れている人は少ない
(デザイナー求ム)
• その人が知らないといけないことを紹介

26. PhotoShoper
• 画面パターン
• タイポグラフィー
• Grid
• コントロールの種類
• ライブタイル

27. PhotoShoper
画面パターン
縦持ち
横持
スナップ
セマンティックズーム
画面サイズは最少が1026×768
(それ以下のサイズだとWindowsストアアプリは起動しない)

28. PhotoShoper
画面パターン
縦持ち
横持
スナップ
セマンティックズーム
画面サイズは最少が1026×768
(それ以下のサイズだとWindowsストアアプリは起動しない)

29. PhotoShoper
タイポグラフィー

30. PhotoShoper
タイポグラフィー

31. PhotoShoper
グリッドシステム

32. 42pt
20pt 11pt
11pt
9pt
11pt

33. 42pt
20pt
11pt
9pt

35. PhotoShoper
コントロールの種類

36. PhotoShoper
ライブタイル

37. XAMLer
• Webサイトを作る場合にPhotoShopファイルから静的なHTMLに
書き出して納品してくれるような人を想定
• 存在すると理想。。。でもプログラマーがやること多いね
• HTML+CSS+JavaScriptでも作れる

38. XAMLer
• 開発ツールの使い方
• HTML+CSSでどのように表現するのか
• XAMLでどのように表現するのか

39. XAMLer
Blend for Bisual Studio

40. XAMLer
・HTML⁺JavaScriptはねらい目
従来の.NET技術者はC#⁺XAMLが多い
まだまだドキュメントが少ない

41. XAMLer
・HTML⁺JavaScriptはねらい目
従来の.NET技術者はC#⁺XAMLが多い
まだまだドキュメントが少ない

42. おまけ
Metro(旧)のデザイン本
デザインについて、ストアの基準に
について学べます
内容は入門

43. おまけ
MSによる開発支援
プログラミング3時間
+
デザイン(スキルがある人なら)
数日で完了！！
http://msdn.microsoft.com/ja-jp/jj554833.aspx

44. おまけ
Windows Phone ハンズオン in 広島
http://www.facebook.com/groups/273162962715808/
Windows 8はじめました
上記スタンプラリーなどの開発を一緒にやる人募集中
(プログラマー&デザイナー)

45. おまけ
テンプレートや東京のセッション資料が入ったUSBを
ノベルティをMSからいただきましたので、
興味があったら中身を見てWindows８の勉強をしてください。

46. ご清聴ありがとうございました