デザインエディタ

ℹ️ 2025年11月25日に新しいエディタバージョン「Editor 5.0」を公開します。

本記事は、 Editor 5.0 の内容に基づいて解説します。

デザインエディタの画面構成

デザインエディタの構成と、各操作箇所の名称は以下のとおりです。

① ナビゲーション

② 左パネル

③ 右パネル

④ スクリーン

⑤ ツールバー

画面左のアイコンが並んだ操作セクションがナビゲーションです。各アイコンをクリックすると、それぞれの機能を持つ操作メニューが開きます。

ナビゲーション内で可能な操作は以下の通りです。

	実行内容	補足
1	プロジェクトのメインメニューを開く	[元に戻る]ボタンはこのメニュー内にあります。
2	追加パネルを開く
3	ページパネルを開く
4	レイヤーパネルを開く
5	スタイルパネルを開く
6	アップロードパネルを開く
7	ストックパネルを開く
8	接続パネルを開く
9	コンポーネントパネルを開く
10	バージョン履歴を開く	操作箇所は右パネルで開きます。
11	コメントモードへの切り替え	操作箇所は右パネルで開きます。
12	コンテンツ編集モードへ切り替え	操作箇所は右パネルで開きます。
13	サイト公開前のStudio設定ガイドを開く	アカウント設定で「サイト設定ガイドの表示」を有効にしている場合のみ、このアイコンが表示されます。
14	サポートコンテンツを開く	ヘルプ記事、解説動画、Studio Communityへのアクセス、AIサポートへの質問、有人窓口への問い合わせができます。

画面左側で開くパネルを総称して「左パネル」と呼びます。左パネルでは、主にスクリーン上に要素を追加する操作を行います。

ナビゲーションの以下アイコンをクリックすると、各操作メニューが左パネルで開かれます。

詳細は、左パネルのページをご覧ください。

画面右側で開くパネルを総称して「右パネル」と呼びます。

スクリーン上でいずれかのボックスを選択するか、画面右上部の開閉アイコンをクリックすると、右パネルが開きます。

右パネルで行う操作は以下の通りです。

詳細は、右パネルのページをご覧ください。

画面中央にある白い部分がスクリーンです。スクリーンは、テキストや画像などのボックスを配置して、Webサイトページを作成する画面です。

スクリーンの左上には、編集中のページ名が表示されます。
スクリーン右上のアイコンから、ページの削除・複製・追加の操作が可能です。
スクリーンの両端のスライドバーをドラッグして横幅を伸縮させることができます。横幅を縮めるとタブレットやスマホ用のデザインが調整できます。
詳細は、レスポンシブデザインを設定するをご覧ください。

レスポンシブデザインの設定や、ブレイクポイントの設定を行います。エディタの画面下部に常に表示されています。