SWELL装飾ブロックの使い分け｜64本で使ったのは5種類

※本記事にはアフィリエイト広告（PR）が含まれます。

SWELLの装飾ブロック、結局どれを使えばいいのか分からない。そう思ったことはありませんか。

答えを先に書きます。使うのは5種類で足ります。

エディタで「SWELLブロック」を開くと、キャプション付きブロック、ふきだし、ステップ、アコーディオン、バナーリンク……と選択肢が並びます。せっかく買ったのだからと色を付けてみたら、記事がチカチカして逆に読みにくくなった。毎回どれにするか考えて、そのたびに手が止まる。装飾が原因で手が遅くなるのは、なかなか報われない時間の使い方です。

私はSWELLを購入して、このブログを運営しています。2026年9月3日時点で公開している64本の本文を、機械で全数集計しました。その結果、実際に出番があったSWELL独自のブロックは5種類だけ。しかもそのうち約72%は、キャプションボックスひとつが占めていました。

この記事は「ブロックの種類を紹介する記事」ではありません。「この場面ではどれを選ぶのか」を逆引きで決められるようにする記事です。読み終わる頃には、あなたの記事で使うブロックが4〜5種類に絞れて、迷わず手が動く状態になっています。

先に結論：SWELLの装飾ブロックは5種類で足ります

SWELL公式の「ブロックエディターで使えるSWELLの専用機能まとめ」ページには、専用ブロックが14種類並んでいます（SWELL公式・2026年9月3日確認）。この14という数字が、迷いの正体です。

では実際の記事で、そのうち何種類が使われるのか。当ブログの公開記事64本の本文を、ブロック単位で数えた結果が次の表です。

SWELL独自ブロック	総使用数	使っている記事数	1記事あたり平均
キャプションボックス	642個	64本（全部）	10.0個
ステップ	117セット （中の項目は455個）	63本	1.8セット
SWELLボタン	70個	49本	1.1個
FAQ	63セット （中の項目は385個）	63本	1.0セット
ふきだし	3個	1本	0.0個
上記以外のSWELL独自ブロック	0個	0本	0個

SWELL独自ブロックの合計は895個。内訳は上のとおりで、キャプションボックスだけで642個です。全体の約72%を1種類が占めている計算になります。

ふきだしは64本のうち1本で3個だけ。実質的に使っているのは4種類、という見方もできます。

ここで大事なのは「14種類のうち9種類は不要」という話ではない点です。用途がある人には必要な機能です。ただ、ブログ記事の本文を読みやすくするという目的に限れば、出番があるのはこの範囲だった。それが64本ぶんの答えでした。

場面からブロックを引く「逆引き表」を先に作ってしまう

ブロック選びで手が止まるのは、ブロックの側から考えているからです。「キャプションボックスとステップ、どっちがいいかな」と考え始めると、その比較には終わりがありません。

順番を逆にしてみてください。先に「今から書くのは何か」を決めて、そこからブロックを引く。これが本記事の看板です。

今から書く場面	選ぶブロック	なぜそれか
先に伝えたい注意・落とし穴	キャプションボックス （警告寄りの色セット）	枠で本文の流れから切り離せる。読み飛ばしても目に入る
要点まとめ・この記事でわかること	キャプションボックス＋リスト	拾い読みの読者が最初に目を止める場所になる
順番のある作業手順	ステップブロック	番号が自動で振られ、「何番まで進んだか」が一目で分かる
読者の短い疑問と回答	FAQブロック	質問と答えの対応が崩れない。デザインやQ・Aアイコンの形・色も設定で変えられる
条件が2つ以上ある比較	表（コアブロック）	縦と横で条件を突き合わせられる。装飾ブロックでは代わりが利かない
順番のない並列項目	リスト（コアブロック）	番号がないぶん、読者に「順番の意味」を探させずに済む
次に読んでほしいページへの誘導	SWELLボタン	本文中のテキストリンクより手が届きやすい
補足・脱線・出典メモ	装飾しない（段落のまま）	枠に入れると本題と同じ重さに見えてしまう

この8行に、記事本文で起きることはだいたい収まります。表の右端の列を読んでいただくと分かりますが、選ぶ理由はデザインの好みではありません。その情報の性質に、ブロックの構造が合っているかどうかだけです。

いちばん下の行を入れたのには理由があります。「装飾しない」も選択肢のひとつだからです。ここを空白にしておくと、書き手はどうしても何かで埋めたくなります。

この表をエディタの横に置いておくだけで、迷う時間はかなり減るはずです。まずは自分のブログ用に1枚作ってみてください。

キャプションボックスが7割を占めるのはなぜ？

642個は、SWELL独自ブロック895個のうち約72%にあたります。1記事あたりに直すと10個。段落が1記事平均70個ですから、7段落に1個の割合で枠が出てくる計算です。

理由は単純で、キャプションボックスだけが「見出しを持てる枠」だからです。枠の上に「この記事でわかること」「注意点」「まとめ」といったラベルを載せられる。ラベルがあると、読者は中身を読む前に「これは自分に関係あるか」を判断できます。

ステップは順番、FAQは質問と答え、ボタンは行動。それぞれ形が決まっています。決まっていないものを入れる箱は、キャプションボックスしかありません。だから集中する、というのが数字から言えることです。

色セットは3つ登録できるが、64本では実質2色だった

キャプション付きブロックには色セットが3つ用意されていて、SWELL設定のエディター設定から色を登録できます（SWELL公式・2026年9月3日確認）。デザインのスタイルも7種類あります。

では3つとも使われているのか。642個の内訳を数えると、こうなりました。

色セット	個数	割合	主な中身
col2	369個	約57%	要点まとめ・この記事でわかること・関連記事
col1	214個	約33%	注意点・デメリット・落とし穴
色セット指定なし	35個	約5%	記事末の補足・確認日の欄
col3	24個	約4%	使用は少数

col2とcol1の2色で、全体の9割です。読者から見れば「肯定的な情報の色」と「注意の色」の2つがあれば、それ以上の区別は要りません。3色目まで意味を持たせようとすると、読者が色の意味を覚える負担のほうが大きくなります。

色を増やして情報を整理した気になるのは、書き手側の満足です。あなたのブログでも、まず2色に決めてしまうのをおすすめします。

キャプションボックスを使わないほうがいい場面

装飾ブロックは「目立たせる道具」ではなく「読み飛ばしを助ける道具」だと考えると、この4つは自然に避けられます。

ステップブロックは「順番があるとき」だけ使う

64本での使用は117セット。63本の記事に入っているので、ほぼ1記事に1〜2セットです。中の項目は合計455個で、1セットあたり3.9項目という計算になります。

ステップブロックを入れるかどうかは、次の順番で判断すると迷いません。

この3つを通したうえで残った手順だけを、ステップにする。それでちょうど1記事1〜2セットに落ち着きます。

ステップにしないほうがいい場面

ありがちなのは、「メリット3つ」をステップにしてしまうケースです。メリットに順番はありませんから、番号が付いた瞬間に読者は「1番が最重要なのかな」と余計な推測を始めます。

もうひとつは、分岐がある手順です。「Aの人はこちら、Bの人はこちら」という内容は、直線的なステップでは表現できません。この場合は表で分岐を示してから、それぞれのステップを別に置くほうが読みやすくなります。

FAQブロックは読者の疑問を代弁する場所

FAQは63本の記事に1セットずつ、合計63セット。中の質問は385個で、1記事あたり6個でした。ほぼ全記事に同じ量が入っている、いちばん安定した使われ方をしているブロックです。

FAQブロックは、質問と答えの対応が崩れない形で並びます。公式が用意している設定は、ブロック全体のデザイン、Q・Aアイコンの形、Qアイコンの色、Aアイコンの色の4種類です。Q&Aの形にするなら、見出しと段落で組むより、素直にこのブロックを使うほうが早く仕上がります。

問題は「何を質問として載せるか」のほうです。ここを間違えると、本文の要約を質問形にしただけの、読む価値のないFAQができあがります。

質問文は、読者が使う言葉のまま書いてください。「解約時のデータ保持期間について」ではなく「やめたら過去のデータは消えますか」。後者のほうが、読者は自分の疑問だと気づけます。

Q&Aの形にしないほうがいい場面

答えが3段落かかる内容を、無理にFAQへ入れないことです。FAQは1問につき2〜4文が読みやすい上限で、それを超えると本文をFAQに押し込んでいる状態になります。長くなる論点は、H2やH3を立てて本文で扱うほうが読者のためになります。

もうひとつ。FAQのH2を「よくある質問」だけにするのは避けたほうがいいでしょう。サイト内で同じ見出しが量産され、記事ごとの個性が消えます。「SWELLの装飾ブロックについてよくある質問」のように、主題を入れておくのが安全です。

表とリスト、どちらで書くか迷ったら

SWELL独自ブロックの話をしてきましたが、64本でいちばん出番が多かった視覚要素は、実はコアブロックのリストと表でした。

コアブロック	総使用数	使っている記事数	1記事あたり平均
段落	4,485個	64本	70.1個
見出し（H2・H3）	1,104個	64本	17.2個
リスト	503個	64本	7.9個
表	247個	63本	3.9個
画像	197枚	63本	3.1枚

リストが503個で表が247個。おおよそ2対1です。SWELLを入れると装飾ブロックに目が行きますが、記事の骨格を作っているのは今でもこの2つでした。

どちらでも書ける内容は、比較する「軸」の数で決める

判断はシンプルです。項目ごとに比べたい軸が2つ以上あるなら表、1つならリスト。

SWELLの表ブロックには、スマホで横スクロールさせる設定と、1列目を固定する設定があります。列が多い表を作るなら、この2つを入れておくと読者が迷子になりません。

SWELLボタンは1記事1〜2個で足りる

64本でのSWELLのボタンブロックは70個。置いている記事は49本なので、15本にはボタンブロックが1つもありません。1記事あたりの平均は1.1個です。

これは意外に思われるかもしれません。ボタンは目立つぶん、たくさん置きたくなる部品だからです。ただ、ボタンが3つ4つ並ぶページを想像してみてください。どれを押せばいいのか分からなくなります。ボタンの説得力は、そのページで唯一だから生まれます。

置く場所の目安は2か所。読者が「なるほど」と納得した直後（比較表や診断の答えの直後）と、記事の締めです。それ以外の誘導は、本文中のテキストリンクで足ります。

ちょうど今、上に置いたのが「納得した直後のボタン」の位置です。ブロックの話が一段落したところで、その前段にあたる設定の記事へつないでいます。テーマを入れたばかりなら、装飾より先にこちらを片づけるほうが早いはずです。

64本で一度も使わなかったブロックと、その理由

ここが、他のSWELL解説記事といちばん違う部分かもしれません。あなたが使うブロックを決めるうえでは、使ったものより使わなかった理由のほうが役に立つはずです。

ブロック	64本での使用	出番がなかった理由
タブ	0回	切り替えた先は読まれない。読ませたい情報を隠すことになる
アコーディオン	0回	開かないと中身が見えない。閉じたぶんだけ読まれる本文が減る
バナーリンク	0回	テキストリンクとSWELLボタンで足りた
ボックスメニュー	0回	トップページや固定ページ向けの部品で、本文の流れには合わない
フルワイド	0回	画面幅いっぱいの見せ場を作る部品。記事本文では出番がない
説明リスト・投稿リスト・ABテスト・広告タグ・関連記事など	0回	本文の読みやすさではなく、サイト運営側の目的のための機能

タブとアコーディオンが0回だった理由

この2つは似た性質を持っています。情報を隠して、読者の操作で開かせるという点です。

ページが短くなるので、書き手には整理できたように見えます。ただ、読者は基本的に開きません。スマホで指を動かしながら読んでいる人が、わざわざタブを切り替えるでしょうか。せっかく調べて書いた内容が、閉じた中に入ったまま終わります。

使うとすれば、「大半の読者には不要だが、一部の人には必要」な内容に限られます。旧バージョンの手順、細かい免責事項、コードの全文など。読ませたい情報を隠す道具ではない、という線引きです。

ふきだしを増やさなかった理由

ふきだしは64本のうち1本、3個だけです。会話形式は読みやすさの定番なので、意外に思われるかもしれません。

技術的な事情がひとつあります。SWELLのふきだしは、エディタのブロックから挿入する前提の機能です。HTMLに直接書き込んでも、ふきだしの装飾は反映されません。自動化やコピー中心で記事を組んでいると、ここでつまずきます。

もうひとつは中身の問題です。会話形式は、キャラクターを立てて記事全体の口調をそれに合わせないと浮きます。半端に数個だけ入れると、地の文との温度差が目立つ。導入するなら記事単位ではなくサイト単位で決める話、という整理になります。

装飾を増やすほど読みにくくなる境界線はどこか

「装飾は多すぎてもいけない」とはよく言われますが、多すぎの基準がはっきりしません。そこで64本の数字から、実際の密度を出してみます。

視覚要素の合計は、SWELL独自ブロック895個＋表247個＋リスト503個＋画像197枚＝1,842個。段落は4,485個です。割り算すると、2.4段落に1つの割合で視覚要素が現れている計算になります。

1記事あたりに直すと、視覚要素は約29個。見出しが17個なので、見出し1本につき1.7個という配分です。「H2ごとに少なくとも1つ、2〜3段落に1つ」という目安が、実測とほぼ一致しました。

逆に言うと、この密度を超えて足しているときは、たいてい「文章で説明しきれていないところを装飾でごまかそうとしている」場面です。枠を足す前に、その段落が長すぎないかを疑ってみてください。

時間の話もしておきます。1記事に装飾ブロックが14個あるとして、1個あたり30秒迷えば7分。月に8本書く人なら、それだけで1時間近くがブロック選びに溶けます。使う種類を絞る目的は、見た目の統一よりこの時間を回収することです。

それでも迷ったときは、この順番で自分に聞く

逆引き表を見ても決まらない場面は残ります。そのときは、次の順番で確認してみてください。

この順番なら、判断は数秒で終わります。1問目で「装飾しない」に落ちるものが多い、というのがポイントです。装飾を減らす方向に働く順序にしてあります。

SWELLの装飾ブロックについてよくある質問

使うブロックを5種類に絞ると、記事が地味になりませんか。

種類を絞っても、量は変わりません。64本の実測では1記事に視覚要素が約29個入っています。地味に見える原因は種類の少なさではなく、2〜3段落に1つという密度を下回っていることのほうが多いです。まず密度を満たしてから、種類を足すか考えるのが順番だと思います。

キャプションボックスの色セットは、どう決めればいいですか。

2色で始めるのがおすすめです。ひとつは注意・デメリット用の警告寄りの色、もうひとつは要点・まとめ用の落ち着いた色。色はSWELL設定のエディター設定から3つまで登録できますが、3色目は意味を覚えてもらうのが難しく、当ブログの642個でも4%にとどまっています。

装飾ブロックを使うと、表示が重くなりませんか。

ページの表示速度に効いてくるのは、装飾ブロックの数より画像のサイズと枚数のほうです。今回の集計でも、本文に入っていた画像は64本で合計197枚、1記事あたり約3枚でした。気になるなら、まず画像のサイズと枚数から見直すのが先になります。

ふきだしをHTMLで直接書いても大丈夫ですか。

おすすめしません。SWELLのふきだしはエディタのブロックから挿入する前提で、HTMLに直接書いても装飾が反映されず、素のテキストのまま表示されます。ふきだしを使うなら、管理画面でふきだしセットを登録してから、ブロックとして挿入してください。

他のテーマから移行すると、装飾はどうなりますか。

前のテーマ専用のブロックやショートコードで作った装飾は、そのままでは表示が崩れます。当ブログでも移行直後、いくつかの記事で装飾が抜けました。移行の実際のコストについては、SWELLとCocoonどっちを選ぶかの記事で詳しく書いています。

装飾ブロックを使いこなせないと、SWELLを買った意味がないですか。

そんなことはありません。この記事の集計でも、実際に使っているのは用意されている機能のごく一部です。全部使うことが目的ではなく、記事が読みやすくなれば足ります。買うかどうかで迷っている段階なら、SWELLで後悔する人の条件のほうを先に読んでみてください。

まとめ：ブロックは絞るほど、記事は読みやすくなります

SWELLの装飾ブロックが多いのは、いろいろなサイトに対応するためです。ブログ記事の本文だけを考えるなら、そのうち出番があるのはごく一部でした。

この記事自体も、ここで挙げた範囲だけで組んでいます。キャプションボックス、ステップ、FAQ、ボタンの4つと、表とリスト。読みながら「装飾が足りない」と感じた箇所は、たぶんなかったはずです。

今日やることはひとつだけです。あなたのブログで使うブロックを4〜5種類に決めて、それ以外はエディタで探さないと決めてしまいましょう。決めた瞬間から、記事1本あたりにかかる時間が変わってきます。

この記事の確認日と、集計の条件