• プログラミング

WEBページの定番・基本レイアウトは「4つ」

今回の基礎学習は「WEBページのレイアウト」についてです。

学習すると言っても、すでにみなさんはさまざまなWEBサイトを見てきたなかで見覚えのあるものばかりでしょう。

WEBページにはテキストや写真、動画やバナー、ボタンなどさまざまな素材が散りばめられています。それらを散漫に配置してもユーザーは混乱するだけ。そのため「視覚的に整理する」ことが必要になります。

昨今のWEBサイトにおいては「情報の整理整頓力」が問われており「いかにわかりやすく見せるか」が構成やデザインの見せ所になっているのです。なぜなら、わかりにくWEBサイトからは一瞬で人が離れ、二度と訪れてもらえないから。

そんなWEBページのレイアウトの基本・定型として挙げられるのは「4つ」です。

<WEBページの定番・基本レイアウト4種の例>

上の画像画像はWEBページの定番であるレイアウト例の4種です。

それでは、さっそく1つ目のパターンから見ていきましょう。

① シングルカラム・レイアウト

<特長>

①全ての領域（ヘッダー／ナビゲーション／コンテンツ／フッター）が縦に並んでいる

②スマホでもパソコンでもデザインが変わらない

③レスポンシブWEBデザインが作りやすい

④横幅を最大に使ったダイナミックなレイアウトが可能

⑤コンテンツ部分にさまざまなグリッドを配置しフレキシブルなデザインも可能

② マルチカラム・レイアウト

<特長>

①情報量の多いサイトに最適

②コンテンツ部分を2カラム（上の画像）や3カラムに組むなど多彩な配置が可能

③ブログやECサイトなどに好まれる

④シングルカラムに比べるとやや古い印象も

③ グリッド・レイアウト

<特長>

①コンテンツをタイル状に配置

②別名「カードレイアウト」とも呼ばれる

③ギャラリーやSNS、ECサイトなどに好まれる

④シングルカラムと並び現代的なデザイン

④ フルスクリーン・レイアウト

①表示画面いっぱいに写真や動画を配置

②SEOを意識しないブランディングサイトやキャンペーンサイトなどに好まれる

③ダイナミックなデザインのためおしゃれさやセンスの良さを訴求できる

レイアウトの歴史と仕組み

WEBページの主な4種を見てきましたが、前項の①②③に共通するのは、コンテンツごとに領域（ボックス）を作り、それらを縦や横に並べていることです。

このようなレイアウトは、どのように作られているのでしょうか。

プログラミングの基礎から理解する意味でも、その歴史と仕組みの遷移を下記の①〜④の流れで知っておきましょう。

①「テーブルレイアウト」

1990年代後半から2000年初頭にかけては、まだCSSが本格的には使用されていない時代でした。基本的にHTMLでだけでWEBサイトが作られていたんですね。この時の技術がHTMLの「table要素」でした。

表組みを作れるtable要素を使い、境界線は目に見えない非表示の状態にして枠組みを作る。そのなかにコンテンツとなるテキストや画像を配置する。これを「テーブルレイアウト」と呼んでいました。

table要素は、WEBブラウザの種類やバージョンも問わずに反映できる（＝クロスブラウザ）ため、使い勝手の悪いものではなかったものの、元々がWEBのレイアウトやデザインに使うものではないこと、ブラウザへの表示負荷が実は高いことなどもあり、最適な手法とは言えませんでした。

後にCSSが登場することで、テーブルレイアウトは過去の産物となったんですね。

②「floatレイアウト」

CSSレイアウトの際に使用された技術がCSSの「floatプロパティ」です。

「floatプロパティ」は、CSSで指定した画像を右や左に寄せることが可能で、従来のテーブルレイアウトとは概念や手法そのものが根本から異なります。この手法で任意のコンテンツの配置することで、段組みを表現できます。

この手法は、2010年代の半ばまで約10年に渡り活用されてきましたが、問題もありました。例えば、floatプロパティによる回り込み解除の際にレイアウト崩れなどが起こったのです。CSSの記述も複雑であり、なかなか簡単に組めるものではありませんでした。

③「Flexbox」

テーブルレイアウト〜floatプロパティの流れを経て、登場してきたのがCSS3の新機能である「Flexbox」。

CSSのdisplayプロパティの値に「flex」を指定する手法です。これにより、コンテンツを横並びにしたり、右寄せや左寄せ、中央寄せにするといったレイアウトを容易に実現可能にしました。

2015年あたりから使われ始めた「Flexbox」は、2021年現在もWEBページのレイアウトの主流として活用されています。

似た手法に「clearfix」があります。floatとの連携等の簡易的なコーディングの練習をしてみたい方は『【演習】テキストを画像に回り込ませるには？floatとclearfix。』もチェックしてみましょう。

④「Gridレイアウト」

そして、さらに自由度の高いコンテンツ配置を可能にする技術がCSS３の新機能「グリッド」です。

グリッドレイアウトは、CSSのdisplayプロパティにの値に「grid」を指定することで表現します。「Grid＝格子」の文字通り、縦と横に区切った格子状のレイアウトができるのが特長です。

前述③のFlexboxは「一次元レイアウト」と呼ばれ、一方向にボックスを並べることでレイアウトします。このGridは「二次元レイアウト」と表現され、コンテンツを配置する領域を横方向・縦方向に分割してレイアウトします。

制作するWEBサイトのタイプに応じて、FlexboxとGridを使い分けることができるのと理想です。

レスポンシブ時代のレイアウトの重要さ

世界中の個人や各会社によって、使っているスマートフォンの仕様やディスプレイの大きさが異なり、パソコンやタブレットにおいても同様の現象が起きています。

どの端末でWEBページを見ても、ユーザーにとって見やすく快適なWEBサイトを実現するために、レスポンシブWEBデザインが存在します。しかし、レスポンシブとはあくまで「枠」の話。

肝心の「コンテンツ」を違和感なくレスポンシブにするために「レイアウト」の担う責任は非常に大きなものです。パソコンでは良いデザインだったのに、スマホサイトになると見にくくダサくなるなどでは、真のレスポンシブサイトとは言えません。

作るWEBサイトがECサイトなのかコーポレートサイトなのか、ブログなのかブランディングサイトなのか等で「どんなレイアウトが一体最適なのか」を、パソコンとスマホの両視点で考える必要があります。

プログラミングを講師をピンポイントで活用

当サイト「メンタレ」は、プログラミングのメンターを「レンタル」できるサービス。

あなたのためだけの講座を組んで、現在の壁の突破をお手伝いします。

メンターがあなたのリクエストや弱みをヒアリングし、ピンポイントで講座を実施。

さらなるプログラミング学習の応用段階や、新しい言語や技術と対峙する際に役立つ「長持ちするスキル」を学びます。

独学の方はもちろん、ITに苦手意識がある方や、文系だからと躊躇されている方、現職が異業種過ぎてなかなかプログラミングへと踏み切れない方も。

予算をかけず、手堅く成長されたい方は、まずはお気軽にご相談ください。