1. Windows Azure
× Metro Style Apps
～ Windows Azure ではじめる Metro Style Apps
～
Windows 女子部
Japan Windows Azure User Group 女子
部

2. Agenda
UI !
Part1
~ Metro Style ?
Part2 Windows Azure Metro Style Apps

3. 以前の Windows Azure Platform

4. Metro Style へ

5. Universal Design ≠ Usability

6. Universal Design ≠ Usability
Universal Design Usability
できるだけ多くの人が利用可能な ある製品が、
デザインにすること 指定された利用者によって、
指定された利用の状況下で、
指定された目的を達成するために
文化・言語・国籍の違い、老若男女といった 用いられる際の、有効さ、効率、及び
差異、障害・能力の如何を問わずに利用する 利用者の満足度の度合い
ことができる施設・製品・情報の設計
【ISO 9241-11 ／ JIS
Z8521】

7. Windows の Universal Design
アクセスキーの設定
マウスクリックを唯一の方法にしない
キーボードからのアクセスも可能にする
各タブページで
Alt を押下すると表示
ESC を押下すると非表示

8. Windows 8 (Release Preview)では
Windows キー ：メトロとデスクトップの切り替え
Windows キー + Ｃ：チャームの表示
Windows キー + Ｄ：デスクトップ画面
Windows キー + Ｅ：エクスプローラー起動
Windows キー + Ｌ：画面ロック
Windows キー + Ｑ：アプリ一覧
Windows ８では
・マウス
・キーボード
・タッチ
様々な入力デバイスに対応

9. ユーザーが求める画面の 『価値』とは
アクセシビリティ ユーザビリティ イノベーション
の対応 の対応 の創出
魅力ある
使えるように 使えるように わくわく感を生
する する む製品の
創出
使いにくい 使いたい
使えない 使いやすい
が使える
学習し易さ
エラーの少なさ
記憶のしやすさ
効率性

10. 『記憶の種類』
手続き記憶 プライミング記憶 意味記憶 短期記憶 エピソード記憶
「体で覚える」 先行刺激によって、 専門用語の定義や 意識に昇る以前の 個人的体験や出来
記憶 後続刺激に対する 客観的な知見など 感覚器官で短期間 事についての記憶
認知や行動、判断 学習行動によって （約20秒間）
に無意識的に影響 身に付ける記憶 保持される記憶 ある期間と場所で
が出て、促進され の出来事について
たり抑制されたり 一般的な知識教養 保持される情報数 の記憶
する現象 に関する記憶 は、7±2（マジカ
ルナンバー）

11. 『人間の情報処理のながれ』
■短期記憶
取り込んだ情報を解釈する機能
感覚情報貯蔵庫 GUI では、短期記憶で情報を処理
（0.5秒格納）
■短期記憶の処理能力
・マジカルナンバー（ 7±2 ）
短期記憶 ・チャンキング
（20秒格納） 情報を理解したり記憶しようとする際、
その情報をいくつかの
まとまりとしてとらえること
長期記憶
（記憶） メニューの区分線やリボンUIに
おけるグループ化

12. 再生と再認
再生 再認
CUI GUI
Character User Interface Graphical User Interface

13. NUE & NUI
■ NUE（Natural User Experience）
「触る」「話す」「書く」「ジェスチャーする」など、
人間が自然に思考することによって、直感的に行動する体験
■NUI (Natural User Interface)
NUEによって制御可能な製品やシステムのユーザーインターフェース
■NUI の利点
人の思考に沿ったNUIを適用することで、ユーザーが操作の為に思考や行動を
止めることが無くなり、ストレスなく思った通りの結果を得ることができる

14. What is purpose of this button ?
▶ PUSH
■ 再認記憶（recognition memory） とは
① 人間は、日常生活で遭遇する様々な事物や人物を記憶に留める
② 遭遇した事物や人物が、初めて出会ったものなのか、それとも、
以前にも出会ったことがあるのかを的確に判断するための記憶

15. 認知と認知不安
■認知（ cognition）とは
外部の対象や事象に関する情報を『後天的な知識・記憶・学習』の
影響を受けて理解する過程のこと
ユーザーインターフェースが分かりづらい
認知
 不安が強すぎる ⇒ 攻撃、逃避
不安
 不安が適度 ⇒ 理解しようとする

16. Buttonは四角？
▶

17. Microsoft Office の UI の進化
Excel 2003
Excel 2007
Excel 2010

18. 2重プロセス
問題
直観による NO
判断が
正しいか？
推論による NO
YES 判断がエラー
を正せるか？
YES
正解 不正解

19. 『使いやすさ 』へ の影響
技術的なスキルだけでなく、判断能力によっても、
『使いやすさ』が大きく左右される
スキルの高いユーザーであっても、
2つ目のプロセス（推論による判断）を経由する
ことが多い UI は、『使いにくい』と感じる
『プロセス１』 『プロセス２』
・速い ・遅い
・並列に処理 ・順番に処理
・無意識的・自動的 ・管理されている
・努力は不要 ・努力が必要
・連想に基づく ・規則に基づく

20. 『認知』≠『使いやすい』
アプリケーションの終了
Windows 7 まで
閉じるボタンをクリックする
Windows 8 の Metro Style アプリケーション
アプリケーションの上部のへりをつかみ下にスライドする
Windows ８ の Metro Style では
アプリは、ユーザーに対して、
ずっと動き続けているように見せる
というコンセプト

21. アフォーダンスとは
環境が人間や動物の知覚・認知・行動に与える意味
物理的な特徴が、そのモノの機能に与える影響

22. デザインの理由を説明できますか？

23. デザインの理由を説明できますか？
西暦または和暦が
明示されていない例

24. ISO5218とは？
性別の選択①
 言語に依存しない１桁のコードによるヒトの性別の表記に関する
国際規格
 0 = not known（不明）
 1 = male（男性）
 2 = female（女性）
 9 = not applicable（適用不能）

25. FaceBookの事例
ISO5218対応
1. ユーザー登録における性別選択は任意
理由：性別選択を望まない人々の意思を尊重する
2. 性別が分からないと翻訳に支障をきたすというフィードバックが多数寄せられた
3. 性別の選択が必須に変更
従来どおり、プロフィールにおける性別の表示は任意

26. 分かりやすさとは？
ユーザーが判断に迷わない

27. Go Azure × Go Metro

28. Metro Styleとは
地下鉄の行き先案内のように見やすく、
意味を理解しやすいデザイン
目的に早く到着できる
タイポグラフィ（Typography）を基調
■タイポグラフィとは
活字の配置・構成などによって、可読性、視認性、美しさを整えること
• 書体・字体の大きさ（ウェイト）
• 行と行との間隔（レディング）
• 文字と文字との間隔（カーニング及びスペーシング）

29. Metro Style Design Layout

30. レイアウト
視線の流れを考慮する
１行の文字数を考慮する
スクロールバーとマウスの移動距離を考慮する
スクロール量の考慮
各機能のグループ化
チャンキングによる記憶の負荷を軽くする

31. Metro Style Design アプリバー
・右側： グローバルコマンド
・左側： コンテクスチャル（文脈上）のコマンド

32. Metro Style Design アプリバー

33. ＋NEW ? +ADD ?
ここだけ、
ルールが違うのかも？

34. プッシュ通知の利用

35. Metro Style ライブタイル
アイコンの役割＆情報の表示領域
動的コンテンツの表示
Ex) 未読メール数、現在の株価 etc･･･

36. kabu.com for Windows Phone
高頻度で発生する株価情報の随時更新が必要
・ネットワークで発生する通信遅延の考慮
・非同期処理を前提としたスケールアウトしやすい分散基盤が必要

37. Windows Azure Web サイト
小規模から開始し、トラフィックの拡大に
合わせて規模を調整できる
拡張性の高いクラウド環境にサイトをすばやく
簡単に配置できる
Windows Azure の管理ポータルサイト
のように、Webサイトにも
Metro Styleは 適用できる!

38. 今のトレンド
常時接続
Go Azure
PC とクラウドの両方に保存されるコンテンツ
Go Azure
ファイルではなくユーザーを中心としたアクティビティ
Go Metro
デスクトップ PC に対するモバイル PC の台頭
Go Metro

39. ① まずは、試してみる！
http://www.windowsazure.com/ja-jp/pricing/free-trial/

40. ② いくらかかるの！

41. Go Azure × Go Metro
ご清聴ありがとうございました！