フォーカスしたいもの
XDやfigmaの標準機能・スタック。名前はよく聞くけれど、よくわかっていない、どう使えば良いのかわからないというユーザーも多いのではないでしょうか？
実は、スタックはうまく使いこなせば作業の劇的な時短に繋がるかもしれない機能です。
本記事では、このスタックについての簡単な紹介とともに、実際のデザインでどのように使えるか詳細に説明いたします。
スタックとは？
スタックは、グループ内の要素の間隔を指定できる機能です。
例えば、 画像の下＝20px タイトルの下＝10px としておけばいくら文字が伸びてもこの間隔が担保されます。
また、タイトルを画像上に変更しても 画像の下＝20px タイトルの下＝10px は担保されます。
実際にどのようなデザインでスタックを活用できるのかご紹介いたします。
カードデザインの作り方
カード1つ分を作る
カード型レイアウトでの活用例を説明します。
最初に、1つ分のカードを作ります。
1. まず、以下のように並べてグループ化します。
画像
タイトル
テキスト
2. 次に、グループのスタックをONにします。
3. 最後にコンポーネント化しておきます。
これでカード内のテキストが増減したり、画像の高さを伸ばしたい時にも要素感のスペースは維持されるようになりました。
次はこのカードを並べたレイアウトにもスタックを適用してみましょう。
カードを並べる
1. 先ほど作ったカードを横に並べます。
2. 並べたカードをグループ化し、スタックにチェックを入れます。
3. さらにそのスタックを2段重ねにして、スタックにチェックを入れます。
これで、それぞれのカードの要素が増減してもレイアウトのマージンが保持されるようになりました。
さらに、スタックはテーブルデザインにも活用することができます。
シンプルなテーブルデザインの作り方
シンプルで使いやすいテーブルの作り方です。
タイトルが長くなっても、テキストが長くなっても可変して、ラインもちゃんとついてきます。
1) 1行分のタイトル・テキストを並べる
要素を並べます。
テキストブロックは「高さの自動調整」にしておきます。
隣り合う要素の位置を確認しつつ幅も設定しておくと、長文が入っても安心です。
2) グループ化してパディングを入れる
テキストそれぞれを、個別にグループにします。
グループにするとパディングが設定できるようになります。
ここで長文が入ったときのパディングを設定しましょう。
※パディングは他の入れ方もあり、例えば、スタックにした際の余白で設定することもできます。
あえて今回の入れ方の利点を上げるなら、<table>タグのCSSに反映しやすいことでしょう。
3) スタックにする
個別にグループ化したテキスト達を、全て選択してさらにグループ化します。
このグループをスタック(横)にします。
要素の間が0以下だとスタックの設定になりません。必ず0以上になるようにしてください。
これで1行分のテキストが揃いました。
4) ラインを引いて1行分を完成させる
行ごとにラインが入ったテーブルにしたいので、テキストの下にラインを引きます。
そしてテキストとラインをグループ化してスタック(縦)にします。
要素の間が0以下だとスタックの設定になりません。必ず0以上になるようにしてください。
見えにくいと思いますが、テキストの下にラインが入っています。
5) コンポーネント化し、並べてテーブルを作る
ここまででできた1行分をコンポーネント化し、複製して縦に並べます。
複製したものをまとめてグループ化してスタック(縦)にすればシンプルなテーブルの完成です。
レイヤー構造詳細
また、少しテクニックをいれることで、もっと装飾的なテーブルを作ることも可能です。
タイトル部分に背景のあるテーブルの作り方
よく使う背景付きのテーブルです。
背景色も高さに合わせて可変するのでとっても便利です。
まず、シンプルテーブルの作り方を3）まで進めます。
次に、行タイトルの後ろに薄グレーを敷きます(高さはテキストの要素と同じにする)。
この薄グレーとテキスト要素をグループ化します。
このグループのパディングにチェックを入れます。
パディングには勝手にマイナスの数値が入りますが、これでOKです
さらにラインを引きます。
このラインは「ライン」ではなく「長方形」で作ります。
※長方形が良い理由は後述
そしてラインごとスタック(縦)にすれば1行ができます。
あとはシンプルテーブルの作り方５）と同様にすればテーブルができます。
※）ラインを長方形で作ると良いのはなぜ？
ラインはスタックのスペースを0にしても0.5pxのずれが発生します。
長方形ならこのずれは起きません。
背景がないときにはさして気になりませんが、背景をつける際にはこの隙間は困ります。。
そこで、背景を敷きたいときには長方形でラインを引いた方が良いようでした！
上級者向け！縦ラインテーブルの作り方
スライリッシュなサイトで使いたい縦ラインのテーブルです。
ですが、XDではラインの高さを要素に追従させることができません。。
そこで、透過背景を使うことで解決してみました！
まず、シンプルテーブルの作り方を3）まで進めます。
次に、ラインにあたる部分を作ります。
行タイトルの後ろを透過0%の長方形、ラインをグレーの長方形(幅1px)で作ってグループ化します。
(高さはテキストの要素と同じにする)
この背景とテキスト要素をグループ化します。
このグループのパディングにチェックを入れます。
パディングには勝手にマイナスの数値が入りますが、これでOKです。
これで1行分ができました。
あとはシンプルテーブルの作り方５）と同様にすればテーブルができます。
次はボタンでの活用例を紹介いたします。
スタックとパディングの合わせ技で、汎用性の高いボタンを作成することができます。
▶︎アイコン付きボタンの作り方
▶︎アイコンが常にテキストの右にくっついてくるボタンです。
ボタン幅は固定なので、案件に応じてベースの幅を検討ください。
ボタンと▶︎をグループ化します。
これをスタック(横)にし、間隔を開けます。
背景とテキストをグループ化すれば完成です。
横幅可変！▶︎アイコン付きボタンの作り方
レスポンシブデザインではコーダー泣かせですが、使うことがあるかもしれない幅可変ボタン。
どれだけ文字を入れても、▶︎までの距離は一定です。
▶︎は背景とグループ化しておくのがミソです。
この背景とテキストをグループ化します。
グループにパディングを入れて、幅を可変にすれば完成です。
まとめ
デザインツールとしてのXDやfigmaの台頭の背景には、より手早く手間なくスムーズにデザイン制作とプロトタイプを行いたいというデザイナーの希望もあったのではないでしょうか。
スタックはその要望にマッチする素晴らしい機能です。スタックを使えば、要素一つ一つの間隔を調整する必要もなくなり、修正にも簡単に対応することができるようになるでしょう。
また、先日figmaがAdobeに買収され、XDはfigmaに統合されるという情報も聞こえています。スタックはfigmaにも標準搭載された機能です。これからfigmaを学ぶという方もぜひスタックを活用してクリエイティブワークを楽しみましょう。