SWELLの装飾おすすめ10選｜ボックス・マーカー・吹き出し活用術

「SWELLを入れたのに、装飾が思ったように使いこなせない…」と感じていませんか。

この記事では、そんなモヤモヤを少しでも減らせるように、Swell 装飾の基本と、読者にとって読みやすいデザインに整えるコツをまとめて紹介します。

この記事で分かる事

Swellの主な装飾機能と、それぞれがどんな役割を持っているか
ボックス・マーカー・吹き出しなどを、記事の流れに合わせて使い分ける考え方
私が実際に使っている、装飾ルールやテンプレートを使った時短ワザ

結論をひと言でまとめると、Swell 装飾は「種類を全部使いこなす」よりも、「意味とルールを決めて絞って使う」ほうが、読みやすくてプロっぽい記事デザインに近づきます。

Swell 装飾でできることをざっくり整理しよう
Swell 装飾の基本設定とエディター画面の見方
ボックス系Swell 装飾の種類と使い分け
テキスト系Swell 装飾（マーカー・文字装飾）の活用
吹き出しとブログパーツで会話と装飾を量産する
読みやすさが変わるSwell 装飾デザインのコツ
Swell 装飾のよくある質問
Swell 装飾を今日から使いこなすまとめ

Swell 装飾でできることをざっくり整理しよう

ごとう

いきなり細かい操作から入ると混乱しやすいので、まずはSwell 装飾がどんな種類に分かれていて、記事のどの部分に効いてくるのかをざっくり整理しておきます。全体像が見えているだけで、このあとの細かい設定がかなり覚えやすくなります。

Swell 装飾の主な種類と役割

Swellの装飾は、大きく分けると次の4グループとして考えると整理しやすいです。

種類	代表的な装飾	主な役割
ボックス系	注意ボックス・メモボックス・アイコン付きボックスなど	重要な情報をひとかたまりで目立たせる
テキスト系	マーカー・太字・インラインコードなど	文中のキーワードをピンポイントで強調する
吹き出し	会話風の吹き出しブロック	説明やレビューを会話形式にして読みやすくする
パターン・ブログパーツ	CTAボックス・まとめブロックなど登録済みパーツ	よく使う装飾セットを一発で挿入する

「Swell 装飾」と聞くと、ボックス系だけをイメージしがちですが、実際にはテキスト装飾や吹き出し、ブログパーツまで含めて考えたほうが、サイト全体のデザインを設計しやすくなります。

装飾を使うときに意識したい3つの目的

装飾を入れるか迷ったとき、私が頭の中でチェックしているのは次の3つです。

重要な情報を一目で分かるようにしたいのか
長く続く文章を、読みやすく区切りたいのか
読者が「次にどこを読めばいいか」を迷わないようにしたいのか

なんとなく「おしゃれだから」「目立たせたいから」と装飾を増やしていくと、すぐにカラフルだけど読みにくいページになってしまいます。Swellの装飾を使う前に、「このひと手間で、読者にどんなメリットがあるか」を一度考える習慣をつけておくと、装飾の質がぐっと上がります。

装飾のやりすぎで逆に読みにくくなるパターン

Swellは装飾が豊富なので、慣れてくるとつい楽しくなって盛りすぎてしまうことがあります。私が実際にやらかした「やりすぎパターン」を挙げておきます。

1画面の中に大きなボックス装飾がいくつも並び、視線の行き場がなくなる
1つの段落の中にマーカー・太字・色付き文字が全て入って、目が疲れてしまう
吹き出しのキャラクターが多すぎて、「誰が何を言っているのか」が分かりにくくなる

装飾は「足すセンス」より「引いて整えるセンス」が大事です。Swell 装飾を使いこなすというより、「この記事では、この用途のときだけ使う」と線を引いておくイメージで運用すると、読みやすさを保ちやすくなります。

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

稼げる広告
稼げるキーワード
稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

Swell 装飾の基本設定とエディター画面の見方

ごとう

次に、WordPressのブロックエディター上で、Swellの装飾機能がどこにあるのかを整理しておきます。場所さえ分かってしまえば、あとは何度か触っているうちに身体で覚えられます。

ブロックエディターでSwell 装飾を見つける手順

ブロックエディターを使っている前提で、装飾の呼び出し場所をざっくりまとめるとこんな感じです。

段落ブロックを選択すると、上部ツールバーに太字やリンクと並んで「SWELL装飾」ボタンなどが並ぶ（文字の装飾まわり）
画面右側のサイドバーにある「スタイル」タブから、ボックス系の装飾デザインを切り替えられる（枠や背景の装飾）
吹き出しは、ブロック追加ボタンから「吹き出し」と検索すると専用ブロックが出てくる

ざっくり分けると、「ツールバーは文字の装飾」、「サイドバーはボックスなどブロック全体の装飾」と覚えておくと、どこを触ればいいか迷いにくいです。

クラシックエディターを使っている場合も、エディター上部のボタンやプルダウンからSwellの装飾を選べます。ただ、これからSwellを使い込んでいきたいなら、ブロックエディターに慣れてしまったほうが、できることが多くてラクだと感じています。

よく使うSwell 装飾は書式セットに登録して時短する

毎回同じような強調やマーカーを手動で設定していると、地味に時間がかかります。そこで活躍するのが、Swellの「カスタム書式」や「書式セット」といった機能です。よく使う組み合わせを登録しておけば、ワンクリックで呼び出せます。

例えば、私がよく使っている書式セットの例はこんな感じです。

シーン	書式セット名の例	中身の装飾
特に強調したい一文	重要ポイント	太字＋黄色マーカー
注意してほしい内容	注意文	赤文字＋太字
メリットの箇条書き	良かったところ	青系マーカー＋箇条書き
デメリットの箇条書き	気になった点	オレンジ系マーカー＋箇条書き

このようなセットをいくつか作っておくと、「ここはメリットだからこの書式」「ここは注意だからこの装飾」と、ほとんど迷わず選べるようになります。Swell 装飾を都度デザインするのではなく、「決めておいた型を呼び出す」と考えると、執筆スピードもデザインの統一感も同時に上がります。

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐその秘密を見る

ボックス系Swell 装飾の種類と使い分け

ごとう

ここからは、Swell 装飾の中でも出番が多いボックス系にしぼって解説します。ボックス装飾の使い方が整うと、記事の読みやすさが目に見えて変わるので、最初に身につけておきたいパートです。

注意・補足・ポイントでボックス装飾を使い分ける

ボックス装飾は、見た目だけで選ぶのではなく、「どんな意味の情報なのか」で使い分けるのがおすすめです。私が基本ルールとして決めている使い分けは次の通りです。

伝えたいこと	合うボックスの例	使うタイミング
見落としてほしくない注意点	赤系の注意ボックス	返金条件や制限事項、トラブルになりやすいポイント
読者にプラスの印象を残したい一言	青や緑系のポイント・チェック系ボックス	メリット・コツ・小さな成功体験
本文に添える補足情報	グレー系のメモボックス	用語の補足・背景情報・細かい仕様説明

このように、「ボックスの見た目＝情報の意味」と対応させておくと、読者は一目見ただけで「これは注意」「これはメリット」と判断しやすくなります。Swellのボックス装飾をすべて覚える必要はなく、まずはこの3役に合うデザインだけ決めておけば十分です。

グループブロック＋Swell 装飾で「枠ごと」演出する

Swellでは、グループブロック全体にボックス系の装飾を適用することもできます。これを使うと、「このまとまりはひとつのセットですよ」というのを視覚的に伝えられます。

具体的には、次のようなシーンでよく使っています。

手順をまとめたSTEPブロックをグループ化して、背景色付きの装飾をかける
おすすめ商品を横並びにしたブロック全体に、枠線付きのSwell 装飾を適用する
最後のまとめだけ別の枠にして、アイコン付きボックスで印象づける

グループブロックに装飾をかけると、「ただの文章の並び」が「ひとつのコンテンツブロック」に変わります。商品比較や手順解説など、セットで理解してほしい情報を見せるときに、意識して使ってみてください。

ボックス装飾を入れる位置と頻度の目安

ボックス装飾は便利ですが、入れすぎると目が疲れてしまい、肝心の内容が頭に入ってこなくなります。私が自分に課しているざっくりルールは次の通りです。

1つのH2セクション内で使うボックスは、多くても1〜2個まで
同じ種類のボックスが、1画面の中に3つ以上並ばないようにする
「結論」「注意」「まとめ」など、本当に押さえてほしい部分だけに絞って使う

少なすぎて困ることはあまりないので、「ちょっと物足りないかな？」くらいで止めておくと、ちょうどいいバランスになりやすいです。

テキスト系Swell 装飾（マーカー・文字装飾）の活用

ごとう

続いて、マーカーや太字など、テキスト系のSwell 装飾についてです。ここが散らかると、どれだけボックスを整えても全体がうるさく見えてしまうので、あらかじめルールを決めておくと安心です。

マーカーと太字は「役割」で色を決める

マーカーや文字色をその場のノリで変えていくと、すぐにカラフルで落ち着きのない記事になってしまいます。そこで私は、「マーカーの色ごとに役割を決めて固定する」というルールにしています。

マーカー色	意味・役割	使う場面の例
黄色	最重要キーワード・結論	記事の結論や、読者に必ず覚えてほしい一文
青	条件・補足	「ただし〜の場合は」などの条件説明や補足情報
緑	成功例・ポジティブな情報	実績・体験談の良かった部分

このようにSwell 装飾の色と意味をひもづけておくと、「ここは黄色で結論」「ここは青で条件」と直感的に選べるようになります。太字についても、「マーカー＋太字」「文字色＋太字」など、自分なりの組み合わせを決めておくと、情報の優先度が読者にも伝わりやすくなります。

★ちょっとだけ宣伝させてください★

【稼げるキーワード教えます】
▼　　▼　　▼

「ブログで10万」と聞くと、

センスが必要
文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

インラインコード系のSwell 装飾は用途を絞る

Swellには、インラインコードやFILE・DIRといった、コードやファイル名を目立たせるためのテキスト装飾も用意されています。これらはとても便利ですが、何でもかんでも使い始めると、ただの「変わった文字」に見えてしまいます。

インラインコード：コマンド・設定値・URLなど、コピペして使ってほしい文字列
FILE・DIR：ファイル名・フォルダ名・パスなど、通常の文字列と区別したい部分

このように、「この記事ではインラインコードはこの用途だけ」「FILEとDIRはこの種類の説明にだけ使う」と用途を決めておくと、装飾の意味が伝わりやすくなります。結果的に、Swell 装飾の見た目だけではなく、情報の整理にも役立ちます。

見出し直下の1文にSwell 装飾でメリットを書く

私がよく使っているちょっとしたテクニックが、「各H2見出しの直下に、マーカーで強調した一文の要約を書く」という方法です。

例えばボックス装飾の章なら、「この章を読めば、どのボックスをどんな場面で使えばいいか分かります」といった一文を書き、その中の重要なフレーズだけマーカーで目立たせます。

こうすると、読者はそのセクションの価値をすぐに理解でき、「ここは読む」「ここは飛ばす」と自分で選びやすくなります。Swell 装飾を「見た目の装飾」としてだけではなく、「読者の行動を助ける案内板」として使えると、同じ機能でも生き方が変わってきます。

吹き出しとブログパーツで会話と装飾を量産する

ごとう

ここからは、Swell 装飾の中でも特に雰囲気が変わる「吹き出し」と「ブログパーツ」の使い方を紹介します。うまくハマると、文章だけの記事よりもテンポよく読んでもらえます。

吹き出しSwell 装飾で読み飛ばしを防ぐ

吹き出しブロックは、Swellの中でも読者の視線を止めやすい装飾パーツです。私がよく作っているキャラクター設定は次の3パターンくらいです。

読者の疑問を代弁してくれるキャラ（初心者目線で質問してくれる人）
書き手である私が、補足や裏話をするキャラ
商品やサービスを擬人化した、ちょっとライトなキャラ

この程度の人数に絞って吹き出しに登録しておくと、記事ごとに「あの人たち」が登場してくれるので、読者も状況を理解しやすくなります。Swell 装飾の吹き出し登録でキャラを増やしすぎると、逆に誰が誰だか分からなくなるので、「最大3人まで」を目安にするのがおすすめです。

ブログパーツとパターンでSwell 装飾を一括管理する

Swellには、ブログパーツやブロックパターンとして、装飾済みのブロックを丸ごと登録できる機能があります。これを活用すると、「このデザイン気に入ったな」と思ったSwell 装飾のセットを、他の記事でも簡単に再利用できます。

私が実際に登録しているブログパーツの例を挙げると、こんなイメージです。

ブログパーツ名の例	中身	使う場所
商品レビューまとめ	メリットボックス・デメリットボックス・総評の一文	商品レビュー記事の最後
CTAボックス	ボタン付きの目立つボックス装飾	無料登録や資料請求などの誘導前
注意書きセット	注意ボックス＋補足メモ	料金表や機能一覧の下

こうしたパーツをいくつか用意しておくと、Swell 装飾を毎回ゼロから組み立てる必要がなくなります。結果的に、どの記事でも同じような構成とデザインで書けるようになり、サイト全体のトーンも自然とそろってきます。

吹き出し・パーツを登録するときの注意点

便利だからといって吹き出しやブログパーツを増やしすぎると、「どれを選べばいいのか分からない」という別の悩みが出てきます。Swell 装飾を登録するときは、次のような基準で整理しておくと使いやすくなります。

1記事の中で必ず出てくるシーン（例：結論・注意・CTA）だけ登録する
デザインが似ているものは1つにまとめて、バリエーションを増やしすぎない
試しに作った装飾は「テスト用」と分かる名前にして、正式なパーツと区別する

「迷わず選べる数」に絞り込んでおくと、Swell 装飾がただの機能ではなく、執筆を助けてくれる相棒みたいな存在になってくれます。

読みやすさが変わるSwell 装飾デザインのコツ

ごとう

ここまで個別のSwell 装飾を見てきましたが、最後に「記事全体のデザイン」という視点から、私なりに意識しているポイントをまとめます。機能を覚えるより、むしろこのあたりのルール決めのほうが、読みやすさに直結します。

1記事で使うSwell 装飾は「5種類まで」がおすすめ

私が自分のブログで決めているルールのひとつが、「1記事で使う装飾はだいたい5種類くらいまでにする」というものです。例えば、次のような組み合わせです。

黄色マーカー（最重要キーワード用）
注意ボックス
メリット用ボックス
吹き出し（キャラは2人まで）
まとめ用の背景付きボックス

これだけあれば、解説記事やレビュー記事はほとんどカバーできます。Swell 装飾をたくさん覚えるより、「この5種類で記事を組み立てる」と決めてしまったほうが、迷いが減って作業も速くなります。

サイト全体でカラー3色ルールを決める

Swellは色を変えられる箇所が多いぶん、意識しておかないとすぐにカラフルになりがちです。そこで私は、「サイト全体で使う色は基本3色まで」というルールを置いています。

ベースカラー：本文や背景に使う落ち着いた色（黒〜グレーなど）
メインカラー：ボタンやリンク、重要なボックスに使う色
サブカラー：補足情報やメモなど、少し控えめな強調に使う色

この3つに絞り、Swell 装飾のボックスやマーカーの色も合わせておくと、「なんとなく整って見える」状態をつくりやすくなります。色を決めたら、「SWELL設定」からエディター設定を開き、ボーダーやマーカー、ボタンなどの色を合わせておくと、装飾するだけで自然と統一感が出てきます。

★ブログでは公開できない裏情報★

私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。

例えば、

実際に10万稼いだキーワード
今やるべきおススメ広告

などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。

⇒あっさり10万稼ぐためのメルマガ

私が実際に使っているSwell 装飾テンプレ例

最後に、私がよく使っている「1記事分のSwell 装飾の型」を紹介します。自分用の叩き台として作っておくと、記事を書くたびにゼロから考えなくて済むので楽です。

記事の場所	使う装飾	ねらい
冒頭の結論	黄色マーカー＋太字	記事のゴールを一目で伝える
各H2の直下	マーカー付きの要約一文	そのセクションで分かることを先に見せる
本文中の注意点	注意ボックス	読み飛ばされると困る情報を目立たせる
メリット・デメリット一覧	メリット用ボックス／デメリット用ボックス	情報を分類して比較しやすくする
記事最後のまとめ	背景色付きボックス＋箇条書き	要点を整理して、読み終わりをスッキリさせる

このテンプレをブログパーツとして保存しておき、各記事では中身の文章だけ書き換える、という運用にすると、どの記事も安定したリズムで読んでもらえるようになります。書き手としても、「今日はどんな装飾を使おう」と迷う時間が減るので、かなり気持ちがラクになります。

Swell 装飾のよくある質問

ごとう

最後に、Swell 装飾についてよく聞かれる疑問をQ&A形式でまとめておきます。自分の悩みに近いものがあれば、ここだけ読んでもらっても大丈夫です。

Q1. Swell 装飾を入れすぎると逆効果になりますか？

A1. なります。Swell 装飾は便利ですが、マーカーやボックスが画面いっぱいに並ぶと、どこが本当に大事なのか分からなくなってしまいます。この記事で紹介したように、「1記事で使う装飾は5種類前後」「ボックスは意味ごとに使い分ける」といったルールを決めておくと、読みやすさを保ちやすいです。

Q2. どのSwell 装飾から手をつければいいか分かりません。

A2. いきなりすべての装飾を覚える必要はありません。まずは次の3つだけに絞って使ってみるのがおすすめです。

黄色マーカー（記事の結論や最重要キーワード用）
注意ボックス（絶対に見落としてほしくない情報用）
まとめ用の背景付きボックス（最後に要点を整理する用）

この3つに慣れてきたら、吹き出しやメリット用ボックスなど、少しずつSwell 装飾のレパートリーを増やしていくと、無理なく使いこなせるようになります。

Q3. エディター設定で装飾デザインを変えると、過去の記事が崩れませんか？

A3. 「SWELL設定」内のエディター設定で色やボーダーを変更すると、基本的には既存の記事にも反映されます。そのため、サイト全体のデザインを大きく変えたいときは、テスト用の固定ページなどで一度確認してから反映するのが安心です。気になる場合は、まずブログパーツやパターン側のデザインを整えておき、それに合わせて少しずつ記事を書き換えていく方法もあります。