実践的行動理解 / マーケティング

心理学で読み解く人間行動と意思決定

デザインエディタ

また、画面の左下には「ページ」「レイヤーパネル」「コメント」「コンテンツ編集モード」が存在します。

画面左側のパネル

画面左側のパネルには、デザインに必要なボックスやパーツが用意されています。 ここにあるボックスやパーツを追加して作成していきます。 左パネルには他にも、デザインの階層構造が確認できるレイヤーやページの一覧、テキストスタイルの一覧があります

  • ページパネル
    • ページ一覧の表示/追加/削除が可能です。
  • レイヤーパネル
    • Studioでは「ボックスレイアウト」手法を採用しています。これにより、Studioで構築されるサイトは、「ボックスが積み上げられたり、入れ子になるような構造」になります。レイヤーパネルでは、この構造の確認や、条件付きスタイルやレスポンシブの設定の有無などが確認できます。また、レイヤーパネルから要素の選択、コピー&ペースト、削除なども行えます。
  • スタイルパネル
    • プロジェクトでよく使うテキストスタイル(フォントやサイズなど)を管理するテキストスタイルの一覧がある場所です。

画面上部のメニュー

画面上部のメニューは、マウスがフォーカスしている内容ごとに表示が切り替わります

  • 未選択時 : 画面上部からは、デバイスごとの表示を切り替えてみることができます。
  • コンポーネント選択時 : スタイル関連のメニューであり、位置/幅/テキストなどを修正可能です。

画面右側のパネル

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

  • ボックスタブ : 選択したボックスに対してリンクやHTMLタグなどを設定する際に使います。
  • 履歴タブ : エディタ上の変更履歴をバージョンとして管理する場所です。以前のバージョンに戻したり、変更内容を比較することができます。

スクリーン

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

page:https://psy.hatenadiary.com/entry/2025/08/12/125933