近年、スマートフォンやタブレットの普及に伴って、webデザインの環境も大きく変化しています。
特にレイアウトについては、レスポンシブ化に伴うレイアウトのパターンが主流となり様々なデバイスに柔軟に対応することが要求されています。
今回はWebサイトの完成度を決めるレイアウトの代表的な３パターンをご紹介します。もくじ
◆カラム・レイアウトとは
ウェブにおける「カラム」とは、「列」や「欄」「段組」という意味にあたり、「カラム・レイアウト」は、ページを垂直方向に区切る手法を指します。
1カラムは区切りが無く、ウィンドウ幅全体を使うフルスクリーン・レイアウトなどによく用いられます。
メニューやコンテンツなどが横並びになるタイプは2カラム・レイアウトと呼ばれ、ブログ・サイトなどによく用いられます。
他にも3カラムと呼ばれるコンテンツの両脇にナビゲーションとメニューを配置するタイプがあります。
これはマルチカラム・レイアウトとして分類されています。
カラム・レイアウトの中でも、スマートフォンの普及によって増えつつあるデザインが、1カラム・レイアウトです。
1カラムのサイトであれば、スマホ、タブレット、そしてPCでも閲覧しやすいということから、受け入られやすいという利点があります。
◆フリー・レイアウトとは
フリー・レイアウトは、ブラウザやディスプレイのサイズを考慮せず、予め決められたページ幅でコンテンツをレイアウトしていくパターンを指します。
掲載する情報量が多い場合などにフリー・レイアウトはよく用いられます。
また、他のWebサイトとは異なるこだわりやオリジナリティを意識したレイアウトを作り出せるという利点があります。
一方でユーザーのデバイス環境によってページが見づらくなってしまうという欠点もある為、SEO的に有効ではないと言えます。
◆グリッド・レイアウトとは
グリッド・レイアウトは、文字や画像、カラムなど一定の規則に従い、コンテンツを格子状に配置するレイアウトを指します。
WordPress の多くのテンプレートで、グリッド・レイアウトが用いられています。
グリッド・レイアウトには複数の種類が存在し、各要素を％で指定し、レイアウト崩れをカバーするレイアウトパターンをフレキシブル・レイアウト、一定のグリッドにそってカード（短冊）型のコンテンツを並べ、ウインドウ幅に合わせてコンテンツを再配置するレイアウトパターンを可変グリッド・レイアウトと言います。
別名カード・レイアウトとも呼ばれています。これらのグリッドレイアウトは情報系サイトに多く用いられています。
◆まとめ
Webサイトのレイアウトデザインは種類が多く、新しいデザイン・技術を活かしたモノが次々と登場しています。
またその時々のトレンドがあります。
最新トレンドのレイアウトパターンを積極的に取り入れ、ユーザーが求めている情報や自分たちが見てもらいたいコンテンツをまとめていきましょう。