Webサイトを作ろうとして、「1カラムと2カラム、どちらにすればいいのだろう」と迷ったことはありませんか。
カラムの数は、ページを見た人が何に集中し、どう読み進めるかを左右する、レイアウトの大きな分かれ道です。
この記事では、2カラムとは何かを中心に、1カラム・3カラムとの違い、目的に合わせた使い分け、スマホで1カラムにまとめる考え方を、見本を使って初心者向けに解説します。
2カラム・1カラム・3カラムの基本
まずは、Webデザインでいう「カラム」とは何か、そして1カラム・2カラム・3カラムがそれぞれどんな形なのかを押さえましょう。
Webデザインでいうカラムとは
Webデザインでいうカラムとは、ページを縦に区切ったときの1つひとつの列(段)のことです。
英語のcolumn(列・縦の柱)が由来で、新聞や雑誌で記事を何段かに分けて並べる「段組み」と同じ考え方です。
ページ全体を何列に分けるかによって、「1カラム」「2カラム」「3カラム」のように呼び分けます。
なお、カラムという言葉はExcelやデータベースでは「表の縦の列」を指しますが、この記事ではWebページのレイアウトの意味で使います。
1カラム・2カラム・3カラムの違い
3つの違いは、ページの中身を何列に分けて並べるかです。
同じヘッダー(ページ上部の帯)とフッター(ページ下部の帯)のまま、そのあいだの中身の部分の列の数だけを変えて比べてみましょう(ヘッダーやフッターを含むページ全体の区画はWebページの基本構造とは?で解説しています)。
見本Aは列が1つなので、見る人は上から下へ順番に読むだけで迷いません。
見本B・見本Cと列が増えるほど、一度に見せられる情報は増えますが、そのぶんメインに使える幅は狭くなります。
| カラム数 | 特徴 | 向いているページの例 |
|---|---|---|
| 1カラム | 1つの内容に集中させやすい。スマホでもそのまま見せやすい | LP(商品やサービスを申し込んでもらうための縦長のページ)、読み物の記事、ポートフォリオ |
| 2カラム | メインを読みながら、関連する情報やメニューも見せられる | ブログ、ニュースの記事ページ、通販サイトの商品一覧(絞り込みメニュー付き) |
| 3カラム | 一度に多くの情報を並べられるが、ごちゃごちゃしやすい | ポータルサイト(いろいろな情報への入り口になるサイト)、大型の通販サイト、管理画面 |
2カラムとは
2カラムとは、ページの中身を2つの列に分けて並べるレイアウトのことで、Webサイトでは「メインのコンテンツ」と「サイドバー」の組み合わせが代表的です。
サイドバーとは、メインの横に置く細い列のことで、記事のカテゴリ一覧や人気記事、検索窓など、メインを補う情報を置きます(置く情報の選び方はサイドバーとは?で解説しています)。
2カラムで大切なのは、2つの列の幅にはっきり差をつけ、どちらが主役かを伝えることです。
2つの列が同じ幅だと、見る人はどちらから読めばいいのか迷ってしまうためです。
NGの見本では、2つの列が同じ幅で、中身の見た目も似ているため、どちらが本文なのかを読み比べないと分かりません。
OKの見本では、メインを広く、サイドバーを細く控えめにしたことで、まずメインを読み、必要なときだけサイドバーを見る、という順番が自然に伝わります。
メインとサイドバーの幅は「2:1」前後がよく見られる比率ですが、決まりではないので、メインの文章が読みやすい幅になっているかを基準に調整しましょう(本文の読みやすい幅の考え方はコンテンツ幅とは?、横幅を12等分して「メイン8・サイドバー4」のように割り当てる方法は12カラムグリッドとは?で解説しています)。
カラムレイアウトの使い分け
ここからは、ページの目的に合わせたカラム数の選び方と、スマホでカラムを1つにまとめる考え方を見ていきます。
読ませたい・行動してほしいなら1カラム
1つの内容をじっくり読んでほしいときや、申し込みなど1つの行動をしてほしいときは、1カラムが向いています。
横にほかの情報がないので、見る人の注意がそれず、上から順番に読み進めるうちに、ページのゴールまで自然にたどり着けるからです。
LPの多くが1カラムで作られているのも、余計な寄り道をさせず、最後のボタンまで読んでもらうためです。
ただし、PCの広い画面で文章を横いっぱいに広げると、1行が長くなりすぎて読みにくくなるので、本文の幅には上限を設けましょう(1行の文字数の目安は読みやすい行間と行長の目安で解説しています)。
ほかのページへも案内したいなら2カラム
メインの内容を読んでもらいながら、ほかのページにも興味を持ってほしいときは、2カラムが向いています。
サイドバーにカテゴリや人気の記事を並べておくと、メインを読み終えた人や、探しているものと違った人が、次に見るページを見つけやすくなるからです。
ブログやニュースサイトの記事ページ、通販サイトで絞り込みのメニューを横に置いた商品一覧などが、2カラムの代表的な例です。
たくさんの情報を一度に見せたいなら3カラム
扱う情報の種類がとても多く、一度に見渡してほしいときは、3カラムが選ばれることがあります。
メインの両わきにメニューやお知らせを置けるので、画面を動かさなくても多くの情報にたどり着けるためです。
その反面、情報が多いぶんごちゃごちゃして見えやすく、メインの幅も狭くなります。
さらに、スマホで縦に積むときに左右2つのサイドバーをどこへ回すかも決める必要があり、設計の手間が増えます。
そのため、初心者が作るサイトでは、まず1カラムか2カラムから考えるのがおすすめです。
スマホでは1カラムにまとめる
PCで2カラムや3カラムにしたページも、スマホでは列を縦に積み重ねて1カラムにするのが基本です(スマホの画面から先に設計する進め方はモバイルファーストとは?で解説しています)。
スマホの画面は幅が狭いので、列を横に並べたままだと、1つひとつの列が細くなりすぎて、文字も画像も読めないほど小さくなってしまうためです。
NGの見本では、3つの列を無理に横に並べたため、本文の文字が極端に小さくなり、拡大しないと読めません。
OKの見本では、列を縦に積んだことで、本文を読みやすい大きさで表示でき、サイドバーにあった情報も本文の後に続けて見られます。
縦に積むときは、いちばん見てほしいメインを先に、サイドバーの中身は後に並べるのが基本です。
スマホでは上にあるものから順に見られるため、サイドバーを先に置くと、本文にたどり着くまでに何度もスクロールさせることになります(スマホとPCで余白をどう変えるかはPCとスマホの余白の違いとは?で解説しています)。
CSSで画面幅に合わせてカラム数を変える
ここからは、Webサイトを自分でコーディングする人向けの補足です。
デザインツールだけで作る人は、「スマホ用は1カラム、PC用は2カラム」のように、画面の幅ごとにデザインを用意する、と覚えておけば十分です。
次のコードは、スマホでは1カラム、画面幅が768px以上になったら「メイン2:サイドバー1」の2カラムに切り替える例です。
px(ピクセル)は画面上の長さを表す単位で、768pxはタブレットを縦に持ったときの幅に近いことから、スマホとそれより広い画面を分ける境目(ブレイクポイント)によく使われる値です。
.layout {
display: grid;
grid-template-columns: 1fr; /* スマホ:1カラム */
gap: 24px; /* 列と列のあいだの余白 */
}
@media (min-width: 768px) {
.layout {
grid-template-columns: 2fr 1fr; /* PC:メイン2、サイドバー1の2カラム */
}
}@media (min-width: 768px)は「画面の幅が768px以上のときだけ、中の指定を使う」という意味の書き方で、メディアクエリと呼ばれます(MDN: メディアクエリーの使用)。
grid-template-columnsの2fr 1frは、空いている幅を2対1に分けるという意味で、frは「割合」を表す単位です(MDN: grid-template-columns)。
CSSで並び順を変えない限り、縦に積んだときはHTMLに書いた順に上から表示されます。
そのため、HTMLでメインを先、サイドバーを後に書いておけば、スマホの1カラムでも自然にメインが先に表示されます。
768pxはあくまで切り替えの一例なので、実際の画面でメインの幅が狭くなりすぎないかを見ながら決めましょう。
実践のポイント
カラムレイアウトで陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- 「情報をたくさん見せたい」と3カラムにした結果、どこを見ればいいのか分からないページになってしまうことがあります。
列を増やす前に、本当に横に並べる必要がある情報かを見直しましょう。 - 申し込みボタンなど、いちばん大事な情報をサイドバーだけに置いてしまうことがあります。
スマホで1カラムにするとサイドバーはページの下のほうに回るため、見てもらえない可能性が高くなります。
大事な情報は、必ずメインの中にも置きましょう。 - 列と列をくっつけて並べ、どこまでがメインでどこからがサイドバーなのか分かりにくくなることがあります。
列のあいだには十分な余白を取りましょう(列のあいだの余白「ガター」の決め方はグリッドと余白の関係とは?で解説しています)。 - PCの画面だけを見てカラム数を決め、スマホでの見え方を確かめていないことがあります。
デザインの段階から、スマホで縦に積んだときの順番も一緒に決めておきましょう。
よくある質問
- Q. ブログは1カラムと2カラム、どちらがいい?
A. どちらにも向き・不向きがあり、正解は1つではありません。
1本の記事をじっくり読んでほしいなら1カラム、ほかの記事にも回ってほしいなら2カラムが向いています。
迷ったら、スマホではどちらも1カラムになることを前提に、PCで横の列に何を置きたいかで決めましょう。 - Q. カラムと「段組み」は同じ意味?
A. ほぼ同じ意味で使われます。
段組みはもともと新聞や雑誌などの印刷物で、文章を何段かに分けて組むことを指す言葉です。
Webでは、ページ全体を列に分けるレイアウトを「〇カラム」と呼ぶことが多く、文章そのものを複数の段に分けて流す場合を「段組み」と呼び分けることもあります。 - Q. 1カラムのページの中で、カードを3つ横に並べるのはあり?
A. ありです。
ページ全体のカラム数と、ページの一部で要素を何列に並べるかは別のものです。
家にたとえると、カラム数は家全体の間取り、カードの並べ方は部屋の中の家具の置き方のようなものです。
1カラムのページでも、商品カードや特徴の紹介などを部分的に横に並べることはよくあります。
まとめ
2カラムとは、ページの中身をメインとサイドバーのような2つの列に分けるレイアウトで、1つに集中させる1カラム、多くの情報を見渡せる3カラムと、目的に合わせて使い分けます。
2カラムでは列の幅にはっきり差をつけて主役を伝え、スマホでは列を縦に積んで1カラムにし、メインを先に見せるのが基本です。
まずはよく見るWebサイトを3つ開き、PCとスマホでそれぞれ何カラムになっているか、スマホでサイドバーの中身がどこに移っているかを確かめてみてください。
