Webデザイナーを目指す女性の勉強ブログ

普段、何気なく観ているWebサイトですが、サイトにもレイアウトのパターンがいくつかあります。

今回は代表的なパターンを４つ紹介したいと思います。


代表的なパターンは以下の４つです。

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

2マルチカラムレイアウト

3グリッド型レイアウト

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

Webデザインのレイアウトについて

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

全ての要素を立て一列に配置したものがシングルカラムレイアウトです。

スングルカラムはサイドバーをがないため、視線の導線が少なく、

メインコンテンツに集中してもらいやすいというメリットがります。

また、面積の少ないスマートフォンではシングルカラムレイアウトが採用されやすいため

、モバイルサイトとの相性がよく、モバイルファーストな現代において主流のレイアウトとなっています。

レスポンシブデザインに対応しやすいため、Webサイトの構築やメンテナンスがしやすいといったメリットもあります。

縦長のＬＰ(ランディングページ)でもこのシングルカラムレイアウトを採用している場合がほとんどです。




2マルチカラムレイアウト

複数のカラム(列)によって構成されたサイトをマルチカラムレイアウトといいます。

2列なら2カラム、3列なら3カラムレイアウトとなり、

メインとサブにわけ、左右どちらか、または両方にサイドバーを配置します。

シングルカラムとは違い、サイドバーを配置し、たくさんのコンテンツをアピールするため

、情報量の多いニュースサイトや、ブログサイト、商品数の多いECサイトによく採用されます。

またサイドバーを配置することにより、コンテンツが多くてもユーザーが探しやすい設計のため

、回遊率を上げたい場合にも適しています。




3グリッド型レイアウト

縦横の格子状グリッドにあわせ、要素を配置することをグリッド型レイアウトといいます。

マルチカラムレイアウトもこのレイアウトの一種ですが、

グリッド型の特徴は、要素をカードの様に並べ、美しく見せることができます。

Pintarestのような写真並べたようなレイアウトになり、要素の大きさを変えたり、

写真の雰囲気を統一したりして魅力的に魅せる効果もあります。




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

写真や動画を画面いっぱいに配置するレイアウトを

フルスクリーン型レイアウトレイアウトといいます。

ナビゲーションやほかのコンテンツが非表示、

またはハンバーガーメニューなどの様に最小化されます。

ビジュアルを最大限に活かしたい場合や、世界観を演出したい場合に採用され

、ユーザーへインパクトを与える事ができます。

またシングルカラムレイアウト同様、

レスポンシブデザインに対応しやすいといったメリットもあります。



さいごに

今回あげたパターン以外にもデザインセンスが必要なフリーレイアウトや、

分割して対比的に見せるスプリットレイアウトなどもあります。

作成したいサイトの用途や目的に応じて、効果的で適切なレイアウトを考え、

ユーザーに伝わるサイトを設計する必要があります。

それぞれのレイアウトの特徴を最大限に活用していきましょう。

最後までご覧いただきありがとうございました。