Webサイトのレイアウト手法と参考サイトまとめ【Webデザイン】

今回はWEB制作におけるレイアウト構成の手法と、実際にそのレイアウト手法が取り入れられているWebサイトをまとめました。

こういった悩みを抱えている方は是非ご覧ください！

リキッドレイアウト

要素の幅を％で設定し、ブラウザのウィンドウサイズにあわせて全体の要素サイズも変動させる手法です。

この指定方法であれば、画面幅が変動してもレイアウトが維持されるため、統一されたデザインを画面幅関係なく見せることができます。

ただ、リキッドレイアウトのみで構成していると、画面幅によってはレイアウトが間伸びしたり縮小されてデザインが崩れることがあります。

参考事例

フレキシブルレイアウト

リキッドレイアウトと同じで要素の単位を％で指定しますが、min-widthやmax-widthを使用して最小幅と最大幅も指定します。

画面サイズの大きいPCなどは、文字や写真などのデザインのバランスが崩れないよう上限幅を設定することが多いです。

画面幅が極端に大きくなっても（小さくなる場合も）一定以上は要素幅が変動しなくなる手法の為、上記リキッドレイアウトのデメリットとなる点を改善したレイアウト手法とも言えます。

参考事例

カラムレイアウト

カラムとは垂直方向の区切り＝列の事を指します。

要素を縦方向のブロックで分けて構成するレイアウト手法です。

デザインを1カラム、2カラム…といったようにカラム数（区切られるブロック数）で分けます。

レイアウトの考え方としてシンプルなため、多くのWEBサイトに採用されており、レスポンシブデザインと組み合わせられることも多いです。

また、ブロックが一つのシングルカラムレイアウト、複数ブロックのマルチカラムレイアウトと、分けて呼ばれることもあります。

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

縦方向に1ブロック単位でコンテンツをレイアウトします。

ビジュアルを重視したサイトや、縦方向にスクロール誘導させる広告ページなどに採用されることが多いです。

スマートフォンは画面幅が狭いため、シングルカラムレイアウト構成になっていることが多いです。

僕のポートフォリオサイトもこのワンカラム構成でデザインしています。

参考事例

マルチカラムレイアウト

縦方向に二つ以上のブロックでレイアウトします。

PC画面などで見る場合は一画面に情報を多く掲載できるためユーザーのUI的にも効率がいいレイアウトとも言えます。

ポータルサイトやショッピングサイト、ブログサイトなど多くのWEBサイトに採用されています。

参考事例（2カラム）

参考事例（3カラム）

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

レイアウトの考え方としてはシングルカラムレイアウトと同様ですが、こちらは要素を画面幅いっぱいに広げたレイアウトです。

縦方向にスクロールして要素を配置する一般的なサイト構成もあれば、トップビジュアルのページを起点に他ページへはリンクで繋ぐようなサイト構成もあります。

写真やデザインを効果的に使ったインパクト重視の手法です。

参考事例

エラスティックレイアウト

文字幅を基準にするレイアウト手法で、要素の単位をemで指定します。

「em」とは文字サイズにおける単位の一つです。1emの大きさはブラウザフォントサイズのデフォルト値で決まり、サイト制作者やユーザーが変更しなければ1emは16pxとなります。

指定される親要素に影響を受けるため、例えばルートにフォントサイズ30pxと指定した場合、2emは60pxと算出されます。

この指定により、ブラウザ側で文字サイズを変更するとレイアウト幅も連動して可変することになります。

max-width : 20em; 

このように要素の幅を指定することで、20文字分が画面に表示されます。

文字サイズと連動してレイアウト幅も可変するため、文字サイズを大きくしてもデザインのバランスは崩れません。

文字の改行を一定の位置で調整したいなど、文字がデザインの主体になるコンテンツサイトには適しています。

ただ、文字を大きく見たい場合ブラウザ自体のズーム機能を使うことが多いことや、pxなど他単位が混在するとCSSの設計が難しくなる為使いどころが限られます。

参考事例

グリッドレイアウト

架空の縦横線を敷き、そこに出来たグリッド（格子）に合わせて文字や画像などの要素を配置するレイアウト手法です。

全体的に整ったレイアウトになるため、ショッピングサイトなど商品を整列して見せたいWEBサイトなどに多く採用されています。

この手法はグリッドシステムとも呼ばれていて、CSSのdisplay:gridを使って実装されるサイトも増えてきました。

いくつかの制御方法を付け足すことで派生するレイアウト手法も構築できることから、デザインの基本システムの一つともなっています。

参考事例

可変グリッドレイアウト

グリッドレイアウトとリキッドレイアウトを合わせたレイアウト手法です。

グリッドベースのpxを%に変えることで、グリッドの仕組を可変レイアウトに利用できます。

こちらはPCからブラウザ幅を可変させながら参考サイトを見ていただいた方がわかりやすいかもしれません。

参考事例

ブロークングリッドレイアウト

グリッドの軸から要素をあえてずらして配置することで、動きのあるデザインを狙って表現するという手法です。

ユーザーに躍動感や洗練された印象を与えることができる今風なデザイン手法です。

参考事例

ノングリッドレイアウト

ブロークングリッドレイアウトに近いですが、ブロークングリッドレイアウトよりも規則性を大きく外しながら要素を自由に配置する手法となっています。

ブロークングリッドレイアウトがグリッドで整列された要素を「ずらす・重ねる」といった配置をとるのに対して、ノングリッドレイアウトは「崩す」という表現で、より大きな変化を与えるレイアウトです。

見せることに特化したデザインとも言えるため、非常にオリジナリティは生まれます。

ただ、読ませるコンテンツがあるブログサイトなどには向いてないレイアウト手法です。

参考事例

ソリッドレイアウト

ソリッド（固定幅）で要素を指定することで、ユーザーのブラウザサイズに関係なく同一のレイアウトを見せることが可能となる手法です。

掲載する情報量が多い総合サイトやなどに採用されることが多いです。

ただ、ブラブザ幅が可変された場合にデザインが見切れたりと、ページが見づらくなってしまうという欠点もあります。

多様なウィンドウ幅の端末がある昨今、Googleが推奨するのはレスポンシブデザインであることからも、ソリッドレイアウトのみでデザインされているWEBサイトは少なくなってきています。

参考事例

まとめ

今回は代表的なものをまとめてみましたが、WEBサイトを構成するための手法はたくさんあるため、制作するサイトの種別や目的に合わせてレイアウト手法は決めていく必要があります。

今はスマートフォンからの閲覧も多いことから、サイト次第ではスマホファーストのデザインが求められることも。デザイン制作時はどんな端末からでも最適に閲覧できるレスポンシブデザインも考慮しておきましょう。

また、当記事はこちらの書籍も参考にさせていただきました。様々なレイアウトの特徴まで詳しく解説されているので紹介させていただきます！

レイアウトパターンを把握したうえで、一番適切だと思う手法を用いてWebデザインを作成しましょう！

この記事の監修者

粟飯原匠 |プロデューサー

マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。