Deep Dive Adobe XD - レイアウト編

Adobe MAX

Transcript

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. フォーム画⾯ セクション間の余⽩： スタックで管理 編集回数の削減◎ ファイル全体での余⽩管理◎