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
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3k
合意形成のためのFigma活用術
448jp
0
60
書く・即・DONEな仕組みをNuxtで作る
448jp
0
330
神速でワイヤーフレームを作るためのライブラリ
448jp
1
800
Figmaで神速ドキュメント作成術
448jp
3
2.2k
今から始めるFigma超入門
448jp
0
1.5k
零細Web制作会社のリモートワーク事情
448jp
0
380
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
710
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
270
Other Decks in Technology
See All in Technology
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.6k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
9
1.7k
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
660
[JAWS-UG栃木]地方だからできたクラウドネイティブ事例大公開! / jawsug_tochigi_tachibana
biatunky
0
220
自動と手動の両輪で開発するデータクレンジング
estie
2
190
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
110
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
530
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
110
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
180
マルチデータプロダクト開発・運用に耐えるためのデータ組織・アーキテクチャの遷移
mtpooh
1
400
地方企業がクラウドを活用するヒント
miu_crescent
PRO
1
130
FastConnect の冗長性
ocise
1
9.5k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1367
200k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
RailsConf 2023
tenderlove
29
990
The World Runs on Bad Software
bkeepers
PRO
67
11k
Gamification - CAS2011
davidbonilla
80
5.1k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Designing for humans not robots
tammielis
250
25k
Being A Developer After 40
akosma
89
590k
Building an army of robots
kneath
302
45k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
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 ありがとうございました