この記事の対象: サイトの構成を検討している発注担当者・レイアウト判断に迷っている制作者
読了時間: 約12分
3カラムレイアウトは「情報量が多いサイトの定番」として長く使われてきましたが、スマートフォンからのアクセスが主流になった今、そのまま採用すると扱いにくい構成でもあります。とはいえ「3カラムは古いからやめるべき」という単純な話ではありません。メディア・ポータル・EC・社内向けツールなど、いまも3カラムが最適解になる場面は残っています。判断を分けているのは流行ではなく、そのサイトが扱う情報の性質です。この記事では3カラムデザインが機能する条件と崩れる条件を整理し、実際に組むときのCSS、そしてSoreiine!!のギャラリーに集まる実例からレイアウトの見方まで扱います。
3カラムデザインとは何か｜2カラムとの違いを構造で理解する
3カラムの基本構造
3カラムデザインは、コンテンツエリアを縦に3分割したレイアウトです。もっとも一般的なのは「左サイドバー・メインコンテンツ・右サイドバー」の並びで、メインを中央に置いて両側に補助情報を配置します。
左カラム（ナビゲーション）
- カテゴリ一覧
- 階層メニュー
- 絞り込み条件
中央カラム（メイン）
- 記事・商品・本文
- 読ませたい情報
右カラム（補助・回遊）
- 関連情報・ランキング
- 広告・バナー
- 目次・アクション
左は「移動」、右は「発見」。役割が重なると3カラムは機能しません。
重要なのは、左右のカラムに別々の役割を持たせている点です。左は「今どこにいて、どこへ行けるか」を示す移動の手段、右は「ついでに見るとよさそうなもの」を示す発見の手段。この分担が曖昧なまま両側にサイドバーを置くと、単に画面が狭くなるだけで終わります。
もうひとつ、3カラムには「左右のどちらかがナビゲーションではないパターン」もあります。管理画面でよくある「左メニュー・一覧・詳細プレビュー」の並びがそれで、右カラムが補助情報ではなく作業対象そのものになります。この型は中央と右を行き来しながら操作するため、右カラムの幅を広めに取る必要があります。同じ3分割でも設計の勘所がまったく違うので、自分が作ろうとしているのがどちらの型かを先に決めておくと、幅の議論が空転しません。
2カラムとの違いは「情報の増やし方」
2カラムは「メイン＋サイドバー」の構成で、Webサイトでもっとも普及したレイアウトです。3カラムとの違いは見た目の分割数ではなく、情報の増やし方にあります。
| 2カラム | 3カラム | |
|---|---|---|
| メイン幅 | 広い（本文が読みやすい） | 狭い（1行の文字数が減る） |
| 同時に見える補助情報 | 1系統 | 2系統 |
| 情報の探し方 | 上から下へ順に | 左右を行き来しながら |
| 向く情報量 | 数十〜数百ページ | 数千ページ以上 |
| モバイル対応 | 縦積みで自然 | 積む順番の設計が必須 |
| 運用の手間 | 少ない | サイドバー2つ分の更新が発生 |
3カラムが強いのは「一覧性」です。カテゴリが数十個あるようなサイトで、階層をたどらずに横断できる導線を常に画面内に残せます。逆に、ページ数が少ないサイトで3カラムを採ると、サイドバーを埋めるためのコンテンツを無理に作る羽目になります。空のサイドバーほど作りかけに見えるものはありません。
「3カラムは古い」と言われる理由
3カラムが減った直接の理由は、閲覧環境の変化です。
- モバイル比率の上昇：3カラムはそもそも横幅を前提にした設計で、縦長の画面ではカラムの概念そのものが消える
- 1カラムLPの普及：コンバージョンを目的にしたページでは、選択肢を減らす設計が主流になった
- サイドバーの効果への疑問：漫然と置いた「人気記事」「アーカイブ」はほとんど押されない
- 広告枠としての役割の縮小：右カラムを広告で埋める設計は、ユーザーの広告耐性が上がって効きが落ちた
ここで見落とされがちなのが、これらはすべて「目的の合わない場所で3カラムを使ったこと」への批判だという点です。レイアウト自体の欠陥ではありません。1カラムが正しい場面で3カラムを使えば失敗しますし、逆もまた同じです。
3カラムデザインが機能するサイト・向かないサイト
向いているケース
3カラムが機能するのは、次の条件が重なったときです。
1. 扱う情報が多く、分類が階層になっている
ページ数が数千を超え、カテゴリが多層になっているサイト。左カラムに分類を常設すると、ユーザーが「戻る」を押さずに横移動できます。ニュースサイト、大規模メディア、資料アーカイブなどが該当します。
2. 探索が目的の行動になっている
「なにか良いものを見つけたい」という目的で訪れるサイト。ECの一覧ページや作品ギャラリーでは、絞り込み条件（左）と結果（中央）と関連候補（右）を同時に見せられる3カラムが素直に効きます。
3. 滞在時間が長く、操作を繰り返す
管理画面や社内ツールのように、同じ画面で何度も操作するもの。ここでは1画面に情報を詰めることが正義になり、スクロールの回数が減るほど作業が速くなります。
4. デスクトップ利用が主体
BtoBの資料閲覧サイト、業務システム、開発者向けドキュメントなど。自サイトのアクセス解析でPCの比率が高いことを確認できているなら、PC最適の設計を優先する判断はあり得ます。
向いていないケース
3カラムを検討してよい
- ページ数が数千以上ある
- 探索・回遊が主目的
- デスクトップ利用が主体
- サイドバーを更新し続ける体制がある
1〜2カラムにすべき
- 10〜30ページの企業サイト
- 問い合わせ・購入が目的
- モバイルからのアクセスが大半
- 更新担当が1人以下
とくに注意したいのは、中小企業のコーポレートサイトで3カラムを選ぶケースです。会社概要・事業内容・実績・採用・お問い合わせといった構成で、左右にサイドバーを置いても入れるものがありません。結果として「新着情報」と「バナー2枚」で埋めることになり、メインの幅を削っただけの構成になります。
コンバージョンを取りたいページでも3カラムは不利です。問い合わせや購入に向かわせたいときに、画面の左右に「別のところへ行ける導線」を並べるのは目的に逆行します。サイトの目標が何かを先に決めておくと、この判断は自動的に片付きます。
もうひとつ見落とされやすいのが、更新体制の問題です。3カラムはサイドバー2つ分の枠を常に埋め続ける前提の設計で、放置するとその枠が「半年前のお知らせ」を晒す場所になります。メインコンテンツの更新すら止まりがちな体制なら、埋める場所を最初から作らないほうが、サイトは長く清潔に保てます。レイアウトは公開日の見た目ではなく、1年後の見た目で選ぶものです。
判断に使うチェック項目
発注前に自分のサイトを当ててみてください。3つ以上該当するなら3カラムを検討する余地があります。
- 公開時点で100ページ以上の予定がある
- カテゴリが15個以上ある、または2階層以上に分かれる
- 訪問者は「特定のページを見る」より「探す」ために来る
- サイドバーに載せる情報を、月1回以上更新できる担当がいる
- アクセスの半分以上がデスクトップから来ている
- 同じユーザーが繰り返し訪問する想定がある
該当が1〜2個なら、素直に2カラムにしておくほうが運用が続きます。
3カラムレイアウトの実装｜CSS Gridで組む
基本のCSS
3カラムはCSS Gridでもっとも簡潔に書けます。grid-template-columns で3つの幅を指定するだけです。
.layout {
display: grid;
grid-template-columns: 240px minmax(0, 1fr) 300px;
gap: 32px;
max-width: 1440px;
margin-inline: auto;
padding-inline: 24px;
}
minmax(0, 1fr) を使っているのが要点です。単に 1fr と書くと、中央に長いURLや overflow しない要素が入ったときにカラムが押し広げられ、レイアウト全体が崩れます。1fr は実質 minmax(auto, 1fr) として扱われ、auto は中身の最小幅を下回れないためです。min を 0 に固定しておくと、中身が何であれ指定した比率を守ります。3カラムの崩れの相談で一番多いのがこれです。
固定・可変の割り振りにも意図が必要です。サイドバーの幅は情報の性質で決まります。
| 用途 | 推奨幅 | 理由 |
|---|---|---|
| カテゴリメニュー（左） | 200〜260px | 日本語のカテゴリ名は10〜14文字で折り返さない幅が必要 |
| 目次（左または右） | 220〜280px | 見出しの階層をインデントで示す余裕を残す |
| 関連記事・サムネイル付き（右） | 280〜320px | 画像を横100px前後で置いてもテキストが2行に収まる |
| 広告枠（右） | 300px + gap | 300×250、300×600の標準サイズに合わせる |
| メイン（中央） | 最低640px | 本文の1行を全角35〜40文字に保つため |
中央に最低640pxを確保しようとすると、両側とgapを合わせて1280px前後の外枠が必要になります。この計算が合わないなら、その時点で3カラムは無理があると判断できます。
なお、サイドバーを px で固定するか fr で可変にするかは、中身で決めます。カテゴリメニューのように文字数の上限が読めるものは固定幅が安全です。逆に、フィルタのUIやサムネイルの並びのように画面幅に応じて余裕がほしいものは minmax(240px, 0.8fr) のような書き方で、広い画面では少しだけ広がるようにしておくと、大型ディスプレイで間延びしません。3つすべてを fr にすると幅の予測が立たなくなるので、可変にするのは多くても1つに絞ります。
レスポンシブ｜どこで何カラムに落とすか
3カラムのレスポンシブは「一度に1カラムへ落とさない」のが基本です。段階的に減らします。
.layout {
display: grid;
gap: 32px;
max-width: 1440px;
margin-inline: auto;
padding-inline: 24px;
/* モバイル: 1カラム */
grid-template-columns: minmax(0, 1fr);
}
/* タブレット横〜小型ノート: 2カラム（左サイドバーを残す） */
@media (min-width: 900px) {
.layout {
grid-template-columns: 220px minmax(0, 1fr);
grid-template-areas:
"nav main"
"nav sub";
}
.layout-nav { grid-area: nav; }
.layout-main { grid-area: main; }
.layout-sub { grid-area: sub; }
}
/* デスクトップ: 3カラム */
@media (min-width: 1280px) {
.layout {
grid-template-columns: 240px minmax(0, 1fr) 300px;
grid-template-areas: "nav main sub";
}
}
grid-template-areas を使うと、ブレークポイントごとの並びを名前で書けます。中間状態で「左サイドバーは残し、右サイドバーだけ本文の下へ移す」という組み替えが1行で済むため、3カラムのように配置が変わるレイアウトでは値の羅列より読みやすくなります。
ブレークポイントの値は、デバイスの型番ではなくレイアウトが破綻する幅から決めます。上の例で1280pxを境にしているのは、240 + 640 + 300 + gap 64 + padding 48 を足すと1292pxになり、これを下回ると中央が640pxを割るからです。「iPadは768px」といった端末基準で切ると、実機では問題ないのにブラウザを少し狭めた瞬間に崩れる、という事態が起きます。数式から出したブレークポイントはコメントに計算式ごと残しておくと、後から幅を変える人が同じ計算をやり直さずに済みます。
対応ブラウザ：CSS Grid（grid-template-areas 含む）はChrome・Edge・Firefox・Safariの現行版すべてで問題なく動きます。minmax() も同様です。IE対応が要件に入る案件はもう例外的ですが、もし残っているなら3カラムはFlexboxか、素直にfloatで組むほうが安全です。
モバイルで崩れる本当の原因は「積む順番」
3カラムのモバイル対応でつまずくのは、CSSの書き方ではなく順番の設計です。HTMLの構造を 左サイドバー → メイン → 右サイドバー で書くと、1カラムに落ちたときに「カテゴリ一覧を延々スクロールしてから本文が始まる」状態になります。
対策は2つあります。
方法1：HTMLの順番をモバイル基準にする
メイン → 左サイドバー → 右サイドバー の順でマークアップし、デスクトップで grid-template-areas を使って並べ替えます。DOM順が読む順と一致するため、スクリーンリーダーやキーボード操作でも自然です。3カラムを新規で組むならこちらを選びます。
<div class="layout">
<main class="layout-main">本文</main>
<nav class="layout-nav" aria-label="カテゴリ">カテゴリ一覧</nav>
<aside class="layout-sub">関連情報</aside>
</div>
方法2：左サイドバーをモバイルでドロワーに逃がす
カテゴリ数が多くて縦積みに向かない場合、モバイルでは開閉式のパネルに格納します。<details> を使えばJavaScriptなしで書けます。
<nav class="layout-nav" aria-label="カテゴリ">
<details class="nav-drawer" open>
<summary>カテゴリを絞り込む</summary>
<ul>
<li><a href="/category/a/">カテゴリA</a></li>
<li><a href="/category/b/">カテゴリB</a></li>
</ul>
</details>
</nav>
/* デスクトップでは常時展開し、開閉UIを消す */
@media (min-width: 900px) {
.nav-drawer > summary { display: none; }
.nav-drawer > ul { display: block !important; }
}
details の open 属性を初期状態に付けておくと、CSSが読み込まれる前でも中身が見える状態になります。JavaScriptに依存しないため、スクリプトのエラーでナビゲーションが消えるという事故が起きません。
つまずきやすい点：Grid の並べ替えはあくまで見た目だけを変えます。Tabキーでのフォーカス移動はDOM順のままなので、視覚的に「左→中央→右」に並べたのにDOMが「中央→左→右」だと、キーボード操作の順序が画面と食い違います。並べ替えの幅は最小限にとどめ、大きく入れ替えたくなったらHTML側を直すのが正解です。
右カラムをスクロール追従にする
右カラムに目次やアクションボタンを置くなら、スクロールに追従させると使われる回数が上がります。position: sticky で足ります。
.layout-sub > .sticky-box {
position: sticky;
top: 24px; /* 固定ヘッダーがあるならその高さ + 余白 */
max-height: calc(100dvh - 48px);
overflow-y: auto; /* 中身が画面より長いときに追従が止まるのを防ぐ */
}
max-height と overflow-y をセットで指定するのが要点です。追従させたい要素が画面の高さを超えると、sticky は下端まで到達したところで止まり、以降ただの通常配置に戻ります。目次の項目が多いページで「途中から追従しなくなる」という現象はこれが原因です。高さを画面内に収め、あふれる分は要素内でスクロールさせると、最後まで追従します。dvh を使っているのは、モバイルのアドレスバーの伸縮で vh が実際の表示領域とずれるためです。
もうひとつ、sticky は親要素に overflow: hidden が付いていると効きません。3カラムのラッパーに何気なく指定した overflow: hidden が原因で追従しない、というのは調査に時間を取られやすい失敗なので、動かないときは最初に祖先要素の overflow を疑ってください。
中央カラムの読みやすさを守る
3カラムでもっとも損なわれるのは本文の読みやすさです。幅が狭いまま長文を流すと、1行の文字数が20文字台に落ちて視線が何度も折り返します。
.layout-main {
/* 本文の行長を全角35〜40文字に制限 */
--measure: 38em;
}
.layout-main p,
.layout-main li {
max-width: min(100%, var(--measure));
line-height: 1.85;
}
日本語の場合、em は全角1文字とほぼ等しいので 38em で全角38文字前後になります。行送りは1.8〜1.9が読みやすい範囲で、これより詰めると漢字の多い文章で行が見分けにくくなります。3カラムを採用したうえで本文も読ませたいなら、この2つは削れません。
なお、この max-width は本文のテキストにだけかけます。画像・表・コードブロックまで38emに縛ると、狭い中央カラムでさらに窮屈になります。図版は中央カラムの幅いっぱいに広げ、テキストだけ行長を制限する。読みやすさと見やすさは別の指標なので、要素ごとに分けて考えるのが正解です。
Soreiine!!ギャラリーで3カラム的な構成を読み解く
Soreiine!!のギャラリーには、実際に公開されているWebサイトが日々集まっています。レイアウトの判断で迷ったとき、こうした実物を「なぜこの構成なのか」の視点で見ていくのが一番早い学習になります。
【画像挿入: Soreiine!!ギャラリーの一覧画面。カテゴリ絞り込みとサイトサムネイルが並んだ状態】
ギャラリーサイト自体が3カラム的発想の実例
ギャラリーのような「探すために来るサイト」は、3カラム的な情報配置がそのまま機能する典型です。Soreiine!!のギャラリー一覧では、絞り込み条件（業種・色・レイアウト）／サイト一覧／関連するサイトへの導線という3つの情報が同時に必要になります。訪問者の行動が「1つのページを読む」ではなく「条件を変えながら何度も一覧を眺める」ものだからです。
見どころは、絞り込み条件を常に触れる位置に置いているかどうかです。条件変更のたびにページ上部へ戻る設計だと、探索の回数が伸びません。3カラムを採る理由がここにあります。
掲載サイトから読み取れる3つの傾向
ギャラリーに集まるサイトをレイアウト別に眺めると、いくつか共通した判断が見えてきます。
傾向1：純粋な3カラムは減り、「2.5カラム」が増えた
左右にサイドバーを常設する構成ではなく、片側だけを固定し、もう片方をスクロール追従の目次やアクションボタンに置き換えたパターンが目立ちます。カラムとして枠を作らず、必要な情報だけを画面端に浮かせる考え方です。具体的には、記事ページで左に目次を sticky で置き、右は余白のまま空けておく。枠線も背景色も与えないため見た目は1カラムに近いのに、機能としては3カラムの左カラムと同じ役割を果たしています。
傾向2：ECとメディアで残り方が違う
商品一覧を持つサイトでは、絞り込みを左に置いた実質3カラムがしっかり残っています。価格帯・カラー・サイズといった条件を同時に触れる必要があるためで、この用途に代わる形はまだ現れていません。一方でコーポレートサイト・ブランドサイトはほぼ1カラムに寄り、サイドバーを持ちません。扱う情報の量と、来訪者の目的の違いがそのまま構成に出ています。
傾向3：モバイルでは3カラムの痕跡が消えている
デスクトップで3カラムのサイトも、モバイルでは絞り込みをボトムシートやモーダルに逃がし、本文だけを縦に流しています。「3カラムをそのまま縮める」設計はもう見かけません。逆に言えば、モバイルの画面だけを見てそのサイトのレイアウトを判断することはできない、ということでもあります。デスクトップとモバイルは別の設計として作られています。
掲載サイトを見るときの着眼点
| 見る場所 | 確認すること |
|---|---|
| 左カラム | 全ページで内容が同じか、ページごとに変わるか |
| 中央の幅 | 本文の1行が何文字か（数えると設計意図が分かる） |
| 右カラム | スクロールに追従するか、上部で止まるか |
| モバイル表示 | サイドバーの中身がどこへ行ったか |
| ウィンドウを狭める | 何pxで2カラムに落ちるか |
とくに「ウィンドウを狭めていってブレークポイントを探す」作業は、5分で終わるうえに得るものが多い方法です。うまく作られたサイトは、カラムが減る瞬間に情報の優先順位が見えます。何が最初に消え、何が最後まで残るか。それが作り手の優先順位そのものです。
【画像挿入: 同一サイトのデスクトップ表示とモバイル表示を並べた比較図】
3カラムを採用する前に決めておくこと
サイドバーの中身を先に確定させる
3カラムで失敗する案件の共通点は、レイアウトを先に決めてから中身を考えることです。順番が逆で、載せるものが決まっていないカラムは必ず余ります。
このフローの2番目で「新着情報」「バナー」しか出てこないなら、その時点で3カラムをやめる判断ができます。項目名を実際に書き出す作業は5分で済み、公開後に空のサイドバーを見て後悔する時間よりはるかに短い。
CMSで実現できるかを確認する
3カラムはテンプレートの構造に手が入るため、使うCMSによって難易度が変わります。
- WordPress：テーマ次第。3カラム対応をうたうテーマは減っており、既存の2カラムテーマに追加するには子テーマでテンプレートを書く必要がある
- ノーコード系（STUDIO・Wixなど）：デスクトップでの3分割は組めるが、レスポンシブの落とし方に制約が出やすい
- Shopify：商品一覧の絞り込みサイドバーは標準機能として持っているテーマが多く、実質3カラムに近い構成を作りやすい
テーマ選定の段階で「3カラムにする」と決めていれば、後から作り直す手間を避けられます。
CMS自体をどれにするかで迷っている段階なら、レイアウトの自由度も選定条件に入れておくべきです。3カラムのような構造に踏み込む予定があるなら、テンプレートをどこまで書き換えられるかが分岐点になります。判断の材料はCMS比較｜WordPress・STUDIO・Wixの選び方と向き不向き【2026年】で整理しています。
発注時に費用が動くポイント
3カラムは「カラムを1本増やすだけ」に見えて、見積もりの前提を変える要素をいくつか含みます。金額そのものは要件と制作会社によって幅が出ますが、どこで工数が積み上がるかは共通しています。
- ブレークポイントの数：1カラムのサイトが2段階で足りるところ、3カラムは3段階以上になる。デザインカンプの点数と検証の手間がそのまま増える
- テンプレートの分岐：一覧ページだけ3カラム、詳細ページは2カラム、といった使い分けをすると、テンプレートの種類が増える
- サイドバーの動的要素：ランキング・絞り込み・スクロール追従は、静的なバナーを並べるのとは実装の性質が違う
- 公開後の更新運用：サイドバーを管理画面から差し替えられるようにするか、コード直書きにするかで、初期費用と運用負荷が逆向きに動く
見積もりを取るときは「3カラムでお願いします」ではなく、上の4点を要件として渡すと、各社の金額が比較可能な形で並びます。レイアウト名だけを伝えると、含まれる範囲が会社ごとに違ったまま金額だけが並ぶことになり、比較の意味がなくなります。
既存サイトを3カラムに変えるべきか
すでに動いているサイトのレイアウト変更は、費用と効果を秤にかける話になります。3カラム化そのものが目的になっている場合、その多くは「回遊率が低い」「直帰率が高い」といった別の課題への対処として持ち出されています。
その課題がレイアウトに起因しているのかを先に確かめてください。回遊が起きない原因は、サイドバーの不在よりも記事内の関連導線の不足や、そもそも回遊させたいページが薄いことにある場合が多いです。レイアウトを変えれば直る問題と、変えても直らない問題を切り分けてから見積もりを取ると、判断が早くなります。
一部だけ3カラム化する選択肢もあります。ブログ一覧や商品一覧など探索が起きるページだけをサイドバー付きにして、コーポレート系の固定ページは1カラムのままにする。ページの目的ごとにレイアウトを変えるのは矛盾ではなく、むしろ目的に沿った設計です。
よくある質問
3カラムデザインはSEOに不利ですか？
カラム数そのものが検索順位に直接影響することはありません。ただし、3カラムはメイン以外の領域が増えるため、テンプレート由来のテキストがページ全体に占める割合が上がります。全ページで同じサイドバーが入ることで、ページ固有の内容が薄く見える状態になりやすい点は意識しておくべきです。中央カラムに十分な情報量があれば問題にはなりません。
スマートフォンで3カラムはどう表示すべきですか？
縦に1カラムへ落とし、メインコンテンツを最上部に置くのが基本です。左サイドバーのカテゴリメニューは開閉式のパネルやモーダルに格納し、本文より先に長い一覧が現れないようにします。デスクトップの3カラムをそのまま縮めて横スクロールさせる実装は避けてください。
3カラムと2カラムはどちらを選ぶべきですか？
ページ数が100を下回る、あるいは目的が問い合わせ・購入なら2カラム以下を選びます。ページ数が数千規模でカテゴリが多層、かつ訪問者が「探す」ために来るなら3カラムを検討する価値があります。判断はサイドバーに載せる項目を実名で書き出せるかどうかで決めるのが確実です。
3カラムのレイアウトが崩れるのはなぜですか？
CSS Gridで組んでいる場合、grid-template-columns に 1fr を指定していることが原因の大半です。minmax(0, 1fr) に変えると、中央に長いURLや画像が入ってもカラム幅が保たれます。それでも崩れるなら、サイドバー内の要素に固定幅が入っていないかを確認してください。
サイドバーには何を載せればよいですか？
左は移動のための情報（カテゴリ、階層メニュー、絞り込み条件）、右は発見のための情報（関連コンテンツ、ランキング、目次、アクションボタン）に分けます。両側に似た内容を置くと画面を狭めるだけになります。載せるものが思いつかない側は、無くしてしまうのが正しい判断です。
まとめ
3カラムデザインは古くなったのではなく、適用範囲が絞られただけです。判断の軸を最後に整理します。
- カラム数はレイアウトの流行ではなく情報の性質で決める — ページ数、カテゴリの階層、訪問者の目的の3点で答えが出る
- サイドバーの中身を先に実名で書き出す — 出てこないなら3カラムは選ばない
- 中央に最低640pxを確保できるかを計算する — 確保できないなら外枠から作り直すか、2カラムへ
- 実装は
minmax(0, 1fr)とgrid-template-areas— 崩れとレスポンシブの大半はこの2つで片付く - モバイルは縮めるのではなく組み替える — メインを最上部に、ナビは開閉式に逃がす
- ページ単位で使い分けてよい — 一覧ページは3カラム、固定ページは1カラムという構成は矛盾しない
レイアウトの判断で迷ったら、実際に公開されているサイトを見るのが最短です。Soreiine!!のギャラリーでは業種やレイアウトから絞り込んで実例を探せます。ウィンドウの幅を変えながら、どこでカラムが減るのかを追ってみてください。作った人の判断がそこに出ています。
