Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue Fes Japan 2018のデザインを支えたAdobe XD
Search
448jp | OKI Yoshiya
January 16, 2019
Technology
2
1.7k
Vue Fes Japan 2018のデザインを支えたAdobe XD
2019年1月16日(水)東京 Adobe XD meeting 21発表資料
448jp | OKI Yoshiya
January 16, 2019
Tweet
Share
More Decks by 448jp | OKI Yoshiya
See All by 448jp | OKI Yoshiya
書く・即・DONEな仕組みをNuxtで作る
448jp
0
200
神速でワイヤーフレームを作るためのライブラリ
448jp
1
670
Figmaで神速ドキュメント作成術
448jp
3
1.5k
今から始めるFigma超入門
448jp
0
1.3k
零細Web制作会社のリモートワーク事情
448jp
0
270
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
600
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
200
Lottieで始めるWebアニメーション入門
448jp
1
430
Figmaが支えるVue Fes Japanのデザイン
448jp
3
5k
Other Decks in Technology
See All in Technology
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
430
競技としてのKaggle、役に立つKaggle
yu4u
6
2.1k
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
270
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
VS CodeでAWSを操作しよう
smt7174
9
1.8k
MixIT 2024 - Pulumi : Gérer son infra avec son langage de programmation préféré
ju_hnny5
1
110
20分で完全に理解するGrafanaダッシュボード
hamadakoji
4
790
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
300
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
370
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
2
260
今年のRubyKaigiはProfiler Year🤘
osyoyu
0
210
JSON攻略法.pdf
miyakemito
8
5.2k
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
18
6.4k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
10
8.3k
In The Pink: A Labor of Love
frogandcode
138
21k
Why Our Code Smells
bkeepers
PRO
331
56k
Making Projects Easy
brettharned
109
5.5k
Building Applications with DynamoDB
mza
88
5.6k
[RailsConf 2023] Rails as a piece of cake
palkan
24
4k
Typedesign – Prime Four
hannesfritz
36
2.1k
Product Roadmaps are Hard
iamctodd
45
9.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
3
1.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
Transcript
Vue Fes Japan 2018の デザインを支えたAdobe XD 世路庵 沖 良矢 | 2019.1.16 (Wed) 東京
Adobe XD meeting 21
沖 良矢 おき よし や ・ インタラクションデザイナー ・ 受託制作一筋15年 ・
妻1人、子1人 @448jp
None
None
マッハバイト・シンギュラリティ駆逐度診断 (2018)
KASHIYAMA the Smart Tailor (2017)
本日お話しすること Vue Fes Japan 2018とデザイン Adobe XDが果たした役割 今後に向けて 1 2
3
Vue Fes Japan 2018とデザイン Vue Fes Japan 2018 and Design
1
None
None
イベント概要 ⚫ 2018/11/3 秋葉原UDXギャラリーにて開催 ⚫ 日本初の大規模Vue.jsカンファレンス ⚫ 作者Evan You氏によるキーノート、 ⚫
国内外のスピーカーによる全10セッション
None
イベント概要 ⚫ 7,000円のチケット360枚が ⚫ 1時間以内にソールドアウト ⚫ 総参加者463名、協賛46社 ⚫ コアスタッフ20名、ボランティア22名で運営
None
スタッフの中で、 デザイナーは私1人
デザインしたもの ~映像編~
オープニングムービー
待機ムービー
デザインしたもの ~Web編~
ティザーサイト
本番サイト
favicon / OGP / SNS類
デザインしたもの ~DTP編~
トートバッグ
ネックストラップ
参加パス
ステッカー
参加者Tシャツ
スタッフTシャツ
ロールバナー
ポスター
会場ガイド
ドリンクカウンターボード
Vueビール 引用元: @clockmaker, @hiokky_k https://twitter.com/clockmaker/status/1058646054738907138 https://twitter.com/hiokky_k/status/1058645041395064832
Vue Fes Japan 2018に費やした時間 ※デザイン以外の打ち合わせなども含む。 250時間44分
Vue Fes Japan 2018に費やした時間 ※デザイン以外の打ち合わせなども含む。 250時間44分 Priceless プライスレス
Adobe XDが果たした役割 The role Adobe XD played 2
主な用途 ⚫ デザインシステム ⚫ webデザイン ⚫ リソース管理 ⚫ 作図
デザインシステム ⚫ Vue Fes Japanというブランドの確立 ⚫ 我々は何をやり、また何をやらないのか ⚫ はじめにそれを明確にして共有するため ⚫
Adobe XDでデザインプランを作った
実際のファイルをチラ見せ
なぜAdobe XD? ⚫ OS、ブラウザ、フォントなどの環境に依存せず ⚫ webブラウザのみで見ることができる ⚫ 非ファイルベース(同一URLで更新可能)
webデザイン ⚫ Nuxt.jsでの実装が先に確定 ⚫ 多様な環境にいるスタッフとの協業が前提 ⚫ Adobe XDで作りやすいデザインを目指した
実際のファイルをチラ見せ
なぜAdobe XD? ⚫ Adobe CCを契約していないエンジニアでも ⚫ コーディング可能 ⚫ Design at
the speed of thought.
リソース管理 ⚫ 多岐に渡るリソースをweb、DTP、映像で ⚫ 使い回すため、効率よく管理する必要がある ⚫ 協賛46社のコーポレートロゴ、 ⚫ 11名のスピーカーアイコン、 ⚫
セッションおよびイベントごとの待機スライド
実際のファイルをチラ見せ
なぜAdobe XD? ⚫ メディアに適した解像度、ファイル形式で ⚫ 高速に書き出し可能 ⚫ すぐデザインに利用できるため、 ⚫ アプリケーションの切り替えがなくなる
⚫ (webのみ)
作図 ⚫ 座席配置、会場転換、電源、Wifiなど、 ⚫ 会場をベースとした決めごとが無数にある
実際のファイルをチラ見せ
なぜAdobe XD? ⚫ 軽い(重要) ⚫ こう使うべきという縛りがない
Adobe XDは何なのか ⚫ ワイヤーフレームツール? ⚫ プロトタイプツール? ⚫ デザインツール? ⚫ プレゼンテーションツール?
体験想像ツールでは? Experience creation tool, right?
XD
e perience esign X D
e perience esign User eXperience Developer eXperience Designer eXperience X
D
今後に向けて For the Future 3
Vue Fes Japan 2019 is coming...
デザインのオープンソース化 ⚫ コードのようにデザインしたい ⚫ 誰が何をデザインしたかは重要ではない ⚫ デザイナーがデザインツールの中に ⚫ 閉じている時代は終わった
webデザインのクオリティアップ ⚫ Vue.jsらしいアニメーション、トランジション ⚫ カウントダウン
会場演出 ⚫ 提灯ぶら下げたい ⚫ ヤグラ組みたい ⚫ プロジェクションマッピング
Vue.js Store REAL ⚫ クッション ⚫ タトゥーシール ⚫ マグカップ ⚫
タンブラー ⚫ 缶バッジ ⚫ ノート ⚫ クリアファイル
最後に
シャイを言い訳にすることは 自己中心的な考え方である。 君の助けを必要としている 誰かのことが見えていない。 Kyle McDonald (2013)
沖 良矢 @448jp ありがとうございました