Windowsストア アプリケーション概要

-デザイン編-

自己紹介

株式会社システムフレンド

Windows Phone ハンズオン in 広島
EC-CUBE公式エバンジェリスト
眠るシーラカンスと水底のプログラマー
http://coelacanth.heteml.jp/blog/

自己紹介

Windows 8アプリ
ShopBank
トレトレ
EC-CUBE大全
現在進行中が一つ・・・

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

Windows 8 概要

Windows 8概要
そもそもWindows8知ってる?

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

Windows 8概要
Windowsストア アプリケーション



Metro(暫定)スタイルUI
新しいランタイム(WinRT)
Windowsストア
新しい実行環境

Windows8概要

Windows8概要

Windows8概要
Windows 8 = ノートPCにもタブレットにもなる
デスクトップPCにもタブレットにもなる

iOS,Android = デスクトップとタブレットのOSは別
デスクトップ、ノートPCの雄らしい展開

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

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




Immersive
infographic
そぎ落とす、コンテンツが最優先
レイアウト
作法に従う→一貫性

Metro(暫定)スタイルUI

Immersive
没入した、没入できる、どっぷりつかった、実体験のように感じる

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

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

Metro(暫定)スタイルUI

infographic
Information(情報)とgraphic(図)を組み合わせた用語

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

Metro(暫定)スタイルUI

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

Metro(暫定)スタイルUI

Metro(暫定)スタイルUI

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

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

デザイン

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

PhotoShoper




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

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

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

PhotoShoper
タイポグラフィー

PhotoShoper
タイポグラフィー

PhotoShoper
グリッドシステム

42pt

11pt

20pt

11pt

9pt

11pt

42pt

20pt

11pt

9pt

PhotoShoper
コントロールの種類

PhotoShoper
ライブタイル

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

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

XAMLer
Blend for Bisual Studio

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

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

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

おまけ
MSによる開発支援
プログラミング3時間
+
デザイン(スキルがある人なら)
数日で完了!!

http://msdn.microsoft.com/ja-jp/jj554833.aspx

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

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

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