Studio

エディタの基本操作

旧エディタのUIと比較しながら、2025年11月25日に正式リリースされるEditor 5.0で変更された操作箇所について解説します。

Editor 5.0と旧エディタの主な変更箇所

2025年11月25日から、デフォルトエディタが新しいEditor 5.0﻿に切り替わりました。旧エディタの提供終了までは、旧エディタとの切り替えが可能です。切り替え手順や注意点を紹介します。

エディタバージョンの切り替え方法

旧エディタとEditor 5.0

Studioエディタは、Google Chromeの最新バージョンを使用することを推奨してます。また、PC以外の端末では編集操作を行うことができません。

エディタの動作環境

デザインエディタは、StudioでWebサイトのデザインを作成・編集するためのツールです。ページの追加、デザインに必要なパーツの追加、アニメーションの設定など、Webページのデザイン作成を直感的な操作で行うことが可能です。この記事では、デザインエディタの概要と基本機能を紹介します。

デザインエディタ

デザインエディタ左側で展開されるパネルについて解説します。左パネルでは、サイトを構成する要素（ボックス）の追加や管理などを行います。パネル上で行う操作の詳細や機能について紹介します。

左パネル

デザインエディタの右側で展開されるパネルについて解説します。右パネルではボックスごとのデザインやスタイリング、データ編集、サイト・ページのメタ情報設定などを行います。各種操作方法や主な機能を紹介します。

右パネル

編集中のページを一覧で確認し、管理する場所がページパネルです。左パネルで展開します。本記事ではページパネルの基本操作や設定管理のポイントについて解説します。

ページパネル

レイヤーパネルは、デザインエディタ上に配置したすべての要素を階層構造で一覧表示する機能です。レイアウト構造を視覚的に確認しながら要素の選択や並び替え、名称変更、条件付きスタイルやレスポンシブ設定の確認ができます。

レイヤーパネル

エディタ画面の見方

StudioのAI機能は、デザイン編集、テキスト生成、レスポンシブ対応、レイヤー管理、サイトのメタ情報の作成などの作業を直感的かつ迅速に行うことができます。各AI機能の概要と操作方法を紹介します。

StudioのAI機能

ライブプレビューは、エディタでの編集内容をブラウザでリアルタイムに確認できる機能です。ライブプレビューURLの発行や削除手順、レスポンシブデザインの動作確認方法について解説します。

ライブプレビュー

Studioでの操作がより効率的に行えるキーボードショートカット（コマンド）をご紹介します。

キーボードショートカット一覧

元に戻す（Undo）・やり直す（Redo）ボタンで、直前の操作を取り消したりやり直しをすることができます。操作はご自身の作業履歴のみに反映され、他のメンバーの作業には影響しません。

元に戻す（Undo）・やり直す（Redo）ボタン

デザインエディタでスクリーンの表示倍率を変更する3つの方法について説明します。ズームコントローラー、倍率リセット、ショートカットキーやスクロール操作を使った詳細な倍率調整の手順を確認できます。

スクリーンの表示倍率を変更する

Studioエディタのコメント機能を使ったコメントの追加や管理手順について解説します。機能を活用して、デザインの品質向上や進捗管理に役立てましょう。

エディタのコメント機能

コンテンツ編集モードは、特定のコンテンツのみを編集できる状態にする機能です。テキスト・画像・アイコン以外の編集を制限し、レイアウトに影響を与えずにコンテンツの編集に集中できます。

コンテンツ編集モード

スクリーンに追加したボックスを複製し、同じデザイン要素を再利用する手順を説明します。単一または複数のボックスをコピー＆ペーストできます。

ボックスをコピー＆ペーストする

グリッド線表示機能の提供はありません

エディタ上にグリッド線（ガイドやルーラー）は表示できますか？

編集履歴の保存・確認・復元ができます

サイトのバージョンを管理する

Studioの管理画面（デザインエディタ・CMSダッシュボード・フォームダッシュボードなど）は、PC版のGoogle Chromeブラウザのみ編集操作が可能です。最新バージョンの利用を推奨しています。

タブレットやスマホからStudioエディタやCMSダッシュボードの操作はできますか？

カラーパレットでボックスの塗りや枠線、テキストやアイコンの色、背景色などを設定・編集ができます。単色やグラデーション、RGBA数値やHEXコード、カラーピッカー、カラースタイルなどを使った色の指定方法について解説します。

カラーパレットで色を設定する

エディタの機能

Create a custom design with text, images, and links

Studio.Design

Studio.Blog

Studio.Showcase

What's New

Updates

公式サイト

公式ブログ

事例集

セミナー動画

YouTube

コミュニティで知見を深める

Intercom のサポートやコミュニティのエキスパートに質問し、答えてもらいましょう。

このサイトでは、当社および当社の第三者ベンダーが、当社のクッキーポリシーに記載された目的のために、お客様とサイトでのやりとり（閲覧したコンテンツ、カーソルの動き、画面の記録、チャット内容を含む）に関する個人情報を監視および記録するために、クッキーやその他の技術を使用しています。当サイトを引き続きご利用いただくことで、{websiteTermsLink}、{privacyPolicyLink}および{cookiePolicyLink}に同意したことになります。

このサイトでは、サイトの運営に必要不可欠なCookieおよび類似のテクノロジー（以下「Cookie」）を使用します。また、当社とパートナーは、サイトのパフォーマンス分析、機能、広告、ソーシャルメディア機能を有効にするために、追加のクッキーを設定したいと考えています。詳細については、{cookiePolicyLink}をご覧ください。クッキーの設定は、[クッキー設定] で変更することができます。

当社では、ウェブサイトの機能維持、分析、そして広告表示のためにクッキーを使用しています。オプションで必要に応じて希望するクッキーを有効または無効にできます。詳細については、{cookiePolicyLink}をご覧ください。

お客様には、個人情報の販売をオプトアウトする権利があります。お客様のデータの使用方法について詳しくは、{cookiePolicyLink}をご覧ください。

お客様のプライバシーに関する選択

当社では、お客様の体験を向上させるためにクッキーを使用しています。クッキーの設定は以下でカスタマイズすることができます。詳細については、{cookiePolicyLink}をご覧ください。

クッキー設定

リンク, 終了するにはcontrol-option-right-arrowを押します

ヘルプセンターは空です

エラーが発生しました。そのページは存在しません。

がっかり

無表情

笑顔

考えています...

ソースを検索しています...

分析しています...

メッセンジャー経由で送信されたチケット、または会話内でサポートエージェントによって送信されたチケットがここに表示されます。

お客様が作成したチケットはありません

別のキーワードを使用するか、入力ミスがないか確認してみてください。

別のキーワードやフィルタを使用してみてください。

チケットが見つかりませんでした

タイトル

御社に関連するすべてのチケットの進捗状況を追跡

チケットポータル。

{assigneeName}さんがこちらに対応中です！

{assigneeName}さんがチケットを完了しました

{assigneeName}さんが近日中に対応する予定です

{assigneeName}さんが詳細情報を必要としています

あなたのチケットは完了しました