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

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

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

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

isaikaori

August 31, 2019
Tweet

More Decks by isaikaori

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. 実際のファイルへ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. メインカラム サブカラム
    メインカラム
    グリッドレイアウトのあたりをつける

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  34. 同一のコンポーネントにする場合①
    カラーのみ変化
    マスター インスタンス
    ボタン1
    ボタン1
    ボタン1
    ボタン1
    ボタン1
    ボタン1
    ボタン1
    ボタン1
    ボタン1
    カラーの変更はアセットの方で行う

    View Slide

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

    View Slide

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

    View Slide

  37. 新規コンポーネント
    個人的おすすめ

    View Slide

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

    2019年00月00日(月)
    カテゴリー名 #タグ #タグ #タグ #タグ #タグ
    #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ
    エントリータイトルエン
    トリータイトルエントリ
    ータイトル
    2019年00月00日(月)
    カテゴリー名 #タグ #タグ #タグ #タグ #タグ
    #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ #タグ
    マスター インスタンス
    縦横比固定の画像など
    X軸Y軸双方のサイズ変更がある時

    View Slide

  39. 新規コンポーネントにする場合②
    マスター インスタンス
    ボタン1 ボタン1
    ボタン1 ボタン1
    枠線の太さなどアセットで
    一括変更できない部分を伴う時
    ボタン1

    View Slide

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

    View Slide

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

    View Slide

  42. リピートグリッド×コンポーネント
    1 2 3 4 5 1 2 3 ⋯ 5
    メリット:
    スタイルの一部を変更できる

    View Slide

  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

    View Slide

  44. まとめ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide