あんだいあんだい
2017/07/14

Webサイトのレイアウトについて

この記事は約3分で読めます。

Webサイトのレイアウトについて

デザイン

魅力的なwebサイトというのはデザインだけではなく、充実したコンテンツに加えて、見やすさ・使いやすさなどのユーザビリティを合わせて総合的に判断されます。
そのような要素を如何にデザインで表現するのかがポイントになり、webサイトの特性を活かしたレイアウトも重要になってきます。
今回はwebデザインにおける基本的なレイアウトの種類をご紹介いたします。

フリー・レイアウト

ページやコンテンツの幅を固定し、画面サイズの変化を想定していないレイアウトのことです。
自由度が高く、視覚的に魅力的でオシャレなデザインになりやすいです。
昔は一般的なレイアウトでしたがスマホなどの表示に適さないものもあり、画面サイズによりデザインを変更する場合もあります。またSEO的にもあまり良くありません。

サイト例
HAPISTA

グリッドレイアウト

ページ内の構成要素を、グリッド(格子状)に配置するレイアウトです。
スマホなど多くのユーザーにも対応しやすく、サイト管理も簡単です。
グリッドレイアウトにはいくつかの種類があるので合わせてご紹介します。

 

フレキシブル・レイアウト

リキッド・レイアウト同様、コンテンツの幅を%で相対的に指定するのに加えて、最大幅と最小幅も指定します。
そうすることにより、表示崩れを防ぐ効果があります。

サイト例
株式会社ジェイ・シー・エス

レスポンシブWebデザイン

画面サイズによってコンテンツ幅が可変するのは、リキッド・レイアウトと同じですが、
スマホ表示ではコンテンツの一部を消すことや、PC表示ではなかったコンテンツを表示するなどを行えることがメリットです。
画面サイズに適した調整が行えるので様々なデバイスに対応することができ、メジャーなレイアウトのひとつとなっています。

リキッド・レイアウト

画面サイズを100%となるよう構成されていて、コンテンツの幅を%で相対的に指定して表示させます。

 

可変グリッド・レイアウト

グリッドに沿って配置されたコンテンツを画面サイズによって、コンテンツを配置し直すレイアウトのことです。
どの画面サイズでも適切なサイズで表示されます。
最近ではMasonryのような可変グリッド・レイアウトが実装できるプラグインも多くあります。
デメリットとしてはスマホ表示ではページが長くなりがちです。

カラム・レイアウト

カラムとは、元々文章やデータの長さを表す単位のことで、webデザインでは、縦方向のブロックをカラムと言います。

インパクトや訴求力が強いのでランディングページやキャンペーンページなどには1カラムがよく使われていたり、
ブログなどカテゴリが多いサイトでは、2カラムでサイドバーを追加するなどで使われることが多いです。
いくつかのカラムを混在させたマルチカラム・レイアウトというのもあります。
リキッド・レイアウトと併用してデザインされることが多く、ポータルサイトなどで多く採用されています。

サイト例
FOOD&COMPANY

まとめ

レイアウトだけでも多くの種類があり複数のレイアウトを組み合わせたり、
デザインのトレンドや流行りの動きを取り入れることで目的や用途に合った使い分けをしていきましょう!

Webサイトのレイアウトについて
あんだい クリエイター

新人クリエイターのあんだいです。 日々勉強中です!

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。