$30 off During Our Annual Pro Sale. View Details »

Deep Dive Adobe XD - レイアウト編

isaikaori
October 22, 2020

Deep Dive Adobe XD - レイアウト編

Adobe MAX

isaikaori

October 22, 2020
Tweet

More Decks by isaikaori

Other Decks in Design

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