【Studio】グループの基本操作とできること

Studioでグループって使ってますか？

グループはパーツを並べたり、まとめて編集できるデザイン上の便利さだけでなく、サイト内の区切りが分かりやすくなるという、管理する上でも便利な機能です。

本記事では、Studioのグループ化について基本の考え方と操作方法を解説します。

グループとは

グループとは、配置済みの複数のパーツを1つのまとまりとして扱う機能です。

言葉で説明すると分かりにくく感じますが、要はパーツを入れる箱のようなものです。

「複数のパーツ」と言いましたが、ただの箱なのでパーツは一つでも問題なし、箱をさらに箱に入れるということも可能です。

グループ化すると外側の箱が「親ボックス」と中のパーツが「子ボックス」という親子関係ができます。

親ボックスを選択すれば、子ボックスもまとめて扱えるようになるので、位置や順番を変えたり、複製したい時に役立ちます。

グループは画面上の見た目は変わらないので、レイヤーパネルで確認するのが確実です。

特に、何重にもグループがある時は、狙ったグループを選択するのも難しいので、そういった場合にもレイヤーパネルが役立ちます。

パーツ同様、グループにも名前をつけることができます。

この名前は公開したサイトには反映されないので、自分が分かりやすい呼び方で問題ありません。

グループ化のやり方

グループ化する方法は、大きく3つあります。

どれを使っても結果は同じなので、自分がやりやすい方法でグループ化して構いません。

ショートカットと右クリックメニュー

パーツを選択して右クリックで開くメニューから「グループ化」、もしくはショートカットキーのCommand + G（Ctrl + G）を押す方法。

一番早いのはショートカットキーですが、Studioはブラウザ上で操作するので、ブラウザの拡張機能と干渉する場合があるようです。

そういった場合も考えると、右クリックメニューが確実。

レイヤーパネル上でも同様の操作で行えるので、画面上でパーツがクリックしづらいといった場合はこちらから行えば確実です。

ボックスの中に入れる

大きめのボックスを1つ置いて、その中にパーツを入れていく方法。

先に箱を置いて中身を入れていくイメージです。

グループ化は使ったことがないけれど、この方法で無意識にグループを使っていたという人もいるのではないでしょうか。

操作もドラッグ＆ドロップだけで完結するので分かりやすいというメリットもあります。

ただ、既存のパーツたちをいちいち入れていくのも面倒なので、右クリックメニューと上手いこと使い分けると良いでしょう。

グループでできること

パーツをグループ化することは分かったけれど、だから何なの？という疑問もあるかと思います。

次はグループにすることでできるようになることについて解説します。

まとめて並べる

グループ化する最大の目的と言っても過言ではないのが並べること。

親ボックスを選ぶと、子ボックスの並べる方向や揃え方向、配置などを設定できます。

パーツを一つずつ位置調整するよりも簡単で崩れにくいので、基本的にはこの方法を使って並べるのがオススメです。

まとめて余白や背景を設定する

親ボックスに背景色を設定すれば、中の要素すべてがその上に配置されます。

サイトの背景とは違う色にしたい時や枠を作りたい時なんかで活躍します。

また、パーツ同士の余白・間隔も、親ボックスでまとめて指定できます。

どちらも一つずつ設定していると、後から変えたい時に全部直す必要がありますが、グループ化しておけば、親ボックスを修正するだけで終わります。

同じような設定が続く場合はグループ化しておく癖をつけておくと良いでしょう。

まとめて移動・複製する

例えば、サイトの「サービス」セクションと「フロー」セクションを入れ替えたいと思った時、グループ化しておけば親ボックスを入れ替えるだけで完了します。

また、サービスなどは同じデザインで画像やテキストだけ違うというパターンが多いでしょう。

そう言った場合には、一つのグループできちんとデザインを作って複製すれば、手間がかからず楽チンです。

数が多い場合はコンポーネントやCMSを活用したほうが良い場合もありますが、ちょっとした繰り返し程度ならグループを複製していくほうが早くて簡単です。

まとめ

グループは地味な操作ですが、上手く使えると効率よくサイトを作れるようになる便利な機能です。

グループ化しすぎると深くなりすぎて扱いにくいといった問題も出てきますが、最初は迷ったらとりあえずまとめておく、くらいの感覚で使ってみてください。