MENU
カテゴリー
アーカイブ
だいち
このブログの管理者
異業種で仕事をしながら、副業でWeb制作をしているアラサーリーマンです。
日々の勉強の記録や、お役立ち情報を発信していきます。
ホームページ制作などのお仕事に関するご依頼やご相談は、運営者情報のお問い合わせフォームかSNSのDMにて宜しくお願いします。

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

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

どうも、ダイチです。

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

  • WEBサイトのレイアウト方法がイマイチ理解できてない
  • リキッドレイアウト、グリッドレイアウトの使い分けは?

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

目次

リキッドレイアウト

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

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

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

フレキシブルレイアウト

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

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

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

カラムレイアウト

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

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

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

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

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

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

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

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

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

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

あわせて読みたい
DAICHI Portfolio
DAICHI PortfolioDAICHIのポートフォリオサイトです。福岡在住、WEBサイト製作(HP製作、LP製作)を行っています。お気軽にお立ち寄りください。

マルチカラムレイアウト

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

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

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

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

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

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

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

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

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

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

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

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

max-width : 20em; 

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

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

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

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

グリッドレイアウト

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

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

この手法はグリッドシステムとも呼ぼれています。

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

可変グリッドレイアウト

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

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

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

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

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

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

ノングリッドレイアウト

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

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

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

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

ソリッドレイアウト

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

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

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

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

まとめ

今回は代表的なものをまとめてみましたが、WEBサイトを構成するための手法はたくさんあります。

制作するサイトの種別や目的に合わせて、ユーザーに見せる部分と、UIのバランスを考えてレイアウト手法は決めていく必要があります。

レイアウトパターンを把握したうえで、一番適切だと思う手法を用いてWEB制作をすることがユーザーファーストに繋がると考えています。

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

それでは今回はこのへんで!

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる