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

Adobe XD meeting #11 忘年会「Microsoft提供のAdobe XD design toolkit for UWP appsを試してみて考えたこと」の登壇資料です。

◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/

Transcript

1. Adobe XD meeting #11 忘年会 Microsoft提供のAdobe XD design toolkit for UWP appsを試してみて考えたこと ワンフットシーバス 田中正吾
2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！
3. 自己紹介
4. 田中正吾（たなかせいご） 屋号：ワンフットシーバス http://1ft-seabass.jp/ 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い 現在に至る。 最近は、JavaScriptやHTML5アニメーション、 スマートフォン演出制作のワークフロー改善に 関わったりしていました。 デジタルサイネージやアプリ制作もやります。
5. UWP
6. フロントエンドエンジニアを足場にしていながら いろいろな技術に関わっている ちょっとかいつまんで触ることも多い
7. 今回の例はUWPアプリ アドベントカレンダー18日目の記事 https://www.1ft-seabass.jp/memo/2017/12/18/adobe-xd-uwp-app-hololens/
8. HoloLensでUWP 2Dアプリで表示できるんですが 複雑なアプリということになったら ワイヤーフレーム作らないといけないかも
9. UWPアプリを実際に作りながらの 見た目のためのテスト大変 Visual Studioでデザインビューあるけどつくって見れるまでの工程が遠い
10. Adobe XDのこんなキット見つけた https://docs.microsoft.com/ja-jp/windows/uwp/design/downloads/index
11. UWPのアプリパーツのAdobe XD版 ちょっと見てみましょう
12. ダウンロードした、つかったみた
13. こんな感じにつくってみた 仮想ウォンバット素材管理アプリ
14. HoloLensでみてみよう まず動画からできたら画面共有
15. HoloLensでみてみよう
16. 制作エピソード
17. カレンダーのリピートグリッドに はまってしまった！ 分解してしのいだ
18. 一個一個のUIの挙動を作るのは大変 全部作るのではなく要点抑えたほうが良さそう
19. デザインの意図が垣間見える UWP例のAcrylicがわからなかったけど調べてみて勉強になった 純正のテンプレートにあるUIの用語からデザインの方向性を読み取れたり学ぶことは多い https://docs.microsoft.com/en-us/windows/uwp/design/style/acrylic
20. まとめ
21. WEB公開共有は強力。ブラウザさえあれば、 HoloLensのようなデバイスでも試せる。
22. 実際にソースを組んで画面デザインをしていく よりも直感的に操作が検討しやすい
23. 本来であればアプリ制作の レギュレーションを意識する必要がある 好き勝手出来てしまうので、別立てで気持ちを引き締める必要がある
24. 短くふんわりと触る技術が多いため Adobe XD重宝しそう その技術の習熟を前に構想を伝えたいタイミングは多い
25. 2018年も色々なシーンで 積極的にAdobe XD使っていきたい！
26. ご清聴いただきまして ありがとうございました！