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
2k
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
人はなぜコミュニティとつながると幸せを感じるのか
448jp
3
320
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.9k
合意形成のためのFigma活用術
448jp
0
140
書く・即・DONEな仕組みをNuxtで作る
448jp
0
390
神速でワイヤーフレームを作るためのライブラリ
448jp
1
870
Figmaで神速ドキュメント作成術
448jp
3
2.5k
今から始めるFigma超入門
448jp
0
1.7k
零細Web制作会社のリモートワーク事情
448jp
0
430
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
770
Other Decks in Technology
See All in Technology
Azure Well-Architected Framework入門
tomokusaba
0
180
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
170
stupid jj tricks
indirect
0
7.7k
pprof vs runtime/trace (FlightRecorder)
task4233
0
140
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
870
analysis パッケージの仕組みの上でMulti linter with configを実現する / Go Conference 2025
k1low
1
250
全てGoで作るP2P対戦ゲーム入門
ponyo877
3
1.3k
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
140
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
0
140
Pythonによる契約プログラミング入門 / PyCon JP 2025
7pairs
5
2.4k
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
370
#普通の文系サラリーマンチャレンジ 自分でアプリ開発と電子工作を続けたら人生が変わった
tatsuya1970
0
890
Featured
See All Featured
Thoughts on Productivity
jonyablonski
70
4.8k
How GitHub (no longer) Works
holman
315
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Why Our Code Smells
bkeepers
PRO
339
57k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to Ace a Technical Interview
jacobian
280
23k
A better future with KSS
kneath
239
17k
Designing for Performance
lara
610
69k
Being A Developer After 40
akosma
91
590k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
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 ありがとうございました