面倒な配置作業を効率的に！Adobe XD のコンテンツに応じるレイアウト機能「スタック」の使い方

デザインが複雑だったり細部へと作業が進むにつれて、レイアウト変更が面倒に感じられるようになるものです。要素を並べ替えたり、あとから要素を追加したりすると、レイアウト調整に大量の時間を費やすこともあるでしょう。これは、デザインプロセスの他の重要な作業から奪われる貴重な時間です。Adobe XDのスタックは、こうした作業をより効率的にするために設計されました。

スタックとは？

スタックは、「コンテンツに応じるレイアウト機能」で、コンテンツの再配置ををシンプルかつ容易に行えます。もうひとつのコンテンツに応じるレイアウト機能であるパディングと連携して動作し、複雑な配置の調整やコンテンツの追加の際に、積み重ねの順番を入れ替えるように動的にレイアウト調整を行います。

スタックを作成するには、まず、スタックに含めるオブジェクトをすべて選択してから、グループを作成します（Cmd/Ctrl + G）。その際に選択するオブジェクトのサイズや形状は自由です。そのため、スタックは幅広いコンテンツに利用できます。

作成したグループを選択すると、プロパティインスペクタの［レイアウト］セクションに「スタック］チェックボックスが表示されます。このチェックボックスをオンにするとスタックが有効化され、スタックの方向（垂直または水平）が自動的に検出されます。方向を変えたい場合は、アイコンをクリックして切り替えます。

スタックが有効化されたグループでは、オブジェクトを選択して他のオブジェクトの位置にドラッグすると、行われた操作をAdobe XDが検出し、適切にオブジェクトの再配置が行われます。

スタックを使う

それでは、スタックが役立ちそうなデザインを見てみましょう。下の画像はデスクトップ向けのノート作成アプリケーションのUIです。ウインドウ内には3つのパネル、すなわちコンテンツの列があります。左端のパネルは、コンテンツを整理するフォルダです。中央のパネルには選択したフォルダ内のノート一覧が表示され、右端のパネルにはノートの詳細が表示されます。どのパネルにも、スタックを使用できるコンテンツが含まれています。

まず、中央のパネルから見てみましょう。縦に並ぶそれぞれのノートには、日付、タイトル、説明、タグを含むグループが定義されています。デザインプロセスが先に進むと、ソートやフィルタのテストをするためにノートの再配置をすることになるかもしれません。

スタックの作成

このパネルをスタックで並べ替えられるよう設定するには、すべてのノートを選択し、それらを1つのグループにまとめます。作成したグループを選択してスタックを有効にすると、XDは 「垂直」 方向を自動的に選択します。これで、上下の並べ替えができるようになります。

グループをダブルクリックしてグループ内のオブジェクトを再配置します。ノートを1つ選択して上下にドラッグするだけで、リスト内の順序を変更できます。見てのとおりとても簡単です。

ノート自体にも同様の操作が行えます。このサンプルではノートが既にコンポーネントとして設定されています。そのため、マスターコンポーネントを編集してスタックを有効にすると、すべてのインスタンスにもスタックが適用されます。ノートの1つを右クリックし、「マスターコンポーネントを編集」を選択します。そして、コンポーネント内の要素を選択してグループを作成すれば、スタックを有効にできます。

このサンプルでは、水平に並ぶタグはグループ化されていません。望ましくない動作を防ぐために、Adobe XDは、「垂直方向のスタック内に水平に並ぶオブジェクト」を自動的にグループ化します。手動でグループ化する必要はありません。

そのため、必要な作業は、新しく作成されたタグのグループを選択した状態で、スタックを有効にするだけです。これで水平方向のスタックが設定され、タグの並べ替えを素早く行えるようになります。

間隔の調整

要素間の間隔が適切でない場合には、間隔の調整も簡単です。間隔の調整方法については、ノートの詳細パネルを例に説明します。

ノートの詳細パネルのコンテンツは複雑に入り組んでいますが、いくつかのスタックが含まれているため再配置は簡単です。では、2つの要素の間隔が適切でない場合はどうしたらよいでしょうか？

スタックを編集状態にして、Sキーを押したまま要素間のスペースにカーソルを置くと、ドラッグしてカーソル下の間隔を変更できます。

スタック内の間隔を変更するには、調整したいスペースにカーソルを合わせてSキーを押す

タグのグループのように、要素間の間隔を均一にしたい場合は、Shift+Sキーを押しながら要素間に置いたカーソルを移動すると、スタック内のすべての間隔を一緒にドラッグ操作で変更できます。この場合、スタック内に設定されていた個々の間隔は上書きされることに注意しましょう。

スタック内のスペースの上にカーソルを置いたまま Shift+S キーを押すと、間隔をまとめて変更できる

位置揃えの調整

スタック内の要素は垂直または水平方向に並べられていますが、完全に位置合わせを維持しなければならないわけではありません。そのため、下の図のように、チャートやタイムラインなどの要素を配置して、さらに並べ替えを行うことができます。

垂直方向のスタック内で、要素を左または右にドラッグして位置をずらす

たとえば垂直方向のスタックでは、要素を左右にドラッグして位置を変えて、要素を上下にドラッグしてコンテンツの順序を変更する作業を繰り返し行えます。ガントチャートやユニークなフォトギャラリーのレイアウトの作成に利用することができます。

キーボードショートカットで並べ替え

スタック内の要素を選択すると、キーボードショートカットを使用して順序を調整できます。CommandキーまたはControlキーを押し、角括弧の左右どちらかを押すと、スタック内で選択されている要素が上下または左右に移動します。

スタックとコンポーネント

スタックはそれだけで強力な機能ですが、コンポーネントと組み合わせると、さらに新たな可能性が広がります。

今回のノートアプリのサンプルでは、ウインドウ上部のタブからコンポーネントを作成できます。タブ内の再配置が容易になるように、コンポーネントには水平方向のスタックを設定します。作成したコンポーネントをコピーしてインスタンスを作成すると、マスターコンポーネントへの変更がインスタンスに与える影響を確認できます。

上の画像では、マスターコンポーネントのスタックに対する変更がインスタンスに引き継がれています。これは、スタック内の要素の位置がインスタンスで上書きされていないためです。インスタンスで属性が上書きされると、マスターへの更新は反映されなくなります。

上の画像の例では、スタックされた要素の順序と色がインスタンス側で変更されているため、これらの属性がマスター側で変更されても、インスタンスは追従しません。ただし、テキストは変更されていないので、マスターに行われたテキストの変更はインスタンスに反映されます。

試してみよう！

スタックを使えば、マウス操作により強力なレイアウトコントロール機能を駆使して、ニーズに応じてコンテンツを素早く再配置できるようになります。Notes.XD UIキットをダウンロードして、早速スタックを試してみましょう！

この記事はMaking Efficient Layout Changes with Stacks in Adobe XDの抄訳です