レイアウトの作り方
Studioでは、ページ上に箱を積み重ねたり、箱の中に箱を入れたりしてレイアウトを作ります。そして箱の大きさを変えたり、色をつけたりしてデザインしていきます。
このレイアウト手法は「ボックスレイアウト」と呼ばれ、コーディングで作成するウェブサイトの構成を基にしています。Studioではこの箱のことを「ボックス」と呼びます。
ボックスには様々な種類があり、用途に合わせて使い分けてページを作成していきます。ボックスの一例：
ボックス
テキストボックス
画像ボックス
Embedボックス（埋め込みコードを追加して使います）
押さえておきたいポイント
Studioで操作する際、どのようにボックスを積み重ねたり、ボックスの中にボックスを追加すれば良いか考えながら操作すると上手くレイアウトが作成できます。
そのためには、まずWebサイトの構成を理解しておく必要があります。ここでは、実際のWebサイトを例に構成を確認していきます。
ページの構成方法
このサイトは大きく分けると、上からヘッダー、メイン、フッターの3つの部分で構成されています。
Studioでは、分割した部分をボックスを使って整理します。Studioでデザインする際はページ全体をボックスに分けて構成します。
ヘッダーを作成してみよう
先ほど構成を確認したページのヘッダーを手元で実際に作成してみましょう。
ヘッダーセクションの中には、5つのテキストと1つのアイコンが入れ子になっています。
このヘッダーをStudioで作成するには、以下の手順でレイアウトを組んでいきます。
ボックスを配置する
ボックスの中に、テキストボックスなどを追加する
追加したボックスを横に並べる
並べたボックスを左右に配置する
余白を調整する
作成するために使うツール
ヘッダーを作る際に使うツールとその使い方をまずはご紹介します。これらツールはさまざまなレイアウトを作る上で頻繁に使うツールなので、使い方を覚えておきましょう。
ボックスの並ぶ方向と配置を調整するツール
ボックスをどの方向に並べ、配置するか調整するツールがあります。このツールは、ボックスを選択するとボックスの上部に表示されます。
このツールは、選択したボックスの中に別のボックス（子ボックス）が入っている場合のみ表示されます。このような子ボックスを含むボックスを「親ボックス」と呼びます。
ボックスの並ぶ方向を指定する
ボックスの並ぶ方向は、矢印を選択して設定できます。「→」を選択すると、ボックスが左から右へ並ぶようになります。このツールを方向メニューと呼びます。
折り返しアイコンを選択すると、ボックスの自動折り返しが設定できます。
親ボックスの横幅が狭くなり、子ボックスが横並びで収まらなくなった場合に、自動的に折り返すようになります。
この設定は、レスポンシブデザイン作成時に役立ちます。「→」のままだと、画面幅が狭くなった際にボックスがページからはみ出てしまうことがあるためです。
ボックスの配置を調整する
ボックスをどこにどのように配置するかは、配置メニューから設定できます。水平方向では「左・中央・右」、垂直方向では「上・中央・下」の配置が選択可能です。
両端揃え：親ボックスの高さに合わせて、子ボックスの高さが自動的に調整されます。
均等配分：ボックス間の間隔が等間隔になるように配置されます。
より詳しい説明は、ボックスの並び方をご覧ください。
ボックスをまとめるグループ化
グループ化とは、文字通り選択する複数のボックスをまとめて1つのボックス（グループ）として扱うことができるようにすることです。
グループ化したいボックスをShiftキーを押しながらクリックします。右クリックで表示されるメニューから「グループ化」をクリック、またはショートカットキー⌘+G（Mac）/ Ctrl+G（Windows）を使用します。
グループ化されると、新しい親ボックスができあがります。
余白を設定するツール
マージン・パディング・ギャップを使って、余白を調整することができます。
マージン（オレンジ色）: ボックスの外側の余白
パディング（緑色）: ボックスの内側の余白
ギャップ（ピンク）：ボックス間の余白
スタイルパネルから数値を変更するか、ボックスの境界線上の矢印をドラッグすることで調整できます。複数のボックスを選択すると一括で余白が設定できます。
ヘッダーの作成手順
先ほど紹介したツールを使って、実際に操作してみましょう。
1. ボックスの配置
エディタを開き、画面左側にあるボックスアイコンをドラッグ&ドロップでページに配置します。
2. ボックスの中にボックスを追加
画面左側のテキストアイコンをドラッグ&ドロップし、ヘッダーに入れます。
3. 追加したボックスを横に並べる
ヘッダーセクションを選択すると、ボックスの上部に矢印（方向メニュー）が表示されます。「→」を選択して、ボックスを左から右へ並ぶようにします。
4. 並べたボックスを左右に配置する
ここまでの作業で、以下のようなレイアウトが完成しました。（分かりやすくするため、テキストの内容を変更しています）
そして目標とするヘッダーのレイアウトは以下です。
現状のレイアウトではテキストボックスが均等に配置されてしまっています。これを目標レイアウトのように左右に寄せるために、左右それぞれグループ化を行います。
配置を調整します。
5. 余白を調整する
レイアウトの大枠が完成したら、最後に余白を調整して仕上げます。
まとめ
Studioでのレイアウト作成の基本的な流れは、以下のようになります。
セクションに分けてボックスを配置
ページ全体をセクションごとに分け、それぞれにボックスを配置する。
ボックスの方向と配置を設定
方向メニューでボックスの並ぶ方向を、配置メニューで配置位置を設定する。
グループ化で構成を整理
必要に応じて、複数のボックスをグループ化し、レイアウトの構成をわかりやすく整理する。
ボックスの方向と配置を設定
グループ化したボックスに対しても、方向と配置を設定して見た目を整える。
余白を調整
マージン、パディング、ギャップを調整し、ボックス間の余白を最適化する。
以上の手順を意識しながらレイアウトを組むことで、効率的に作成できます。次の記事では、タブレットやスマホでのWebサイトの表示を調整するレスポンシブ設定について解説します。
次の記事：レスポンシブ設定の仕方
コレクション目次