SWELL吹き出しの使い方を解説！吹き出しアイコンの最適なサイズも

SWELLの吹き出しの使い方と、吹き出しアイコンの最適なサイズの考え方をまとめてお伝えします。

先に結論だけ言うと「吹き出しの基本設定の流れさえ押さえておけば、アイコン画像は160〜240pxくらいの正方形を用意し、スマホの見え方をチェックすれば大きな失敗はほとんどない」です。

SWELLの吹き出しの使い方とメリットをざっくり整理

ブログでSWELLの吹き出しを使うと何が変わる？

SWELLの吹き出しは、単なるデザインパーツというより「読みやすさ」と「伝わりやすさ」を底上げしてくれる道具だと私は感じています。

具体的に、どんな場面で効果を発揮するのかを整理すると、次のようなイメージです。

シーン	吹き出しを使う目的	読者側のメリット
Q&A形式で疑問に答える部分	質問と答えを分けて、ひと目で会話の流れを伝える	自分の疑問がどこで解決されるかすぐ分かる
商品レビュー・比較	「Aさんの意見」「Bさんの意見」を吹き出しで分ける	どの立場の意見か直感的に理解できる
注意点・補足の説明	「ここ注意」「ここがポイント」などを視覚的に目立たせる	流し読みしても重要ポイントだけ拾いやすい
プロフィールやキャラ紹介	アイコン付きの吹き出しでキャラクターの個性を出す	書き手の人柄が伝わり、親近感を持ちやすくなる

私の体感では、文字だけの記事に比べて、適度に吹き出しを混ぜた記事は「スクロールしていて飽きにくい」印象があります。特にスマホだと、ぱっと見で「ここは会話」「ここが要点」と分かるので、読み続けてもらいやすくなります。

SWELLの吹き出しの使い方の全体像をイメージしよう

SWELLの吹き出しの使い方は、ざっくり次の3ステップで考えると分かりやすいです。

• 管理画面の「ふきだし」から、よく使うキャラを「ふきだしセット」として登録する
• 記事を書くときに、ブロックエディターから吹き出しブロックを呼び出す
• アイコンや色、形を微調整しながら、会話や補足を作っていく

一度ふきだしセットを作ってしまえば、あとは選ぶだけで何度でも使い回せます。最初だけ少し時間をかけて設定しておくと、後の執筆がかなりラクになります。

SWELL吹き出しの基本手順（ふきだしセット編）

管理画面でふきだしセットを登録する流れ

SWELLでは、吹き出しに使うキャラやデザインを「ふきだしセット」として登録しておけます。よく使うパターンをまとめておけるので、ここを整えておくと記事作成がぐっとスムーズになります。

大まかな流れは次の通りです。

• WordPress管理画面のメニューから「ふきだし」をクリック
• 「新規追加」または「新規ふきだし追加」を選ぶ
• タイトルやアイコン画像、名前、色などを設定して公開する

主な設定項目を、ざっくり表にまとめておきます。

項目名	役割・意味	設定のコツ
タイトル	管理画面で自分が見て分かりやすい名前	「私_基本」「読者_悩み」など、用途が分かる名前にする
アイコン画像	吹き出しの顔になる画像	160〜240pxくらいの正方形で、表情が分かりやすいものにする
名前	吹き出しの下に小さく表示されるテキスト	ニックネームや「初心者さん」「先生」など、役割が分かる名前にする
アイコンの丸枠	アイコンを丸く切り抜くかどうか	統一感を出したいなら、基本は丸枠ありが無難
ふきだしの形	「発言」か「心の声」などの形状	普通の会話は発言、補足や心の声はハート型などで変化をつける
ふきだしの向き	左か右かの初期位置	自分は左、相手は右など、ルールを決めておくと読みやすい
ふきだしの線・色	枠線の有無や背景色	サイト全体のカラーとケンカしない色を選ぶ

私のおすすめは「自分」「読者」「専門家」の3パターンくらいから作り始めることです。記事によく登場する立場ごとにふきだしセットを用意しておくと、会話形式がとても組み立てやすくなります。

よく使う吹き出しパターンをあらかじめ作っておく

ふきだしセットは後からいくらでも増やせますが、最初から作りすぎると「どれを使えばいいか分からない状態」になりがちです。

まずは、次のようなパターンだけ用意しておくと、だいたいの場面をカバーできます。

このくらいの数にしぼっておくと、「どれを選べばいいか」で迷いにくく、執筆のリズムも崩れません。

ブロックエディターから吹き出しを呼び出す方法

ふきだしセットができたら、実際に記事の中で呼び出して使っていきます。操作自体はシンプルです。

キーボード操作に慣れているなら、本文で「/ふきだし」と入力してブロックを呼び出すショートカットも便利です。慣れてくると、会話パートをテンポよく増やしていけるようになります。

SWELL吹き出しアイコンサイズの考え方とおすすめ値

アイコン画像サイズの目安と推奨レンジ

結論から言うと、SWELLの吹き出し用アイコンのおすすめサイズは「160〜240px程度の正方形」です。あくまで目安ですが、この範囲にしておくと見た目と軽さのバランスがとりやすいです。

よく見かける主張をざっくり並べると、次のようになります。

推奨サイズ	主な理由・コメント
160〜200px前後	見た目とファイル容量のバランスが良いという声が多い
200×200px	アイコンとして扱いやすく、多くの環境で粗く見えにくい
240×240px	このサイズで運用している人も多く、余裕を持って作れる
80px前後（表示領域の目安）	実際に丸く表示される枠のおおよその直径

SWELLでは、吹き出し内に表示されるアイコンの見た目の大きさが、おおよそ80px四方くらいになることが多いです。ですので、元画像はそれより大きめに用意しておくと、縮小されたときも荒くなりにくい、という考え方です。

私自身は「200×200px」か「240×240px」のPNG画像を使うことが多いです。顔の表情がしっかり分かるサイズで作っておくと、スマホでも「あ、このキャラがしゃべっているんだな」とすぐ認識してもらえます。

画像形式・解像度・容量のバランス

吹き出しのアイコンサイズを考えるときは、ピクセル数だけでなく「画像形式」と「ファイル容量」もセットで意識しておくと安心です。

項目	おすすめ設定・考え方
画像形式	イラスト系アイコンならPNG、写真なら極端に圧縮しすぎないJPEGが使いやすい
解像度	160〜240px四方あれば、スマホ表示でも十分きれいに見える
ファイル容量	1枚あたり数十KB程度までを目安にしておくと、ページの表示速度に優しい

アイコンは記事の中に何度も登場する可能性が高いので、1枚あたりの容量が大きすぎると、積み重なってページ全体が重くなりやすいです。画質にこだわりすぎず、ほどよいところで妥協してあげるのがポイントです。

PCとスマホで見え方が変わるポイント

同じアイコン画像でも、PCとスマホでは印象がかなり変わります。この違いを意識しておくと、サイズ選びに失敗しにくくなります。

• PCではテキストの横にアイコンが来るので、多少大きくてもバランスを保ちやすい
• スマホは表示幅が狭いので、アイコンが大きすぎると本文が横に押し出されて窮屈に感じやすい
• 縦長・横長の画像は、丸枠にすると上下左右が切れやすく、顔の一部が見切れがち

私も最初はPCだけでチェックしてしまい、「いい感じだな」と思って公開したところ、スマホで見るとアイコンが主張しすぎて読みにくくなっていたことがあります。アイコンを作ったら、必ずスマホ実機かプレビューで確認しておくのがおすすめです。

CSSでSWELLの吹き出しアイコンサイズを微調整するコツ

スマホだけアイコンサイズを変えたいとき

よくある相談のひとつが「PCではちょうどいいけど、スマホだけアイコンを少し大きく（または小さく）したい」というものです。

ざっくりとした流れは、次のようになります。

• 外観 → カスタマイズ → 追加CSS を開く
• @media screen and (max-width: 480px) のように、スマホ用の条件を書く
• その中で .c-balloon__icon や .c-balloon__iconImg のwidthやheightを少しずつ調整する

例えば「スマホだけアイコンを90pxくらいにしたい」という場合、イメージとしては次のようなCSSを書きます。

@media screen and (max-width: 480px){
  .c-balloon__iconImg { width:90px; height:90px; }
}

さらに100px以上にしたいときは、.c-balloon__icon側の幅も一緒に広げてあげると、レイアウトが崩れにくくなります。数値はサイト全体のデザインに合わせて、少しずつ調整してみてください。

アイコンが丸じゃない・つぶれるときのチェックポイント

CSSをいじったり、縦長・横長の画像を使ったりすると、「アイコンがきれいな丸にならない」「なんだかつぶれて見える」といった状態になることがあります。

そんなときは、次のポイントを順番に見直してみてください。

症状	見直すポイント
丸枠なのに楕円っぽく見える	widthとheightが同じ値になっているか確認する
顔が切れてしまう・額やアゴが見切れる	元画像の縦横比が極端でないか、正方形で作り直せないか検討する
画像が粗くボヤけて見える	元画像のサイズが小さすぎないか、解像度を上げて書き出し直す

特に「widthとheightが同じかどうか」はうっかり忘れがちなポイントです。ここがズレていると、どんなにきれいな画像でもどこか違和感のある見た目になってしまうので、まず最初にチェックしてみてください。

トラブル別のSWELL吹き出しリカバリー術

吹き出しが表示されない・消えたとき

「前は表示されていた吹き出しが、なぜか急に消えた」「プレビューでは見えるのに、本番で出てこない」というケースは意外と多いです。

よくある原因と、最初に確認したいポイントをまとめると、次のようになります。

症状	よくある原因	最初に試したいこと
吹き出しそのものが表示されない	キャッシュやプラグインの干渉	ブラウザとサイトのキャッシュ削除、キャッシュ系プラグインを一時停止
アイコン画像だけが表示されない	画像URLのミス、メディアの削除	メディアライブラリで画像が残っているか、URLが変わっていないか確認
特定の記事だけ吹き出しが崩れている	その記事だけCSSが競合している	追加CSSやカスタムCSSを一度コメントアウトして確認
スマホだけ表示がおかしい	レスポンシブ用CSSの指定が強すぎる	@mediaの条件や!importantの有無など、優先度を見直す

私がよくやるのは、まずキャッシュを全部クリアしてみることと、キャッシュ系や表示を最適化するプラグインを一度オフにしてみることです。それでも直らない場合は、問題の吹き出しブロックを一度削除して入れ直すと、あっさり解決することもあります。

レイアウトが崩れる・スマホで見づらいとき

SWELLの吹き出しを使っていると、特にスマホで「思ったより読みにくいな」と感じることもあります。そんなときは、次のポイントを見直してみてください。

SWELLの吹き出しには、「スマホ表示でテキストとアイコンを縦並びにする」というチェック項目があります。これをオンにしておくと、スマホではアイコンが上、テキストが下に並ぶようになり、かなり読みやすくなります。

よくある質問（SWELL吹き出しの使い方・アイコンサイズ編）

Q1：アイコンサイズは必ず240×240にしないとダメですか？

A：いいえ、絶対にそのサイズでないといけないわけではありません。

240×240で使っている人も多いですが、160〜200px前後でも問題なく使えます。大事なのは、次の3つです。

• 正方形で作っておくこと
• スマホで見ても顔がきちんと認識できること
• ファイル容量が極端に重くなりすぎないこと

この条件を満たしていれば、細かい数字にそこまで神経質になる必要はありません。

Q2：SWELLの吹き出しの使い方が難しくて、まだうまく活用できていません

A：最初から凝ったことをしようとしないのがおすすめです。

まずは「自分の発言用」と「読者の悩みを代弁する用」の2種類だけ、ふきだしセットを作ってみてください。そして、1本の記事の中で1〜2回だけ使ってみるところから始めます。

慣れてきたら、補足説明用や注意喚起用など、少しずつバリエーションを増やしていくイメージでOKです。いきなり完璧を目指さなくても、少しずつ使い慣れていけば十分です。

Q3：他テーマで使っていた吹き出しアイコンを、そのままSWELLでも流用していいですか？

A：画像そのものを流用するのは問題ありませんが、テーマごとにアイコン周りの設計が少しずつ違う点には注意が必要です。

別テーマの推奨サイズが小さめだった場合、SWELL側で表示すると少し粗く見えることがあります。SWELLでは160〜240px程度の正方形が扱いやすいので、この範囲であらためて書き出し直しておくと、今後の運用も楽になります。

まとめ：SWELL吹き出しとアイコンサイズの最初の一歩

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

今日からできる最初の一歩は、「よく使うキャラのアイコンを200×200pxか240×240pxで3つだけ用意し、ふきだしセットとして登録してみること」です。

ここまで準備できてしまえば、あとは記事を書くたびに吹き出しをちょこちょこ差し込んでいくだけで、読みやすくて雰囲気のあるブログに育っていきます。

私も最初は「こんな吹き出し、多用して大丈夫かな」と少し恥ずかしく感じていましたが、今では「吹き出しがないと記事が物足りない」と思うくらい頼りにしています。あなたのブログにも、ぜひSWELLの吹き出しを取り入れてみてください。