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

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

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

Other Decks in Technology

Transcript

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

    View full-size slide

  2. 沖 良矢
    おき よし や
    ・ インタラクションデザイナー
    ・ 受託制作一筋15年
    ・ 妻1人、子1人
    @448jp

    View full-size slide

  3. マッハバイト・シンギュラリティ駆逐度診断
    (2018)

    View full-size slide

  4. KASHIYAMA the Smart Tailor
    (2017)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. デザインしたもの
    ~映像編~

    View full-size slide

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

    View full-size slide

  12. 待機ムービー

    View full-size slide

  13. デザインしたもの
    ~Web編~

    View full-size slide

  14. ティザーサイト

    View full-size slide

  15. 本番サイト

    View full-size slide

  16. favicon / OGP / SNS類

    View full-size slide

  17. デザインしたもの
    ~DTP編~

    View full-size slide

  18. トートバッグ

    View full-size slide

  19. ネックストラップ

    View full-size slide

  20. 参加パス

    View full-size slide

  21. ステッカー

    View full-size slide

  22. 参加者Tシャツ

    View full-size slide

  23. スタッフTシャツ

    View full-size slide

  24. ロールバナー

    View full-size slide

  25. ポスター

    View full-size slide

  26. 会場ガイド

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. なぜAdobe XD?
    ⚫ Adobe CCを契約していないエンジニアでも
    ⚫ コーディング可能
    ⚫ Design at the speed of thought.

    View full-size slide

  39. リソース管理
    ⚫ 多岐に渡るリソースをweb、DTP、映像で
    ⚫ 使い回すため、効率よく管理する必要がある
    ⚫ 協賛46社のコーポレートロゴ、
    ⚫ 11名のスピーカーアイコン、
    ⚫ セッションおよびイベントごとの待機スライド

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. なぜAdobe XD?
    ⚫ 軽い(重要)
    ⚫ こう使うべきという縛りがない

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. e perience esign
    X D

    View full-size slide

  48. e perience esign
    User eXperience
    Developer eXperience
    Designer eXperience
    X D

    View full-size slide

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

    View full-size slide

  50. Vue Fes Japan 2019 is coming...

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. Vue.js Store REAL
    ⚫ クッション
    ⚫ タトゥーシール
    ⚫ マグカップ
    ⚫ タンブラー
    ⚫ 缶バッジ
    ⚫ ノート
    ⚫ クリアファイル

    View full-size slide

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

    View full-size slide

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

    View full-size slide