STUDIOの基本とレイアウトの流れ

STUDIOへようこそ
- はじめに
- STUDIOのDesign Editor
ボックスレイアウト
自由にレイアウトを作成する方法
まとめ

STUDIOへようこそ

STUDIOへようこそ！

STUDIOではあなたのオリジナルのウェブサイトを簡単にデザインし、公開することができます！

この記事ではSTUDIOであなたの理想のウェブサイトを作る上で知っておかなければいけないことを解説します。この記事を読み終えると、STUDIOの基本とレイアウトの流れが理解できます。

はじめに

STUDIOでのデザイン方法は至ってシンプルで、箱を積み重ねたり、箱の中に箱を入れたりしてレイアウトを作成します。そして、その箱の大きさを変えたり、色をつけたりしていくことでスタイリングしていきます。

STUDIOではその箱を「ボックス」と呼んでいます。

例えば以下のようなボックスがあります。

ボックス
テキストボックス
画像ボックス
Iframeボックス

これらのボックス（箱）を積み重ねたり入れ子にすることで、ウェブサイトをデザインできるのです。

一度、STUDIOでのデザイン方法に慣れれば、作業効率も大きく上がります。まずSTUDIOでのデザイン方法を詳しく説明する前に、STUDIOのUIを一緒にみていきましょう。

STUDIOのDesign Editor

STUDIOでは上図のデザインエディター上でウェブサイトをデザインします。

大事なツールをそれぞれ紹介します！

スクリーン

デザインエディターの真ん中にあるのがスクリーンです。スクリーン上にボックスを配置してウェブサイトを作っていきます。

追加メニュー

エディター左側に追加メニューがあります。追加メニューからテキストボックスなどサイトを構成するボックスをスクリーンに追加していきます。

スタイルバー

エディターの上にあるのがスタイルバーです。スタイルバーはエディター内の選択してる要素によって表示されるメニューが切り替わります。ボックスを選択した時はボックスをスタイリングするためのメニューに切り替わります。

ぜひ、エディターを実際に触ってみてください！

エディターを触ってみる

こちらは、ボックスを追加しそれらをスタイリングしている様子です。

スクリーン内の要素は、すべて「ボックス」で構成されています。スクリーンに新たにテキストボックスを追加し、スタイルバー上でテキストボックスのサイズやフォントなどを変えています。

このように、基本はテキスト、画像などのボックスをスクリーン内に配置しそれらをスタイルバー上でスタイリングするステップを踏むことでウェブサイトが作られていきます。

ボックスレイアウト

STUDIOでは箱を積み重ねたり、箱の中に箱を入れたりしてレイアウトを作成していくと紹介しました。このレイアウト手法を「ボックスレイアウト」と呼びます。

ボックスレイアウトは、本物のウェブサイトの構成を基にしている手法です。ウェブサイト開発をするエンジニアは、ボックスレイアウトを用いてコード上でウェブサイトを作っています。エンジニアではない方にとっては聞き慣れないと思いますが、他のウェブサイトビルダーのように、画面上に自由自在に要素を配置するやり方よりも優れてる点があります。

１）作業効率がグッと上がる

一番初めにキーボードを触った時を思い出してください。両方の人差し指だけを使ってタイピングする方が、指をホームポージションに置いてブラインドタッチするよりも簡単でしたよね？ですが、１週間程度の少しの慣れで正しい打ち方を習得できれば、効率がとても良くなります。

ボックスレイアウトはキーボードのこの感覚と似ています。最初はボックスを自由に配置するのが難しく感じるかもしれません。ですが、慣れると作業効率がグッと上がります！

２）作成されるウェブサイトのコードが綺麗

本物のウェブサイトを元にした手法で作成されるので、STUDIOで作成されるウェブサイトのコードは整理されていて綺麗です。

３）他のデザインツールなどでも応用できる

ボックスレイアウトに慣れると本物のウェブサイトを意識してデザインできることになるため、他のデザインツールなどにも応用できます。例えばFigmaなどを使ってアプリケーションのデザインする時に、デザインのレイヤー構造をそのままウェブサイトにも取り入れられるようになったりします。

ボックスレイアウトに一度慣れてしまえば、デザインにのみ集中できるようになり、ウェブサイトがとても簡単に効率的に作れるようになります！

では実際にどのようにレイアウトを組み上げていくか解説していきます。

自由にレイアウトを作成する方法

ウェブサイトの構成を学ぶ

ボックスレイアウトは本物のウェブサイトの構成が元になっている手法です。つまり、本物のウェブサイトも箱を積み重ねたり、箱が入れ子になって作られています。こちらのサイトをみてみてください！

このサイトは大きく分けるとヘッダー、メイン、フッターの３つのセクションでできています。

実は、このセクション一つ一つがボックスで構成されています。つまり、このサイトは３つのボックスに分かれています。

STUDIOでは、スクリーンに３つのボックスを積み重ねることで、このレイアウトを再現できます。（色はわかりやすくするためにつけました）

このように、STUDIOでデザインするときはサイトをセクション毎に分けて考えて、セクション毎のボックスを用意してあげましょう！

実際に試してみる

ボックスを横に積み上げる

次は、セクション毎のデザインを考えましょう。ヘッダーに注目してみてください。

先ほど、大きく分けると３つのボックスで構成されていると言いましたが、さらにそれらのボックスの中にもボックスが入っています。ヘッダーの場合はボックスの中に、５つのテキストボックスと１つのアイコンボックスが入れ子になっています。

STUDIOで同じヘッダーを作るためには、スクリーンに置いたヘッダー用のボックスの中にボックスを入れていきます。ただし、今回はボックスを縦に積み上げていくのではなく、横に積み上げていかなければいけません。そしてボックスが横に一列に並んでるのではなく、左右に分かれています。

このような配置にするには、ボックスを選択した時にボックスの周りにでてくるツールを使用していきます。これらのツールを一つずつ紹介していきます。

方向メニュー

ボックス内のボックスの積み上げる方向を上下左右の4方向から設定できます。

配分メニュー

ボックスの積み上げる配分を設定できます。後ろ寄せ・真ん中・前寄せの他に、両端に配分したり、均等配分も設定できます。

整列メニュー

ボックスの積み上げる方向に対して、子要素を左揃え・右揃え・中央揃え・両端揃えに設定することができます。

以上が基本的な操作方法です。もっと詳しい内容はこちらでご確認ください！

さて、実際にヘッダーのボックスの中にテキストボックスとアイコンボックスを入れて、以下を設定してみましょう！

方向メニューを使ってヘッダー内のボックスをで右方向に積み上げるように設定します！
配分メニューを使ってヘッダー内のボックスを両端に配分してあげたら、左右の端にボックスが配分されます！

まだ思った通りになっていませんね。でも問題ありません！次のステップでさらに整えていきます！

グルーピングを意識する

先ほど作ったものはこちら！(テキストはわかりやすくするために変えました）

実際のヘッダーはこちら

まだ正しいレイアウトになってないのがわかります。

STUDIO上で作ったものはテキストボックスがボックス内で均等に配置されてしまっています。実は配分メニューで選んだ設定は、先頭のボックスを前寄せに、最後尾のボックスを後ろ寄せに、その他の各ボックスは均等に配置されます。

では、実際のヘッダーのように左右に寄せるにはどうすればいいのでしょうか？

そこで使うのがグループ化です！

最初に言ったコツを思い出してください。STUDIOでデザインするときはサイトをセクション毎に分けて考えて、セクション毎のボックスを用意してあげることが大切です。

レイアウトはボックスを入れ子にして作ると述べましたが、ボックスは何層にも入れ子にできます。つまり、ヘッダーの中のテキストボックスも小さなセクション毎にボックスに入れてグループ化すればいいのです。

STUDIOでグループ化をするには２通りあります。

１つ目は、セクション毎にボックスを積み上げたときのように、ボックスの中に小セクション毎のボックスを積み上げていくやり方です。

しかし先ほどのようにすでにテキストボックスを積み上げてしまってる場合に手間がかかってしまいます。ですが心配ありません、STUDIOではボックスを複数選択して右クリックメニューからグループ化（⌘+G / Ctrl+G)することができます！複数選択はShiftを押し続けながらボックスを選択するだけです！