Slide 1
Slide 1 text
Vue Fes Japan 2018の
デザインを支えたAdobe XD
世路庵 沖 良矢 | 2019.1.16 (Wed)
東京 Adobe XD meeting 21
Slide 2
Slide 2 text
沖 良矢
おき よし や
・ インタラクションデザイナー
・ 受託制作一筋15年
・ 妻1人、子1人
@448jp
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
マッハバイト・シンギュラリティ駆逐度診断
（2018）
Slide 6
Slide 6 text
KASHIYAMA the Smart Tailor
（2017）
Slide 7
Slide 7 text
本日お話しすること
Vue Fes Japan 2018とデザイン
Adobe XDが果たした役割
今後に向けて
1
2
3
Slide 8
Slide 8 text
Vue Fes Japan 2018とデザイン
Vue Fes Japan 2018 and Design
1
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
イベント概要
⚫ 2018/11/3 秋葉原UDXギャラリーにて開催
⚫ 日本初の大規模Vue.jsカンファレンス
⚫ 作者Evan You氏によるキーノート、
⚫ 国内外のスピーカーによる全10セッション
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
イベント概要
⚫ 7,000円のチケット360枚が
⚫ 1時間以内にソールドアウト
⚫ 総参加者463名、協賛46社
⚫ コアスタッフ20名、ボランティア22名で運営
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
スタッフの中で、
デザイナーは私1人
Slide 16
Slide 16 text
デザインしたもの
～映像編～
Slide 17
Slide 17 text
オープニングムービー
Slide 18
Slide 18 text
待機ムービー
Slide 19
Slide 19 text
デザインしたもの
～Web編～
Slide 20
Slide 20 text
ティザーサイト
Slide 21
Slide 21 text
本番サイト
Slide 22
Slide 22 text
favicon / OGP / SNS類
Slide 23
Slide 23 text
デザインしたもの
～DTP編～
Slide 24
Slide 24 text
トートバッグ
Slide 25
Slide 25 text
ネックストラップ
Slide 26
Slide 26 text
参加パス
Slide 27
Slide 27 text
ステッカー
Slide 28
Slide 28 text
参加者Tシャツ
Slide 29
Slide 29 text
スタッフTシャツ
Slide 30
Slide 30 text
ロールバナー
Slide 31
Slide 31 text
ポスター
Slide 32
Slide 32 text
会場ガイド
Slide 33
Slide 33 text
ドリンクカウンターボード
Slide 34
Slide 34 text
Vueビール
引用元： @clockmaker, @hiokky_k
https://twitter.com/clockmaker/status/1058646054738907138
https://twitter.com/hiokky_k/status/1058645041395064832
Slide 35
Slide 35 text
Vue Fes Japan 2018に費やした時間
※デザイン以外の打ち合わせなども含む。
250時間44分
Slide 36
Slide 36 text
Vue Fes Japan 2018に費やした時間
※デザイン以外の打ち合わせなども含む。
250時間44分
Priceless
プライスレス
Slide 37
Slide 37 text
Adobe XDが果たした役割
The role Adobe XD played
2
Slide 38
Slide 38 text
主な用途
⚫ デザインシステム
⚫ webデザイン
⚫ リソース管理
⚫ 作図
Slide 39
Slide 39 text
デザインシステム
⚫ Vue Fes Japanというブランドの確立
⚫ 我々は何をやり、また何をやらないのか
⚫ はじめにそれを明確にして共有するため
⚫ Adobe XDでデザインプランを作った
Slide 40
Slide 40 text
実際のファイルをチラ見せ
Slide 41
Slide 41 text
なぜAdobe XD？
⚫ OS、ブラウザ、フォントなどの環境に依存せず
⚫ webブラウザのみで見ることができる
⚫ 非ファイルベース（同一URLで更新可能）
Slide 42
Slide 42 text
webデザイン
⚫ Nuxt.jsでの実装が先に確定
⚫ 多様な環境にいるスタッフとの協業が前提
⚫ Adobe XDで作りやすいデザインを目指した
Slide 43
Slide 43 text
実際のファイルをチラ見せ
Slide 44
Slide 44 text
なぜAdobe XD？
⚫ Adobe CCを契約していないエンジニアでも
⚫ コーディング可能
⚫ Design at the speed of thought.
Slide 45
Slide 45 text
リソース管理
⚫ 多岐に渡るリソースをweb、DTP、映像で
⚫ 使い回すため、効率よく管理する必要がある
⚫ 協賛46社のコーポレートロゴ、
⚫ 11名のスピーカーアイコン、
⚫ セッションおよびイベントごとの待機スライド
Slide 46
Slide 46 text
実際のファイルをチラ見せ
Slide 47
Slide 47 text
なぜAdobe XD？
⚫ メディアに適した解像度、ファイル形式で
⚫ 高速に書き出し可能
⚫ すぐデザインに利用できるため、
⚫ アプリケーションの切り替えがなくなる
⚫ （webのみ）
Slide 48
Slide 48 text
作図
⚫ 座席配置、会場転換、電源、Wifiなど、
⚫ 会場をベースとした決めごとが無数にある
Slide 49
Slide 49 text
実際のファイルをチラ見せ
Slide 50
Slide 50 text
なぜAdobe XD？
⚫ 軽い（重要）
⚫ こう使うべきという縛りがない
Slide 51
Slide 51 text
Adobe XDは何なのか
⚫ ワイヤーフレームツール？
⚫ プロトタイプツール？
⚫ デザインツール？
⚫ プレゼンテーションツール？
Slide 52
Slide 52 text
体験想像ツールでは？
Experience creation tool, right?
Slide 53
Slide 53 text
XD
Slide 54
Slide 54 text
e perience esign
X D
Slide 55
Slide 55 text
e perience esign
User eXperience
Developer eXperience
Designer eXperience
X D
Slide 56
Slide 56 text
今後に向けて
For the Future
3
Slide 57
Slide 57 text
Vue Fes Japan 2019 is coming...
Slide 58
Slide 58 text
デザインのオープンソース化
⚫ コードのようにデザインしたい
⚫ 誰が何をデザインしたかは重要ではない
⚫ デザイナーがデザインツールの中に
⚫ 閉じている時代は終わった
Slide 59
Slide 59 text
webデザインのクオリティアップ
⚫ Vue.jsらしいアニメーション、トランジション
⚫ カウントダウン
Slide 60
Slide 60 text
会場演出
⚫ 提灯ぶら下げたい
⚫ ヤグラ組みたい
⚫ プロジェクションマッピング
Slide 61
Slide 61 text
Vue.js Store REAL
⚫ クッション
⚫ タトゥーシール
⚫ マグカップ
⚫ タンブラー
⚫ 缶バッジ
⚫ ノート
⚫ クリアファイル
Slide 62
Slide 62 text
最後に
Slide 63
Slide 63 text
シャイを言い訳にすることは
自己中心的な考え方である。
君の助けを必要としている
誰かのことが見えていない。
Kyle McDonald (2013)
Slide 64
Slide 64 text
沖 良矢 @448jp
ありがとうございました