デザインエディタとは？

デザインエディタは、Webサイトのデザインを作成する場所です。ここではページの追加、デザインに必要なパーツの追加、アニメーションの設定などが行えます。

この記事では、デザインエディタでよく使うツールをご紹介します。

画面中央にある白い部分はスクリーンと呼びます。ここにテキストや画像などの要素を配置して、Webサイトを作成していきます。

スクリーンの両端をドラッグすると横幅を伸縮させることができます。横幅を縮めるとタブレットやスマホ用のデザインが調整できます。

画面左側のパネルには、デザインに必要なボックスやパーツが用意されています。ここにあるボックスやパーツを追加して作成していきます。

左パネルには他にも、デザインの階層構造が確認できるレイヤーやページの一覧、テキストスタイルの一覧があります。

ページパネル上部のボタンからページの追加ができます。

ページを追加すると、複数のページで構成するWebサイトが作成できます。ページごとにパス*が設定でき、パスに「/」（スラッシュ）を追加して、ページを階層化することが可能です。

パスの具体例：

*パスとは、WebサイトのURLの一部で、そのページがサイト内のどの位置にあるかを示すものです。ドメイン名の後ろに続く「/」以降の部分がパスに当たります。

ページパネルでは、追加したページが一覧で確認できます。ページを選択すると、そのページが画面中央に表示され、編集することができます。

管理しやすいようにページには名称を設定することができます。この名称は公開サイトには表示されないため、プロジェクトメンバーが理解しやすい「サービス」「会社概要」などと設定することをオススメします。

レイヤーパネルには、ページに配置したボックスがレイヤーとして一覧表示されます。ここではボックスが積み上げられたり入れ子になるような階層構造が確認できます。

他にも、下記のような操作ができるため、ページの構造が複雑になってもレイヤーパネルからボックスを選択して簡単に編集ができます。

レイヤー名は自由に編集することができます。公開サイトには表示されない情報なので「メインビジュアル」や「背景画像」など、何のためのレイヤー（ボックス）なのか分かる名称を付けると管理がしやすくなります。

プロジェクトでよく使うテキストスタイル（フォントやサイズなど）を管理するテキストスタイルの一覧がある場所です。

追加パネルは、デザインに必要なボックスやパーツ、アップロード画像リストなど、ページに要素を追加する時に使う項目が集約されています。ショートカット⌘ + 4（Ctrl + 4）で開くことができます。

画面上部はのメニューは「スタイルバー」と呼ばれ、サイズや色などのスタイリングに必要なメニューとレスポンシブ設定時に使うメニューがあります。

ページ上でボックスを選択している時にはスタイル関連メニューが表示され、未選択時にはレスポンシブメニューが表示されます。

サイズや色などを変更するための機能が集まっています。スタイルバー内にはさらに、ボックス、テキスト、画像、モーションタブがあります。

レスポンシブ*設定を行う際に、ページの横幅をタブレットやモバイル用のサイズに切り替えることができます。

*レスポンシブとは、PCやスマホなど様々な画面サイズからWebサイトを見たときにどの画面で見ても表示を最適にすることです。

画面右側のパネルは設定パネルと呼ばれ、ボックスと履歴タブがあります。

選択したボックスに対してリンクやHTMLタグなどを設定する際に使います。

エディタ上の変更履歴をバージョンとして管理する場所です。以前のバージョンに戻したり、変更内容を比較することができます。編集がひと段落したタイミングで、定期的にバージョンを保存してバックアップを作成しておきましょう。

以上がデザイン時によく使うツールです。次の記事では、エディタでレイアウトを組む手順をとレイアウト組む上で知っておきたい基本を解説します。

次の記事：レイアウトの作り方

コレクション目次