【Studio】【初心者向け】デザインエディタの使い方｜パーツの追加・編集・レスポンシブ設定まで解説

StudioはノーコードでWebサイトを制作できるプラットフォームですが、Studioのデザインエディタの操作に慣れないと、思い通りのサイトを作るのは難しいです。

まずはパーツを追加する方法やプロパティの編集、レスポンシブ対応など、サイトを制作するための一連の作業が出来るようになることを目標に頑張っていきましょう。

というわけで、本記事ではStudioのデザインエディタの基本的な使い方について解説します。

※デザインエディタは記事執筆時点(2026年6月)の仕様に合わせて解説しています。

パーツを追加する

サイトにパーツを追加したい時は、左パネルの上から二番目のアイコンをクリックして「追加パネル」を開きます。

テキスト・画像・ボタン・フォームなど様々なパーツの一覧が表示されるので、追加したいパーツをクリックするか、キャンバス上にドラッグすることで配置できます。

これらのパーツを使えば、大抵のことは出来るので、編集・組み合わせることでWebサイトが作成できます。

パーツだと難しい、という人は上部のタブを「基本」から「パーツ」「セクション」へ切り替えることで、プリセットとしてデザインされたものを追加することもできます。

そういったものを使うと「Studioの使い方が上手くならない」とか、「サイトの個性がなくなる」という心配もあるかもしれません。

そのまま使用すると、その通りになりますが、色やフォントを変えたり、パーツを編集すれば全く問題はありません。

むしろ、基本のパーツから作るよりも手間を減らして効率化できるので、どんどん活用していきましょう。

パーツを編集する

追加したパーツは、そのままだと味気がないので、編集する必要があります。

パーツを追加するか、中央のスクリーン上でパーツを選択すると、右側のプロパティパネルが切り替わり、そのパーツ専用の編集オプションが表示されます。主に設定できる項目は以下のとおりです。

• テキストの文字サイズ・フォント・色
• 要素の横幅・縦幅・余白（マージン・パディング）
• 背景色・枠線の太さや色・角丸の設定
• 画像のフィット方法（contain / cover など）

各項目の数値はクリックやフィールドに直接入力することで調整できます。

編集はパーツ単体、パーツグループと分かれているので、中央のスクリーンで自分が今編集しているのは何か、しっかりと把握した上で調整しましょう。

変更はキャンバスにリアルタイムで反映されるので、仕上がりを確認しながら編集を進められます。

レスポンシブとアニメーションを設定する

レスポンシブ対応は、エディタ中央下部の切り替えボタンを使って確認・調整します。

Studioは上のデバイス設定が下位に引き継がれる仕組みなので、PC→タブレット→スマートフォンの順に調整していくと無駄がありません。

レスポンシブと言っても難しいことは一切なくて、現在表示しているサイズでパーツをデザインしていくだけです。

PC・タブレット・スマートフォンのそれぞれの表示サイズに切り替えながら、崩れている箇所のレイアウトやフォントサイズを個別に修正しておけば、ひとまず問題ないでしょう。

アニメーション

Studioでは要素ごとにアニメーション（動き）を設定できます。

パーツを選択してプロパティパネルが開いたら、右上の「条件スタイル」というボタンをクリック。

すると、ホバーや出現時、スクロールといった動きのトリガーに合わせた設定を行うことが可能です。

トリガーは以下のとおりです。

• ホバー：要素にマウスカーソルを乗せた時
• 出現時：要素が画面に始めて出現した時（一回きり）
• スクロール：画面のスクロールに合わせた動き

サイトのコーディング的に言うと、ホバーがCSSのhover、他の二つがJavaScriptのような感じです。

出現時とスクロールは似ていますが、少し違います。

出現時は画面に現れた一度きりの動きで、変化にかかる時間や始まるまでの遅延、変化のイージングなどが設定できます。

対してスクロールは、ユーザーのスクロール量に対する変化を設定していく形なので、何度でも動きますし、時間ではなく割合で設定していく形になります。

最初にページを表示した際の動きを作ったり、手軽に設定したいなら出現時、サイトのスクロールに合わせて何度も変化させたいならスクロールといった形で使い分けておくと良いでしょう。

動きに関しては、こだわったりすると難しい部分なので、最初は簡単にフェードインで出現させたり、ホバーで色をかえたり、基本的なことができれば問題ありません。

まとめ

今回はStudioのデザインエディタの基本的な使い方を紹介しました。

最初は操作に迷う場面もあるかもしれませんが、ある程度の使い方を覚えれば直感的に扱えるようになります。

ぜひ実際に手を動かしながら試してみてください。