他のデザインツールとはここが違う！コードベースのデザインツール【STUDIO】のレイアウトの特徴を解説

こんにちは、ニューロマジックWebデザイナーのがいとです。

「コードを書かずにWebサイトを作れたらなぁ」…と思ったことはありませんか？私は長年思ってました。ところがSTUDIOを使ったところ、一切コードは書かずにWebサイトを構築〜公開まで出来てしまいました。感動です！👏

STUDIOは、実際のコードベースのデザインツールです。HTML/CSSに馴染みが無かった人にとってはレイアウトの仕方に特徴があると思います。この記事ではSTUDIOを使ったレイアウトの特徴、ボックスレイアウトについて主にWeb初学者向けに解説します。

STUDIOの概要＆おすすめポイント

• Webサイトデザインツール。見た目のデザインというよりも、コーディングをコード不要で構築できるツールです。
• ブラウザ上で完結
• 洗練されたUI
• 国産ツール。日本語で馴染みやすい
• ライブプレビューで実際の状態をリアルタイム確認しながら構築できる
• 共同編集
• 1クリックで公開
• 無料で全機能使える（2020年5月時点）
• 1〜数ページ規模のLP、Webサイト向け（2020年5月時点→6/4に大幅アップデート！）

Webサイトはボックスレイアウト

Adobe XD、Photoshop、Illustrator、Sketch、Figma、はたまたPowerPointなど… 数あるデザインツールはすべて紙に絵を描くように自由にレイアウトできますが、実際のHTMLは違います。HTMLは箱を積み木のように積み上げて組み立てるという特徴があります。（ボックスレイアウトと呼びます）
STUDIOはデザインを瞬時にコードに変換する仕組みで、ユーザーはボックスレイアウトでデザインすることになります。

ボックスを積みます

上から下に向かって順に、ボックスを積み木のように積んでいきます。積む方向は上下左右で変更できます（後述）が、基本は上から下へ、です。一番大きなボックスはheader、main、footerという名前の3つのボックスで構成されることになります。

ボックスは入れ子にできます

ボックスを入れ子構造に組み合わせることで、細かくレイアウトしていきます。

ボックスに余白を指定できます（マージン、パディング）

マージンはボックスの外側の余白のことです。パディングはボックスの内側の余白のことです。キーボードで例えるとこんな感じでしょうか。

STUDIOでは、カーソルをボックスの外側か内側にあてると色が変わり、オレンジ矢印がマージン、緑矢印がパディングを指定できます。上部のパネルでも数値入力で指定することができます。

ボックスの積む方向を指定できます（整列、折り返し）

串団子のようなUIで、直感的に方向と折り返しの有無を指定できます。

折り返し無しだと、子ボックスは親ボックスの幅で見切れます。

折り返し有りだと、子ボックスは親ボックスの幅に合わせてなりゆきで折り返します。

ボックスは伸縮できます（サイズ指定の単位）

pxでサイズ指定

ボックスの幅をpx単位で指定すると固定サイズになり、伸縮しません。

%でサイズ指定

ボックスの幅を％で指定すると、親に対しての割合の幅になります。一番大きいボックスは、ブラウザウィンドウの幅に対しての幅になります。ブラウザウィンドウのサイズを変更すると、ボックスも伸縮します。

auto指定

ボックスの幅をautoにすると、子要素に合わせて自動調整されます。

ある程度子要素を入れ込んでから、auto指定に変更すると操作しやすいです。親ボックスの縦幅は基本的にautoがおすすめです。

％やautoを使った伸縮するレイアウトをリキッドレイアウトと呼びます。（ここも従来のデザインツールとは大きく違うポイントではないでしょうか。）

この他にflex、vhの単位も用意されています。

PCとモバイル、どちらでもバランスよく見えるように調整します

前述の折り返し指定とリキッドレイアウトを組み合わせると、PCブラウザなど横長の大きい画面でも、スマートフォンなど縦長の小さい画面でも、閲覧環境に合わせて良い塩梅にボックスが並ぶように可変させることができます。これをレスポンシブウェブデザインと呼びます。

下の画像は画面幅によってボックスが折り返し、2段組から1段組に変化する様子です。

以上のように、Webデザインはボックスレイアウトで構成されています。

まとめ　STUDIOを使うとボックスレイアウトの概念が直感的に学べてしまう

初めてWebデザインに触れる方が引っかかりがちなボックスレイアウトの概念について、簡単にご紹介しました。

HTML/CSSに馴染みが無かった人にとっては慣れが必要かもしれませんが、基礎的な知識がある人にとっては、かなり直感的に触れるツールだと思います。
STUDIOでボックスレイアウトの概念を習得してから、本格的にコードを学ぶのも良さそうです。

そして、ここがSTUDIOが最高であるポイントなんですが…出来たデザインはそのまま公開できちゃいます👏　　
無料で全機能が使えますので、ぜひお試しください。