【Studio】【初心者向け】レイヤーパネルを使いこなしてサイト管理を楽にする方法

カッパ子

今サイトがどうなってるかよく分からなくなった…

ユウ

そんな時はレイヤーパネルで確認だ！

Studioでサイトを作り込んでいくと、要素が増えるにつれてどこに何があるか分からなくなってきます。

そんなときに活躍するのがレイヤーパネル。使い方を押さえておくだけで、制作中の迷いがぐっと減ります。

本記事ではStudioのレイヤーパネルの使い方と、管理しやすいサイトを作るコツについて解説します。

レイヤーパネルとは

レイヤーパネルは、デザインエディタに配置したすべての要素を階層構造で一覧表示・管理できる機能です。

左パネルのアイコンボタンから開くことができて、各要素を選択・並び替え・名称変更することができます。

要素を選択したり、並び替えたりするのはデザインエディタ上でもできますが、サイトの構造が複雑になればなるほど、目的の要素を正確に選択できているか分からなくなってくるので、そういったときに便利な機能です。

また、レイヤーパネルでは要素の条件付きスタイルやレスポンシブ設定の確認をすることもできます。

Studioにはライブプレビュー機能があるので、そこから動きのおかしい要素を見つけることができますが、レイヤーパネル上でどの要素の設定がおかしいか分かるので、こちらも役立つ機能です。

レイヤーパネルの役割が分かったところで、実際に操作する方法について解説します。

レイヤーパネル上で要素をクリックすると、デザインエディタと同じように要素を選択できます。

デザインエディタだとパーツ単体を選択してるのか、パーツのグループを選択してるのか、イマイチ分からない時がありますが、レイヤーパネルだと安心です。

また、Macでは「Command」Windowsでは「Ctrl」キーを押しながら選択することで、複数の要素を選択できるので、まとめて設定をすることも可能です。

要素をドラッグ＆ドロップすれば、順番を変更できます。

レイヤーの並び順はページ上の表示順と連動しているため、レイアウトを変えたい場合に役立ちます。

レイヤーパネル上で対象の要素をダブルクリックすると、要素の名前を編集できます。

最初は「box」や「group」といった名前になっているため、内容に合わせた名前に変更しておくと管理がしやすくなります。

レイヤーパネル上の名前は、サイトを編集するためのものなので、自分が分かりやすいものであれば問題ありません。

AIによるレイヤー名の一括自動変換機能もあるので、要素が多い場合は活用すると良いでしょう。

PCサイズでは表示してスマホサイズでは非表示にしたい要素などがある場合、レイヤーパネルで対象の要素を選択し、条件スタイルから表示・非表示を設定できます。

デバイスごとに見せる要素をコントロールできるので、レスポンシブ対応をする際に覚えておきたい操作です。

ヘッダーとハンバーガーメニューとかで使う場合が多いかな？

最後にStudioのレイヤーパネルを上手く使うコツについて、お話しします。

先ほど要素の名前は自分が分かりやすいものであれば問題ないと言いましたが、他人のサイトを制作する場合などは「about」「service」のように、誰が見ても分かりやすいような名前をつけることが望ましいです。

特に、Studioはノーコードプラットフォームなので、納品後はクライアント自身で管理・運用していくパターンが大半です。

そういったときに名前が「A-01」のような自分しか分からない名前で管理されているとクライアントが困ってしまうので、出来る限り分かりやすい名前をつけることを心がけておきましょう。

Studioのレイヤーパネルは階層構造で表示されます。

ページをセクション単位で区切り、各セクションの中に関連する要素をまとめておくと、どこに何があるかが一目でわかる構造になります。

後から修正や追加が必要になったときも、目的の箇所にすぐたどり着けるようになるので、サイトを制作するときは大まかにセクションでまとめていき、その中に細かい要素を追加していくような流れで作っていくと良いでしょう。

Studioのレイヤーパネルについて解説しました。

HTMLやCSSを勉強している人は、最初から何となく分かると思いますが、コーディングを全く知らないという人は少し難しく感じると思います。

ですが、レイヤーパネルを理解しておけば、サイトを修正したり運用するのが格段に楽になるので、ぜひチャレンジしてみてください。