July 4, 2015 Microsoft SGT

1. なぜなに
Windows Universal App たん
WinJS 4 編 じゃなかった
～ 迫りくる Windows 10 のリリースに備えて ～
れいさにゃん
Microsoft MVP – Microsoft Azure

2. Windows 8 とは何だったのか

3. 新しいコンピューティングの提案
・タッチインターフェースに最適化した全く新
しい UI を定義
・タッチインターフェースに重点
（Windows 8.1 でマウスでの操作性を改善）

4. Windows 8 の
インターフェースデザイン
・単体でみたとき決して悪くなく、むしろ完成
度は素晴らしい。
・行き過ぎた独自性の追求により他のプラッ
トフォームとギャップが生じてしまった。

5. Windows 10 での方向修正

6. 協調性 → ユニバーサル化
・行き過ぎた独自性を見直し、他プラットフォー
ムとの協調性を重視。
・ひとつのデバイスに特化するより、すべてのデ
バイスで共通の操作性を基本とする。

7. 無かったことになるもの

8. 水平スクロール ×
従来の垂直スクロールが基本にもどります
画像の引用元: http://blog.instin.com/post/58985277707/designing-for-windows-8-metro

9. アプリバー ×
レガシーストアアプリ※はタイトルバーのハンバーガーボタンか、
上からスワイプすると出せます（全画面時）
画像の引用元:Yabumi /Webnium

10. レガシーストアアプリ※はタイトルバーのハンバーガーボタンか、
上からスワイプすると出せます（全画面時）
アプリバー ×
画像の引用元:Yabumi /Webnium
すぐできる！おすすめ改修
・コントロールを常に表示させておくことが基本なので
・アプリバーは最初から表示させておく！
↓
エンドユーザーが混乱しない ◎

11. チャーム ×
レガシーストアアプリ※が使用する共有チャーム等は
タイトルバーのハンバーガーボタンで出せます
画像の引用元: http://telecompk.net/2012/08/27/review-windows-8-is-it-worth-upgrading/

12. チャーム ×
レガシーストアアプリ※が使用する共有チャーム等は
タイトルバーのハンバーガーボタンで出せます
画像の引用元: http://telecompk.net/2012/08/27/review-windows-8-is-it-worth-upgrading/
某れ○さ氏のつぶやき
チャーム、好きでした・・・
君のこと絶対に忘れないよ・・・
さよなら・・・

13. などなど

14. 新生アプリバー

15. コマンドバー（新アプリバー）
基本的に常に見える状態に
画像の引用元: https://msdn.microsoft.com/ja-jp/library/windows/apps/hh465302.aspx

16. 共有ソースは要ボタン配置

17. 共有ソース
チャームは無くなったのです。
共有するためのボタンを配置しましょう。
画像の引用元: http://blog.instin.com/post/58985277707/designing-for-windows-8-metro

18. ユニバーサルアプリ

19. ３つの基本構成要素
画像の引用元: http://www.slideshare.net/LucaFino/windows-10-app-design

20. ① コンテンツ要素
これがないと審査におちます
画像の引用元: http://www.slideshare.net/LucaFino/windows-10-app-design

21. ② コマンド要素
コンテンツに対するコマンドを
ボタンやコマンドバーで実行できるようにします
画像の引用元: http://www.slideshare.net/LucaFino/windows-10-app-design

22. ③ ナビゲーション要素
表示するコンテンツを選択するための要素です
画像の引用元: http://www.slideshare.net/LucaFino/windows-10-app-design

23. ナビゲーションは大きく分けて5パターン
これらのパターンはあくまで参考です

24. ハブ

25. ハンバーガー

26. ピボット

27. マスター/詳細

28. タブ

29. http://design.windows.com

30. 実は WinJS では
ほとんど未実装

31. なぜ Windows 10 は
垂直スクロールなのか

32. 水平スクロールの問題

33. 既存インターフェースとの齟齬
・そもそも水平スクロールできないマウスがある
・垂直スクロールを水平スクロールに変換してた
→混乱の元
・ウェブアプリや他プラットフォームに合わせる

34. ハンバーガーボタンについて

35. ハンバーガーボタン問題。
・ハンバーガーボタンは元々表示領域の狭い場
合のための UI である
・表示できる余裕がある場合は展開しておくと
UX が向上する

36. http://design.windows.com

38. イカのせいで WinJS のこと
すっかりわすれてました

40. 未解決疑問集

41. Azure 新Portal の
水平スクロールはどうなるの？

42. Microsoft Edge のバグは
RTMには治ってるの？