この記事の対象: 1カラムレイアウトを検討しているWeb担当者・デザイナー
読了時間: 約9分
サイトを開いた瞬間、上から下へ一直線に情報が流れていく構成。それが1カラムレイアウトです。特設ページや採用サイト、企業のブランディングサイトで採用例が増えている一方、「情報量が多いサイトには向かない」という誤解もよく聞きます。Soreiine!!ギャラリーに掲載された実例をもとに、1カラムが選ばれる理由と、実装時に押さえておきたいポイントを整理します。
1カラムレイアウトとは何か
1カラムレイアウトは、コンテンツを左右に分割せず、1本の縦の流れとして配置するデザイン手法です。ヘッダー・メインビジュアル・コンテンツブロック・フッターが、ユーザーのスクロールに沿って順番に現れる構成になります。
サイドバーを持つ2カラム・3カラムのレイアウトと違い、視線の移動が上下方向に限定されるため、「今どこを見ればいいか」で迷う余地がありません。ストーリー性を持たせて情報を届けたいサイトと相性が良い構成です。
3カラムとの使い分けで迷っている場合は、こちらの記事も判断材料になります。
1カラム
- 視線が上下方向のみ
- ストーリー順に情報を提示できる
- スマホでの再設計がほぼ不要
2〜3カラム
- 視線が上下左右に分岐する
- 複数コンテンツを同時に比較させられる
- スマホでは縦積みへの再構成が必要
比較対象を並べて選ばせたいサイトは多カラム、順を追って説得したいサイトは1カラム、という整理をしておくと、設計段階での迷いが減ります。
1カラムが向いているケース・向いていないケース
Soreiine!!ギャラリーに登録されている1カラムの実例を見渡すと、採用サイト・キャンペーン特設ページ・企業のブランディングサイトでの採用が目立ちます。共通しているのは、「伝えたい順番がはっきりしている」という点です。
| 向いているケース | 理由 |
|---|---|
| 採用サイト | メッセージ→事業紹介→社員紹介→選考フロー、と順序立てて説得できる |
| キャンペーン・特設ページ | 期間限定の熱量をストーリーとして一気に伝えられる |
| コーポレートのブランディングサイト | 企業理念やビジョンを主役にした構成にしやすい |
| ポートフォリオ・単体サービスのLP | 訴求対象が1つに絞られているため情報の分岐が不要 |
逆に、商品点数の多いECサイトや、カテゴリ横断で比較検討させたいメディアサイトは、1カラムだと縦に長くなりすぎてユーザーが迷子になりやすく、不向きです。そうしたサイトはグリッド型の多カラムのほうが合っています。
実例で見る1カラムサイト8選
ここからは、実際に1カラムを採用しているサイトを、目的別に見ていきます。
キャンペーン・特設ページ
NiziU×SALONIA特設ページ（salonia.jp / Soreiine!!掲載）
美容家電ブランドSALONIAが公開していたNiziUとのコラボ特設ページです。キャンペーン終了後は404ページとして表示されていますが、白背景にロゴとナビゲーションだけをシンプルに残す構成そのものが、ブランドの「クリーンさ」を最後まで崩さない設計になっています。ヘッダーにはABOUT・TOPICS・PRODUCTなど充実したナビが並び、目的のページが消えていても他のコンテンツへ回遊させる導線が確保されている点が参考になります。特設ページを畳むときの「終わり方」まで設計されているのは、他ではあまり見ない視点です。
BEAMS別府竹細工の特集ページ（beams.co.jp / Soreiine!!掲載）
ファッションブランドBEAMSが、別府の伝統工芸である竹細工を紹介する特集です。ミントグリーンの背景に、竹をモチーフにしたアイコンと縦書きのコピーを配置し、和とモダンを同居させています。「世界に轟く伝統工芸 別府・竹細工」という縦書きの見出しが、工芸品としての格式を静かに主張する構成です。ファッションブランドが本業と離れた伝統工芸を紹介するという切り口自体が新鮮で、1カラムだからこそ、余計な情報に邪魔されず物語として読ませられています。
コーポレート・ブランディング
井上株式会社のコーポレートサイト（inouekabu.com / Soreiine!!掲載）
「Borderless Spiral Solutions.」という英語コピーを大きく配置し、ブルーのグラデーション背景に社屋やスタッフ写真をコラージュ風に重ねたファーストビューです。電気・システム関連企業として、技術力と人の力の両方を伝えるバランスを取っています。写真を重ねて多角的な事業を表現する手法は、事業領域が複数にまたがる企業が1カラムでまとめる際の参考になります。
SAS IRIAM事務所のサイト（sas-vliver.com / Soreiine!!掲載）
VTuber/VLiver事務所のサイトで、所属タレントが横一列に並ぶビジュアルが冒頭に配置されています。「Spice Up Your MIRAI」というキャッチコピーとともに、白とライトブルーを基調にした清潔感のある背景が、アニメ調のキャラクターを引き立てています。Entryボタンを目立つ位置に置き、タレント募集の導線を明確にしている点も実務的です。タレントの魅力を主役に据えたいサイトでは、1カラムでの横並び配置が効果的だとわかる実例です。
sukimaのクリエイティブカンパニーサイト（sukima.tokyo.jp / Soreiine!!掲載）
ライトグレーの背景に、大きな余白を取った「あなたの人生の隙間に笑顔を届けます。」というコピーだけを置くミニマルな構成です。社名の「sukima（隙間）」というコンセプトと、余白を多く取ったレイアウトが呼応している点が秀逸で、「の」の一文字にだけイエローグリーンのアクセントを添える繊細な処理も見どころです。情報量を絞り込むほど、1カラムは企業の哲学を伝える器として機能します。
採用サイト
クラウドローンの採用サイト（careers.crowdloan.jp / Soreiine!!掲載）
「Facing PEOPLE Moving FORWARD」という英語コピーを大きなタイポグラフィで見せ、「今日も、人を向いて。」という日本語のサブコピーを添えています。フィンテック企業でありながら、ライムグリーンのアクセントカラーで硬さをやわらげ、スタッフの自然な表情の写真を随所に配置しているのが特徴です。金融系という信頼性が求められる業種でも、1カラムのストーリー構成なら「人を大切にする姿勢」を前面に出せることがわかります。
弥生株式会社の採用サイト（yayoi-kk.co.jp / Soreiine!!掲載）
「1人の覚悟が、99%を動かす。」という力強いキャッチコピーと、画面を横切るカラフルな矢印のビジュアルが印象的です。ブルー系のグラデーションを基調にしつつ、多色の矢印で動きを加えることで、会計ソフト企業の堅実さと、挑戦を続ける企業文化の両方を1本の縦の流れの中で伝えています。
コサウェルの採用サイト（cosawell-recruit.jp / Soreiine!!掲載）
ライトブルーのグラデーション背景に、オフィスで働くスタッフの写真を複数配置したIT企業らしいクリーンな構成です。ナビゲーション付近に置かれたレインボーカラーのアクセントラインが、多様性や可能性を視覚的に示唆しています。EVENTとENTRYという2つのCTAを明確に分けている点も、採用サイトのコンバージョン設計として実務的です。
実装のポイント
8つの実例に共通しているのは、縦方向のスクロールをそのまま「読む体験」として設計している点です。実装面では次の3つを押さえておくと、破綻しにくくなります。
セクションごとにmax-widthを固定する
1カラムでも、テキストや画像をブラウザ幅いっぱいに広げると可読性が落ちます。コンテンツ本体はmax-width: 1200px前後、テキストブロックはさらに絞ってmax-width: 720px程度に収め、背景色だけを画面幅いっぱいに敷くとバランスが取れます。
.section {
padding-block: clamp(64px, 8vw, 120px);
}
.section__inner {
max-width: 1200px;
margin-inline: auto;
padding-inline: 24px;
}
.section__text {
max-width: 720px;
margin-inline: auto;
}
セクションごとにpadding-blockをclamp()で可変にしておくと、スマホでもPCでも余白の比率が崩れません。1カラムはスマホ表示への再構成がほぼ不要な構成ですが、余白だけは画面幅に応じて調整しないと、縦に間延びして見えます。
画像の遅延読み込みを徹底する
縦に長くなる分、ファーストビュー以外の画像は必ずloading="lazy"を指定します。BEAMSの特集ページのように写真点数が多い構成では、初期表示の重さが離脱に直結するため、ここを省くと1カラムの強みである「読み進めやすさ」が損なわれます。
セクション単位でスクロール演出を入れる
Intersection Observerを使い、セクションが画面に入ったタイミングでフェードインさせると、縦の流れにリズムが生まれます。横スクロールのカルーセルを1セクションの中に組み込みたい場合は、JS不要で実装できる手法もあります。
つまずきやすい点
- 情報量を絞り込めないまま1カラムを選ぶと、単に長いページになる。セクションごとに「1つのメッセージだけ」を割り当てる意識が要ります。
- ナビゲーションの扱いが曖昧になりやすい。SAS IRIAM事務所のサイトのように、ヘッダーのナビゲーションをアンカーリンクで各セクションに飛ばす設計にしておかないと、長いページの途中で迷子になります。
- フォントサイズを均一にしすぎると、どこが重要な情報かわかりにくくなる。弥生の採用サイトのように、キャッチコピーだけ極端に大きくするなど、情報の重み付けをタイポグラフィで表現する工夫が必要です。
テンプレートを流用して短期間で公開したい場合は、制作期間の目安も合わせて確認しておくと計画が立てやすくなります。
よくある質問
1カラムレイアウトはSEOに不利になりますか
不利にはなりません。見出しタグ（h1〜h3）の階層構成をセクションごとに正しく設定していれば、検索エンジンの評価に大きな差は出ません。むしろストーリー性のある構成は滞在時間が伸びやすく、間接的にプラスへ働くケースもあります。
スマホとPCでレイアウトを作り分ける必要はありますか
基本的には不要です。1カラムはすでに縦積み構成のため、max-widthとpaddingをレスポンシブに調整すれば、PCとスマホで大きなレイアウト変更をせずに済みます。これは2〜3カラムからの縦積み変換に比べて実装コストが低い理由でもあります。
情報量が多い企業サイトでも1カラムは使えますか
事業部が多い企業の場合、トップページを1カラムのブランディング重視にし、各事業やサービスの詳細ページは別途グリッド型で作る、という使い分けが現実的です。トップページに全情報を詰め込もうとすると、1カラムの強みであるストーリー性が薄まります。
1カラムと1ページ完結のLPは同じものですか
近い概念ですが同じではありません。1カラムは「サイドバーを持たない」という構成の話で、LPは「1ページで完結させる」という設計思想です。1カラムのサイトでも複数ページに分かれているケースは多くあります（今回紹介した採用サイトはいずれも複数ページ構成です）。
まとめ
1カラムレイアウトは、情報を絞り込み、順序立てて伝えたいサイトで力を発揮する構成です。今回紹介した8サイトはいずれも、キャンペーン・企業ブランディング・採用という「メッセージを1本の筋で届けたい」目的で採用されていました。実装面では、セクションごとの余白設計と画像の遅延読み込みさえ押さえれば、大きく崩れることはありません。まずは自社サイトの目的が「比較させる」ものか「説得する」ものかを整理するところから始めると、1カラムを選ぶべきかどうかの判断がしやすくなります。
