STUDIOでは、Webサイト構成、レイアウト設計を行うことができ、コンテンツを追加してデザインを完成させ、コードを書くことなく機能的なWebサイトを制作し公開することができます。

編集画面は、以下のように構成されています。

  • 左サイドバー … 要素パネル(縮小/拡張) 
  • トップバー … プロジェクトバー、スタイルバー、レスポンシブバー
  • 右サイドバー … レイヤーパネル
  • ボトムバー … ヘルプ、ライブチャット
  • キャンバス

左サイドバー

要素パネル(縮小した状態)

要素パネルから、キャンバス上にドラッグ&ドロップできます。

  • ボックス
  • 画像
  • テキスト
  • アイコン

要素パネル(拡張した状態)

縮小した状態から矢印ボタンをクリックするとパネルが拡張されます。

拡張されたパネルでは、4つのタブからキャンバス上に要素またはコンテンツをアップロード、もしくはドラッグ&ドロップできます。

  1. ボックス
  • 基本要素
  • iframe(マップやビデオを埋め込んだり、カスタムで導入)
  • フォーム
  • テンプレート、ワイヤーフレームのコンポーネント

 2. 画像

690,000以上のストック画像をライブラリから閲覧し、追加できます。(unsplash)

   3. アイコン

フリーアイコンのライブラリーから閲覧し、追加できます。

   4. アップロード

好きな画像やGIFファイルをアップロードできます。

トップバー

トップバーは以下の順に並んでいます。

プロジェクトバー

プロジェクトバーでは、以下のことが可能です。

  • STUDIOのアイコンをクリックすると、個人のダッシュボードに移動します
  • プロジェクトの名前をクリックすると、プロジェクトのダッシュボードに移動します
  • 元に戻す、やり直す
  • ズームイン、ズームアウト
  • ライブビューの起動、共有
  • ウェブサイトを公開する
  • チームメンバーの追加、管理

スタイルパネル

要素を選択するとスタイルパネルが表示され、選択した要素に応じて内容が変わります。(例えば、アイコンが選択されていると、アイコンのスタイルパネルが表示されます)

ボックスタブは常に表示しています。マージンとパディング、横幅と縦幅、塗りつぶしの色などがあります。

ボックスタブの左端には、「表示」「配置」「Z-index」があります。

ボックスタブの右端には、状態(ホバーを含む)があります。

レスポンシブバー

レスポンシブバーを使用すると、すばやくレスポンシブ対応にするために、複数の画面サイズの確認ができます。

レイヤーパネル

レイヤーパネルは、右サイドバーにある以下のアイコンをクリックすると表示されます。

レイヤーパネルを拡張すると、レイヤー化した要素が表示され、親子関係を明確に確認することができます。親要素をクリックすることで、その中の子要素を表示または非表示することができます。

ボトムバー

ライブチャット

ライブチャットは、いつでもサポートに質問することができます。ご返信は可能な限り早く対応しています。

ヘルプ

ヘルプページでは、STUDIOの使い方やよくある質問などをご案内しています。

キャンバス

キャンバスは編集作業を行うエリアです。

キャンバスのトップバーには、以下のものが表示されています。

  • ページリスト
  • 現在編集を行なっているページの名前、URL
  • ページ、またはモーダルボタンの追加、複製、削除
Did this answer your question?