Webデザインの学習を始めるにあたり、今回はレイアウトの考え方を学んでいきましょう。
Webサイトを作る目的や見せたい情報に応じて、最適なレイアウト方法を選ぶことは重要です。 この記事では、webサイトのさまざまなレイアウト方法について紹介しながら解説します。
- Webサイトのレイアウト方法の基本
目次
Webデザインのレイアウト方法
レイアウトとは
レイアウトとは、何をどこに配置するか決めることです。
デザインを作成する際には、画像や文章などの情報を「どこに配置するか」「どのようにユーザーに見せるか」を決めるためにレイアウトを考えます。
Webデザインにおいて、レイアウトを決める際にはある程度決まった型があります。 それらの型を守ることで、綺麗で見やすいWebデザインを作成することができるのです。
見やすいレイアウトにすることで、ユーザーがサイトから離脱することも防ぐことができるので、見せたい情報の説明に適したレイアウト方法を学んでいきましょう。
カラムを活用したレイアウト
レイアウトについて学ぶ前に、カラムという概念について知っておきましょう。
カラムとは
カラムとは、縦のまとまり（列）のことをいいます。Webデザインでは目的に合わせたカラムの数を使用して、レイアウトを組んでいきます。
ワンカラムレイアウト
ワンカラムレイアウトとは、コンテンツを左右に配置せず、縦一直線のまとまりで配置するレイアウト方法のことです。
ワンカラムレイアウトは以下のような特徴があります。
視線の誘導が少なく、サイトの内容に集中できる
サイトにストーリー性を持たせやすい
レスポンシブデザインと相性が良い
特にランディングページのような、集客を見込みたいサイトにはよく使用されています。
２カラムレイアウト
2カラムレイアウトは、画像と文章、あるいは画面全体をメインセクションとサイドバーで分割するなどして、2つの列で構成されるレイアウトです。
ECサイトや、ブログサイトなどユーザーに多くの情報をみてもらいたい時に有効です。セクションレベルでは、画像と文章を横並びにするデザインなどによく使用されます。
例えば、ZeroPlusのページではこのセクションに使用されています。
３カラムレイアウト
3カラムレイアウトは、画面を3列に分割したレイアウトです。
情報量が増えるため、2カラム同様サイト内の回遊性を高めるためニュースサイトなどに使用されたりします。
セクションレベルのデザインでは、3つ以上の項目を並べて表示したいときなどに使用できます。
マルチカラムレイアウト
マルチカラムレイアウトとは、２カラム以上のまとまりを持ったレイアウト方法のことです。
先に説明した2カラムレイアウト、3カラムレイアウトを複合的にページ全体に組み合わせて使用しているパターンです。
メリットとしても2・3カラムと同様で以下のような特徴があります。
情報を多く配置することができる
他ページへの導線が見せやすい
こちらもコーポレートサイトやメディアサイトのような、たくさんの情報を見せたいサイトを作る時におすすめです。
マルチカラムレイアウトを採用しているサイト
グリッドを活用したレイアウト
グリッドとは
グリッド（grid）は、Webにおいて画面上に表示される格子状の模様を指しています。
グリッドを使用したレイアウトはグリッドレイアウトと呼ばれ、以下ではそれを利用したレイアウトを紹介します。
グリッドレイアウト
グリッドレイアウトとは、それぞれの要素をグリッド(格子)状に並べて、美しく整ったデザインを作ることができるレイアウト方法です。
同じ大きさの正方形や長方形を使用してページを方眼のように分割し、それらを組み合わせながら要素・余白を構成していきます。
グリッドレイアウトは、以下のような特徴があります。
情報を整理しやすい
一度に多くの情報を見せることができる
レスポンシブデザインとの相性が良い
グリッドレイアウトは、webデザインの基本的なレイアウト方法になるので覚えておきましょう。
グリッドレイアウトを採用しているサイト
カードタイルレイアウト
グリッドレイアウトの１つに、カード・タイルレイアウトというレイアウト方法があります。
カード・タイルレイアウトは、画像を敷き詰めて一覧するwebサイトをデザインする際に使えるレイアウト方法です。
ブロック一つ一つがグリッドレイアウトの利用シーンとして、画像の掲載数が多い、情報量が多いサイトを作る際におすすめです。
グリッドレイアウトを採用しているサイト
ブロークングリッドレイアウト
ブロークン・グリッドレイアウトとは、グリッド(格子状)の配置をあえて崩し、自由に要素を配置するレイアウト方法です。
自由に要素を配置するので、レスポンシブデザインやコーディングの難易度が上がります。 webデザインの中では、非常に制作の難易度の高いレイアウト方法です。
ブロークン・グリッドレイアウトは以下のようなの特徴があります。
オリジナリティが出やすい
画像素材との相性が良い
ユーザーの視線を惹きつけやすい
ブロークン・グリッドレイアウトの利用シーンとして、ポートフォリオサイトやイベントサイトなどの個性的でオリジナリティ溢れるサイトを作る際におすすめです。
ブロークン・グリッドレイアウトを採用しているサイト
東京の映像・企画・イベント制作会社｜株式会社真面目（majime inc.）
参考サイトでレイアウトを確認しよう
レイアウトやデザインを参考にする際は、ギャラリーサイトを活用しましょう。
webサイトのレイアウト方法や業種、色合いなどからデザインを検索して確認することができます。
参考にしたいサイトを見つけたら、ブックマーク機能を活用して、お気に入りのデザインをいつでも見返せるようにまとめておくと良いです。
SANKOU
・おすすめポイント
こちらのギャラリーサイトも様々なカテゴリーから参考サイトを検索できます。更新頻度も非常に高いのでおすすめです。
MUUUUU.ORG
・おすすめポイント
厳選されたデザインのwebサイトを扱っているギャラリーサイトです。掲載数も多く検索もしやすいので、調べやすくてとても便利です。
CSS Design Award
・おすすめポイント
webデザインは海外のデザインの方が最先端のものが多いです。海外の最先端のデザインを見たいという方におすすめのギャラリーサイトです
最適なレイアウト方法を考えよう
今回は、webデザインを作る際のレイアウト方法と使い方について解説しました。
レイアウトはwebデザインの中で骨組みとなるとても大切な部分になります。
webデザインを作る際は、参考サイトを確認して、今作りたいデザインはどのレイアウトが最適か考えながら作ってみることを意識してみてください。
