【Studio】【初心者向け】デザインエディタの使い方｜各パネルの機能と画面構成を解説

カッパ子

studioを使い始めたんですけど、どこから手をつければいいでしょうか？

ユウ

まずは画面を把握するところから始めよう！

Studioでサイト制作を始めようとしたとき、最初に戸惑うのがデザインエディタの画面構成ではないでしょうか。

どこで、何ができるのかを把握しておくだけで、作業効率が大きく変わります。

本記事ではStudioのデザインエディタの画面構成と、各パネルの基本的な使い方について解説します。

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

Studioのデザインエディタは、縦に大きく3つのエリアに分かれています。

中央にスクリーン、左右にパネルが配置されており、それぞれの役割を理解することが、Studioを使いこなすための第一歩になります。

ざっくり言うと、左パネルで中央のスクリーンにパーツを追加、それを右パネルで編集していくのが大まかな流れになります。

画面中央には、実際に制作しているサイトのプレビューが表示されます。

最初に開いた際には白紙、もしくはテンプレートが表示されていると思います。

ここで追加した要素をクリックして選択したり、ドラッグで移動したりと、視覚的にレイアウトを組み立てることができます。

また、スクリーン下部にはサイトのレスポンシブを切り替えるツールバーが用意されています。

PC・タブレット・スマートフォンなど、デバイスごとの表示を確認しながらデザインを調整できるので、直感的にレスポンシブ対応を行えます。

左右のパネルでは、中央のスクリーンに配置するパーツの追加や編集を行うことができます。

左パネルは、ナビゲーションとの２段構成になっており、ナビゲーション何のアイコンをクリックすることで、それぞれの操作メニューを開くことができます。

色々とありますが、主に使うのは上から6つの「メインメニュー」「追加パネル」「ページパネル」「レイヤーパネル」「スタイルパネル」「アップロードパネル」辺り。

特にレイヤーパネルは実際にサイトを作っていく上で重要なパネルです。

制作する流れに沿って簡単に説明すると、追加パネルからテキストや画像・ボックスといったパーツの追加。

ページパネルでトップページ以外のページやハンバーガーメニュー用のモーダルなどを追加・管理。

レイヤーパネルで現在のサイトのレイヤー構造を確認、編集。

スタイルパネルでサイト内で使用するテキストやカラーといった共通のデザインを管理。

アップロードパネルでオリジナルの素材を追加・管理、といった感じです。

実際に使っていくと、自然に覚えていくと思いますが、サイトに新しい要素を加えたいときはここから操作することを理解しておけば、ひとまず問題ないでしょう。

右パネルでは、スクリーン上で選択した要素の詳細な編集が可能です。

フォントサイズや色・余白・配置など、基本的なことから、URLや動きなど、細かいことは何でもここから編集できます。

左パネルから追加した大まかなパーツを、実際に使えるようにデザインしていくイメージです。

パーツやグループによって編集できる内容が少しずつ変わってくるのですが、長くなってしまうので、また別の機会に解説します。

Studioのデザインエディタは、3つのエリアの役割を把握するだけで操作の流れがぐっとつかみやすくなります。

まずは各パネルをひと通り触ってみて、何となく理解してみてください。

慣れてくると、思い描いたデザインをスムーズに形にできるようになるはずです。