レイヤーパネル

レイヤーパネルとは、スクリーン上のテキストや画像・ボックスなどの要素を、階層構造で一覧表示・管理するツールです。

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

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

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

3. Studioのレイアウトの基本（ボックスレイアウト）

レイヤーパネルを開く方法

デザインエディタ左側のナビゲーションで[レイヤー]アイコンをクリックします。
左パネルでレイヤーパネルが開きます。

スクリーンショット：ナビゲーションメニューのレイヤーアイコンをクリックして、レイヤーパネルを開く様子。

レイヤーパネルで行う主な操作

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

要素（ボックス）の選択と編集
- 要素（ボックス）の選択
- 並び順や重なり順の変更
- コピー＆ペースト
- 要素（ボックス）の削除
レイヤーの名称変更
設定済みのデザイン設定の確認
- 条件付きスタイル設定の確認
- レスポンシブデザイン設定の確認

レイヤーパネルで可能な操作とその操作手順について解説します。

要素（ボックス）を選択する

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

詳細は、ボックスを選択するをご覧ください。

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

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

スクリーンショット：レイヤーパネルで階層構造を持つ要素を開いている様子。レイヤー名称の左の[>]をクリックすると、[>]の矢印の方向が下向きに変化します。

要素（ボックス）の並び順や重ね順を変更する

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

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

コピー＆ペーストする

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

デザインエディタ左のナビゲーションで、レイヤーパネルをクリックします。
レイヤーパネルで対象の要素を選択します。
選択後、以下のショートカットキーでコピー＆ペーストします。

OS	コピー	ペースト
Windows	`Ctrl + C`	`Ctrl + V`
Mac	`⌘ + C`	`⌘ + V`

要素（ボックス）を複製する

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

デザインエディタ左のナビゲーションで、レイヤーパネルをクリックします。
レイヤーパネルで対象の要素を選択します。
右クリックでメニューを開き、[ボックスを複製]を選択しても削除ができます。ショートカットキー（Mac：Delete／Windows：Delete）でも複製可能です。

要素（ボックス）を削除する

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

デザインエディタ左のナビゲーションで、レイヤーパネルをクリックします。
レイヤーパネルで対象の要素を選択します。
選択後、右クリックでメニューを開き、[ボックスを削除]を選択します。ショートカットキー（Mac：Delete／Windows：Delete）でも削除できます。

グループ化・リスト化・コンポーネント化する

レイヤーパネル上で複数の要素を選択し、グループ化・リスト化・コンポーネント化したり、それらを解除したりすることができます。

デザインエディタ左のナビゲーションで、レイヤーパネル<画像>をクリックします。
レイヤーパネルで、対象の複数要素を選択します。Shiftキーを押しながらクリックしてください。
選択したレイヤーを右クリックして、[グループ化]・[リスト化]・[コンポーネント化]を選択します。機能について詳しくは該当のヘルプ記事をご覧ください。

レイヤーの名称を変更する

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

デザインエディタ左のナビゲーションで、レイヤーパネルを選択してクリックします。
対象の要素を選択し、ダブルクリックすると名称が編集可能な状態になります。

レイヤー名をAIで一括変更する（Layer Rename）

デザインをもとにAIがレイヤー名を一括変換します。

初期状態の「group」や「box」などの名称をよりわかりやすい表現で自動変換し、共同作業や納品作業をスムーズに進められます。

レイヤーパネルを開き、名前を変更したいレイヤーにカーソルを合わせます。
ホバー時に右側に表示されるマジックボタン（星型のアイコン）をクリックすると、レイヤー名が自動変換されます。
- グループ化されている場合には、下層の子ボックスも同時に変換されます。
- ページ全体を対象とする場合には、レイヤーの最上部「<div> Base」を選択します。