Deep Dive Adobe XD - レイアウト編

Adobe MAX

Transcript

1. View Slide

2. Profile
   有限会社アップルップル デザイナー
   Adobe XDUG 名古屋 主宰
   井⻫ 花織 (いおり)
   isaikaori isaikaori
   

   View Slide

3. GOAL
   実践的で編集しやすく
   触り⼼地の良いレイアウト
   

   View Slide

4. レイアウトの可変性を強化する
   3.
   リサイズの柔軟性を⾼める
   2.
   コンポーネント内のパターンを整理する
   1.
   実践的で編集しやすく 触り⼼地の良いレイアウト
   POINT
   

   View Slide

5. 実践的で編集しやすく 触り⼼地の良いレイアウト
   POINT
   レイアウトの可変性を強化する
   3.
   リサイズの柔軟性を⾼める
   2.
   コンポーネント内のパターンを整理する
   1.
   

   View Slide

6. リサイズの柔軟性を⾼める
   パディング・スタック・縦横⽐固定を使ったリサイズ
   2.
   レスポンシブリサイズの操作の特性
   1.
   関連機能： 縦横⽐を固定
   スタック
   パディング
   レスポンシブリサイズ
   

   View Slide

7. 1
   レスポンシブリサイズの
   操作の特性
   

   View Slide

8. レスポンシブリサイズの操作の特性
   1.
   テキストやオブジェクトなどの
   最⼩単位
   レスポンシブリサイズの対象は⼤きく4段階
   はじける つながる デジタル時代の⼀体空間
   Sparkling Connections
   Integrated Space
   for the Digital Generation
   Theme
   名古屋港ガーデン海浜公園
   10:00-19:00
   9/10 Thu.
   Fiesta!
   グループ
   アートボード（ON/OFFのみ）
   1
   2
   3
   コンポーネント
   4
   

   View Slide

9. レスポンシブリサイズの操作の特性
   1.
   デフォルト固定の決定要素=xy座標に基づく
   5%
   10%
   15%
   20%
   25%
   25%
   20%
   15%
   10%
   5%
   5%
   10%
   15%
   20%
   25%
   ⾼さ×2
   

   View Slide

10. レスポンシブリサイズの操作の特性
    1.
    デフォルト固定の決定要素=xy座標に基づく
    5%
    10%
    15%
    20%
    25%
    オブジェクトが向かい合う2辺に対して
    中央配置でない場合：
    幅/⾼さの15%以内に要素が
    接している辺に固定
    幅/⾼さの20%以内に要素が
    収まっている辺に固定
    1
    2
    1 2
    

    View Slide

11. レスポンシブリサイズの操作の特性
    1.
    デフォルト固定の決定要素=xy座標に基づく
    5%
    10%
    15%
    20%
    25%
    25%
    20%
    15%
    10%
    5%
    5%
    10%
    15%
    20%
    25%
    ⾼さ*2
    

    View Slide

12. レスポンシブリサイズの操作の特性
    1.
    デフォルト固定の決定要素=xy座標に基づく
    5%
    10%
    15%
    20%
    25%
    オブジェクトが向かい合う2辺に対して
    中央配置の場合：
    幅/⾼さの25%以内に要素が
    接している辺に固定
    3
    3
    

    View Slide

13. レスポンシブリサイズの操作の特性
    1.
    ⼿動設定のポイント：テキスト
    正しい位置に固定しても効かない時のチェック
    はじける つながる デジタル時代の⼀体空間
    Sparkling Connections Integrated
    Space
    Theme
    はじける つながる デジタル時代の⼀体空間
    Sparkling Connections Integrated Space
    for the Digital Generation
    Theme
    幅の⾃動調整：「幅を固定」はONになっているか？
    固定サイズ or ⾼さの⾃動調整：「幅を固定」はOFFになっているか？
    

    View Slide

14. レスポンシブリサイズの操作の特性
    1.
    ⼿動設定のポイント：ターゲット
    Tickert
    プレミアムチケットを申し込む
    ご希望のステージの優先エリア⼊場券とここだけしか⼿に⼊らないアーティストプレミ
    アムグッズがセットになったチケットです。定員となり次第販売終了となります。
    プレミアムチケット
    スペシャルチケットを申し込む
    ご希望のステージの優先エリア⼊場券がついたチケットです。定員となり次第販売終了
    スペシャルチケット
    イベント⼊場料と1ドリンクがついたお得なチケットです。
    通常チケット
    通常チケットを申し込む
    意図的なリサイズができなかった時は最初に
    「リサイズする対象の1階層下の要素」で確認
    対象グループ
    > グループ1
    > グループ2
    > グループ3
    優先される設定は階層の浅い順
    

    View Slide

15. レスポンシブリサイズの操作の特性
    1.
    ⼿動設定のポイント：ターゲット
    意図的なリサイズができなかった時は最初に
    「リサイズする対象の1階層下の要素」で確認
    Tickert
    プレミアムチケットを申し込む
    ご希望のステージの優先エリア⼊場券とここだけしか⼿に⼊らないアーティストプレミアムグッズが
    セットになったチケットです。定員となり次第販売終了となります。
    プレミアムチケット
    スペシャルチケットを申し込む
    ご希望のステージの優先エリア⼊場券がついたチケットです。定員となり次第販売終了となります。
    スペシャルチケット
    イベント⼊場料と1ドリンクがついたお得なチケットです。
    通常チケット
    通常チケットを申し込む
    対象グループ
    > グループ1
    > グループ2
    > グループ3
    優先される設定は階層の浅い順
    

    View Slide

16. レスポンシブリサイズの操作の特性
    1.
    ⼿動設定のポイント：ターゲット
    リサイズのON/OFF：メインコンポーネントで設定
    リサイズの固定位置：インスタンスでそれぞれ設定
    コンポーネント         を含む時
    通常チケットを申し込む
    イベント⼊場料と1ドリンクがついたお得なチケットです。
    通常チケット
    

    View Slide

17. レスポンシブリサイズの操作の特性
    1.
    ⼿動設定のポイント：ターゲット
    リサイズのON/OFF：メインコンポーネントで設定
    リサイズの固定位置：インスタンスでそれぞれ設定
    コンポーネント         を含む時
    通常チケットを申し込む
    イベント⼊場料と1ドリンクがついたお得なチケットです。
    通常チケット
    

    View Slide

18. 2
    パディング・スタック・縦横⽐固定を
    使ったリサイズ
    

    View Slide

19. パディング・スタック・縦横⽐固定を使ったリサイズ
    2.
    スタックの活⽤例：
    フォントサイズの調整
    © 2020 fiesta-nagoya.com
    #smoafre
    #smotliutb
    #proomarc
    #proomarc
    #herbluaxoo
    #sborjurjor
    #herbluaxoo
    #storblaosk
    #klosneesm
    #beefloe
    #storblaosk
    #choachies
    #skeitleofl
    #choachies
    #swui
    #smoafre
    #smoafre
    #xaebyoukr
    #smotliutb
    #yoamoewrordl
    #yoamoewrordl
    #herbluaxoo
    #pyoifrykw
    #klosneesm
    #klosneesm
    #beefloe
    〈 1 / 5 〉
    © 2020 fiesta-nagoya.com
    #klosneesm
    #klosneesm
    #beefloe
    #beefloe
    #storblaosk
    #sborjurjor
    #skeitleofl
    #choachies
    #choachies
    #swui
    #yoamoewrordl
    #herbluaxoo
    #proomarc
    #klosneesm
    #beefloe
    #storblaosk
    #storblaosk
    #smoafre
    #xaebyoukr
    #xaebyoukr
    #smotliutb
    #pyoifrykw
    #pyoifrykw
    #klosneesm
    #beefloe
    〈 1 / 5 〉
    

    View Slide

20. パディング・スタック・縦横⽐固定を使ったリサイズ
    2.
    スタックの活⽤例：
    フォントサイズの調整
    AND MORE
    協⼒パーキングエリア追加のご案内協⼒パーキングエリア追加の
    ご案内協⼒パーキングエリア追加のご案内協⼒パーキングエリア
    追加のご案内協⼒パーキングエリア追加のご案内協⼒パーキング
    エリア追加のご案内協⼒パーキングエリア追加のご案内協⼒パー
    キングエリア追加のご案内協⼒パーキングエリア追加のご案内
    2022/06/18
    ⼤好評につき追加ステージ＆フードブー
    ス出展決定！
    協⼒パーキングエリア追加のご案内協⼒パーキングエリ
    ア追加のご案内協⼒パーキングエリア追加のご案内協⼒
    パーキングエリア追加のご案内協⼒パーキングエリア追
    加のご案内協⼒パーキングエリア追加のご案内協⼒パー
    キングエリア追加のご案内協⼒パーキングエリア追加の
    ご案内協⼒パーキングエリア追加のご案内
    2022/06/18
    ⼤好評につき追加ステージ＆フ
    ードブース出展決定！
    AND MORE
    

    View Slide

21. パディング・スタック・縦横⽐固定を使ったリサイズ
    2.
    パディングのリサイズ活⽤例：
    フィルターを固定する 対象グループ
    > filter
    > img
    

    View Slide

22. パディング・スタック・縦横⽐固定を使ったリサイズ
    2.
    縦横⽐固定を使ったリサイズ
    Auto Width
    位置ズレが発⽣する
    Auto Width
    画像の場合：
    

    View Slide

23. パディング・スタック・縦横⽐固定を使ったリサイズ
    2.
    縦横⽐固定を使ったリサイズ
    Auto Width
    フォントサイズが変わる
    画像+shiftの場合：
    Auto Width
    

    View Slide

24. パディング・スタック・縦横⽐固定を使ったリサイズ
    2.
    縦横⽐固定を使ったリサイズ
    エリアサイズが変わる
    画像+shiftの場合：
    Fixed Size
    Fixed Size
    

    View Slide

25. パディング・スタック・縦横⽐固定を使ったリサイズ
    2.
    縦横⽐固定を使ったリサイズ
    エリアサイズが変わる
    画像+shiftの場合：
    Auto Height
    Auto Height
    

    View Slide

26. パディング・スタック・縦横⽐固定を使ったリサイズ
    2.
    縦横⽐固定を使ったリサイズ
    Auto Width
    位置固定+背景縦横⽐固定
    Auto Width
    グループ全体の場合：
    

    View Slide

27. パディング・スタック・縦横⽐固定を使ったリサイズ
    2.
    縦横⽐固定を使ったリサイズ
    位置固定+背景縦横⽐固定
    グループ全体の場合：
    Fixed Size
    Fixed Size
    

    View Slide

28. パディング・スタック・縦横⽐固定を使ったリサイズ
    2.
    縦横⽐固定を使ったリサイズ
    グループ全体の場合：
    Auto Height
    Auto Height
    位置固定+背景縦横⽐固定
    

    View Slide

29. レイアウトの可変性を強化する
    パディングとスタックを掛け合わせたレイアウト
    3.
    スタックを⾒据えたグループの考え⽅
    2.
    リピートグリッドとスタックの⽐較
    1.
    関連機能： スタック
    パディング
    リピートグリッド
    

    View Slide

30. 1
    リピートグリッドと
    スタックの⽐較
    

    View Slide

31. リピートグリッド
    + ⾼さの⾃動調整テキスト
    + コンポーネント
    2022/08/25
    協⼒パーキングエリア追加のご案内
    2022/08/18
    会場限定ステージグッズ第3弾発表！
    2022/07/21
    メディア掲載：「地元最⼤級の屋外フェス始動！主
    催者の思いと実現したい取り組みとは」
    リピートグリッドとスタックの⽐較
    1
    パーツの量産が得意
    格⼦状のレイアウトが得意
    テキストの流し込みができる
    グリッドを超えた管理
    余⽩管理の柔軟性に乏しい
    

    View Slide

32. リピートグリッド
    + ⾼さの⾃動調整テキスト
    + コンポーネント
    2022/07/21
    メディア掲載：「地元最⼤級の屋外フェス始動！主
    催者の思いと実現したい取り組みとは」
    2022/08/18
    会場限定ステージグッズ第3弾発表！
    2022/08/25
    協⼒パーキングエリア追加のご案内
    リピートグリッドとスタックの⽐較
    1
    パーツの量産が得意
    スタック
    格⼦状のレイアウトが得意
    テキストの流し込みができる
    グリッドを超えた管理
    余⽩管理の柔軟性◎
    

    View Slide

33. リピートグリッドとスタックの⽐較
    1
    Gallery
    AND MORE
    © 2020 fiesta-nagoya.com
    スタック+ コンポーネント
    格⼦状以外のグリッドが得意
    パーツの調整が容易
    順序の⼊れ替えができる
    グリッドを超えた管理
    余⽩管理の柔軟性◎
    

    View Slide

34. リピートグリッドとスタックの⽐較
    1
    格⼦状以外のグリッドが得意
    パーツの調整が容易
    順序の⼊れ替えができる
    ⽅向の転換が得意
    コンビニ⽀払い
    クレジットカード
    必須
    ⽀払い⽅法
    決済情報
    コンビニ⽀払い
    クレジットカード
    必須
    ⽀払い⽅法
    決済情報
    スタック+ コンポーネント
    グリッドを超えた管理
    余⽩管理の柔軟性◎
    

    View Slide

35. 2
    スタックを⾒据えた
    グループの考え⽅
    

    View Slide

36. デフォルトの縦横決定と⾃動グルーピング
    スタックを⾒据えたグループの考え⽅
    2
    スタックが⽔平⽅向(横)になる時：
    y軸に並ぶ要素が⾃動的にグループ化
    スタックが垂直⽅向(縦)になる時：
    x軸に並ぶ要素が⾃動的にグループ化
    グループ
    グループ
    グループ
    

    View Slide

37. 計画的なグルーピング
    スタックを⾒据えたグループの考え⽅
    2
    

    View Slide

38. 計画的なグルーピング
    スタックを⾒据えたグループの考え⽅
    2
    インナーの要素は
    「HTMLにした時divで囲う」
    単位でのグループ化がおすすめ
    グリッドの場合、事前に
    内側で繰り返す要素を
    揃えたい軸でグループ化する
    

    View Slide

39. 重なる要素同⼠の無限グルーピング
    スタックを⾒据えたグループの考え⽅
    2
    開催⽇ 2022年9⽉10⽇（⾦）
    開催時間 10:00-19:00（9:00より⼊場可能）
    会場 名古屋港ガーデン海浜公園ホール
    主催 この世界の平和を本気で願っている会
    リピートグリッドなどで線を重ねた単位同⼠のスタックは
    「全ての要素が1つにまとめられるグループ化」が繰り返される
    

    View Slide

40. 重なる要素同⼠の無限グルーピング
    スタックを⾒据えたグループの考え⽅
    2
    ex. テーブル：線を重ねない表現
    2022年9⽉10⽇（⾦）
    開催⽇
    10:00-19:00（9:00より⼊場可能）
    開催時間
    2022年9⽉10⽇（⾦）
    開催⽇
    10:00-19:00（9:00より⼊場可能）
    開催時間
    2022年9⽉10⽇（⾦）
    開催⽇
    10:00-19:00（9:00より⼊場可能）
    開催時間
    

    View Slide

41. 重なる要素同⼠の無限グルーピング
    スタックを⾒据えたグループの考え⽅
    2
    ex. テーブル：線を重ねない表現
    2022年9⽉10⽇（⾦）
    開催⽇
    10:00-19:00（9:00より⼊場可能）
    開催時間
    スタックの⽅向の転換を使えばレイアウト変更も⼀瞬◎
    2022年9⽉10⽇（⾦）
    開催⽇
    10:00-19:00（9:00より⼊場可能）
    開催時間
    2022年9⽉10⽇（⾦）
    開催⽇
    10:00-19:00（9:00より⼊場可能）
    開催時間
    

    View Slide

42. 3
    パディングとスタックを
    掛け合わせたレイアウト
    

    View Slide

43. ⼆重パディングで仮想マージンを設定する
    パディングとスタックを掛け合わせたレイアウト
    2
    内側グループ：
    テキストと⻑⽅形のパディングを設定
    外側グループ：
    仮想マージン(下マージン)を設定
    

    View Slide

44. ⼆重パディングで仮想マージンを設定する
    パディングとスタックを掛け合わせたレイアウト
    2
    コンビニ⽀払い
    クレジットカード
    必須
    ⽀払い⽅法
    決済情報
    placeholder
    必須
    メールアドレス
    placeholder
    必須
    お名前
    お客様情報
    ⼊⼒項⽬間の余⽩：
    マージン&インスタンスで管理
    ex. フォーム画⾯
    セクション間の余⽩：
    スタックで管理
    編集回数の削減◎
    ファイル全体での余⽩管理◎
    

    View Slide

45. View Slide