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

これだけは伝えたい Adobe XDの5つの強み

isaikaori
March 30, 2019

これだけは伝えたい Adobe XDの5つの強み

Adobe XD ユーザーグループ名古屋 vol.2
https://xdstudy-nagoya.connpass.com/event/121614/

isaikaori

March 30, 2019
Tweet

More Decks by isaikaori

Other Decks in Design

Transcript

  1. これだけは伝えたい
    Adobe XDの5つの強み
    5
    5
    5

    View Slide

  2. 井斉花織@いおり
    ・有限会社アップルップル デザイナー
    ・Adobe XD ユーザーグループ名古屋 管理人

    View Slide

  3. 最近のUIデザインツール事情

    View Slide

  4. Sketch XD
    Figma Studio
    Photoshop

    View Slide

  5. いろんな事情の「実際なかなか使えない」に対して
    少しでも場面で背中を押せるように!
    Sketch XD
    Figma Studio
    Photoshop

    View Slide

  6. Adobe XDの5つの強み
    実際に業務で使ってみて感じる

    View Slide

  7. 1. 量産と一括管理が得意なプロダクト設計
    2. 実際の動き方を伝える2つの機能
    3. チームに優しい数々の共有機能
    4. Adobeならではのデザインツールの連携
    5. 充実したアップデートとプラグイン

    View Slide

  8. 1
    量産と一括管理が得意な
    プロダクト設計

    View Slide

  9. 量産=リピートグリッド
    一括管理=アセット

    View Slide

  10. 量産=リピートグリッド
    一括管理=アセット

    View Slide

  11. うなぎ職人の匠の技が凝縮して作ら
    れる「ひつまぶし」
    まずは名古屋グルメの代表格とも言える「ひ
    つまぶし」。名前の由来の通り、細かく切っ
    たうなぎとご飯を大きなおひつでまぜて(ま
    味噌のコクと麺の歯ごたえが美味し
    い「味噌煮込うどん」
    名古屋めしの中でも代表的なグルメ「味噌煮
    込うどん」。コクのある味噌つゆと歯ごたえ
    のある麺がクセになる、名古屋の家庭料理の
    ワインに合うあっさり味の「味噌お
    でん」
    名古屋の味噌おでんは甘みのある汁が一般的
    ですが、ソムリエが経営する店で「ワインに
    合う」というコンセプトで提供されている、
    見た目も味もインパクト抜群「きし
    めん」
    「味噌煮込うどん」と並び名古屋の代表的な
    麺グルメ「きしめん」。何といっても特徴
    は、平打ちにした幅広麺。麺が伸びないよ
    地元民もよく食べるB級グルメ「あん
    かけスパゲティ」
    とろみとコクのある味わいが特徴の名古屋発
    オリジナルパスタ「あんかけスパゲティ」。
    昭和40年頃から広まったとされるB級グルメ
    名古屋発祥、台湾人が作った「台湾
    ラーメン」
    見ただけで汗がぶわっと出てきそうな赤い見
    た目が特徴の、台湾ラーメン。唐辛子やニン
    ニクと一緒に煮込んだ挽肉とニラによる香味
    引用元:https://gurutabi.gnavi.co.jp/a/a̲2312/

    View Slide

  12. ・ひとかたまりのスタイルを整列した状態で量産する
    ・画像とテキストを別データから一瞬で流し込む
    ・スタイルを一括で編集する

    View Slide

  13. 量産=リピートグリッド
    一括管理=アセット

    View Slide

  14. カラー 文字スタイル シンボル
    フォームを送信する
    見出し大です。
    見出し中です。
    見出し小です。 次のページへ

    View Slide

  15. ・「カラー」「文字スタイル」「シンボル」
    ・シンボル:テキストの内容は独自に持つ
    ・シンボル:シンボル同士で置き換えができる
    ・シンボル:外部XDファイルからリンクができる

    View Slide

  16. View Slide

  17. 2
    実際の動きを伝える2つの機能

    View Slide

  18. レスポンシブサイズ変更
    プロトタイプアニメーション

    View Slide

  19. レスポンシブサイズ変更
    プロトタイプアニメーション

    View Slide

  20. レスポンシブサイズ OFF
    レスポンシブサイズ ON

    View Slide

  21. 幅を固定 高さを固定
    左上に固定
    右下に固定

    View Slide

  22. 実際に想定しているレスポンシブの動きを
    伝えることができる

    View Slide

  23. レスポンシブサイズ変更
    プロトタイプアニメーション

    View Slide

  24. クリックエリア

    View Slide

  25. クリックエリア

    View Slide

  26. クリックエリア

    View Slide

  27. クリックエリア

    View Slide

  28. ドラッグエリア

    View Slide

  29. ドラッグエリア

    View Slide

  30. クリックエリア

    View Slide

  31. 結論:可能性は無限大

    View Slide

  32. 実際に想定しているサイト上での動きを
    伝えることができる

    View Slide

  33. View Slide

  34. 3
    チームに優しい数々の共有機能

    View Slide

  35. ブラウザ上でプレビュー用に共有
    開発用に共有
    クラウドに保存して共有

    View Slide

  36. ブラウザ上でプレビュー用に共有
    開発用に共有
    クラウドに保存して共有

    View Slide

  37. プレビュー用に共有&開発用に共有
    ・サイトの実際の動きのシミュレーション
    ・CSSで必要な数値やコードなどの情報を一覧で表示
    ・コメント機能でのコミュニケーション
    ・パスワードを有効にするとセキュリティ面でも安心

    View Slide

  38. ブラウザ上でプレビュー用に共有
    開発用に共有
    クラウドに保存して共有

    View Slide

  39. View Slide

  40. 複数のデバイスで共有

    View Slide

  41. 複数のメールアドレスで共有
    [email protected] [email protected]

    View Slide

  42. View Slide

  43. 4
    Adobeならではの
    デザインツールの連携

    View Slide

  44. Sketch XD
    Figma Studio
    Photoshop

    View Slide

  45. Sketch XD
    Figma Studio
    Photoshop

    View Slide

  46. Photoshop Illustrator After Effects
    XD
    ファイルの互換性を
    どんどん改善している

    View Slide

  47. Photoshop
    ・XDでPSD形式のファイルの読み込みが可能
    ・XD上でスマートオブジェクトの編集も可能
    https://helpx.adobe.com/jp/xd/kb/open‑photoshop‑files‑in‑xd.html
    Photoshop ファイルを XD で開くときにサポートされる機能

    View Slide

  48. Illustrator
    https://helpx.adobe.com/jp/xd/kb/open‑illustrator‑files‑in‑xd.html
    XDで Illustrator ファイルを開く際にサポートされる機能とサポートされない機能
    ・XDでAI形式のファイルの読み込みが可能
    ・XDのベクターコンテンツもSVG形式で保持

    View Slide

  49. 画面設計
    コンポーネント
    Photoshop Illustrator XD

    View Slide

  50. Sketch
    Sketchファイルも
    インポートできる

    View Slide

  51. View Slide

  52. 5
    充実したアップデートとプラグイン

    View Slide

  53. アップデート
    プラグイン

    View Slide

  54. ・頻度は2016年のPreviewリリースからほぼ毎月
    ・将来的には同時編集や複雑なパスの作成も可能に

    View Slide

  55. ・頻度は2016年のPreviewリリースからほぼ毎月
    ・将来的には同時編集や複雑なパスの作成も可能に

    View Slide

  56. Adobe Blog 連載
    Adobe XD アップデート
    追うための情報1
    詳細チェック用記事

    View Slide

  57. 公式 Adobe XD CC
    > 機能 > 最新機能
    追うための情報2
    歴史・概要チェック用コンテンツ

    View Slide

  58. AdobeXD
    新機能紹介動画
    追うための情報3
    おさらい用動画

    Twitter: @pino̲ebiebi

    View Slide

  59. アップデート
    プラグイン

    View Slide

  60. ・2018/10のプラグイン対応よりほぼ毎週追加
    ・より使いやすいようXDのカスタマイズが可能に
    GoogleSheets RepeatGrid
    Fitter Resize Artboard
    to Fit Content Stark Confetti

    View Slide

  61. View Slide

  62. 1. 量産と一括管理が得意なプロダクト設計
    2. 実際の動きを伝える2つの機能
    3. チームに優しい数々の共有機能
    4. Adobeならではのデザインツールの連携
    5. 充実したアップデートとプラグイン
    Adobe XDの5つの強み

    View Slide

  63. THANK YOU ☺


    isaikaori
    isaikaori

    View Slide