【Adobe XD】スタック機能を分かりやすく解説【初学者向け】

コーディング

こんにちはTERUです。
フリーランスでホームページやECサイト制作を仕事にしています。

読者の悩み

  • Adobe XDのスタック機能について知りたい

スタック機能は、グループ内のオブジェクト同士を直感的に入れ替えることができる機能です。
使いこなせるとデザイン作業を効率化することができます。

本記事では、スタックの特徴や使い方から、WEB制作をする上でのオススメの利用方法まで具体的に説明します。

この記事を読んで分かること

  • Adobe XDのスタック機能の特徴と使い方について理解できる

目次

本記事の信頼性

  • フリーランスとしてWordPress案件を中心としたWeb制作をメインに仕事をしている
  • Web制作会社にてディレクターの経験もあり
  • Web制作のフリーランスチーム(GrabAir)でも活動中

Adobe XDをまだ持っていいないという方はまず自分のPCにインストールしてください。

illustratorやPhotoshopも使われる方は、コンプリートプランがオススメです。
とりあえずAdobe XDだけ使えればいいという方は赤枠の単体プランで十分です。
adobeプラン

スポンサードサーチ

スタックとは?【Adobe XD】

スタックとは?【Adobe XD】
スタックについて、Adobe公式サイトでは下記のように説明されています。

Adobe XD のスタックを使用すると、グループ内のオブジェクト間に固定スペースを定義できます。
スタック内のオブジェクトのサイズ変更、並べ替え、または修正を行うと、XD はオブジェクト間の定義済みスペースを自動的に保持します。

>>スタックを使用して動的なデザインを作成する

ちょっと難しいですね。。

結論、グループ化したコンテンツの入れ替えが直感的に操作でき、余白も自動で調整してくれる機能です。

僕が実際に操作して感じたのは、CSSでよく使うflexboxのようなレイアウト操作が可能になるイメージです。

使ってみるのが一番理解が早いので、早速スタックの作成方法と使い方について説明していきますね。

スポンサードサーチ

スタックの作成方法【Adobe XD】

スタックの作成方法【Adobe XD】
スタックの作成は下記のステップで行います。

  • 対象オブジェクトをグループ化
  • スタイルパネルからスタックを選択

※今回は、よくあるカード型デザインを使います。

手順①:アートボード上でスタックにしたいオブジェクトを全て選択します。
スタックの作成方法

手順②:選択したオブジェクトを右クリックー「グループ化」を選択し、グループ化します。
スタックの作成方法2

ショートカットキー

  • Macの場合:command + G
  • Windowsの場合:Ctrl + G

手順③:画面右にあるスタイルパネルから「スタック」を選択します。
スタックの作成方法3
以上でスタックの作成は完了です。

スタックを作成することで、グループ化したオブジェクトの中身がいくつかのブロックに分けられ、ブロック間で要素の入れ替えが簡単にできるようになります。
スタックの作成方法4

詳細は、スタックの使い方で説明します!

スポンサードサーチ

スタックの使い方【Adobe XD】

スタックの使い方【Adobe XD】
ここでは、スタック化された要素の操作方法について下記の2つを説明します。

  • オブジェクト同士を入れ替える方法
  • オブジェクト同士の余白を調整する方法

オブジェクト同士を入れ替える方法

オブジェクト同士の入れ替えは、横方向と縦方向の2パターンがあります。

横方向に入れ替えする場合

手順①:スタックされた要素を選択します。
横方向に入れ替えする場合

手順②:スタイルパネルから「水平方向スタック」が選択されていることを確認します。
横方向に入れ替えする場合2

手順③:赤枠の要素をドラック&ドロップで簡単に入れ替えることができます。
※Shiftキーを押しながらドラック&ドロップすると操作しやすいです。
横方向に入れ替えする場合3

実際の操作画面

オブジェクト同士を入れ替える方法

縦方向に入れ替えする場合

手順①:スタイルパネルから「垂直方向スタック」を選択します。
縦方向に入れ替えする場合

手順②:スタック内の要素が縦方向に並びます。
※赤枠の要素をドラック&ドロップで簡単に入れ替えることができます。
縦方向に入れ替えする場合2

実際の操作画面

実際の操作画面

補足:スタック内にスタックを設定できる

スタック内の要素内で、さらにスタックを設定することができます。

分かりづらいので画像と動画で説明します。

手順①:先ほどの垂直方向スタックのオブジェクトを選択します。
スタック内にスタックを設定できる
現時点では、赤枠箇所の入れ替えが可能です。
スタック内にスタックを設定できる2

手順②:文章+ボタン箇所のグループを選択し、スタックを選択します。
スタック内にスタックを設定できる3

手順③:赤枠箇所が入れ替え可能になります。
スタック内にスタックを設定できる4

実際の操作画面

実際の操作画面

オブジェクト同士の余白を調整する方法

スタック化したオブジェクト同士の余白を調整する方法を説明します。

手順①:スタック内のオブジェクト間にマウスを持っていくと余白(ピンク色)が表示されます。
オブジェクト同士の余白を調整する方法

手順②:余白(ピンク色)をドラッグすることで余白を調整できます。
オブジェクト同士の余白を調整する方法2

パディング機能を使ってバランス調整

パディングは、レイアウト内の上下左右の余白を調整する機能です。
パディング機能を組み合わせることでカード型やリスト型のレイアウトをスタック化する際に余白のバランスを調整することができます。

手順①:レイアウトをスタック化するとパディング機能が有効になります。
パディング機能を使ってバランス調整

デフォルトでは、「全てのパディング値」が選択されており、上下左右のパディング値はバラバラです。

手順②:「パディング」を選択し、上下左右のパディング値を均等にします。
パディング機能を使ってバランス調整2

以上がスタックの使い方になります。

スポンサードサーチ

スタックのオススメ利用方法【WEB制作向け】

スタックのオススメ利用方法【WEB制作向け】
WEB制作向けに、スタックのオススメ利用方法を2つご紹介します。

  • スタックにしておくと便利なパーツ
  • リピートグリッド内でコンテンツを入れ替えする方法(スタック活用)

スタックにしておくと便利なパーツ

web制作において、スタックにしておくと便利なパーツは下記になります。

  • グローバルメニュー
  • サイドバー
  • リスト型/カード型レイアウト

「グローバルメニュー」や「サイドバー」など、文言等は違うけど同じデザインが繰り返されるレイアウト1にはスタックを利用すると便利です。

メニュー系は制作途中で中身の順番が変更になることがあります。
これまでは、メニュー順の変更は、地味に時間がかかってましたが、スタック化することで簡単に対応可能になります。

リスト型やカード型のレイアウトについても、テキストと画像の配置をあとで変更する場合があるのでスタック化しておくのがオススメです。

リピートグリッド内でコンテンツを入れ替える方法(スタック活用)

スタック機能を活用することで、リピートグリッドを使って複製したレイアウトを簡単に入れ替えたりすることができます。
※カード型のリピートグリッドを例に説明します。

手順①:「グリッドをグループ解除」を選択し、リピートグリッドを一度解除します。
スタック活用

手順②:対象のオブジェクトを全て選択し、右クリックー「グループ化」を選択します。
スタック活用2

手順③:グループ化すると画面右のメニューにスタックが表示されるのでチェックをつけます。
スタック活用3

グループ内でオブジェクトの入れ替えが簡単に移動できるようになります。
スタック活用イメージ

補足

スタック機能の縦並びをチェックすることでグループ内のレイアウトを縦並びに変更できます。
※もちろん縦並びの中で、オブジェクトの入れ替えができます。
スタック活用4

スポンサードサーチ

Adobe XDの関連記事

コンポーネント機能

リピートグリッド機能

スポンサードサーチ

まとめ

まとめ
今回は、Adobe XDの「スタック」機能について、特徴と使い方を説明しました。

Adobe XDは、WEB制作をする上で利用頻度が高いツールなので、この機会に使えるようになりましょう!

▼Adobe XD公式ページ

コーディング作業でAdobe XDを使う場合は、下記のサイトが参考になります。

サイト制作のご依頼について

フリーランスチームにて、ホームページ・ECサイトの制作も行っております。
計画立案から制作、納品、運用までトータルでサポートいたしますのでお気軽にご相談ください。
※初回相談無料
>>サイト制作お問い合わせ(無料相談)

スポンサードサーチ