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

Deep Dive Adobe XD - レイアウト編

Fb3f3c151603102a5e60b197a7dfbeb7?s=47 isaikaori
October 22, 2020

Deep Dive Adobe XD - レイアウト編

Adobe MAX

Fb3f3c151603102a5e60b197a7dfbeb7?s=128

isaikaori

October 22, 2020
Tweet

Transcript

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

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

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

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

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

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

  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
  9. レスポンシブリサイズの操作の特性 1. デフォルト固定の決定要素=xy座標に基づく 5% 10% 15% 20% 25% 25% 20%

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

    幅/⾼さの15%以内に要素が 接している辺に固定 幅/⾼さの20%以内に要素が 収まっている辺に固定 1 2 1 2
  11. レスポンシブリサイズの操作の特性 1. デフォルト固定の決定要素=xy座標に基づく 5% 10% 15% 20% 25% 25% 20%

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

    幅/⾼さの25%以内に要素が 接している辺に固定 3 3
  13. レスポンシブリサイズの操作の特性 1. ⼿動設定のポイント:テキスト 正しい位置に固定しても効かない時のチェック はじける つながる デジタル時代の⼀体空間 Sparkling Connections Integrated

    Space Theme はじける つながる デジタル時代の⼀体空間 Sparkling Connections Integrated Space for the Digital Generation Theme 幅の⾃動調整:「幅を固定」はONになっているか? 固定サイズ or ⾼さの⾃動調整:「幅を固定」はOFFになっているか?
  14. レスポンシブリサイズの操作の特性 1. ⼿動設定のポイント:ターゲット Tickert プレミアムチケットを申し込む ご希望のステージの優先エリア⼊場券とここだけしか⼿に⼊らないアーティストプレミ アムグッズがセットになったチケットです。定員となり次第販売終了となります。 プレミアムチケット スペシャルチケットを申し込む ご希望のステージの優先エリア⼊場券がついたチケットです。定員となり次第販売終了

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

    スペシャルチケットを申し込む ご希望のステージの優先エリア⼊場券がついたチケットです。定員となり次第販売終了となります。 スペシャルチケット イベント⼊場料と1ドリンクがついたお得なチケットです。 通常チケット 通常チケットを申し込む 対象グループ > グループ1 > グループ2 > グループ3 優先される設定は階層の浅い順
  16. レスポンシブリサイズの操作の特性 1. ⼿動設定のポイント:ターゲット リサイズのON/OFF:メインコンポーネントで設定 リサイズの固定位置:インスタンスでそれぞれ設定 コンポーネント         を含む時 通常チケットを申し込む イベント⼊場料と1ドリンクがついたお得なチケットです。 通常チケット

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

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

  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 〉
  20. パディング・スタック・縦横⽐固定を使ったリサイズ 2. スタックの活⽤例: フォントサイズの調整 AND MORE 協⼒パーキングエリア追加のご案内協⼒パーキングエリア追加の ご案内協⼒パーキングエリア追加のご案内協⼒パーキングエリア 追加のご案内協⼒パーキングエリア追加のご案内協⼒パーキング エリア追加のご案内協⼒パーキングエリア追加のご案内協⼒パー

    キングエリア追加のご案内協⼒パーキングエリア追加のご案内 2022/06/18 ⼤好評につき追加ステージ&フードブー ス出展決定! 協⼒パーキングエリア追加のご案内協⼒パーキングエリ ア追加のご案内協⼒パーキングエリア追加のご案内協⼒ パーキングエリア追加のご案内協⼒パーキングエリア追 加のご案内協⼒パーキングエリア追加のご案内協⼒パー キングエリア追加のご案内協⼒パーキングエリア追加の ご案内協⼒パーキングエリア追加のご案内 2022/06/18 ⼤好評につき追加ステージ&フ ードブース出展決定! AND MORE
  21. パディング・スタック・縦横⽐固定を使ったリサイズ 2. パディングのリサイズ活⽤例: フィルターを固定する 対象グループ > filter > img

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

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

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

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

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

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

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

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

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

  31. リピートグリッド + ⾼さの⾃動調整テキスト + コンポーネント 2022/08/25 協⼒パーキングエリア追加のご案内 2022/08/18 会場限定ステージグッズ第3弾発表! 2022/07/21

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

    2022/08/25 協⼒パーキングエリア追加のご案内 リピートグリッドとスタックの⽐較 1 パーツの量産が得意 スタック 格⼦状のレイアウトが得意 テキストの流し込みができる グリッドを超えた管理 余⽩管理の柔軟性◎
  33. リピートグリッドとスタックの⽐較 1 Gallery AND MORE © 2020 fiesta-nagoya.com スタック+ コンポーネント

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

    決済情報 コンビニ⽀払い クレジットカード 必須 ⽀払い⽅法 決済情報 スタック+ コンポーネント グリッドを超えた管理 余⽩管理の柔軟性◎
  35. 2 スタックを⾒据えた グループの考え⽅

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

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

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

  39. 重なる要素同⼠の無限グルーピング スタックを⾒据えたグループの考え⽅ 2 開催⽇ 2022年9⽉10⽇(⾦) 開催時間 10:00-19:00(9:00より⼊場可能) 会場 名古屋港ガーデン海浜公園ホール 主催

    この世界の平和を本気で願っている会 リピートグリッドなどで線を重ねた単位同⼠のスタックは 「全ての要素が1つにまとめられるグループ化」が繰り返される
  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より⼊場可能) 開催時間
  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より⼊場可能) 開催時間
  42. 3 パディングとスタックを 掛け合わせたレイアウト

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

  44. ⼆重パディングで仮想マージンを設定する パディングとスタックを掛け合わせたレイアウト 2 コンビニ⽀払い クレジットカード 必須 ⽀払い⽅法 決済情報 placeholder 必須

    メールアドレス placeholder 必須 お名前 お客様情報 ⼊⼒項⽬間の余⽩: マージン&インスタンスで管理 ex. フォーム画⾯ セクション間の余⽩: スタックで管理 編集回数の削減◎ ファイル全体での余⽩管理◎
  45. None