【Editor 5.0】レイヤーパネル

テキストや画像、ボックスなどの要素を階層構造で一覧表示するツールです。

デザインエディタ左のナビゲーションメニューの[レイヤー] をクリックすると開きます。

Point: ボックスレイアウトとレイヤーパネル

「ボックスレイアウト」は、Studioが採用しているレイアウト手法で、コーディングで構築するWebサイトの構造を基にしています。これにより、Studioで制作されたサイトは、要素（＝ボックス）が積み重なったり入れ子になったりする構造になっています。

Studioでは直感的な操作でデザインが構築できますが、レイアウトの構造を整理しておくと、チームで共有する際に内容を理解しやすくなります。このレイアウト構造を視覚的に確認できる場所が、レイヤーパネルです。

ボックスレイアウトについて詳しくは、以下のヘルプ記事をご覧ください。

レイヤーパネルでは、次の操作が可能です。

要素の選択と編集

レイヤーパネルで任意の要素をクリックすると、スクリーン上の該当部分が同時に選択されます。

Tips: 階層構造を持つ要素の選択

レイヤー名称の左に[>]が表示されている要素は、階層構造を持っています。[>]をクリックすると下層の要素が展開されます。

ドラッグ＆ドロップで要素の並び順や重なり順を変更できます。

構造を視覚的に把握しながら作業ができるため、複雑なレイアウト編集にも役立ちます。

以下の手順で、レイヤーパネルから要素をコピー＆ペーストできます。

以下の手順で、レイヤーパネルから要素を削除できます。

レイヤーに名称をつけると、デザイン設定の管理に役立ちます。この名称は公開サイトには反映されません。

Tips: Layer Rename

AIがレイヤー名を自動最適化するLayer Rename機能を使用できます。

レイヤーにカーソルを合わせ、表示されたボタン（マジックボタン）をクリックすると起動します。

レイヤーパネル上部のひし形アイコンをクリックすると、条件付きスタイル（カーソルホバー、出現時アニメーション）の設定箇所を確認できます。

レイヤーパネル上部の四角が重なったアイコンをクリックすると、各ブレイクポイントごとのレスポンシブデザイン設定を確認できます。