Vue Fes Japan 2018のデザインを支えたAdobe XD

Transcript

1. Vue Fes Japan 2018の デザインを支えたAdobe XD 世路庵　沖 良矢　|　2019.1.16 (Wed) 東京

   Adobe XD meeting 21

2. 沖 良矢 おき よし や ・ インタラクションデザイナー ・ 受託制作一筋15年 ・

   妻1人、子1人 @448jp
3. None
4. None

5. マッハバイト・シンギュラリティ駆逐度診断 （2018）

6. KASHIYAMA the Smart Tailor （2017）

7. 本日お話しすること Vue Fes Japan 2018とデザイン Adobe XDが果たした役割 今後に向けて 1 2

   3

8. Vue Fes Japan 2018とデザイン Vue Fes Japan 2018 and Design

   1
9. None
10. None

11. イベント概要 ⚫ 2018/11/3 秋葉原UDXギャラリーにて開催 ⚫ 日本初の大規模Vue.jsカンファレンス ⚫ 作者Evan You氏によるキーノート、 ⚫

    国内外のスピーカーによる全10セッション
12. None

13. イベント概要 ⚫ 7,000円のチケット360枚が ⚫ 1時間以内にソールドアウト ⚫ 総参加者463名、協賛46社 ⚫ コアスタッフ20名、ボランティア22名で運営

14. None

15. スタッフの中で、 デザイナーは私1人

16. デザインしたもの ～映像編～

17. オープニングムービー

18. 待機ムービー

19. デザインしたもの ～Web編～

20. ティザーサイト

21. 本番サイト

22. favicon / OGP / SNS類

23. デザインしたもの ～DTP編～

24. トートバッグ

25. ネックストラップ

26. 参加パス

27. ステッカー

28. 参加者Tシャツ

29. スタッフTシャツ

30. ロールバナー

31. ポスター

32. 会場ガイド

33. ドリンクカウンターボード

34. Vueビール 引用元： @clockmaker, @hiokky_k https://twitter.com/clockmaker/status/1058646054738907138 https://twitter.com/hiokky_k/status/1058645041395064832

35. Vue Fes Japan 2018に費やした時間 ※デザイン以外の打ち合わせなども含む。 250時間44分

36. Vue Fes Japan 2018に費やした時間 ※デザイン以外の打ち合わせなども含む。 250時間44分 Priceless プライスレス

37. Adobe XDが果たした役割 The role Adobe XD played 2

38. 主な用途 ⚫ デザインシステム ⚫ webデザイン ⚫ リソース管理 ⚫ 作図

39. デザインシステム ⚫ Vue Fes Japanというブランドの確立 ⚫ 我々は何をやり、また何をやらないのか ⚫ はじめにそれを明確にして共有するため ⚫

    Adobe XDでデザインプランを作った

40. 実際のファイルをチラ見せ

41. なぜAdobe XD？ ⚫ OS、ブラウザ、フォントなどの環境に依存せず ⚫ webブラウザのみで見ることができる ⚫ 非ファイルベース（同一URLで更新可能）

42. webデザイン ⚫ Nuxt.jsでの実装が先に確定 ⚫ 多様な環境にいるスタッフとの協業が前提 ⚫ Adobe XDで作りやすいデザインを目指した

43. 実際のファイルをチラ見せ

44. なぜAdobe XD？ ⚫ Adobe CCを契約していないエンジニアでも ⚫ コーディング可能 ⚫ Design at

    the speed of thought.

45. リソース管理 ⚫ 多岐に渡るリソースをweb、DTP、映像で ⚫ 使い回すため、効率よく管理する必要がある ⚫ 協賛46社のコーポレートロゴ、 ⚫ 11名のスピーカーアイコン、 ⚫

    セッションおよびイベントごとの待機スライド

46. 実際のファイルをチラ見せ

47. なぜAdobe XD？ ⚫ メディアに適した解像度、ファイル形式で ⚫ 高速に書き出し可能 ⚫ すぐデザインに利用できるため、 ⚫ アプリケーションの切り替えがなくなる

    ⚫ （webのみ）

48. 作図 ⚫ 座席配置、会場転換、電源、Wifiなど、 ⚫ 会場をベースとした決めごとが無数にある

49. 実際のファイルをチラ見せ

50. なぜAdobe XD？ ⚫ 軽い（重要） ⚫ こう使うべきという縛りがない

51. Adobe XDは何なのか ⚫ ワイヤーフレームツール？ ⚫ プロトタイプツール？ ⚫ デザインツール？ ⚫ プレゼンテーションツール？

52. 体験想像ツールでは？ Experience creation tool, right?

53. XD

54. e perience esign X D

55. e perience esign User eXperience Developer eXperience Designer eXperience X

    D

56. 今後に向けて For the Future 3

57. Vue Fes Japan 2019 is coming...

58. デザインのオープンソース化 ⚫ コードのようにデザインしたい ⚫ 誰が何をデザインしたかは重要ではない ⚫ デザイナーがデザインツールの中に ⚫ 閉じている時代は終わった

59. webデザインのクオリティアップ ⚫ Vue.jsらしいアニメーション、トランジション ⚫ カウントダウン

60. 会場演出 ⚫ 提灯ぶら下げたい ⚫ ヤグラ組みたい ⚫ プロジェクションマッピング

61. Vue.js Store REAL ⚫ クッション ⚫ タトゥーシール ⚫ マグカップ ⚫

    タンブラー ⚫ 缶バッジ ⚫ ノート ⚫ クリアファイル

62. 最後に

63. シャイを言い訳にすることは 自己中心的な考え方である。 君の助けを必要としている 誰かのことが見えていない。 Kyle McDonald (2013)

64. 沖 良矢　@448jp ありがとうございました