Cocoonの吹き出しで会話風ブログを書くための6つのテクニック

この記事ではCocoonの吹き出しの基本的な設定から、ちょっとしたデザイン調整、よくあるトラブルの直し方まで一通りまとめていきます。

先に結論を一言でまとめると、「Cocoonの吹き出しは、最初にテンプレを数個用意しておき、最低限のカスタマイズと確認項目だけ押さえれば、ブログ初心者でも十分に使いこなせる便利な機能」です。

ここから順番に、実際の画面操作をイメージしながら見ていきましょう。

Cocoonの吹き出し機能とは？メリットと特徴

Cocoonの吹き出しでできること一覧

Cocoonの吹き出しは、会話形式で情報を伝えるのにとても向いている機能です。どんな使い方ができるのか、代表的な例をまとめると次のような感じです。

目的	吹き出しの使い方例
説明を分かりやすくしたい	読者の疑問を「読者さん」の吹き出しにして、私が答える形で会話にする
レビューにメリハリを付けたい	良い点・悪い点を別キャラの吹き出しで掛け合いのように紹介する
権威性を出したい	先生や専門家のキャラを作って、一言コメントを吹き出しで添える
アフィリエイトの訴求力を上げたい	商品についての悩みと解決策を、読者と私の会話形式で自然に紹介する
読者の離脱を防ぎたい	説明が続くところに吹き出しを挟み、読み進めるリズムを作る

私自身、文章だけだったころの記事に吹き出しを入れてみたところ、「読みやすくなった」「キャラが分かりやすくて頭に残る」といった感想をもらったことがあります。

吹き出しを使うと読まれやすくなる理由

Cocoonの吹き出しを使うと、単に見た目が変わるだけでなく、次のような効果が期待できます。

• 長い文章の中に「小さな会話の休憩」が挟まるので、読み疲れしにくい
• スマホの縦長画面でも、吹き出しによって視線の流れが自然にできる
• 同じ内容でも、キャラの一言として書くと印象に残りやすい
• 読者が心の中で思っている疑問を、そのまま吹き出しとして代弁できる

テキストだけで説明するとどうしても堅くなりがちですが、吹き出しを挟むだけで、会話しているようなやわらかい雰囲気になります。これが、Cocoonの吹き出しを積極的に使いたい大きな理由です。

Cocoonの吹き出しを使う前に｜基本設定と準備

吹き出しテンプレートを作る流れ

Cocoonでは、あらかじめ「キャラクターごとの吹き出し」を登録しておくことができます。このテンプレートを作っておくと、記事内で何度も同じキャラを簡単に呼び出せるようになります。

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

• WordPressの管理画面にログインする
• Cocoonの設定画面から「吹き出し」を開く
• 「新規追加」ボタンを押して、キャラごとの吹き出しを登録する

テンプレートを作るときは、次の項目を順に決めていきます。

• タイトル（管理画面でだけ使う名前）
• 名前（吹き出しの下に表示されるキャラ名）
• アイコン画像
• 吹き出しのスタイル（形や色のパターン）
• 人物位置（左・右のどちらに置くか）
• アイコンの形（丸・角丸・四角など）

一度にたくさん作ろうとすると大変なので、まずは「自分」「読者」「先生」など、よく使いそうなキャラを2〜3種類だけ登録しておくとスムーズです。

事前に決めておくと楽な項目リスト

いきなり管理画面で考え始めると迷いやすいので、事前にざっくりと「こんなキャラで使っていこう」という方針を決めておくと作業がとても楽になります。

項目	決めておく内容の例
メインキャラ	私自身のキャラ（「私」やペンネームなど）を1つ決める
サブキャラ	読者さん、先生、詳しい友だちなど、役割の違うキャラを用意する
名前表示	本名、ニックネーム、キャラ名のどれで見せるかを統一する
口調	敬語キャラとフランクキャラを分けるかどうかを決めておく
色のイメージ	自分＝青、読者＝緑、注意喚起＝赤など、ざっくりルールを作る

ここを決めてからテンプレを作ると、ブログ全体の雰囲気がブレにくくなりますし、「このキャラは誰だっけ？」と迷うことも減ります。

記事内でのCocoonの吹き出しの使い方（ブロックエディタ）

ブロックエディタで吹き出しを挿入する手順

ブロックエディタで吹き出しを入れる操作は、慣れてしまえばとてもシンプルです。流れは次の通りです。

• 記事の編集画面を開く
• 吹き出しを入れたい位置の近くで「＋」ボタンを押す
• ブロック一覧から「Cocoon」カテゴリを開く
• 「吹き出し」ブロックを選択する
• 吹き出しの中にテキストを入力する
• 右側の設定パネルで、使いたい吹き出しテンプレートを選ぶ

ステップ	操作内容	よくあるつまずきポイント
1	＋ボタンを押す	どこにブロックが追加されるのか位置が分かりにくい
2	Cocoonブロックを選ぶ	「Cocoon」というカテゴリがあることに気づかない
3	吹き出しブロックを挿入する	似ている名前のブロックと見間違えることがある
4	テキストを入力する	吹き出しの外にカーソルがあって入力されないことがある
5	右側でテンプレを選択する	デフォルトのまま保存してしまい、後で「誰の吹き出しか」分からなくなる

ブロックの一覧から探すのが面倒な場合は、ブロック検索の欄に「吹き出し」と入力するとすぐに見つかるので、慣れるまではこの方法がおすすめです。

会話風レイアウトを作るときのコツ

Cocoonの吹き出しは、会話っぽいレイアウトを作るときに本領を発揮します。会話らしさを出すために、次のポイントを意識してみてください。

私の感覚では、「説明文を2〜3段落 → 吹き出し1〜2個 → また説明文」というリズムだと、スマホでもすっと読み進めてもらいやすいです。

アイコン画像とデザインの基本設定

アイコン画像のサイズと形式の目安

アイコン画像は、サイズとファイル形式をざっくりそろえておくと、吹き出しがきれいに表示されます。

• 基本は正方形の画像を使う
• 小さすぎず、大きすぎないサイズを目安にする
• 背景を透かしたい場合はPNG形式が扱いやすい

項目	目安・おすすめ
画像サイズ	一辺200〜400px程度の正方形
画像形式	背景透過にしたい場合はPNG、写真ならJPEGでも可
デザイン	顔まわりだけのシンプルなイラストやアイコン風の画像

最初から凝ったイラストを用意する必要はなく、フリー素材サイトのアイコンや、簡単に作った画像でも十分です。あとから落ち着いて差し替えていけばOKです。

吹き出し名・タイトルの付け方のコツ

Cocoonの吹き出しには、「タイトル」と「名前」という2種類のラベルがあります。この使い分けを意識すると、吹き出しが増えても管理しやすくなります。

• タイトル：管理画面だけで使うラベル（自分用のメモのようなもの）
• 名前：実際に記事の吹き出しの下に表示されるキャラ名

例えば、次のような付け方がおすすめです。

• タイトルに「番号＋キャラ名」を入れる（例：01_私、02_読者さん）
• 名前は短く覚えやすいものにする（例：「私」「読者さん」「先生」など）
• 敬語キャラとフランクキャラを分けたい場合は、タイトルに「敬語」「タメ口」といったメモを添える

こうしておくと、吹き出しの数が増えてきても、「この番号はこのキャラ」とすぐに分かるので、記事作成のスピードも上がります。

CSSでCocoonの吹き出しをカスタマイズする基本アイデア

変えると印象がガラッと変わるポイント

CSSで手を入れやすく、見た目の変化が分かりやすいポイントは次の通りです。

• 吹き出しの背景色
• 枠線の色や太さ
• 角の丸さ（角丸の度合い）
• 影（ドロップシャドウ）の有無
• 文字サイズや行間

カスタマイズ内容	効果のイメージ
背景色を変える	キャラごとに色を変えて、話し手をひと目で判別しやすくする
枠線を太くする	重要な一言を入れている吹き出しを目立たせられる
角を丸くする	柔らかい印象になり、親しみやすいデザインになる
影を付ける	カードのように浮き上がって見え、立体感が出る
文字サイズを少し大きくする	会話部分を読みやすくし、「ここがポイント」と伝えやすい

CSSを編集するときは、テーマファイルを直接いじるよりも、「追加CSS」にまとめて書いておくほうが安全です。子テーマを使っている場合は、子テーマ側に書くとアップデートの影響を受けにくくなります。

アニメーションを付けるときの考え方

CSSを使えば、ふわっと出てくるようなアニメーションを吹き出しに加えることもできます。ただ、動きが多すぎると画面が落ち着かなくなり、読む側にとっては負担にもなります。

• 特に強調したい一言だけにアニメーションを付ける
• 同じページに動きのある吹き出しを大量に置かない
• 動きは短めにして、ゆっくりと自然に見えるようにする

「目立たせるための装飾」ではなく、「読みやすさをサポートするための演出」という気持ちで調整していくと、ちょうど良いバランスに落ち着きやすいです。

Cocoonの吹き出しが表示されないときのチェックリスト

症状別チェック表

よくある症状ごとに、考えられる原因と確認しておきたいポイントを整理しました。

症状	よくある原因	確認・対処のポイント
吹き出しの枠は出るがアイコンが表示されない	画像のパスが変わった／画像が削除されている	メディアライブラリに画像があるか、設定画面で画像を選び直してみる
吹き出しブロック自体が選べない	テーマやプラグイン側の不具合	Cocoonが有効になっているか、プラグインの競合がないかを確認する
すべての吹き出しのデザインがおかしい	CSSの記述ミスや強めのカスタマイズ	追加CSSを一時的に無効化して、表示が戻るかチェックする
特定のページだけレイアウトが崩れる	そのページだけ別の設定やテンプレを使っている	問題のページのブロック設定とテンプレを一つずつ確認する

私も一度、画像ファイル名を整理したときにパスが変わってしまい、すべての吹き出しのアイコンが真っ白になったことがあります。そのときは、メディアライブラリからもう一度画像を選び直すことで解決しました。

困ったときは次の順番でチェックしていくと、原因を探しやすいです。

• メディアライブラリに、吹き出しに使いたい画像が残っているか
• 吹き出しの設定画面で、画像が正しく選択されているか
• 画像を一度外してから、改めて選び直してみる
• 追加CSSやプラグインを一時的にオフにして、表示が変わるかを見る

プラグインとの相性を確認する

吹き出しが急におかしくなった場合、プラグインを追加・更新したタイミングが重なっていることも多いです。Cocoonの吹き出しだけでなく、他の表示にも影響しているケースがあります。

気になるプラグインがあれば、一度だけ停止してCocoonの吹き出しの表示が正常に戻るかどうかを確認してみてください。元に戻るようなら、そのプラグインの設定を見直すか、別の方法を検討するのが安心です。

読まれる記事にする吹き出し活用テクとアイデア

ジャンル別・吹き出し活用パターン

ブログのジャンルが違うと、吹き出しの活かし方も少しずつ変わってきます。よくあるパターンをジャンル別にまとめました。

ジャンル	吹き出しの使い方例
レビュー・商品紹介	私と読者の会話形式でメリット・デメリットを掛け合いのように紹介する
教育・解説系	先生キャラと生徒キャラを用意し、難しい説明を会話でかみ砕いて説明する
体験談・ストーリー	過去の自分と今の自分を別キャラにして、失敗談や気付きのポイントを見せる
ハウツー記事	よくある質問を読者キャラの吹き出しで出し、それに私が答える形にする
コラム系	ちょっとユーモアのあるキャラを作り、ツッコミ役として吹き出しで登場させる

私が特に使いやすいと感じているのは、「よくある質問」を読者キャラの吹き出しで出し、その下で私が答えるパターンです。読者の頭の中にあるモヤモヤを先回りして出せるので、とても親切な印象になります。

やりすぎNG例と改善ポイント

便利なCocoonの吹き出しですが、多用しすぎると逆に読みにくくなってしまうこともあります。ありがちなNGパターンは次の通りです。

• 1画面に吹き出しが4つ以上並んでいて、どこを読めばいいか分からない
• キャラごとの色やデザインがバラバラで、誰が話しているのか判別しにくい
• 1つの吹き出しの中に長文が詰め込まれていて、読む気がなくなる

こうした状態を避けるために、簡単なルールを自分の中で決めておくと安心です。

• 1つの見出し内で使う吹き出しは2〜3個までにする
• キャラごとの色をなるべく固定する（自分＝青、読者＝緑など）
• 吹き出し1つあたりの本文は3〜4行程度までにおさえる

このくらいの制限をかけておくと、デザイン的にもスッキリしますし、読者も内容に集中しやすくなります。

よくある質問（FAQ）

Q1. Cocoonの吹き出しがうまく使えません。初心者は何から始めれば良いですか？

A1. まずは「Cocoonの吹き出しテンプレートを2〜3個だけ作る」ところから始めるのがおすすめです。自分用の吹き出しと、読者用の吹き出し、余裕があれば先生キャラの吹き出し、この3種類があれば多くの記事で十分に回せます。

いきなりデザインやCSSまでこだわろうとすると大変なので、最初は「表示させること」と「使い方に慣れること」だけを目標にしてみてください。

Q2. Cocoonの吹き出しでアイコンが表示されません。どこをチェックすればいいですか？

A2. アイコンが出てこないときは、次の順番で確認していくと原因を見つけやすいです。

• メディアライブラリに、設定したアイコン画像がちゃんと残っているか
• 吹き出しの設定画面で、その画像が選択されているか
• キャッシュ系プラグインを使っている場合は、一度キャッシュを削除してみる

これでも解決しない場合は、追加CSSや他のプラグインがCocoonの吹き出しに影響している可能性があります。ひとつずつ一時停止して表示が変わるかどうか確認してみてください。

Q3. Cocoonの吹き出しは、どのくらいの頻度で使うのがちょうどいいですか？

A3. 記事の内容によっても変わりますが、私の体感では「見出し2〜3個につき吹き出し1〜2個」くらいが読みやすいバランスです。Cocoonの吹き出しは目立つ要素なので、あちこちに置きすぎると肝心の内容が頭に入ってきません。

「特に強調したい部分」や「読者の疑問を拾いたい場面」に絞って使うと、吹き出しの良さを活かしやすくなります。

まとめ｜まずは1つ、お気に入りの吹き出しを作ろう

この記事の内容を振り返ります

そして、今日からできる最初の一歩は、とてもシンプルです。

「自分用のCocoonの吹き出しテンプレを1つ作って、直近の記事に必ず1回使ってみる」

これだけでも、記事の雰囲気や読みやすさが大きく変わります。慣れてきたら、読者キャラや先生キャラを追加して、あなたのブログならではの世界観をCocoonの吹き出しで表現していきましょう。