カラム
Web デザインにおける「ページの縦方向の列(横方向の領域分割)」のことです。サイト全体のレイアウトを決める、最も基本的な骨組みになります。
代表的な 3 つのレイアウトパターン
- 1 カラム(シングルカラム)
左右にサイドバーを置かず、画面を 1 列で使うレイアウト。余計な情報が目に入らないため「本文の読みやすさ」や「CV(コンバージョン(CV))への集中」に向いています。現代のコーポレートサイトやランディングページ(LP)の主流です。 - 2 カラム
「メイン本文 ＋ サイドバー」の 2 列構成。サイドバーに人気記事ランキングやカテゴリ一覧などを常時表示できるため、「サイト内の回遊率(あちこち見てもらうこと)」を高めたいブログやメディアサイト、EC サイトに向いています。 - 3 カラム
「左サイドバー ＋ メイン本文 ＋ 右サイドバー」の 3 列構成。一画面に大量のリンクや広告を詰め込める反面、非常にごちゃつきやすいため、現在は大型ポータルサイト(Yahoo! JAPAN など)を除いてあまり使われません。
実務における設計の基本(レスポンシブ)
現代は「スマホファースト」が鉄則です。画面の狭いスマートフォンでは、PC 版が 2 カラムや 3 カラムであっても、強制的に上から下へと 1 列に並べる「1 カラム」へ自動で切り替わるよう(レスポンシブデザイン(レスポンシブ))設計します。
よくある落とし穴(注意点)
- PC 版で「あれもこれも見せたい」と欲張って 3 カラム(情報過多)にしてしまい、ユーザーがどこを見ていいか分からず直帰(直帰率)してしまう。
- サイドバーの中身(バナーやリンク)を長年更新しておらず、誰もクリックしない「無駄なスペース」のまま 2 カラムを維持してしまう。
- カラム数を決める際、競合サイトの真似(一般論)だけで決めてしまい、「自社のターゲットユーザーにとって本当に読みやすいか」の視点が抜けてしまう。
言葉をよく利用する人
- デザイナー
- コーダー / フロントエンドエンジニア
- Web 担当者(発注側)
会話上での使用例
トップページの構成をデザイナーと相談する場面
-
デザイナー
トップのレイアウト、何分割で組みましょうか。
-
Web 担当者
トップはカラムを分けずに全幅の 1 カラムでいきましょう。サイドに情報を置かない方が、主要なメッセージに視線を集められます。
ブログを読みやすくしたいというプロデューサーの相談に応じる場面
-
プロデューサー
ブログのサイドバーがごちゃついて読みにくいから、すっきりさせたいんだよね。
-
Web 担当者
ではカラムを 1 つにして本文を主役にしましょう。カテゴリや最新記事は記事の末尾にまとめれば、導線は保ったまま読みやすくなります。