機能実装例

１カラムレイアウトは縦一列にコンテンツを表示させます。

縦一列にコンテンツが並んでいるということは、１度に表示する情報量が少ないため、閲覧者を１つのコンテンツに集中させることが出来ます。

また画面幅の狭いスマートフォンでの表示では、見やすさからいってほぼ間違いなくこのレイアウトを使用します。

スマートフォンではこの１カラムレイアウトで、PCでは２（または３）カラムレイアウトにするWebサイトも多いです。

※このように表示するデバイスによってレイアウトを変えることを「レスポンシブWebデザイン」といいます。

１カラムレイアウトは幅広く用いられ、コーポレート(企業)サイトから個人ブログサイトまで形態を選ばず多く利用されています。

デメリットとしては、広告を入れづらいという点と、ページが上から下に流れていきますので、とにかく閲覧者にスクロールしてもらわないと、提供したい情報を読んでもらえないという点です。

２カラムレイアウトは片方にメインコンテンツ、そしてもう片方にサブコンテンツを設置するレイアウトです。

画像ではサブコンテンツが右側に来ていますが左側に持ってくることも可能です。

サブコンテンツにはプロフィール、LINEやTwitterなどのリンクコンテンツ、ブログ情報、ショッピングカート、ECサイトの検索カテゴリー、お知らせ情報など、メインコンテンツと一緒に載せておきたい情報やアクションパネルを設置します。

横にも縦にも余裕のあるPCで表示させるのが一般的です。

見やすさも程良い情報量も確保でき、配置の融通も効きやすいので、レイアウト的にはブログサイトやECサイトで使われることが多いです。

デメリットについては、メインコンテンツの幅が狭くなることです。

３カラムレイアウトは中央にメインコンテンツ、そして両側にサブコンテンツを配置するレイアウトです。

とにかくたくさんの情報を一気に表示させるのに特化しているため、情報量の多いWebサイトに向いています。

充実したコンテンツを画面いっぱいに敷き詰めて配置できます。

しかしその反面、見た目が散らかりやすくなるので、閲覧者がどこに何が書いてあるのか目で追うのが辛くなる傾向にあります。

また、こちらもメインコンテンツの幅が狭くなるので、本当に伝えたい内容の横幅がその分カットされてしまいます。

制作側としても、スマートフォンでその潤沢な情報を１カラムレイアウトに収めるのがとても難しくなるのがデメリットです。