Microsoft提供のAdobe XD design toolkit for UWP appsを試してみて考えたこと

by 1ft-seabass

Slide 1

Slide 1 text

Adobe XD meeting #11 忘年会 Microsoft提供のAdobe XD design toolkit for UWP appsを試してみて考えたことワンフットシーバス田中正吾

Slide 2

Slide 2 text

私の話はスライドを後ほど共有します。話す内容に注力いただいて大丈夫です！

Slide 3

Slide 3 text

自己紹介

Slide 4

Slide 4 text

田中正吾（たなかせいご）屋号：ワンフットシーバス http://1ft-seabass.jp/ 2004年よりフリーランス。以後、FLASH制作を中心にインタラクティブコンテンツを主に行い現在に至る。最近は、JavaScriptやHTML5アニメーション、スマートフォン演出制作のワークフロー改善に関わったりしていました。デジタルサイネージやアプリ制作もやります。

Slide 5

Slide 5 text

UWP

Slide 6

Slide 6 text

フロントエンドエンジニアを足場にしていながらいろいろな技術に関わっているちょっとかいつまんで触ることも多い

Slide 7

Slide 7 text

今回の例はUWPアプリアドベントカレンダー18日目の記事 https://www.1ft-seabass.jp/memo/2017/12/18/adobe-xd-uwp-app-hololens/

Slide 8

Slide 8 text

HoloLensでUWP 2Dアプリで表示できるんですが複雑なアプリということになったらワイヤーフレーム作らないといけないかも

Slide 9

Slide 9 text

UWPアプリを実際に作りながらの見た目のためのテスト大変 Visual Studioでデザインビューあるけどつくって見れるまでの工程が遠い

Slide 10

Slide 10 text

Adobe XDのこんなキット見つけた https://docs.microsoft.com/ja-jp/windows/uwp/design/downloads/index

Slide 11

Slide 11 text

UWPのアプリパーツのAdobe XD版ちょっと見てみましょう

Slide 12

Slide 12 text

ダウンロードした、つかったみた

Slide 13

Slide 13 text

こんな感じにつくってみた仮想ウォンバット素材管理アプリ

Slide 14

Slide 14 text

HoloLensでみてみようまず動画からできたら画面共有

Slide 15

Slide 15 text

HoloLensでみてみよう

Slide 16

Slide 16 text

制作エピソード

Slide 17

Slide 17 text

カレンダーのリピートグリッドにはまってしまった！分解してしのいだ

Slide 18

Slide 18 text

一個一個のUIの挙動を作るのは大変全部作るのではなく要点抑えたほうが良さそう

Slide 19

Slide 19 text

デザインの意図が垣間見える UWP例のAcrylicがわからなかったけど調べてみて勉強になった純正のテンプレートにあるUIの用語からデザインの方向性を読み取れたり学ぶことは多い https://docs.microsoft.com/en-us/windows/uwp/design/style/acrylic

Slide 20

Slide 20 text

まとめ

Slide 21

Slide 21 text

WEB公開共有は強力。ブラウザさえあれば、 HoloLensのようなデバイスでも試せる。

Slide 22

Slide 22 text

実際にソースを組んで画面デザインをしていくよりも直感的に操作が検討しやすい

Slide 23

Slide 23 text

本来であればアプリ制作のレギュレーションを意識する必要がある好き勝手出来てしまうので、別立てで気持ちを引き締める必要がある

Slide 24

Slide 24 text

短くふんわりと触る技術が多いため Adobe XD重宝しそうその技術の習熟を前に構想を伝えたいタイミングは多い