SWELLのリッチカラムの使い方講座｜誰でもマネできる4レイアウト

記事を書いていて、「トップページをもっとおしゃれにしたいのに、カラムレイアウトがうまく決まらない…」と感じたことはありませんか。

そこでこの記事では、リッチカラムの基本から、レイアウト例、ちょっとしたカスタマイズのコツまでをまとめて紹介します。

結論から言うと、「リッチカラムの特徴と基本設定を一度押さえてしまえば、デザインの完成度をガツンと底上げできる」です。

一緒に、SWELLのリッチカラムの使い方を整理して、自分のブログの味方にしていきましょう。

SWELLのリッチカラムとは？通常カラムとの違いをまず整理しよう

リッチカラムブロックの基本機能をざっくり把握する

リッチカラムは、SWELLオリジナルのカラムブロックです。WordPress標準のカラムブロックと似ていますが、次のような点が強化されています。

ざっくり言うと、「カード型レイアウトやレスポンシブなカラムを、あまり悩まずに作れる便利ブロック」というイメージです。

通常カラムとの違いを、表で並べておきます。

項目	通常カラムブロック	リッチカラムブロック
対応テーマ	WordPress標準	SWELL専用
デバイス別の列数設定	基本は同じ列数	PC・タブレット・スマホで個別に設定可能
カラム幅の調整	ある程度は可能	パーセント指定でかなり柔軟に設定可能
デザイン（影・角丸など）	シンプルな見た目が中心	カード風・ボーダー付きなどが簡単に選べる
横スクロール	工夫が必要	チェック一つで作れる

こうして並べてみると、リッチカラムは「見た目も使い勝手も、ちょっとリッチなカラム」といった位置づけだと分かると思います。

リッチカラムが活きるシーンをイメージしておこう

どんな場面でリッチカラムを使うと効果的かも、先にイメージしておきましょう。

• ブログのカテゴリーや記事のまとめを、カード型で一覧表示したいとき
• サービスメニューや料金プランを、分かりやすいカードで並べたいとき
• 制作実績・ポートフォリオなどのサムネイルを、整った形で並べたいとき
• スマホでも読みやすい、段落ごとに区切られたレイアウトを作りたいとき

私が一番よく使うのは、トップページの「おすすめ記事一覧」や、固定ページ内の「サービス紹介」部分です。

ただ本文を縦に並べるより、リッチカラムでカードにまとめると、情報が整理されて見え、読者も目的の情報にたどり着きやすくなります。

リッチカラムを使う前に知っておきたい前提

便利だからといって、何でもかんでもリッチカラムで作れば良いわけではありません。

使う前に、次のポイントだけ頭の片隅に置いておくと、失敗しにくくなります。

このあたりを意識しながら、次の章でSWELLのリッチカラムの使い方をステップごとに見ていきます。

SWELLリッチカラムの基本的な使い方4ステップ

ステップ1：リッチカラムブロックを挿入する

まずは、記事の好きな位置にリッチカラムブロックを挿入します。

挿入方法はいくつかありますが、よく使うパターンを表にまとめました。

方法	操作手順	特徴
ブロック追加ボタンから	「＋」ボタン → 「SWELLブロック」 → 「リッチカラム」	画面の動きが分かりやすく、初めてでも安心
検索して追加	「＋」ボタン → 検索窓に「リッチカラム」と入力	ブロックの種類が多いサイトでも素早く見つかる
ショートカット入力	段落で「/リッチカラム」や「/rich」と入力	キーボード操作だけでサクッと挿入できる

私は慣れてからはショートカット入力がほとんどで、文章を書きながらそのまま「/リッチ」と打ち込んで呼び出しています。

ステップ2：カラム数を決める

リッチカラムを挿入すると、「2カラム」「3カラム」といったプリセットがいくつか表示されます。

ここで、まずは大まかな列数を決めてしまいましょう。

• サービス説明やプロフィール紹介 → 2カラムが扱いやすい
• カテゴリー一覧や特徴のまとめ → 3〜4カラムが見やすい
• 商品をたくさん並べたい → 3〜4カラム＋横スクロールの組み合わせも便利

列数は後からでも変更できるので、この段階では「なんとなくこれかな」という感覚で選んで問題ありません。

ステップ3：各カラムにコンテンツを入れる

カラムの枠ができたら、中身を入れていきます。

• 画像ブロックを追加して、アイキャッチやサービスイメージを配置する
• 見出しブロックでタイトル（サービス名やカテゴリー名など）を書く
• 段落ブロックで短めの説明文を添える
• ボタンブロックで、詳細ページや申込みページへのリンクを用意する

私が意識しているのは、「1つのカードに入れる情報は3〜4要素まで」にすることです。

画像・タイトル・説明文・ボタン、このくらいに絞ると、読み手もパッと見で内容を理解しやすくなります。

ステップ4：PC・スマホで見え方を確認する

コンテンツを一通り入れたら、プレビューでPCとスマホの表示をチェックします。

• スマホで文字が詰まりすぎていないか
• 説明文の長さの違いで、カードの高さが極端にバラバラになっていないか
• ボタンやリンクが指で押しやすい大きさになっているか

この段階では、大きな崩れがないかをざっくり見る程度で大丈夫です。

「何となく見やすそうだな」と感じたら、次の設定で細かい調整をしていきましょう。

リッチカラムの設定項目を詳しく見ていこう

デザインスタイルと余白の設定

リッチカラムには、あらかじめいくつかのスタイルが用意されています。

代表的なイメージをざっくり整理すると、次のような感じです。

スタイル名（例）	見た目の印象	向いている使い方
デフォルト	シンプルな白背景	どんな記事にもなじませたいとき
ボーダー	カードに枠線が付く	料金プランや比較など、区切りをはっきりさせたいとき
シャドウ	影がついて、カードが浮いて見える	サービス紹介や実績紹介など、目立たせたいとき

あわせて大事なのが、余白の設定です。

• カラム同士の間隔（外側の余白）を少し広めにとる
• カラムの内側（上下左右）の余白を適度に確保する

私がよくやるのは、「カードの内側に少しゆとりを足す」ことだけです。

それだけでも、ぎゅうぎゅう詰めな印象が消えて、文章がぐっと読みやすくなります。

PC・スマホ別の列数と横幅を調整する

リッチカラムの大きな強みは、PCとスマホで列数やカラム幅を変えられるところです。

用途別に、よく使う列数の目安を表にしておきます。

用途	PCの列数	スマホの列数
サービス説明・プロフィールなど	2列	1列
カテゴリー一覧・メニュー一覧	3列	1〜2列
商品数が多い一覧	3〜4列	2列（横スクロール併用も検討）

カラム幅をパーセントで調整するときは、「合計してだいたい100％前後」になるように意識します。

• 画像＋テキストの2カラム → 画像40％・テキスト60％程度
• 料金プラン3つ → 30％・40％・30％で真ん中のプランを少し大きく

まず「どの情報を一番目立たせたいか」を決め、その情報が入るカラムに少しだけ幅を持たせると、バランスの良いレイアウトになりやすいです。

横スクロール設定で情報量の多いカードをスッキリ見せる

紹介したい商品や実績が多いときは、リッチカラムの「横スクロール」が便利です。

横スクロールの設定をオンにすると、スマホでも左右にスワイプできるカードレイアウトが簡単に作れます。

横スクロールを使うときのポイントは次の通りです。

• 1画面に欲張ってたくさんのカードを入れすぎない（スマホは2枚くらいが目安）
• 矢印アイコンや「スライドして見られます」といった一言をどこかに入れておく
• 特に見てほしいカードは、最初のほうに並べる

横スクロールは、省スペースで情報量を詰め込める一方、「スクロールしないと見えない情報」が増えるという面もあります。

本当に読んでほしい情報は、見出し内の本文でもきちんと触れておくと安心です。

具体例で学ぶリッチカラムレイアウト3パターン

パターン1：サービス紹介に使う2カラムレイアウト

サービスページやプロフィールページで使いやすいのが、画像＋テキストの2カラムレイアウトです。

よくある構成を表にすると、こんなイメージになります。

位置	左カラムの例	右カラムの例
上部	サービスイメージ画像	サービス名・キャッチコピー
中央	特になし	サービス概要の説明文（2〜3行）
下部	特になし	「くわしく見る」などのボタン

このレイアウトを使うときのポイントは次の通りです。

• PCでは「画像40％・テキスト60％」くらいにして、文字が窮屈にならないようにする
• スマホでは1列に切り替えて、画像 → テキストの順に縦に並べる
• 説明文は長くても3〜4行におさえ、必ずボタンで次の行動を示す

私がクライアントサイトを作るときも、まずこのパターンから使うことが多いです。

どんな業種にも応用しやすく、最初に覚えるレイアウトとしてもおすすめです。

パターン2：ブログカテゴリーを並べるカード型3カラム

ブログ型のサイトなら、「カテゴリー一覧をカードで並べるレイアウト」がかなり便利です。

• PCでは3カラムでカテゴリーカードを横に並べる
• スマホでは1〜2カラムにして、縦スクロールで見せる

1枚のカードには、次のような情報を入れると分かりやすくなります。

• カテゴリー名
• カテゴリーの説明文（1〜2行）
• 代表的な記事タイトルを1つだけピックアップ
• 「このカテゴリーの記事一覧へ」ボタン

このレイアウトを使うと、読者が「自分に関係のありそうなカテゴリー」を素早く選べるようになります。

結果として、サイト内を回ってもらいやすくなり、滞在時間やPVの向上にもつながりやすいです。

パターン3：アフィリエイト商品を並べる横スクロールカード

アフィリエイト商品やツール紹介が多いブログなら、横スクロールのリッチカラムはほぼ必須といっていいくらい役立ちます。

• PCでは3〜4カラムで商品カードを並べる
• スマホでは2カラム＋横スクロールにして、左右にスワイプしながら見てもらう

カードに入れる情報は、次のような組み合わせが扱いやすいです。

• 商品画像（サイズをできるだけそろえる）
• 商品名（長すぎる場合は少し省略する）
• 推しポイントや特徴を1〜2行で簡潔に
• 「公式サイト」「レビューを見る」などのボタン

カードが多くなるときは、次の点も意識すると親切です。

• 一番おすすめの商品を、一番左側（スマホなら最初のカード）に置く
• ジャンルが違う商品を一緒に並べる場合は、グループごとにリッチカラムを分ける
• テキスト量をそろえて、カードの高さが極端に変わらないようにする

リッチカラムの使い方に慣れてきたら、この横スクロールパターンを一つのゴールにしてみるのもありだと思います。

リッチカラム＋ちょいCSSでできる便利テク

カラム全体をリンクにするアイデア

カードのどこをクリックしても同じリンク先に飛ぶようにしておくと、読者にとって操作がかなりラクになります。

SWELLのボタンブロックだけでも十分ですが、カード全体をリンクにしたい場面も意外と多いです。

考え方の一例は次の通りです。

• リッチカラム内の1つのカードを「グループブロック」でまとめる
• そのグループに任意のクラス名（例：card-link）を付ける
• 追加CSSに、「.card-link 全体をクリック範囲にするCSS」を書く

具体的なコードはテーマの公式ドキュメントや、実例を紹介しているブログを参考にするのがおすすめです。

自分のサイトのデザインに近いサンプルを探して、少しずつ調整していくと失敗しにくいです。

カードの高さをそろえて見た目を整える

リッチカラムを使っていると、説明文の長さの違いなどで、カードの高さに差が出やすくなります。

高さのバラつきが大きいと、どうしても「少し崩れたレイアウト」に見えてしまいます。

まずはCSSの前に、次のような工夫から試してみてください。

そのうえで、「同じ段のカードの高さをそろえるCSS」を追加していくイメージです。

リッチカラムのブロック構造に合わせてCSSを書く必要があるので、最初はサンプルコードをベースに、少しずつ書き換えていくのが安心です。

よく使うカスタムCSSはまとめて管理しよう

リッチカラムの使い方に慣れてくると、「このCSSはよく使う」というパターンが増えてきます。

そのときに適当に追加してしまうと、あとから自分でも何が何だか分からなくなりがちです。

私が個人的にやっている管理ルールを紹介します。

少し地味な作業ですが、あとからデザインを調整したいときに、自分を助けてくれます。

よくある質問：SWELLリッチカラムの使い方Q&A

Q1. リッチカラムと通常カラム、どちらを使えばいいですか？

A1. 「カード型のデザインにしたい」「PCとスマホで列数を変えたい」といったときは、リッチカラムを使うのがおすすめです。

一方で、「ちょっと2カラムにしたいだけ」「特にカードっぽくする必要はない」といった場面なら、通常カラムでも十分です。

ざっくり分けるなら、「デザインもレイアウトもこだわりたいときはリッチカラム」「とりあえず分けられればいいときは通常カラム」と考えると判断しやすいと思います。

Q2. リッチカラムの横スクロールは、SEO的に問題ありませんか？

A2. 横スクロールの仕組みそのものが、直接SEOにマイナスになることは基本的にありません。

ただし、リッチカラムの横スクロールに重要な情報を詰め込みすぎると、読者が気づかずにスルーしてしまう可能性があります。

本当に読んでほしいポイントは、横スクロールの先だけに置かず、本文中や見出しの直下でもしっかり説明しておくと安心です。

Q3. リッチカラムがうまく表示されないときは、どこをチェックすればいいですか？

A3. まず次のポイントを順番に確認してみてください。

• キャッシュ系プラグインが古いCSSを残していないか
• カラム内のブロック構造が複雑になりすぎていないか
• 自分で追加したCSSが、リッチカラムのレイアウトとぶつかっていないか

特にカスタムCSSを多く入れている場合は、一度コメントアウトして、SWELL標準の状態でどう表示されるかを確認すると、原因を絞り込みやすくなります。

まとめ：SWELLリッチカラムの使い方を自分の型にしてしまおう

この記事の内容を整理しておきます

今日からできる最初の一歩としては、「まず1つの既存記事にだけ、リッチカラムでカード型の案内ボックスを追加してみる」ことをおすすめします。

いきなりサイト全体を作り替える必要はありません。小さなブロックを1つずつ整えていくことで、気づいたときには「読みやすくて見た目も整ったサイト」へと育っていきます。