STUDIOは、実際の開発に使用されるコードをベースにしたまったく新しいデザインツールです。
そのため、STUDIOのレイアウトデザインの手法は既存のデザインツールとは異なります。

STUDIOは実際のWebサイトやアプリケーション制作時に使われている、ボックスレイアウトを採用しています。

ボックスレイアウトとは

STUDIOが採用しているボックスレイアウトは、要素が積み上げられる構造(積み木構造)になっています。

従来のデザインツールは、下記図の左のように要素がテーブルの上に乗っている紙のように散らばっているイメージですが、STUDIOが採用しているボックスレイアウトは、下記図の右のようなテーブルの上に要素が積み上がっていくイメージに近いです。

左:既存タイプ、右:STUDIO

別の例で違いを説明しましょう。左の図は従来のデザインツールが採用している要素構造で、右の図がSTUDIOが採用しているボックスレイアウトによる要素構造です。

ボックスレイアウトで複雑なレイアウトを作るためには、親の要素を頂点とした階層構造にする必要があります。具体的に、右の図のように、親要素の中に子要素を追加してレイアウトを作成するイメージです。

要素の方向

ボックスレイアウトの要素の並ぶ向きは親要素で指定します。方向は、横と縦(→・↓)と各反対方向(←・↑)の4方向を指定できます。

STUDIOの要素の並びは4方向を指定できる

また、要素の並びを指定するメニューは以下の矢印の方向に対する場所に設置されます。

→ : 右側
↓ : 下側
← : 左側
↑ : 上側

余白

要素の場所を細かく調整したい場合は余白を使いましょう。余白にはマージン(外側の余白)とパディング(内側の余白)の2つがあります。

マージンとパディングの調整

STUDIOではマージンをオレンジ色、パディングを緑色で表現しています。青い選択枠にカーソルを合わせた際に表示される矢印を使って、上下左右に引き延ばすことで均等に調整できます。

マージンの個別設定の切り替え

マージンとパディングは、上部のツールメニューで数値を指定して変更することもできます。また、キーアイコンをクリックすることで、左右 / 上下左右を統一して設定することも可能です。

Did this answer your question?