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
2. 沖 良矢 おき よし や ・ インタラクションデザイナー ・ 受託制作一筋15年 ・ 妻1人、子1人 @448jp
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
11. イベント概要 ⚫ 2018/11/3 秋葉原UDXギャラリーにて開催 ⚫ 日本初の大規模Vue.jsカンファレンス ⚫ 作者Evan You氏によるキーノート、 ⚫ 国内外のスピーカーによる全10セッション
13. イベント概要 ⚫ 7,000円のチケット360枚が ⚫ 1時間以内にソールドアウト ⚫ 総参加者463名、協賛46社 ⚫ コアスタッフ20名、ボランティア22名で運営
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 ありがとうございました