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
4k
合意形成のためのFigma活用術
448jp
0
140
書く・即・DONEな仕組みをNuxtで作る
448jp
0
400
神速でワイヤーフレームを作るためのライブラリ
448jp
1
880
Figmaで神速ドキュメント作成術
448jp
3
2.6k
今から始めるFigma超入門
448jp
0
1.7k
零細Web制作会社のリモートワーク事情
448jp
0
440
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
770
Other Decks in Technology
See All in Technology
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
300
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
160
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
0
410
組織改革から開発効率向上まで! - 成功事例から見えたAI活用のポイント - / 20251016 Tetsuharu Kokaki
shift_evolve
PRO
2
230
ソースを読むプロセスの例
sat
PRO
15
9.8k
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
710
コンパウンド組織のCRE #cre_meetup
layerx
PRO
1
230
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
150
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
260
様々なファイルシステム
sat
PRO
0
210
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
280
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
470k
Writing Fast Ruby
sferik
629
62k
What's in a price? How to price your products and services
michaelherold
246
12k
Producing Creativity
orderedlist
PRO
347
40k
How to Ace a Technical Interview
jacobian
280
24k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
The Pragmatic Product Professional
lauravandoore
36
7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
Automating Front-end Workflow
addyosmani
1371
200k
BBQ
matthewcrist
89
9.8k
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 ありがとうございました