コムセント 社員ブログ

  1. TOP
  2. コムセント 社員ブログ
  3. 【Adobe Xd】スタック&パディング機能で作れるおすすめデザインとレイアウト

【Adobe Xd】スタック&パディング機能で作れるおすすめデザインとレイアウト

【Adobe Xd】スタック&パディング機能で作れるおすすめデザインとレイアウト

この記事の目次

Adobe Xdのスタック&パディング機能とは?

スタック機能とは、グループ化したコンテンツの入れ替えが簡単にできたり、余白の調整を自動でやってくれる便利な機能です。
パディング機能は天地左右のパディングを自動調整してくれる機能で、スタック機能の優秀なお供です。パディング機能については単体で使うこともできます。

スタック&パディングはグループ化したレイヤーに適用することができます。

【スタック機能】グループ化したレイヤーに適用するだけ!
【パディング機能】こちらもスタック機能同様、グループ化したレイヤーに適用するだけ!スタック機能と違い、この機能だけを適用することもできます。

例えばアイコン付きボタンであれば、これらの機能を適用するとアイコンの入れ替えと文字の打ち替えだけで、余白部分の調整を省略することができます。

スタックもパディングも、矢印キーやマウスを使わず、数値入力で細かく調整ができるのもポイントです。

余白部分の調整は自動でやってくれます

次の話題から早速、スタックとパディングを使用して作るおすすめのデザインとレイアウトを紹介していきます。

スタック&パディングで作るおすすめデザインとレイアウト

アイコン+文字の組み合わせ(ボタン、見出し、リンク等)

最初の例でも採り上げたように、アイコン付きのボタンはスタックとパディングを使って作ると非常に便利です。
ボタン以外にも見出しやリンクなど、アイコンと文字を組み合わせる機会は多くあります。
普通に作ると細かい調整が必要になることが多いので、これらを省略できるのは心強いですね。

数字入力で調整ができる点や、レイヤーの重ね順で並び順を変更できるのもGOODポイントです。

カード系のデザイン・パーツ

記事や商品などの一覧に使用される、カード系パーツの作成も効率的に行えます。
このとき気を付けるべきポイントは、要素同士の余白は同じにすること、テキストに自動高さ調整を適用することです。
テキストは幅を固定し、高さを自動調整させることで横幅が縮んでしまう事故を防ぐことができると共に、テキスト行数が増減しても自動でエリアが伸縮してくれるパーツを作ることができます。

スタックとパディングの組み合わせ方次第で、横幅は固定したまま下に伸びるデザインも作れます。

表などのテーブルのレイアウト

表を作るときに一番輝くと思っているくらい、テーブルのレイアウトとスタック&パディングは相性が良いです。

「1行増やしたい」「行を入れ替えたい」という要望にも簡単に応えることができます。
1行だけのデザインをコンポーネント化しておけば、列を増やす場合でもすぐに修正できます。

1行分のパーツはすでにコンポーネント化しているので、列数を増やす修正も楽々できます。

メニューやナビゲーション

メニューやナビゲーションも同じデザインの羅列である場合が多いため、スタック機能が活躍します。
修正でよく発生する項目の追加や順番の入れ替えにもすぐに対応できるため、積極的に使いたいところです。

矢印キーを使っているのはヘッダーのナビゲーションのはみ出しを直す程度なので、とても時短できる事がわかると思います。

フォームのレイアウト

お問い合わせフォームや会員登録フォームも項目の羅列であるため、スタック機能を使いたい部分です。

少し複雑になりますが、項目内部の構造にもスタック&パディングは使用できるため、
慣れてる方はぜひ挑戦してみてください。

フォームのように、グリッド感のあるデザインやレイアウトを作るときに大いに活躍します。

スタック&パディングで、効率よくデザインを作ろう

スタック&パディング機能は特性上、グリッド感のあるデザインやレイアウトで最も活躍します。
私は特に、アプリケーションや管理画面系のデザインを作るときに重宝すると感じています。

次回の仕事でも流用・活用しやすいデザインを作りやすくなるので、ぜひこの機能を使って沢山デザインやレイアウトを作ってみてください!

デザイナー/S.O

そこら辺に転がってる人です。

このメンバーの記事一覧へ

おすすめ記事