Web プログラミング

【もりけん塾37日目】2カラムレイアウトの方法

LP制作を始めて作成している、ねこらのん(@nekoranon256)です。

 

今、調べながらしているものは以下のとおりです。

  • 画像の中央にテキストを表示する
  • 料金表を作成
  • 画像クリック→スライドさせる

 

依頼していた内容から何度か変更があったので変更内容をしていきました。

 

そのなかで、

2カラムレイアウト

が必要なので内容を整理していきます。

 

こんな方におすすめ

  • 2カラムレイアウトがはじめての方
  • web制作の初心者

 

カラムレイアウトとは

カラムは列を意味し、webサイトのレイアウトのことをいいます。

 

1カラムレイアウトは以下のようなサイトの構成です。

 

2カラムレイアウトは、このサイトのようなサイトの構成です。

 

 

3カラムレイアウトは、このサイトのようなサイトの構成です。

 

 

 

1つの列でサイトが構成されていれば1カラムレイアウト、2つの列でサイトが構成されていれば2カラム、3つの列でサイトが構成されれば3カラムとなります。

 

 

つまり2カラムレイアウトとは2列のレイアウト構成のサイトということです。

 

カラムレイアウトの種類

カラムレイアウトは基本的に以下があります。

 

  • 1カラムレイアウト
  • 2カラムレイアウト
  • 3カラムレイアウト

 

それぞれメリット・デメリットを表にまとめました。

 

メリット デメリット
1カラム ①ユーザーに集中して見てもらえる構成
②スマホ普及でメインコンテンツを集中して見てもらいやすい
③モバイル端末にも対応しやすい
①他のwebページを見てもらうことが難しい
②複数ページ閲覧への誘導が困難
2カラム ①webサイト内でどんなページがあるのか把握しやすい
②webサイト内を回遊しやすい
③情報量がほどよい
④操作性もほどよい
①フォントサイズが小さくなり読みづらくなる
②メインコンテンツに集中しづらくなる
③情報量によってはメインコンテンツとサイドバーコンテンツのバランスが崩れることがある
3カラム ①情報量が多く、スクロールが少なくてすむ
②直帰率が低くなる
①2カラムよりもメインコンテンツに集中しづらい
②フォントサイズは2カラムよりも小さくなり読みづらさが増す
③情報量が多くなりすぎる

 

詳しい解説をしていきます。

1カラムレイアウト

サイドバーはなくメインコンテンツのみ。

 

画像をクリックするとデイトラの公式サイトへ飛びます。

 

この画像のようにメインコンテンツのみで構成されているものが1カラムレイアウト

 

2020年現在でスマートフォン普及率は77.6%と7割以上の人がスマートフォンを所持していることから、スマートフォンで見やすい1カラムレイアウトが多くなってきたそうです。

 

直近2020年において総世帯における世帯ベースでの普及率は、スマートフォンでは77.6%、タブレット型端末では35.2%。単身世帯・二人以上世帯双方とも前年から比べ、一様に増加傾向を示している。スマートフォンではいくぶん単身世帯の方が上昇率は高めだが、タブレット型端末では世帯種類別の違いはほぼ見られない。

引用:スマートフォンとタブレット型端末の普及率の推移をさぐる(2020年公開版)|Yahoo!Japanニュース

 

この1カラムレイアウトのメリット・デメリットをご紹介していきます。

メリット

1カラムレイアウトのメリットは以下の3つ。

 

  1. ユーザーに集中して見てもらえる構成
  2. スマホ普及でメインコンテンツを集中して見てもらいやすい
  3. モバイル端末にも対応しやすい

 

メインコンテンツのみなので情報がメインのページに集中しており、見やすいですね!

 

デメリット

1カラムレイアウトのデメリットは以下の2つ。

 

  1. 他のwebページを見てもらうことが難しい
  2. 複数ページ閲覧への誘導が困難

 

複数のwebページを持っている場合は1カラムレイアウトだと他のページに行くことが難しいです。

 

向き不向きを考えてレイアウトを決めていくと良いですね。

 

参考

  • LP

 

2カラムレイアウト

メインコンテンツとサイドバーコンテンツの2列からなるレイアウト。

 

ECサイトやブログで最も多く使われているレイアウト方式です。

 

 

この画像のようにメインコンテンツとサイドバーの2列で構成されているものが2カラムレイアウト

 

2カラムレイアウトのメリット・デメリットをみていきましょう。

メリット

2カラムレイアウトのメリットは以下の4つ。

 

  1. webサイト内でどんなページがあるのか把握しやすい
  2. webサイト内を回遊しやすい
  3. 情報量がほどよい
  4. 操作性もほどよい

 

2カラムレイアウトはPCでもスマートフォンでもバランスがよさそうですね!

 

デメリット

2カラムレイアウトのデメリットは以下の3つ。

 

  1. フォントサイズが小さくなり読みづらくなる
  2. メインコンテンツに集中しづらくなる
  3. 情報量によってはメインコンテンツとサイドバーコンテンツのバランスが崩れることがある

 

1カラムと違ってメインコンテンツ以外の場所にも目が向きやすいようですね!

 

2カラムレイアウトのサイドバーは右と左どっちが良いのか

2カラムレイアウトの場合サイドバーは右が良いか左がよいか悩みますね。

 

何が違うのでよしょうか?

 

サイドバー 特徴
・回遊率を上げるのによい
・ECサイトなど
・ブログなどの読み物系のサイトによい

 

左側に置かれているものに人間は目がいく傾向にあるために回遊率を上げるのであれば左にサイドバーをおくほうが良いようです。

 

ちなみにECサイトのカラム数調査レポート。メリット、デメリットをまとめましたより、左サイドバーのサイトが圧倒的に多かったという報告がありました。

 

人間のF字やZ字に流れる傾向があるためページの左側や上部はよく読まれる傾向にあるとされています。

そのため、商品をより多く見せたい・他のページに誘導したい=回遊率を上げたい場合には左側にサイドバーを配置するのが理想的とされています。
しかし、その分コンテンツへの注目度は下がる傾向になるので、購入つながるか…という心配もでてきます。

引用:ECサイトのカラム数調査レポート。メリット、デメリットをまとめました

 

100%良いものはないので何を重視するかが決め手になりそうですね。

 

3カラムレイアウト

メインコンテンツと2つのサイドバーコンテンツの3列からなるレイアウト。

 

画像をクリックするとzozotownの公式サイトへ飛びます。

 

この画像のようにメインコンテンツと2つのサイドバーで構成されているものが3カラムレイアウト

 

3カラムレイアウトのメリット・デメリットをみていきましょう。

 

メリット

3カラムレイアウトのメリットは以下の2つ。

 

  1. 情報量が多く、スクロールが少なくてすむ
  2. 直帰率が低くなる

 

PCでより多くの情報をみたいときに良さそうですね!

 

デメリット

3カラムレイアウトのデメリットは以下の3つ。

 

  1. 2カラムよりもメインコンテンツに集中しづらい
  2. フォントサイズは2カラムよりも小さくなり読みづらさが増す
  3. 情報量が多くなりすぎる

 

読みづらさが増すようですね…!

 

 

サイトを作るときのターゲットや目的によってレイアウト戦略が必要となってきそうですね!

 

2カラムレイアウトを構成する方法と手順

さて、2カラムレイアウトの構成の依頼なので構成方法と手順を調べました。

 

カラムレイアウトの方法は

この4つがあるようです。

 

『2カラムレイアウト 方法』で調べた10サイト中、9サイトはfloatを利用されていました。

 

残り1つのレスポンシブな2カラムレイアウトを作るCSSの書き方の記事によると、displayプロパティでテーブル化が記述が簡単で背景色が途切れない点で良いと記載されています。

 

上記の4つの方法があると記載があったのも、この記事で執筆者は

 

  • 西村文宏さんというホームページ作成ガイド
  • 執筆書籍8冊
  • 執筆ガイド記事本数380本

 

でSEOの本もAmazonで出版されていたのでdisplayプロパティがSEO的にも良さそうだと感じましたので、displayプロパティでやってみようと思います。

 

 

float要素を使う場合の注意点

  1. widthを必ず指定
  2. floatをclearで解除することでフロートボックスの高さや背景を指定することが可能

displayプロパティでテーブル化

displayプロパティでテーブル化についてレスポンシブな2カラムレイアウトを作るCSSの書き方の記事を自分なりに、まとめていきます。

HTML

作成したいサイトは以下のとおりです。

 

  • webページ上:メインコンテンツが左、サイドコンテンツが右に。
  • スマートフォン:メインコンテンツが上、サイドコンテンツが下に。 

 

 

そのためHTMLは以下の書き方に。

 html
<div id="main">
メインコンテンツ
</div>
<div id="side">
サイドコンテンツ
</div>

 

レスポンシブな2カラムレイアウトを作るCSSの書き方の記事の記載は以下のとおりです。

 html
<!-- ↓2カラムレイアウト全体領域 -->
<div class="page-cover">

   <!-- ▼メインを作るブロック -->
   <div class="main-column">
      ~ メインカラムの中身 ~
   </div>
   <!-- ▲メインを作るブロック -->

   <!-- ▽サイドを作るブロック -->
   <div class="side-column">
      ~ サイドカラムの中身 ~
   </div>
   <!-- △サイドを作るブロック -->

</div>
<!-- ↑2カラムレイアウト全体領域 -->

引用:レスポンシブな2カラムレイアウトを作るCSSの書き方

 

page-coverでmain-columnとside-columnを囲うイメージです。

 

 

page-coverが親でmain-columnとside-colun子のようなイメージ。

 

HTMLの記載注意点

重要コンテンツが先に表示されるようにすること

  • 重要な情報が先に提供することができる
  • SEOに役立つ可能性あり
  • 段落解除した場合、1カラム表示い先に表示される

 

次にCSSを見ていきましょう。

CSS

レイアウト方法は4つありましたが、今回私はdisplay:table;を使います。

 

レスポンシブな2カラムレイアウトを作るCSSの書き方の記事の記載は以下のとおりです。

 

 html
@media (min-width: 850px) {

   /* ↓レイアウト全体領域 */
   .page-cover {
      display: table;
      width: 100%;
   }
   /* ▼メインカラムの装飾 */
   .main-column {
      display: table-cell;
   }
   /* ▽サイドカラムの装飾 */
   .side-column {
      display: table-cell;
      width: 30%;
   }

}

引用:レスポンシブな2カラムレイアウトを作るCSSの書き方

 

今回この記事では横幅が850px以上の場合にだけ上記のCSSが適用するように記述されているそうです!

 

  • 外側を囲むブロック「レイアウト全体領域」を作るdiv要素(.page-cover)は、
    → テーブルのように表示し、(display: table;)
    → 横幅を親要素いっぱいまで広げる。(width: 100%;)
  • 1つ目のブロック「メインカラム」を作るdiv要素(.main-column)は、
    → テーブルのセルのように表示する。(display: table-cell;)
  • 2つ目のブロック「サイドカラム」を作るdiv要素(.side-column)は、
    → テーブルのセルのように表示し、(display: table-cell;)
    → 横幅は30%にする。(width: 30%;)

引用:レスポンシブな2カラムレイアウトを作るCSSの書き方

 

(CSSの内容を調べいようとしたら記事にしっかりと意味も書いてくれている…こんな親切な記事が書けるようになりたい…)

 

CSSはたったこれだけで良いそうです…!

 

floatを利用する記事が多かったですがCSSの記述はこれよりも複雑だったと思います。

 

 

floatのHTMLとCSSの記載は以下のとおりです。

HTMLの記述

1. まず全体の枠を決めるwrapを記述します。
2. 右に置くメインコンテンツの枠を記述します。(id=content)
3. 左に置くサイドバーの枠を記述します。(id=side)

 html
<div id="wrap">
<div id="content">
<p>メインコンテンツ</p>
</div>
<div id="side">
<p>サイドバー</p>
</div>
</div>
<div id=”footer”>
<p>フッター</p>
</div>

CSSの記述

1. wrapの幅を指定します
2. 右に置くメインコンテンツをfloat:right。(#content)
3. 左に置くサイドバーをfloat:left。(#side)
4. 2カラムにした後の要素がflotの影響をうけてしまうのでclearfixでfloat解除。(#side)

 html
#wrap {
width: 1000px;
}
#content {
width: 800px;
float: right;
}
#side {
width: 180px;
float: left;
}
.clearfix:after {
content: "";
clear: both;
display: block;
}

引用:2カラムレイアウトの基本と作り方を解説!メリットとデメリットも紹介

floatを使う場合clearやdisplay:block;が必要になるようですね!

 

おわりに【反省点】

カラムレイアウトはサイト全体に大きく影響するので本来は最初に決めておいて、作成すべきものだと調べながら実感…!

 

最初にすべきこと、後にすべきこと、優先順位を決めることが大切である…

 

材料が何があるのかまだ分かっていないので、web制作をしながらこうして手順や優先順位がわかってきたので「手を動かせ」というプロのエンジニアの方の意見に納得です…!

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada