Webサイトを「箱」で考える。／Studioで最初につまずく「BOX」の正体

最近、／Studioを使ってWebサイトをつくる機会がありました。

デザインの仕事をしているので、余白やレイアウト、レスポンシブといった
考え方そのものは知っています。

ただ、実際に／Studioを触ってみると、

「この考え方を、／Studioではどう扱うんだろう？」

と手が止まることが何度もありました。

特に最初に戸惑ったのが、

BOX、マージン、パディング、レスポンシブといった／Studio上での考え方です。

言葉の意味を知っていても、

「実際の画面では、どれをどう使えばいいのか」

となると、また別の話でした。

そこで、実際につくりながら分かったことや、自分自身がつまずいたところ
を、初心者にも分かりやすいように整理してみることにしました。

専門的な操作マニュアルではありません。

「最初はここが分からなかった。でも、こう考えたら理解できた。」

そんな目線から、／StudioとWeb制作について少しずつまとめてみたいと思
います。

今回取り上げるのは、最初につまずいた言葉の一つ、

「BOX」

です。

BOXって、いったい何？

BOXと言われても、最初はよく分かりません。

「画像を入れる場所？」

「四角い図形のこと？」

「グループみたいなもの？」

さらに、

「BOXの中にBOXを入れる」

という説明まで出てきます。

箱の中に、また箱？

でも、この「BOX」という考え方が少しずつ分かってくると、／Studioの操作だけではなく、Webサイトそのものの仕組みが見えるようになってきました。

今回は細かな操作方法ではなく、

「Webサイトを箱で考えるって、どういうこと？」

というところから整理してみます。

Webサイトを「一枚の絵」だと思っていた

Web制作を始める前、私はWebサイトを大きな一枚のデザインとして見ていました。

上にメニューがあって、大きな写真があって、その下に文章があって、サービス紹介が並んでいる。

完成したWebサイトを見ると、一枚の長いページに見えます。

ところが、／Studioで実際につくろうとすると、少し考え方が違いました。

Webページは、大きな一枚の紙ではありません。

いくつもの「箱」が組み合わさってできています。

ここが、最初の大きな気づきでした。

まず、大きな箱に分けてみる

たとえば、よくある企業サイトなら、

ヘッダー
↓
メインビジュアル
↓
サービス紹介
↓
ニュース
↓
会社紹介
↓
お問い合わせ
↓
フッター

というように、大きなまとまりがあります。

まず、この一つひとつを「箱」として考えます。

そして、その箱の中にも、さらに箱があります。

たとえば「サービス紹介」なら、

サービス紹介全体のBOX

の中に、

サービスAのBOX
サービスBのBOX
サービスCのBOX

が入っている。

さらに「サービスA」のBOXの中には、

画像
タイトル
説明文
ボタン

が入っています。

つまり、

大きな箱
↓
その中の小さな箱
↓
その中の文字・写真・ボタン

という構造です。

完成画面だけを見ると、一枚のデザインに見えます。

でも中身を見ると、

箱の中に箱があり、その中にさらに要素が入っている。

Webサイトは、そんな「入れ子構造」でできています。

「親」と「子」で考えると分かりやすい

この構造は、「親と子」で考えると少し分かりやすくなります。

たとえば、「サービス紹介」という大きなBOXが「親」。

その中にある、

サービスA・B・C

のBOXが「子」です。

さらにサービスAの中に写真や見出しが入っていれば、それらはサービスAのBOXに対する「子」になります。

少しややこしいのは、

あるBOXが「子」でありながら、別の要素に対しては「親」にもなる

ことです。

私はこれを、収納ケースで考えると理解しやすくなりました。

大きな収納ケースの中に、小さなケースがある。

その小さなケースの中に、さらに物が入っている。

Webサイトも、それに近い構造です。

なぜ、わざわざBOXに入れるのか？

ここで疑問が出ます。

「文字や写真を、そのまま置けばいいのでは？」

私も最初はそう思いました。

でも、BOXにまとめる理由があります。

たとえば、

写真＋タイトル＋説明文

を一つのBOXに入れておけば、そのまとまりごと動かせます。

余白もまとめて調整できます。

横に並べることもできます。

スマートフォンでは、縦に並べることもできます。

つまりBOXは、見た目を囲むための四角ではなく、

複数の要素を一つのまとまりとしてレイアウトするための「器」

と考えると分かりやすくなります。

グループとBOXは、何が違う？

ここも、最初は迷いやすいところでした。

複数のものをまとめるなら、

「グループにすればいいのでは？」

と思います。

この違いは、まずシンプルにこう考えました。

グループ＝束ねる

BOX＝レイアウトする

グループは、複数の要素をひとまとめにして扱いやすくするもの。

一方BOXは、その中に要素を入れたうえで、

幅・高さ・余白・並び方

などを考えるための「器」です。

つまりBOXでは、

「中身をどう配置するか」

まで考えます。

Webサイトの構造をつくるときは、「何を一緒に動かすか」だけではなく、

「何を一つのまとまりとしてレイアウトするか」

を考える必要があります。

BOXが分かると「余白」も分かってくる

ここで、デザインの基本で学んだ「余白」とつながりました。

デザインでは、

「余白もデザインの一部」

と考えます。

でもWeb制作では、その余白を実際に設定しなければなりません。

そこで出てくるのが、

マージン（Margin）

と

パディング（Padding）

です。

最初は、この二つもややこしく感じます。

でも、簡単に言えば、

マージン（Margin）＝BOXの外側の余白

パディング（Padding）＝BOXの内側の余白

です。

たとえば、BOXの中に文章が入っているとします。

文章とBOXの端がぴったりくっついていると、窮屈に見えます。

そこで、内側に余白をつくる。

これがパディングです。

一方、隣のBOXとの距離を空けたい。

そのときに考えるのがマージンです。

つまり、

マージンは、BOXとBOXの間を空ける余白。

パディングは、BOXの中で、内容と端の間を空ける余白。

と考えると分かりやすくなります。

ここで初めて、

「デザインで学んだ『余白』を、Webではこうやってつくるのか」

とつながってきました。

PCではきれいなのに、スマホで崩れるのはなぜ？

／Studioでつくっていると、

「PCではきれいなのに、スマホで見ると崩れる」

ということがあります。

ここで関係してくるのが、

「レスポンシブ」

という考え方です。

レスポンシブとは簡単に言えば、

画面の幅に合わせて見せ方を変えること。

たとえばPCでは、

［BOX］［BOX］［BOX］

と3つ横に並んでいたものを、画面の狭いスマートフォンでは、

［BOX］
［BOX］
［BOX］

と縦に並べ直します。

スマートフォン用に別のページをゼロからつくるのではなく、

「同じBOXを、画面幅に合わせてどう並べるか」

を考える。

こう考えると、「レスポンシブ」という言葉も少し身近になります。

BOXは「デザインの4大原則」ともつながっている

ここまで考えて、もう一つ気づきました。

BOXは、単なる／Studioの機能ではありません。

デザインの基本である、

「近接・整列・反復・コントラスト」

ともつながっています。

関係する情報を一つのBOXにまとめる。
→ 近接

BOXの位置をそろえる。
→ 整列

同じサービスBOXを同じ形で並べる。
→ 反復

重要なBOXだけ、大きさや見せ方を変える。
→ コントラスト

つまり／StudioでBOXを組んでいるとき、

デザインの基本原則を、Web上で実際に組み立てている

とも言えます。

デザインの基本として学んできたことが、実際のWeb制作につながっている。

ここは、／Studioを使っていて特に面白いと感じたところです。

分からなくなったら、「この箱の親はどれ？」と考える

／Studioで作業していて、

「なぜ動かないんだろう？」

「なぜここに余白ができるんだろう？」

「なぜスマホだけ崩れるんだろう？」

と迷ったとき、目の前の文字や画像だけを直そうとしても解決しないことがあります。

そんなとき、一度こう考えてみます。

「この要素は、どのBOXの中に入っているんだろう？」

そして、

「そのBOXの親はどれ？」

と、一つ上の階層を見る。

すると、原因が子の要素ではなく、親BOXの設定にあることがあります。

Web制作では、目の前の要素だけを見るのではなく、

「その要素が、どんな構造の中に入っているのか」

を見る視点が、とても大切なのだと思います。

Webサイトは「箱の組み合わせ」でできている

最初はよく分からなかった「BOX」。

でも今は、

Webサイトを理解するための基本的な考え方の一つ

として捉えています。

完成したWebサイトを見ると、一枚のきれいなページに見えます。

でも、その裏側には、

大きな箱があり、
その中に小さな箱があり、
さらにその中に文字や写真がある。

そんな構造があります。

／Studioで迷ったときは、完成画面だけを見るのではなく、

「これは、どの箱に入っている？」

と考えてみる。

それだけでも、Webサイトの見え方はかなり変わります。

／Studio NOTE

最近、実際に／Studioを使ってWebサイトをつくる中で、分からなかったことや、つまずいたことがいくつもありました。

この「／Studio NOTE」では、専門的な操作マニュアルではなく、

「最初は分からなかった。でも、こう考えたら理解できた」

という初心者の目線から、Web制作の仕組みを少しずつ整理していきます。

分からなかったことを、そのままにしない。

仕組みが分かると、操作も少しずつ分かるようになる。

そして、その先には、

Web制作とデザインは、別々のものではない

ということも見えてきます。

次回は、今回登場した、

「マージンとパディングって何が違う？ Webで考える『余白』の話」

を、もう少し詳しく見ていきたいと思います。