実務で活かすXD!制作を支える取り組みと代表機能の活用術

Fb3f3c151603102a5e60b197a7dfbeb7?s=47 isaikaori
August 31, 2019

 実務で活かすXD!制作を支える取り組みと代表機能の活用術

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

Fb3f3c151603102a5e60b197a7dfbeb7?s=128

isaikaori

August 31, 2019
Tweet

Transcript

  1. 実務で活かすXD! 制作を支える取り組みと 代表機能の活用術 Adobe XD ユーザーグループ名古屋 XDUG名古屋 井斉花織

  2. 有限会社アップルップル Webデザイナー XDUG名古屋 管理人 井斉花織 自己紹介

  3. 2018/04 06 2019/03 08現在 弊社のWebデザインツール事情 最近XDがいい感じ! By先輩デザイナー デザイナー同士で ガイドラインを作成

  4. 具体的な活用例 ①Webサイトのデザイン+アセット類の作成 ②自社開発CMSのプロトタイプ用ファイル

  5. 具体的な活用例 ③テーマ開発時のアニメーションの伝達 ④自社開発CMSの紹介ムービー https://www.a‒blogcms.jp/

  6. バリバリ使用中 ⋯など

  7. 今日お話ししたいこと 実務

  8. 今日お話ししたいこと 1 制作を円滑にするための取り組み デザイン時に活躍している代表機能の ちょっとした小技集 2

  9. 制作を円滑にするための 取り組み 1

  10. 取り組んだこと ガイドラインの 作成 テンプレートの 作成

  11. 取り組んだこと ガイドラインの 作成 テンプレートの 作成

  12. ファイル作成時にしておきたいこと、 気をつけたいことを共有し、 デザイナー同士で共通した 作成方法の認識を持っておく ガイドラインの目的

  13. 作成フロー 1 2 先輩デザイナーが普段やっている ファイルの作り方をドキュメント化 デザイナー同士でミーティングをして 意見を交換、認識をすり合わせる

  14. ①アートボードの命名規則 ガイドラインの内容 XDの特徴

  15. ②アセット ガイドラインの内容 (図)ラベルの変化など

  16. ③社内での共有方法 ガイドラインの内容 バージョン管理の 方法など

  17. ガイドラインで共有したこと 1 XDでできること&取り組むこと XDが不得意なところを補う方法 2

  18. 取り組んだこと ガイドラインの 作成 テンプレートの 作成

  19. 毎回揃えるようなパーツ (レギュレーション、アセット類) を予め用意して 少しでも工数を削減する テンプレートの目的

  20. 実際のファイルへ

  21. 取り組んだこと ガイドラインの 作成 テンプレートの 作成

  22. 1 何かにつけて迷う時間が少なくなった 作成者に影響を受けず ファイル内の巡回がしやすくなった 2 よかったこと 3 今後の新人教育や引き継ぎでも活躍しそう

  23. 1 アップデートに伴う見直しも必要 レギュレーションはガチガチに揃えすぎない (義務でなく努力) 2 課題と戒め

  24. デザイン時に活躍している 代表機能の ちょっとした小技集 2

  25. 1 リピートグリッド コンポーネント 2

  26. 1 リピートグリッド コンポーネント 2

  27. エントリータイトルエントリータイト ルエントリータイトル 2019年00月00日(月) カテゴリー名 エントリータイトルエントリータイト ルエントリータイトル 2019年00月00日(月) カテゴリー名 エントリータイトルエントリータイト ルエントリータイトル

    2019年00月00日(月) カテゴリー名 エントリータイトルエントリータイト ルエントリータイトル 2019年00月00日(月) カテゴリー名 エントリータイトルエントリータイト ルエントリータイトル 2019年00月00日(月) カテゴリー名 リピートグリッド
  28. メインカラム サブカラム メインカラム グリッドレイアウトのあたりをつける

  29. 1 リピートグリッド コンポーネント 2

  30. コンポーネント マスター インスタンス テキスト・画像・カラー・要素の有無・位置をそれぞれ変更することができる ボタン1 タイトルが入ります。タイ トルが入ります。 ラベル ラベル ボタン1

    タイトルが入ります。タイ トルが入ります。 ラベル ラベル
  31. ただし同一コンポーネントで バリエーションを広げすぎると 後からの編集が大変⋯ マスター インスタンス エントリータイトルエ ントリータイトルエン トリータイトル 2019年00月00日(月) カテゴリー名

    #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ エントリータイトルエ ントリータイトルエン トリータイトル 2019年00月00日(月) カテゴリー名 #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ エントリータイトルエ ントリータイトルエン トリータイトル #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ エントリータイトルエ ントリータイトルエン トリータイトル インスタンス インスタンス
  32. バリエーションを広げる時の線引き 同一コンポーネント 新規コンポーネント カラーのみ変化 位置変更のない要素の変化 X軸/Y軸のみのサイズの変化 X軸Y軸双方のサイズ変更を 含む時 アセットで 一括変更できない部分を

    伴う時
  33. 同一コンポーネント 個人的におすすめ

  34. 同一のコンポーネントにする場合① カラーのみ変化 マスター インスタンス ボタン1 ボタン1 ボタン1 ボタン1 ボタン1 ボタン1

    ボタン1 ボタン1 ボタン1 カラーの変更はアセットの方で行う
  35. 同一のコンポーネントにする場合② ラベルなど位置変更のない要素の変化 マスター インスタンス ボタン1 タイトルが入ります。タイ トルが入ります。 マスターはなるべく全ての情報量が詰まった状態で作成する ボタン1 タイトルが入ります。タイ

    トルが入ります。 ラベル ボタン1 タイトルが入ります。タイ トルが入ります。 ラベル
  36. 同一のコンポーネントにする場合③ X軸/Y軸のみのサイズの変化 PCの見出し マスター インスタンス 必ずレスポンシブリサイズを併用する マスター ボタン1 タイトルが入ります。タイ トルが入ります。

    ラベル インスタンス ボタン1 タイトルが入ります。 ラベル PCの見出し
  37. 新規コンポーネント 個人的おすすめ

  38. 新規コンポーネントにする場合① エントリータイトルエン トリータイトルエントリ ータイトル 2019年00月00日(月) カテゴリー名 #タグ #タグ #タグ #タグ

    #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ エントリータイトルエントリ ータイトルエントリータイト ル 2019年00月00日(月) カテゴリー名 #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ エントリータイトルエン トリータイトルエントリ ータイトル 2019年00月00日(月) カテゴリー名 #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ マスター インスタンス 縦横比固定の画像など X軸Y軸双方のサイズ変更がある時
  39. 新規コンポーネントにする場合② マスター インスタンス ボタン1 ボタン1 ボタン1 ボタン1 枠線の太さなどアセットで 一括変更できない部分を伴う時 ボタン1

  40. バリエーションを広げる時の線引き 同一コンポーネント 新規コンポーネント カラーのみ変化 位置変更のない要素の変化 X軸/Y軸のみのサイズの変化 X軸Y軸双方のサイズ変更を 含む時 アセットで 一括変更できない部分を

    伴う時
  41. 1 リピートグリッド コンポーネント 2 ×

  42. リピートグリッド×コンポーネント 1 2 3 4 5 1 2 3 ⋯

    5 メリット: スタイルの一部を変更できる
  43. リピートグリッド×コンポーネント こんな時に大活躍 1 2 3 4 5 6 7 8

    9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
  44. まとめ

  45. 今日お話ししたこと 実務

  46. 今日お話ししたこと 1 制作を円滑にするための取り組み デザイン時に活躍している代表機能と ちょっとした小技集 2

  47. ※今回紹介したのはほんの一例 他にもたくさんのユーザーさんが いろんな工夫をしてる

  48. ユーザーグループで 聞いて話して調べて学んで いろんなアイデアに出会おう!

  49. ご静聴ありがとうございました Twitter:@isaikaori Facebook:isaikaori Blog:http://isaikaori.com