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

2019年1月16日（水）東京 Adobe XD meeting 21発表資料

Transcript

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

   View Slide

2. 沖 良矢
   おき よし や
   ・ インタラクションデザイナー
   ・ 受託制作一筋15年
   ・ 妻1人、子1人
   @448jp
   

   View Slide

3. View Slide

4. View Slide

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

   View Slide

6. KASHIYAMA the Smart Tailor
   （2017）
   

   View Slide

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

   View Slide

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

   View Slide

9. View Slide

10. View Slide

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

    View Slide

12. View Slide

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

    View Slide

14. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. 待機ムービー
    

    View Slide

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

    View Slide

20. ティザーサイト
    

    View Slide

21. 本番サイト
    

    View Slide

22. favicon / OGP / SNS類
    

    View Slide

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

    View Slide

24. トートバッグ
    

    View Slide

25. ネックストラップ
    

    View Slide

26. 参加パス
    

    View Slide

27. ステッカー
    

    View Slide

28. 参加者Tシャツ
    

    View Slide

29. スタッフTシャツ
    

    View Slide

30. ロールバナー
    

    View Slide

31. ポスター
    

    View Slide

32. 会場ガイド
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

53. XD
    

    View Slide

54. e perience esign
    X D
    

    View Slide

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

    View Slide

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

    View Slide

57. Vue Fes Japan 2019 is coming...
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

61. Vue.js Store REAL
    ⚫ クッション
    ⚫ タトゥーシール
    ⚫ マグカップ
    ⚫ タンブラー
    ⚫ 缶バッジ
    ⚫ ノート
    ⚫ クリアファイル
    

    View Slide

62. 最後に
    

    View Slide

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

    View Slide

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

    View Slide