すべてのコレクション
STUDIOとは
STUDIOの基本とレイアウトの流れ
STUDIOの基本とレイアウトの流れ

STUDIOでウェブサイトを制作する前に知っておくべきこと

Jack Park avatar
対応者:Jack Park
一週間前以上前にアップデートされました

STUDIOへようこそ!

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

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

はじめに

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

STUDIOではその箱を「ボックス」と呼んでいます。ボックスには複数の種類があり、それぞれ用途や仕様が異なります。

STUDIOで使用するボックス例

  • ボックス

  • テキストボックス

  • 画像ボックス

  • iframeボックス

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

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

STUDIOのDesign Editor

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

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

スクリーン

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

追加メニュー

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

スタイルバー

エディタ上部にあるスタイルバーは、サイズや色などのスタイルを変更するメニューが表示されます。

また、エディタ内で選択する要素によって表示されるメニューが自動で切り替わります。

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

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

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

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

ボックスレイアウト

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

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

1)作業効率がグッと上がる

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

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

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

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

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

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

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

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

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

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

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

このサイトは大きく分けるとヘッダー、メイン、フッターの3つの部分で構成されています。

これらは、それぞれボックスで構成されています。つまり、このサイトは3つのボックスに分かれていると言えます。

STUDIOでは、このように分割した部分をセクションを使って整理します。(色はわかりやすくするためにつけました)

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

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

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

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

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

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

ボックスの方向

ボックスの並ぶ方向は、矢印の方向メニューを選択して設定できます。例えば、「→」を選択すると、ボックスが左から右へ並びます。

また、Z型の矢印を選択するとボックスの折返しが設定できます。親ボックスの幅が狭くなり子ボックスが収まらなくなると、自動で折り返えすようになります。

ボックスの配置

アイコンが並ぶ配置メニューでは、アイコンを選択してボックスの配置を設定します。

水平方向では、左、中央、右に配置。垂直方向では、上部、中央、下部の配置が選択できます。

折り畳まれているメニューを開くと、両端揃え均等配分が選択できます。

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

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

  1. 方向メニューを使って、ヘッダー内のボックスをで右方向に積み上げるように設定します!

  2. 配置メニューを使って、ヘッダー内のボックスを両端に配分してあげたら、左右の端にボックスが配分されます!

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

グルーピングを意識する

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

実際のヘッダーはこちら

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

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

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

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

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

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

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

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

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

グループ化すると、選択されたボックスたちがボックスの中に自動的に入れ子にされます!グループ化したことは、追加パネル内にあるレイヤーパネルから確認できます。

細かな調整はマージンとパディングで

さあ大体のレイアウトは完成してきましたね。あとは細かな調整です!

STUDIOでは、マージン・パディング・ギャップで余白の設定ができます。今回は、マージンとパディングを使います。

  • マージン(オレンジ色)... ボックスの外側の余白

  • パディング(緑色)... ボックスの内側の余白

これらの操作はとても簡単です!以下をご覧ください。

余白はスタイルバーから数値を変更するか、ボックスを選択し表示されるオレンジ色または緑色の矢印を上下左右に引き延ばすことで設定できます。

また、ボックスを複数選択して余白を一括設定することも可能です。このように、細かいレイアウトの調整はマージンやパディングで行います。

まとめ

STUDIOでのレイアウト作成の流れをまとめると次の通りです。

  1. セクション毎にボックスを積み上げる

  2. ボックスを積み上げる方向・配分方法を設定する

  3. ボックス内の細かなセクションをグループ化する

  4. グループ化したボックスの積み上げる方向・配分方法を設定する

  5. 3.4を繰り返す

  6. 細かな調整をマージンやパディングで行う

これでSTUDIOの基本とレイアウトの流れが理解できたはずです。STUDIOを使用してあなただけのオリジナルのウェブサイト制作を楽しんでいただけたらと思います!

他にも、STUDIOでwebサイトを作成する上でためになる記事をリストアップしました。ぜひ、ご覧ください。

関連記事

こちらの回答で解決しましたか?