デザインエディタの画面構成｜5エリアと左パネル8タブ
CHAPTER 1
デザインエディタの画面構成｜5エリアと左パネル8タブ
LESSON 1-2 エディタの画面構成と作って公開するまでの一周 ⏱ 所要時間：約13分
レッスン解説動画
GOAL
このレッスンのゴール
  • ✓
    エディタの5エリア（ナビゲーション・左パネル・右パネル・スクリーン・ツールバー）の役割を説明できる
  • ✓
    左パネル8タブをCtrl/⌘+1〜8で切り替えて目的のパネルを開ける
  • ✓
    右パネルの中身が選択している要素によって切り替わることを理解している

前のレッスンでは、プロジェクトの状態を確認するダッシュボードを見てきました。ここからは、実際にボックスを並べてデザインを組むデザインエディタの画面を確認します。
STUDIOのエディタは2025年11月にEditor 5.0として刷新され、以前は画面上部に並んでいた設定項目の多くが右パネルに集約されました。ネット上の古い解説記事や動画は画面が異なる場合があるため、このレッスンで現行の画面構成を正確に押さえておきましょう。

エディタの5エリア全体像

practiceプロジェクトのエディタを開くと、画面は5つのエリアに分かれています。それぞれの役割を先に一覧で確認しておきましょう。

操作動画
STUDIOデザインエディタの画面全体。上部にナビゲーション、左に追加パネル、右にサイト設定パネル、中央にスクリーン、下部にツールバーが並ぶ
practiceプロジェクトのエディタ画面（何も選択していない状態）
エリア 画面上の位置 役割
ナビゲーション画面最上部プロジェクト名・ページ切替・プレビュー・公開ボタンなど、エディタ全体の操作口
左パネル画面左側要素の追加・ページ管理・レイヤー構造の確認など8タブに分かれる
右パネル画面右側選択した要素のスタイル設定。選択対象によって表示内容が変わる
スクリーン画面中央実際にページを組み立てるキャンバス
ツールバー画面下部ブレイクポイント切替・表示倍率・コメント等のモード切替

Editor 5.0になる前は、ボックスのサイズや余白のようなスタイル設定が画面上部の固定バーに並んでいました。現行のEditor 5.0では、この設定がすべて右パネルに移動し、選択した要素に応じて必要なタブだけが表示される仕組みに変わっています。この違いを知らずに古い解説を見ると、画面上部に設定が見当たらず戸惑うことになるため、右パネルに集約されたという変更点を最初に覚えておきましょう。

5エリアのうち、実際にデザインを組む作業のほとんどは、左パネルで要素を追加し、スクリーンに配置し、右パネルでスタイルを整えるという3エリアの往復で進みます。この後の章で操作を覚えるときも、まずこの3つのエリアのどれを触っているかを意識すると迷いにくくなります。

左パネル8タブ｜Ctrl/⌘+1〜8で切り替える

左パネルには8つのタブがあり、それぞれCtrl+1からCtrl+8（Macは⌘）のショートカットで直接切り替えられます。マウスでタブをクリックするよりも早く目的のパネルを開けるため、この番号と役割の対応を先に覚えておくと、以降の章の操作がすべて速くなります。

操作動画
ショートカット タブ名 できること
Ctrl+1追加パネルボックス・テキスト・画像・セクションなど、新しい要素をスクリーンにドラッグして配置する
Ctrl+2ページパネルページの追加・パスの確認、9種類あるページタイプの選択
Ctrl+3レイヤーパネルボックスの親子関係を階層で確認し、要素を選択する（Chapter 2で多用）
Ctrl+4スタイルパネルカラースタイル・テキストスタイルの登録と一括編集
Ctrl+5アップロードパネル自分の画像ファイルをアップロードする
Ctrl+6ストックパネル無料の内蔵写真を検索してそのまま配置する
Ctrl+7接続パネルStudio CMS等、外部・内部データとの接続（Chapter 3の3-4で使用）
Ctrl+8コンポーネントパネル複数ページで使い回すコンポーネントの一覧（Chapter 3の3-1で使用）
Ctrl+1で開く追加パネル。Section・Box・Image・Textなどの基本要素とフォームパーツが並ぶ
Ctrl+1 追加パネル
Ctrl+2で開くページパネル。ページ一覧にHomeが表示され、公開ページ数が確認できる
Ctrl+2 ページパネル
Ctrl+3で開くレイヤーパネル。Baseという名前のdiv要素が階層で表示されている
Ctrl+3 レイヤーパネル
Ctrl+4で開くスタイルパネル。カラー・テキストのスタイル登録タブと「カラースタイルがありません」という空の状態
Ctrl+4 スタイルパネル
Ctrl+5で開くアップロードパネル。ファイルをアップロードするドロップエリアとストレージ使用量0MB/5GBの表示
Ctrl+5 アップロードパネル
Ctrl+6で開くストックパネル。Studio.StockとUnsplashのタブと、無料の内蔵写真のサムネイル一覧
Ctrl+6 ストックパネル
Ctrl+7で開く接続パネル。CMS・API・RSSのタブとStudio CMSの案内が表示されている
Ctrl+7 接続パネル
Ctrl+8で開くコンポーネントパネル。「コンポーネントがありません」という空の状態
Ctrl+8 コンポーネントパネル

この8タブのうち、レイヤーパネルは特に登場回数が多いタブです。Chapter 2でボックスの親子関係を扱う際、どのボックスがどのボックスの中に入っているかを確認する場面が繰り返し出てきます。今の時点では中身が空でも構わないので、8つのタブをキーボードで一通り開いてみて、番号と中身の対応に慣れておきましょう。

✓ Point !
8タブは机の引き出しと同じ、置き場所が決まっている

追加パネル・ページパネル・レイヤーパネル・スタイルパネル・アップロードパネル・ストックパネル・接続パネル・コンポーネントパネルは、それぞれ扱うものが完全に分かれています。新しい要素を置きたいときは1、画像を探したいときは6というように、やりたいことと番号を結び付けておくと、この後の章で操作に迷う時間が減ります。

Q
確認クイズ
無料の内蔵写真を検索してそのまま配置したいとき、開くべき左パネルのタブはどれでしょうか。
✓
正解です！
無料の内蔵写真を検索してそのまま配置できるのはストックパネル（Ctrl+6）です。アップロードパネル（Ctrl+5）は自分のPCにある画像ファイルを上げるためのタブです。
✕
惜しい！
正解はBのストックパネル（Ctrl+6）です。アップロードパネル（Ctrl+5）は自分のPCの画像をアップロードするタブなので、目的が異なります。

右パネルの中身は選択で変わる

右パネルは、左パネルの8タブとは仕組みが異なります。固定の8タブがあるのではなく、今スクリーン上で何を選択しているかによって表示される内容そのものが変わります。

操作動画
ボックスを1つ選択した状態。右パネルに[ボックス][変形][設定]の3タブが表示され、幅・高さ・マージン・パディング等を編集できる
ボックス選択時の右パネル
テキスト要素「Type Something」を選択した状態。右パネルに[テキスト][ボックス][変形][設定]の4タブが表示され、テキストタブが追加されている
テキスト選択時の右パネル（[テキスト]タブが追加される）
何も選択していない状態。右パネルに[サイト][ページ]タブと、URL・サイトタイトル・説明文・ソーシャルカバー・ファビコンの入力欄が表示されている
未選択時の右パネル（サイト全体の設定）

ボックスを選択したときは[ボックス][変形][設定]の3タブが表示され、余白やサイズを調整できます。同じボックスの中にあるテキストを選択すると、そこに[テキスト]タブが加わり、文字サイズや行間を調整できるようになります。テキストを選択したときだけ現れるタブがある、という仕組みを覚えておくと、目的のタブが見当たらないときに「選択対象を間違えているのではないか」と自分で気づけるようになります。

反対に、スクリーンの余白をクリックして何も選択していない状態にすると、右パネルには[サイト][ページ]という別のタブが表示されます。ここにはサイト全体のタイトル・説明文・ファビコンを設定する項目が並んでいます。この項目は、3-6でSEOを設定するときに本格的に使う場所なので、今は未選択のときはサイト全体の設定が出てくるという対応関係だけ覚えておけば十分です。

✓ Point !
右パネルが目的のタブを表示しないときは選択対象を疑う

右パネルは選択している要素によって内容が変わる仕組みのため、探しているタブが見つからないときの多くは、操作ミスではなく選択対象が違うことが原因です。ボックスを選び直す、あるいは一度選択を解除してから選び直すと、目的のタブが表示されます。

ツールバー｜ブレイクポイントとモード切替

画面下部のツールバーには、画面幅ごとの見え方を切り替える機能と、編集モードを切り替える機能が並んでいます。まずはブレイクポイント切替です。

操作動画
ブレイクポイントDefault（1280px）表示。ツールバーに1280pxと表示されている
Default（1280px）
ブレイクポイントTablet（840px）に切り替えた状態。スクリーン幅が840pxに変わり「タブレット - 840px」の表示が出る
Tablet（840px）
ブレイクポイントMobile（540px）に切り替えた状態。スクリーン幅が540pxに変わり「モバイル - 540px」の表示が出る
Mobile（540px）

ブレイクポイントとは、画面幅に応じてレイアウトの見え方を切り替える区切りのことです。STUDIOにはDefault（1280px）・Small（1140px）・Tablet（840px）・Mobile（540px）・Mini（320px）という5つのブレイクポイントがあり、切り替えのたびにスクリーンの表示幅が変わります。この仕組みそのものは3-6のレスポンシブ対応で詳しく扱うため、ここではツールバーのどこにあるかだけ確認しておきます。

左パネル下部に並ぶ3つのモードアイコン。上からバージョン履歴（時計）・コメント（吹き出し）・コンテンツ編集（鉛筆）
左パネル下部のモードアイコン（バージョン履歴・コメント・コンテンツ編集）

このほか、左パネルの一番下には、コメント・コンテンツ編集・バージョン履歴という3つのモードアイコンが並んでいます。コメントはページ上の特定の位置にメモを残す機能、コンテンツ編集は文言だけを差し替えるための簡易モード、バージョン履歴は編集内容を過去の状態に戻す機能です。Freeプランではバージョン履歴の保持期間が1日までと決まっているため、大きく作り直す前には注意が必要ですが、本コースの範囲でこの制限に引っかかる場面はありません。

表示倍率とページ切替のショートカット

最後に、作業効率に直結する表示倍率とページ切替のショートカットを確認します。

操作動画
ナビゲーション右上の表示倍率。100%と表示されており、この数値がCtrl+0/+/-で変化する
ナビゲーション右上の表示倍率（100%）

表示倍率はCtrl+0で実寸（100%）に戻り、Ctrl++で拡大、Ctrl+-で縮小します。Editor 5.0では、この表示倍率がページを切り替えても保持されるようになりました。旧エディタではページを切り替えるたびに倍率がリセットされていたため、細かい部分を作業しているときに毎回ズームし直す手間がありましたが、現行のエディタではその手間がありません。

ページの切替はCtrl+←とCtrl+→で行えます。Chapter 3でヘッダーをコンポーネント化して複数ページに配置する際、ホームページと記事の詳細ページを行き来しながら確認する場面が出てきます。そのときにこのショートカットを知っているかどうかで、作業のテンポが大きく変わります。

✓ Point !
よく使うショートカットは今のうちに手に覚えさせる

左パネルのCtrl+1〜8、表示倍率のCtrl+0/+/-、ページ切替のCtrl+←→は、この後の章すべてで繰り返し使います。今のこの段階で実際に手を動かして試しておくと、Chapter 2以降の操作がスムーズになります。

Q
確認クイズ
スクリーンの余白をクリックして何も選択していない状態のとき、右パネルにはどのような項目が表示されますか。
✓
正解です！
何も選択していないときの右パネルには、サイト全体の設定を行う[サイト][ページ]タブが表示されます。ここは3-6のSEO設定で本格的に使う場所です。
✕
惜しい！
正解はCです。ボックスやテキストのタブは、それぞれの要素を選択しているときだけ表示されます。何も選択していないときはサイト全体の設定タブに切り替わります。
SUMMARY
  1. エディタはナビゲーション・左パネル・右パネル・スクリーン・ツールバーの5エリアで構成される
  2. 左パネル8タブはCtrl/⌘+1〜8で直接切り替えられる（追加・ページ・レイヤー・スタイル・アップロード・ストック・接続・コンポーネント）
  3. 右パネルの中身は選択している要素によって変わる。ボックス・テキスト・未選択でタブの構成が異なる
  4. ツールバーにはブレイクポイント切替とコメント等のモード切替がある
  5. 表示倍率はCtrl+0/+/-、ページ切替はCtrl+←→で行い、この後の章すべてで使う
チェック
理解度チェック
エディタの5エリアの役割を説明できる
ナビゲーションは全体操作、左パネルは要素の追加やページ管理、右パネルはスタイル設定、スクリーンは組み立てるキャンバス、ツールバーはブレイクポイントやモードの切替をそれぞれ担当します。
左パネル8タブをCtrl/⌘+1〜8で切り替えて目的のパネルを開ける
1が追加、2がページ、3がレイヤー、4がスタイル、5がアップロード、6がストック、7が接続、8がコンポーネントです。番号と役割を結び付けておくと操作が速くなります。
右パネルの中身が選択している要素によって切り替わることを理解している
ボックス選択時は[ボックス][変形][設定]、テキスト選択時はさらに[テキスト]が加わり、未選択時は[サイト][ページ]というサイト全体の設定タブに切り替わります。