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.9k
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
300
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.8k
合意形成のためのFigma活用術
448jp
0
130
書く・即・DONEな仕組みをNuxtで作る
448jp
0
380
神速でワイヤーフレームを作るためのライブラリ
448jp
1
860
Figmaで神速ドキュメント作成術
448jp
3
2.5k
今から始めるFigma超入門
448jp
0
1.6k
零細Web制作会社のリモートワーク事情
448jp
0
430
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
760
Other Decks in Technology
See All in Technology
2時間で300+テーブルをデータ基盤に連携するためのAI活用 / FukuokaDataEngineer
sansan_randd
0
130
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
1
340
dipにおけるSRE変革の軌跡
dip_tech
PRO
1
230
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
15
5.5k
o11yツールを乗り換えた話
tak0x00
1
130
Agent Development Kitで始める生成 AI エージェント実践開発
danishi
0
120
【CEDEC2025】『ウマ娘 プリティーダービー』における映像制作のさらなる高品質化へ!~ 豊富な素材出力と制作フローの改善を実現するツールについて~
cygames
PRO
0
230
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
0
280
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
140
Lambda management with ecspresso and Terraform
ijin
2
130
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
680
人に寄り添うAIエージェントとアーキテクチャ #BetAIDay
layerx
PRO
8
2k
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
For a Future-Friendly Web
brad_frost
179
9.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
GitHub's CSS Performance
jonrohan
1031
460k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
420
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
How to Ace a Technical Interview
jacobian
278
23k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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 ありがとうございました