SWELLのボックス装飾の使い方！記事が化ける8つのルール

ブログを書いていると、SWELLのボックス装飾が便利そうなのは分かるけれど、種類が多すぎて「どれをどう使うのが正解？」と迷うことってありませんか。

先に結論だけお伝えすると、SWELLのボックス装飾は「全部使いこなそうとしないで、意味ごとに3〜5種類に絞ってマイルールを決める」のが、一番ラクで成果も出やすい使い方です。

SWELLのボックス装飾とは？ざっくり全体像を整理

SWELLボックス装飾でできること一覧

ざっくり言うと、SWELLのボックス装飾は「文章を見やすく区切るための箱」と「デザインで世界観を出すための箱」の2つの役割を持っています。

目的	使う場面の例	向いているボックス装飾のイメージ
情報を目立たせる	注意書き・重要ポイント・記事の結論	アイコン付きボックス・太めの枠ボックス
情報をグループ化して整理	まとめ・比較・メリットの一覧	枠線ボックス・淡い背景色のシンプルボックス
世界観や雰囲気を出したい	プロフィール・自己紹介・レビューの冒頭	ブラウザ風・デスクトップ風など装飾の強い箱

私がブログを始めたばかりの頃は、「せっかくSWELLを入れたんだから、いろんなボックスを試したい」と思って、目についた部分に片っ端から装飾をかけていました。

その結果、読者目線で見ると何が大事なのか分からないページになってしまい、「これはやりすぎだな」と痛感しました。

なのでこの記事では、オシャレさよりも「読者の読みやすさが上がるボックス装飾」に重点を置いて話を進めていきます。

ブロックエディターとクラシックエディターでどう違う？

SWELLのボックス装飾は、ブロックエディターでもクラシックエディターでも使えますが、操作の入り口が少しだけ違います。

考え方としてはどちらも「すでに書いた文章に、あとから装飾を乗せる」と思っておくと分かりやすいです。

• ブロックエディター
  段落ブロックやグループブロックを選択して、右側の「スタイル」からボックス装飾を選ぶイメージです。
• クラシックエディター
  エディター上部の「スタイル」プルダウンから、使いたいボックスを選ぶ形になります。

どちらの場合も、基本的な流れは「装飾したい文章のかたまりを作る → まとめてボックス装飾をかける」です。

細かいクリックの手順や、どのタイミングでボックス装飾をかけると楽かについては、後半のパートで改めて解説していきます。

SWELLのボックス装飾の種類と特徴をまとめてチェック

シンプル枠・ボーダー系ボックスの特徴

まずは、一番出番が多くなる「枠線だけのシンプルなボックス」から押さえておきましょう。

私のブログでも、最終的に一番よく使っているのは、このシンプルなボーダー系ボックスたちです。

ボックスの種類のイメージ	向いている用途	メリット
細い枠線ボックス	まとめ・補足・ちょっとした注意	うるさくならず、どんなデザインにもなじみやすい
太い枠線ボックス	結論・重要なポイント・チェック項目	しっかり強調できるが、使いすぎるとクドく見える
点線・破線の枠ボックス	一言メモ・補足のワンポイント	ほどよく目立つが、軽い印象で使いやすい

どんなジャンルのブログでも、まずはこのシンプル枠ボックスが土台になります。

迷ったときは、「細い枠線」と「太い枠線」の2種類だけに絞って運用してみると、変な迷いが減っておすすめです。

アイコン付きボックス（小・大）の使いどころ

SWELLらしさが出るのが「アイコン付きボックス」です。

チェックマークやビックリマークなど、パッと見で意味が伝わるアイコンがセットになっているので、読者にとっても分かりやすい装飾です。

種類	よく使うアイコンの例	使う場面のイメージ
アイコンボックス（小）	インフォマーク・メモ・ライトな注意	軽い補足・豆知識・小ネタ
アイコンボックス（大）	チェック・警告マーク	デメリット・要注意ポイント・大事な一言
目立つデザイン系	スター・吹き出し風など	キャンペーン・おすすめ・レビューのまとめ

私は、アイコンボックス（小）は「補足や豆知識専用」、アイコンボックス（大）は「注意点やデメリット専用」と決めています。

こうやって役割を固定しておくと、自分が迷いにくいだけでなく、読者も「このボックスが出てきたら注意なんだな」と自然と覚えてくれます。

グループブロック用ボックス装飾とデザインの例

SWELLには、グループブロックに対してだけ使えるボックス装飾も用意されています。

ブラウザのウインドウのような枠や、デスクトップ画面風の枠など、見た目のインパクトが強いタイプのボックスです。

グループ用ボックスの例	使う場面	注意したいポイント
ブラウザ風ボックス	画像＋説明文・手順解説	連発するとチープに見えることがある
デスクトップ風ボックス	実例紹介・ポートフォリオ・実績の一覧	1記事に1〜2回までにしておくとバランスが良い
カード風ボックス	サービス紹介・料金プラン・比較表の代わり	横並びにするときはスマホ表示も必ず確認する

グループ用ボックス装飾は、うまくハマると一気に「ちゃんと作り込まれたサイト」に見えます。

その反面、楽しくなって使いすぎると、どこを読めばいいのか分からないページになりがちです。

私の場合は、「派手めのグループボックスは1記事につき1〜2個まで」と決めてから、デザインのごちゃごちゃ感がかなり減りました。

SWELLのボックス装飾の基本的な使い方【手順解説】

段落ブロックにボックス装飾を適用する手順（ブロックエディター）

まずは、一番よく使う「段落ブロックにボックス装飾をかける」基本の流れです。

ここでのコツは、「1つのボックスの中に文章を詰め込みすぎない」ことです。

長い段落をそのままボックスに入れると、スマホで見たときに画面が同じ色で埋まってしまい、読むのが疲れてしまいます。

私は、1つのボックスの中には「多くても3〜4行分の文章」にとどめるようにしていて、それ以上長くなるときは途中で段落を分けるようにしています。

グループブロックにボックス装飾を適用する流れ

複数の段落や画像をひとまとめにして囲みたいときは、グループブロックに対してボックス装飾をかけていきます。

たとえば、「画像＋説明＋ボタン」をセットでひとつのボックスにしたいケースなどが分かりやすい例です。

グループブロックにボックス装飾をかけると、「ここからここまでが1セットの情報です」というのが視覚的に伝わりやすくなります。

サービス紹介や料金プランなど、読者にまとめて理解してほしい部分で使うと効果的です。

クラシックエディターでボックス装飾を使う場合

クラシックエディターを使っている場合でも、SWELLのボックス装飾は基本的に同じように使えます。

使い方のイメージを、ブロックエディターと並べて整理すると次のような感じです。

項目	ブロックエディター	クラシックエディター
装飾のかけ方	ブロック右サイドバーの「スタイル」から選ぶ	エディター上部の「スタイル」プルダウンから選ぶ
装飾の対象	段落ブロック・グループブロックなど	選択した段落やテキストのかたまり
得意な使い方	画像やボタンを含めてデザインを整えたいとき	文章中心の記事をさっと書きたいとき

ボックス装飾をしっかり使い込んでいきたいなら、ブロックエディターのほうが自由度は高いです。

一方で、「今はまず記事を量産したい」という段階なら、クラシックエディターで文章メインの記事を書きつつ、シンプルなボックス装飾だけ使うのでも十分だと思います。

ボックス装飾を使ったデザイン・読みやすさのルール

意味ごとにボックスの役割を固定する

いちばん効果が大きいのが、「情報の意味ごとに、使うボックスを固定する」という考え方です。

情報の意味	使うボックス装飾の例
注意・デメリット	赤系のアイコン付きボックス（大）
メリット・おすすめ	緑や青系のアイコン付きボックス（大）
補足・豆知識	グレー系の細い枠線ボックス
まとめ・結論	淡い背景色＋太枠のボックス

こんなふうに「意味」と「ボックス装飾」を1対1で対応させておくと、記事全体の印象がスッキリまとまります。

読者も何本か記事を読んでいくうちに、「この色のボックスは注意なんだな」「このボックスは結論なんだな」と、ほぼ無意識レベルで理解してくれるようになります。

色の数とボックスの種類を絞る

次に大事なのが、「色の数とボックスの種類をあえて絞る」ことです。

SWELLはボックス装飾の種類が豊富なので、何も決めていないと、ついその場の気分で色々試したくなってしまいます。

• サイト全体で使うボックスの色は、基本3色までにする
  ベースカラー、アクセントカラー、注意用のカラーを決めておく。
• 1記事で使うボックス装飾の種類は、多くても5種類までにする
• ブラウザ風やデスクトップ風などの目立つボックスは、1記事につき1〜2回までにする

色と種類を絞ると、「どの記事を開いても同じサイトだとひと目で分かる」状態になっていきます。

あれもこれも試すより、「あえて自分を縛る」ほうが、結果的にプロっぽく見えるデザインになるので不思議です。

1記事の中の「ボックス装飾テンプレ」を決めてしまう

毎回ゼロから「どこをボックスで囲もうかな」と考えるのは、想像以上にエネルギーを使います。そこでおすすめなのが、1記事の中でのボックス装飾の配置パターンを、あらかじめ決めてしまう方法です。

• 導入〜最初のH2の直後
  記事の結論を一言でまとめた太枠ボックスを入れる。
• 各H2の中盤
  読者に絶対に伝えたい注意点を、赤系のアイコン付きボックスで強調する。
• 各H2の最後
  その見出しのポイントを3〜5行でまとめた背景色付きボックスを置く。
• 記事の締め部分
  「この記事を読んだあとにやること」のチェックリストをボックスに入れる。

SWELLなら、こういった配置パターンをブログパーツとして保存しておけば、次回以降はワンクリックで呼び出せます。

慣れてくると、「今日はレビュー記事の型」「今日はハウツー記事の型」といった感じで、ボックス装飾のテンプレを使い分けられるようになって、執筆がかなり楽になります。

SWELLのボックス装飾でクリック率を上げる活用例

アフィリエイトリンク前の「結論ボックス」

アフィリエイト記事では、商品リンクの前に「結論まとめボックス」を置いてあげると、読者が行動しやすくなります。

私がよく使っている構成は、こんなイメージです。

• 淡い背景色＋太枠のボックスを使う
• ボックスの中に
  商品名／どんな人に向いているか／メリットを2〜3個だけ箇条書きで書く
• 「詳しいレビューはこのあとで解説します」とひと言そえておく

この結論ボックスのすぐ下に、ボタンブロックやリンク付きのボックスを配置してあげると、「クリックしてもいいんだな」と読者が判断しやすくなります。

逆に、結論もないまま長いレビューを読み続けさせると、「結局どうなの？」と思われて離脱されやすくなるので注意です。

レビュー記事のメリット・デメリットボックス

レビュー記事でよく悩むのが、メリットとデメリットの出し方です。

ここでも、SWELLのボックス装飾がかなり役立ちます。

情報の種類	ボックス装飾の使い方の例
メリット	緑系のアイコン付きボックスで箇条書きにする
デメリット	赤系のアイコン付きボックスで目立たせつつ、感情的にならないように書く

あえてデメリットもボックスでしっかり見せることで、「いいところだけではなく、悪いところもちゃんと教えてくれている」と読者からの信頼が上がります。

私の経験では、メリットだけを押し出した記事よりも、デメリットもきちんと書いた記事のほうが、結果的に商品が売れることが多いです。

内部リンクを目立たせるボックスメニュー

SWELLのボックス装飾は、内部リンクのメニューにも向いています。

関連記事への導線を、シンプルなボックスメニューにまとめてあげると、クリック率が上がりやすくなります。

• 枠線ボックスの中に、関連記事のリンクを3つほど並べる
• リンクの前に、小さなアイコンをつけて視線を誘導する
• カテゴリごとにボックスの色を変えておくと、どの分野の記事か分かりやすい

ボックス装飾で読み進める方向を示してあげると、読者は迷わずに次の記事へ進めます。

結果として、1人あたりのページビューも自然と増えていきます。

SWELLのボックス装飾カスタマイズ設定のポイント

 

ボーダーセットの色と太さを整える

SWELLでは、枠線系のボックス装飾（ボーダーセット）の色や太さを、エディター設定から調整できます。

私がいつも意識しているのは、次のような点です。

• サイトのメインカラーに近い色を、ボックスの基本の枠線カラーにする
• 注意用の枠線カラーは、メインカラーとはっきり違う色にしておく
• 枠線の太さは「太枠」と「普通の枠」の2種類だけにしておく

枠線の太さや色を何パターンも使ってしまうと、どうしても素人っぽい印象になりがちです。

逆に、色と太さをあらかじめ決めておけば、多少のブレがあっても全体としてきちんとまとまって見えます。

アイコン付きボックスをサイトの雰囲気に寄せる

アイコン付きボックスはとても便利ですが、デフォルトのままだと、自分のサイトの雰囲気と少し合わないこともあります。

そういうときは、背景色や枠線、余白を少しだけいじって、自分のサイトに寄せてあげるのがおすすめです。

• 背景色を、サイトのキーカラーに合わせつつ、少し薄めのトーンにする
• 角を丸くするか、角張らせるかをサイト全体でそろえる
• 文字が窮屈に見えないよう、上下左右の余白を少し広めにする

私も、最初は標準設定のアイコンボックスをそのまま使っていましたが、アイコンやロゴの色に寄せて調整しただけで、一気に「自分のサイトのパーツ」という感じになりました。

よく使うボックス装飾は「テンプレ化」して時短

せっかくボックス装飾を整えても、毎回ゼロから設定していると、記事を書くたびに余計な時間がかかってしまいます。

SWELLには、ブログパーツやブロックパターンといった仕組みがあるので、よく使うボックス装飾は積極的にテンプレ化してしまうのがおすすめです。

1回だけ時間をかけて「自分の型」を作ってしまえば、2回目以降はその型を呼び出して中身を書き換えるだけなので、執筆スピードがかなり変わってきます。

SWELLのボックス装飾は、こうした再利用のしやすさも大きな強みのひとつです。

SWELLのボックス装飾でやりがちなNG例と改善パターン

ボックスの連発で本文が見えなくなる

ありがちなのが、「大事そうに見えるところ全部にボックス装飾をかけてしまう」パターンです。

注意点もメリットもまとめも、すべて箱に入れてしまうと、どこが本当に重要なのか分からなくなってしまいます。

改善のための目安として、私は次のようなルールを置いています。

• スマホの1画面に出てくるボックスは1つまでにする
• 1記事全体で、派手めのボックス（太枠や濃い背景色）は5個前後までにする
• 「この一文だけは絶対に読んでほしい」と思う部分だけボックスにする

ボックス装飾は、使わないページがあってもまったく問題ありません。

「ここぞ」という場面のために、あえて温存するくらいの気持ちでちょうどいいと感じています。

派手な装飾と地味な装飾が混在している

もうひとつよくあるのが、「派手なボックスと控えめなボックスが、特に意図もなく混ざってしまう」状態です。

ブラウザ風ボックスの下にシンプル枠、そのまた下に吹き出し風…と続くと、読んでいて落ち着かなくなります。

これを防ぐには、ボックス装飾にも「階級」をつけてあげると分かりやすいです。

• 最重要レベル：太枠＋背景色＋アイコン付きボックス
• 重要レベル：細い枠線＋背景色のボックス
• 補足レベル：細い枠線だけのシンプルなボックス

この3段階を意識しておくだけでも、どの装飾をどこで使うかが決めやすくなります。

SWELLのボックス装飾の種類が多いからこそ、「自分のサイトではこの3段階だけにしよう」と割り切るのがポイントです。

スマホで見たときの読みやすさを確認していない

パソコンの画面だけでプレビューしていると、「いい感じに整っている」と思ってしまいやすいのですが、実際にはほとんどの読者がスマホで記事を読みます。

特に、長めの文章をそのままボックスに入れてしまうと、スマホ表示では画面いっぱいが同じ色の箱になってしまい、読んでいて疲れてしまいます。

この3つを意識するだけでも、ボックス装飾の印象がかなりスッキリして、読みやすさが一段階上がります。

SWELLのボックス装飾のよくある質問

Q1. SWELLのボックス装飾は全部覚えたほうがいいですか？

A. 全部覚える必要はまったくありません。

私も、実際に日常的に使っているのは、全体の中の3〜5種類くらいです。

大事なのは、「注意」「メリット」「補足」「まとめ」などの意味ごとに、使うボックス装飾をあらかじめ決めておくことです。

SWELLの設定画面でいくつか候補を試してから、「自分のブログで使う定番ボックス」を少数だけ残していくイメージで選んでみてください。

Q2. ボックス装飾はSEOに直接の効果がありますか？

A. ボックス装飾そのものに、検索順位を直接上げる力はありません。

ただし、読みやすさが上がることで次のような良い変化が期待できます。

• 本文をきちんと読んでもらえるようになり、直帰率が下がる
• スクロールして最後まで読まれやすくなる
• 内部リンクやボタンのクリック率が上がる

こうした読者の行動の変化は、結果的にSEOにもプラスに働きます。

SWELLのボックス装飾は、「読みやすさや行動しやすさを高めるための道具」と考えると、うまく使いやすくなります。

Q3. ボックス装飾をたくさん使うと表示速度が心配です

A. ボックス装飾だけが理由で、極端に表示速度が落ちることはあまりありません。

ただし、ボックスの中に大きな画像を何枚も入れたり、動きのある装飾を詰め込みすぎると、その分だけページは重くなります。

• ボックス装飾はテキスト中心で使うように意識する
• 画像を入れる場合は、あらかじめサイズを圧縮しておく
• 同じような装飾がたくさん出てくる場合は、ブログパーツで共通化して管理する

このあたりを押さえておけば、ボックス装飾が原因で大きな問題になるケースはかなり少ないはずです。

SWELLのボックス装飾のまとめ

ここまでのポイントを振り返っておきます

今日からできる最初の一歩としては、まずあなたのブログで「注意」「メリット」「補足」「まとめ」の4つに対して、それぞれどのボックス装飾を使うかを紙かメモアプリに書き出してみてください。

そのうえで、SWELLの設定画面を開きながら、どのボックスをどの役割に割り当てるかを実際に試してみるのがおすすめです。

その作業がひと通り終わったら、試しに1記事だけでいいので、「決めたルールどおりにボックス装飾を使う」ことを意識して書いてみてください。きっと、自分で読み返したときの分かりやすさが変わってくるはずです。

そこから少しずつ、自分なりの型をブラッシュアップしていけば、SWELLのボックス装飾はあなたのブログにとって、かなり頼もしい武器になってくれると思います。