SWELLブロック見本集｜用途から選べるデザインと使い方

SWELLで作りたいパーツに合うブロックを、実際の表示から選べる見本集です。補足を開閉する、画像と文章を並べる、記事へ案内するなど、用途別の一覧から必要な見本へ進めます。

WordPress標準ブロックの装飾例6項目と、SWELL専用ブロック21項目を掲載しています。SWELLの全機能を網羅した一覧ではありません。色・文字・余白は、このサイトの設定が反映された表示です。

作りたいものからブロックを選ぶ

作りたいもの	見本
補足を開閉する	アコーディオン
質問と回答を並べる	FAQ
内容を切り替える	タブ
画像・文章を横に並べる	リッチカラム
申し込みなどの手順を示す	ステップ
注意点をタイトル付きで囲む	キャプションボックス
次のページへ案内する	SWELLボタン
記事一覧を作る	投稿リスト

見本を自分のページに設置する手順

SWELLを有効にした投稿・固定ページのブロックエディターで「＋」を押し、一覧にあるブロック名を検索して追加します。見本のページ全体のHTMLをコピーする必要はありません。

追加したブロックを選択し、設定パネルでスタイルや配置を変更します。中に文章や画像を入れたら、公開前のプレビューでPCとスマホの表示を確認してください。不要になったブロックは、対象を選んで削除できます。

以下のアコーディオン・タブなどはSWELLのブロックで表示しています。見出しのデザイン比較はHTMLで再現した例です。追加コードが必要なカスタマイズは、目的別カスタマイズ一覧から個別の手順を確認してください。

表示確認日：2026年9月30日。アコーディオンとタブの操作、PC・スマホの表示を確認対象としています。ABテストの成果計測や制限エリアの条件動作まで検証したものではありません。

FAQとアコーディオンを使い分ける

読者に見せたい内容	使うブロック	公開時の確認
質問と回答をそのまま読ませる	FAQ	質問と回答の組が保持され、本文として読める
補足説明を必要なときだけ開く	アコーディオン	見出しで開閉でき、閉じた内容が読書を妨げない

FAQの質問は、回答を開くボタンとは限りません。

このページのFAQ見本は質問と回答を並べる形式です。

説明を折りたたみたい場合は、アコーディオンの見本を選んでください。

見た目の似た枠でも操作は異なります。

質問や回答を差し替える場合は、FAQ全体と各質問・回答のブロック構造を残して編集します。

アコーディオンでは見出しと内側の本文を差し替え、初期状態を開くか閉じるかも用途に合わせます。

保存後に開き直して内容が残ることを確認し、公開側ではTabでアコーディオン見出しへ移動してEnterまたはSpaceで開閉します。

回答を常に読ませるFAQと、補足を折りたたむアコーディオンを同じ目的で重ねる必要はありません。

読者が必ず知る必要のある手順や条件は見える本文に置き、任意の補足だけを折りたたむと、操作する理由が伝わります。

SWELLでのWordPressブロックの見た目･デザインパターン集

SWELLは通常のWordPressブロックの見た目も拡張しているので、SWELLブロックを紹介する前にこちらもまとめておきます。

段落

文章の一部を強調したいときに使います。マーカー、背景色、囲みの見本を比べてください。注意書き全体を目立たせる場合は、グループやキャプションボックスも候補になります。

テキストの装飾

様々な文字装飾が可能。

ここにテキストを記載。

code

ここにテキストを表示

 

インラインボタン

テキストのスタイル

ここにテキスト

ここにテキスト

ここにテキスト

ここにテキスト

ここにテキスト

ここにテキスト

ここにテキスト

ここにテキスト

ここにテキスト

ここにテキスト

ボーダー

スタイル

グループ

複数の段落や画像を一つにまとめ、同じ背景や枠で囲みたいときに使います。中身をまとめて移動する用途にも向いています。

見出し

記事の階層を示すブロックです。H2・H3・H4を内容の親子関係に合わせて選びます。下の見本はデザイン比較用にHTMLで再現した表示で、そのHTMLを貼るだけでテーマ全体の見出し設定が変わるものではありません。

H2

H3

H4

リスト

要点や条件を並べる場合は番号なし、作業の順序を示す場合は番号付きのリストを選びます。チェックや丸などの装飾は、内容の意味に合わせて使い分けてください。

デフォルト

• リスト1
• リスト2
• リスト3

目次風+横並び

• リスト1
• リスト2
• リスト3

チェック

• リスト1
• リスト2
• リスト3

マル

• リスト1
• リスト2
• リスト3

三角

• リスト1
• リスト2
• リスト3

バツ

• リスト1
• リスト2
• リスト3

丸数字

• リスト1
• リスト2
• リスト3

注釈

• リスト1
• リスト2
• リスト3

引用

ほかの資料から引用した部分を本文と区別するブロックです。出典へのリンクを添え、引用と自分の説明が混ざらないようにします。

ここに引用のテキスト

MOTOKI合同会社

テーブル

仕様や料金など、同じ項目で比較する情報に使います。スマホでは列が増えるほど読みにくくなるため、比較項目を絞り、横スクロールの有無も確認してください。

デフォルト

ヘッダーラベル	ヘッダーラベル
項目1
項目2
項目3
項目4
項目5
項目6
項目7
フッターラベル	フッターラベル

ストライプ

項目1	説明文1
項目2	説明文2
項目3	説明文3

シンプル

項目1	説明文1
項目2	説明文2

二重線

項目1	説明文1
項目2	説明文2

SWELL専用ブロック21項目の見本と用途

SWELLブロックの見た目･全21種類デザインパターンをまとめてみました。

機能の使い方というよりもデザインを考えるときの情報整理等に使えると思います。

1. リスト入りグループ
2. アコーディオン
3. バナーリンク
4. SWELLボタン
5. キャプションボックス
6. リッチカラム
7. 説明リスト (DL)
8. FAQ
9. フルワイド
10. ステップ
11. タブ
12. ABテスト
13. 広告タグ
14. ふきだし
15. ブログパーツ
16. リンクリスト
17. 投稿リスト
18. 関連記事
19. 制限エリア
20. 商品レビュー
21. RSS

リスト入りグループ

箇条書きを枠や背景でまとめたいときに使います。チェック項目、利用条件、記事の要点などを一つのまとまりとして見せられます。

アコーディオン

補足や長い説明を、読者が必要なときに開ける形で置きます。下のタイトル部分を押すと開閉できます。料金や利用条件など、最初から読んでほしい内容を隠す用途には向きません。

デフォルト

シンプル

囲い枠

メインカラー

バナーリンク

画像と文字を組み合わせて、特集やサービスの入口を作ります。画像内の文字だけに頼らず、リンク先を説明するテキストを付けてください。

デフォルト

ブラー効果をつける

影ををつける+角丸

SWELLボタン

問い合わせや詳細ページなど、次の行動へのリンクを目立たせる場合に使います。下のボタン見本は用途別一覧へ移動します。実際に設置するときは、自分のサイトのリンク先と文言に変更してください。

ノーマル

立体

キラッと

アウトライン

MOREボタン

このボタンは少し特殊で色やアイコンの設定変更ができません。

キャプションボックス

タイトル付きの枠で、注意点や補足をまとめます。枠の中に長い本文を詰めるより、一つの話題に絞ると読み進めやすくなります。

デフォルト

小

枠上

枠上2

枠内

浮き出し

内テキスト

リッチカラム

画像や文章を横に並べるレイアウトに使います。PCで横並びになってもスマホでは幅が変わるため、端末ごとの列数と、横スクロールを使うかを決めてください。

デフォルト

ボーダー

シャドウ

説明リスト (DL)

項目名と説明を対にして並べます。会社概要、仕様、用語の説明など、表ほど複雑な比較が不要な場合に使えます。

デフォルト

タイトル

説明文

タイトル

説明文

左に線

タイトル

説明文

タイトル

説明文

横並び

タイトル

説明文

タイトル

説明文

縦並び表

タイトル

説明文

タイトル

説明文

FAQ

質問と回答を組にして並べます。下の見本は回答を表示した状態です。クリックで回答を開閉する動きとは別なので、折りたたみが必要ならアコーディオンとの使い分けを検討してください。

デフォルト

質問のテキスト

回答のテキスト

質問のテキスト

回答のテキスト

線あり

質問のテキスト

回答のテキスト

質問のテキスト

回答のテキスト

ボックス

質問のテキスト

回答のテキスト

質問のテキスト

回答のテキスト

ストライプ

質問のテキスト

回答のテキスト

質問のテキスト

回答のテキスト

フルワイド

背景色や画像を横に広げ、ページ内の区切りを作ります。表示幅はページのレイアウトや背景設定にも左右されるため、設置先の公開画面で確認してください。

デフォルト

境界線：斜線

境界線：円

境界線：波

境界線：ジグザグ

ステップ

申し込みから完了までの流れや、作業手順を順番に示します。各ステップには「何をするか」と「次に進む条件」を入れると、読者が実行しやすくなります。

デフォルト

ビッグ

スモール

タブ

同じ場所で複数の内容を切り替えて見せます。下のタブを押して表示の切り替えを試してください。全項目を並べて比較したい場合は、テーブルやカラムのほうが適しています。

ノーマル

ふきだし

下線

ABテスト

2つの内容を出し分けるためのブロックです。下にはAまたはBの文章が表示されます。この表示見本だけで、どちらの成果が高いかを判断することはできません。

Bブロックのテキスト

広告タグ

登録した広告タグを呼び出すブロックです。見た目は登録内容によって変わるため、この項目では固有のデザイン見本を掲載していません。

ふきだし

会話や補足コメントを人物の発言として見せます。人物の役割と発言内容をそろえ、通常の本文で伝わる説明まで会話に置き換えないようにします。

ブログパーツ

別に登録した内容を複数のページで使い回すときに選びます。見た目は登録内容によって決まります。共通パーツを更新するときは、そのパーツを使うページも確認してください。

リンクリスト

関連するリンクをひとまとまりにして案内します。「こちら」ではなく、移動先で何が分かるかをリンク名に入れてください。

デフォルト

• テキスト1
• テキスト2

• テキスト1
• テキスト2

ボタン

• テキスト1
• テキスト2

• テキスト1
• テキスト2

投稿リスト

記事の一覧を条件に応じて表示します。下の見本にはサイト内の実際の記事が表示されるため、投稿や更新によって内容が変わります。一覧の見た目と抽出条件を分けて設定します。

カード型

リスト型

リスト型（交互左右）

サムネイル型

テキスト型

関連記事

特定の記事へのリンクをカードやテキストで表示します。自動で複数記事を並べる投稿リストと違い、案内したい記事を選んで置く用途に使います。

デフォルト

スリム

テキスト

制限エリア

内容を表示する条件を設けるためのブロックです。固有の外観を持つブロックではないため、見た目だけでは設定の成否を判断できません。条件ごとの表示確認が必要です。

商品レビュー

評価やメリット・デメリットを整理して表示します。下は表示形式を示すサンプルで、第三者による評価や購入者レビューではありません。実際の記事では自分で確認した評価理由を記載してください。

RSS

外部サイトの更新情報を表示する場合に使います。表示内容は取得先の配信状況によって変わり、取得できないと空になる場合があります。

カード型

フィードに記事が見つかりませんでした。

リスト型

フィードに記事が見つかりませんでした。

テキスト型

フィードに記事が見つかりませんでした。

標準ブロックで足りないときの次の手順

まず標準のブロックで必要な表示を作り、足りない部分を個別のカスタマイズで補います。

アイコンを加えたい場合はアイコンの表示見本とHTML・CSSの使い方、FAQを開閉させたい場合はFAQアコーディオンのカスタマイズへ進んでください。

WordPress 7.1とSWELL ver.2.19の変更点は、SWELL ver.2.19とWordPress 7.1｜更新の順序と変わったところにまとめています。

ほかのカスタマイズはSWELLカスタマイズまとめ｜目的別の一覧からご覧いただけます。