Pro Yearly is on sale from $80 to $50! »

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

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

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

Cb42953bfedcd81daf5b1330d98712c3?s=128

448jp | OKI Yoshiya

January 16, 2019
Tweet

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 ありがとうございました