Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue Fes Japan 2018のデザインを支えたAdobe XD

448jp | OKI Yoshiya
January 16, 2019
Technology
2
1.4k

Vue Fes Japan 2018のデザインを支えたAdobe XD

2019年1月16日（水）東京 Adobe XD meeting 21発表資料

448jp | OKI Yoshiya

January 16, 2019
Tweet

More Decks by 448jp | OKI Yoshiya

See All by 448jp | OKI Yoshiya
Figmaで神速ドキュメント作成術
448jp
2
250
今から始めるFigma超入門
448jp
0
830
零細Web制作会社のリモートワーク事情
448jp
0
120
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
450
コーディングを神速化するJetBrains IDEのご紹介～基本機能からHTML/CSSまで～
448jp
0
110
Lottieで始めるWebアニメーション入門
448jp
1
270
Figmaが支えるVue Fes Japanのデザイン
448jp
3
4.7k
Dreamweaverで学ぶ、「いい感じ」にするための実践CSSテクニック
448jp
3
1.8k
君は極寒の大地を生き延びられるか
448jp
2
620

Other Decks in Technology

See All in Technology
コミュニティを活用した勉強習慣化.pdf
taketakekaho
1
230
KDD2022参加報告
line_developers
PRO
0
190
20分でわかる！速習resultBuilder（iOSDC 2022）
chocoyama
2
350
Google Espresso解説(2017年)
__kaname__
1
720
自然言語可視化ライブラリ 「nlplot」のご紹介
takapy
3
970
那些年我們做過的 DevOps Pipeline
cheng_wei_chen
2
1.3k
TokyoR#101_RegressionAnalysis
kilometer
0
140
C向けサービスで 使われている認証方式と安全な使い方
ritou
5
360
CarPlay向けのアプリって開発できるの？
haseken_dev
0
150
Agile and DevOps の歴史をチェリーピック
kawaguti
PRO
10
1.9k
JSONについて
miyakemito
1
550
現場の泥臭い話を「QAマネジメント」という言葉で定義してみかわ
sadonosake
0
400

Featured

See All Featured
The Invisible Customer
myddelton
111
11k
Agile that works and the tools we love
rasmusluckow
319
19k
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
Git: the NoSQL Database
bkeepers
PRO
416
59k
Gamification - CAS2011
davidbonilla
75
4k
In The Pink: A Labor of Love
frogandcode
131
21k
GraphQLとの向き合い方2022年版
quramy
18
8.9k
Why Our Code Smells
bkeepers
PRO
324
55k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
130k
How to name files
jennybc
44
66k
Facilitating Awesome Meetings
lara
31
4.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
120
28k

Transcript

  1. Vue Fes Japan 2018の デザインを支えたAdobe XD 世路庵　沖 良矢　|　2019.1.16 (Wed) 東京

    Adobe XD meeting 21

  2. 沖 良矢 おき よし や ・ インタラクションデザイナー ・ 受託制作一筋15年 ・

    妻1人、子1人 @448jp
  3. None
  4. None

  5. マッハバイト・シンギュラリティ駆逐度診断 （2018）

  6. KASHIYAMA the Smart Tailor （2017）

  7. 本日お話しすること Vue Fes Japan 2018とデザイン Adobe XDが果たした役割 今後に向けて 1 2

    3

  8. Vue Fes Japan 2018とデザイン Vue Fes Japan 2018 and Design

    1
  9. None
  10. None

  11. イベント概要 ⚫ 2018/11/3 秋葉原UDXギャラリーにて開催 ⚫ 日本初の大規模Vue.jsカンファレンス ⚫ 作者Evan You氏によるキーノート、 ⚫

    国内外のスピーカーによる全10セッション
  12. None

  13. イベント概要 ⚫ 7,000円のチケット360枚が ⚫ 1時間以内にソールドアウト ⚫ 総参加者463名、協賛46社 ⚫ コアスタッフ20名、ボランティア22名で運営

  14. None

  15. スタッフの中で、 デザイナーは私1人

  16. デザインしたもの ～映像編～

  17. オープニングムービー

  18. 待機ムービー

  19. デザインしたもの ～Web編～

  20. ティザーサイト

  21. 本番サイト

  22. favicon / OGP / SNS類

  23. デザインしたもの ～DTP編～

  24. トートバッグ

  25. ネックストラップ

  26. 参加パス

  27. ステッカー

  28. 参加者Tシャツ

  29. スタッフTシャツ

  30. ロールバナー

  31. ポスター

  32. 会場ガイド

  33. ドリンクカウンターボード

  34. Vueビール 引用元： @clockmaker, @hiokky_k https://twitter.com/clockmaker/status/1058646054738907138 https://twitter.com/hiokky_k/status/1058645041395064832

  35. Vue Fes Japan 2018に費やした時間 ※デザイン以外の打ち合わせなども含む。 250時間44分

  36. Vue Fes Japan 2018に費やした時間 ※デザイン以外の打ち合わせなども含む。 250時間44分 Priceless プライスレス

  37. Adobe XDが果たした役割 The role Adobe XD played 2

  38. 主な用途 ⚫ デザインシステム ⚫ webデザイン ⚫ リソース管理 ⚫ 作図

  39. デザインシステム ⚫ Vue Fes Japanというブランドの確立 ⚫ 我々は何をやり、また何をやらないのか ⚫ はじめにそれを明確にして共有するため ⚫

    Adobe XDでデザインプランを作った

  40. 実際のファイルをチラ見せ

  41. なぜAdobe XD？ ⚫ OS、ブラウザ、フォントなどの環境に依存せず ⚫ webブラウザのみで見ることができる ⚫ 非ファイルベース（同一URLで更新可能）

  42. webデザイン ⚫ Nuxt.jsでの実装が先に確定 ⚫ 多様な環境にいるスタッフとの協業が前提 ⚫ Adobe XDで作りやすいデザインを目指した

  43. 実際のファイルをチラ見せ

  44. なぜAdobe XD？ ⚫ Adobe CCを契約していないエンジニアでも ⚫ コーディング可能 ⚫ Design at

    the speed of thought.

  45. リソース管理 ⚫ 多岐に渡るリソースをweb、DTP、映像で ⚫ 使い回すため、効率よく管理する必要がある ⚫ 協賛46社のコーポレートロゴ、 ⚫ 11名のスピーカーアイコン、 ⚫

    セッションおよびイベントごとの待機スライド

  46. 実際のファイルをチラ見せ

  47. なぜAdobe XD？ ⚫ メディアに適した解像度、ファイル形式で ⚫ 高速に書き出し可能 ⚫ すぐデザインに利用できるため、 ⚫ アプリケーションの切り替えがなくなる

    ⚫ （webのみ）

  48. 作図 ⚫ 座席配置、会場転換、電源、Wifiなど、 ⚫ 会場をベースとした決めごとが無数にある

  49. 実際のファイルをチラ見せ

  50. なぜAdobe XD？ ⚫ 軽い（重要） ⚫ こう使うべきという縛りがない

  51. Adobe XDは何なのか ⚫ ワイヤーフレームツール？ ⚫ プロトタイプツール？ ⚫ デザインツール？ ⚫ プレゼンテーションツール？

  52. 体験想像ツールでは？ Experience creation tool, right?

  53. XD

  54. e perience esign X D

  55. e perience esign User eXperience Developer eXperience Designer eXperience X

    D

  56. 今後に向けて For the Future 3

  57. Vue Fes Japan 2019 is coming...

  58. デザインのオープンソース化 ⚫ コードのようにデザインしたい ⚫ 誰が何をデザインしたかは重要ではない ⚫ デザイナーがデザインツールの中に ⚫ 閉じている時代は終わった

  59. webデザインのクオリティアップ ⚫ Vue.jsらしいアニメーション、トランジション ⚫ カウントダウン

  60. 会場演出 ⚫ 提灯ぶら下げたい ⚫ ヤグラ組みたい ⚫ プロジェクションマッピング

  61. Vue.js Store REAL ⚫ クッション ⚫ タトゥーシール ⚫ マグカップ ⚫

    タンブラー ⚫ 缶バッジ ⚫ ノート ⚫ クリアファイル

  62. 最後に

  63. シャイを言い訳にすることは 自己中心的な考え方である。 君の助けを必要としている 誰かのことが見えていない。 Kyle McDonald (2013)

  64. 沖 良矢　@448jp ありがとうございました