【Cocoon】吹き出しの作り方とカスタマイズ｜おしゃれなアイコンで仕上がり1ランクUP！

「吹き出しはどう作るの？」

「吹き出しをカスタマイズしたい」

「吹き出し画像が表示されない、どうして？」

この記事では、そんな方に向けて、Cocoonで吹き出しの作成から使用までの3ステップを解説します。

この記事を読めば、あなたも簡単に

• 吹き出しの作成⇒カスタマイズ⇒使用
• 吹き出し画像の推奨サイズ
• 吹き出しが表示されないときの対処法

が理解できるようになります。

他サイトの吹き出しを見て「いいな～、自分のブログにも設定したいな～」という思いから、私もかんたんに吹き出しを設定できるようになりました。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください！

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

さっそく本題に入りましょう。

Cocoon吹き出し画像の作り方3例

STEP1

まず初めに、吹き出し画像を作っていきます。

Cocoonで吹き出し画像の作り方は、下記3通りあります。

それぞれ詳しく解説します。

吹き出し画像を自分で用意・作成する

＜吹き出しの作り方1つ目＞

Cocoonの吹き出し画像を自分で用意・作成する場合、デザインツール「Canva」を使えばかんたんに準備できます。

Canvaでは、無料で

• 自分の写真をデザインしたり
• テンプレート画像やイラストを使えたり

できます。

吹き出し画像を

• 自分で用意した画像を使いたい！
• 自分でデザインしたい！

という人は、Canvaを使ってみてください。

Canvaで作成する場合は、必ず商用利用ページに目を通しましょう。

Canvaで自分の画像やテンプレート画像の使い方は、下の記事を参考にしてください。

フリー素材を吹き出しに使う

＜吹き出しの作り方2つ目＞

自分でイラストを描けない…という人は、商用利用できるフリー素材を使ってみましょう。

おすすめのサイトは、下記2つです。

• イラストAC　/　利用規約
• いらすとや　/　利用規約

フリー素材を使うメリットは、

• 誰でも無料で画像を使える
• すぐに吹き出し画像を用意できる
• 画像を加工できる

などがあります。

自分でイラストを描けない人は、フリー素材のサイトをのぞいてみてください。

作成依頼したイラストを吹き出しに使う

＜吹き出しの作り方3つ目＞

オリジナル画像を用意したいが、自分では描けない…という人は、ココナラ で作成依頼するのもおすすめできます。

^{≫ ココナラ公式サイトへ}

ココナラでイラストを作れば、

• 唯一無二のオリジナル画像を使える
• 自分好みのイラストを描いてもらえる
• 商用利用できるか気にしなくていい

などがあります。

2,000円～5,000円で作成依頼できるアイコン画像もある（2024年2月5日時点）ので、まずはご覧になってください。

_{＼予算・ジャンル別／}

^{／ランキング・おすすめ順＼}

Cocoonで吹き出しのカスタマイズ方法

STEP2

吹き出し画像を作り終えたら、次はカスタマイズしていきます。

吹き出しをカスタマイズできる項目は、下記7つあります。

それぞれ詳しく解説します。

タイトルをつける

「タイトル」は、使いたい吹き出しを探したり、設定したりするために利用します。

名前をつける

「名前」では、吹き出し下に表示させる名前を設定できます。

著者名を覚えてもらうためにも、名前は設定しましょう。

アイコン画像を設定する

「アイコン画像」では、吹き出しで使うアイコン画像を設定できます。

吹き出しスタイルを選ぶ

「吹き出しスタイル」では、

• デフォルト
• フラット
• LINE風
• 考え事

の4つの中から選べます。

以下は、4つある吹き出しスタイルの見え方です。

※準備中

お好みでスタイルを選びましょう。

左右の位置を決める

「人物位置」では、吹き出しを表示する位置を

• 左側
• 右側

の2つから選べます。

以下は、2つある人物位置の見え方です。

基本、吹き出しの位置は左側がおすすめです。

なぜなら、文章は左側から右側に読まれるからです。

吹き出しの位置を左側にした場合、

• 「誰が？(アイコン)＝主語」
• 「何を言う？(セリフ)＝述語」

の順番になり、スムーズに理解できます。

アイコンの形・枠線を選ぶ

「アイコンスタイル」では、吹き出しの形や枠線を

• 四角（枠線なし）
• 四角（枠線あり）
• 丸（枠線なし）
• 丸（枠線あり）

の4つから選べます。

以下は、4つあるアイコンスタイルの見え方です。

※準備中

デザインの邪魔にならないよう、枠線なしがおすすめです。

使いたい吹き出しを選ぶ

「TinyMCE」では、設定した吹き出しをブロックエディタに表示させるかどうか決めれます。

ブロックエディタに吹き出し一覧を表示させたい場合は✔を入れましょう。

Cocoonで吹き出しの使い方

STEP3

Cocoonで吹き出しをカスタマイズし終えたら、最後に吹き出しを記事に挿入していきます。

吹き出しが表示されない場合は、後ほど対処法を紹介します。

吹き出しの色を変更する

Cocoon記事に挿入した吹き出しの色を変更することができます。

Cocoonで吹き出し画像の推奨サイズ

Cocoonで吹き出しに使うアイコン画像のサイズは、幅200×高さ200pxがおすすめです。

なぜなら、

• Cocoon作成者のわいひらさんが160～200pxの正方形を推奨している
• 大きすぎると吹き出しが表示されない
• 小さすぎるとスマホで見づらい

からです。

ですので、吹き出しの画像サイズを幅200×高さ200pxにしましょう。

吹き出しの画像サイズを変更する

吹き出しの画像サイズを変更するには、デザインツール「Canva」の使用をおすすめします。

Canvaでは、

• 画像をかんたんにリサイズできる
• 画像を高画質でダウンロードできる
• PNGやJPGなど保存形式を複数から選べる

など、無料で誰でも使えます。

Canvaで画像サイズを変更する方法は、下の記事を参考にしてください。

Cocoonで吹き出しを使う3つのメリット

Cocoonで吹き出しを使うメリットを、私なりにざっと書いてみました。

それぞれ詳しく解説します。

自分の意見・感想・感情を伝えられる！

吹き出しを使うことで、著者本人が話しかけているような感覚を与えてくれて、よりユーザーの心に響きます。

吹き出しがないと他の文章とごちゃ混ぜになって、自分の意見や感想、感情がユーザーにうまく伝わらなくなります。

オリジナル記事に仕上がる！

文章やフリー画像だけの記事だと、他の人の記事と比べて、同じように見えます。

吹き出しを使うことで、他の人の記事と差別化ができ、ユーザーにこの記事を書いている人を覚えてもらいやすくなります。

離脱率が低くなる！

文章だけの記事だと読みづらくなり、途中で離脱した経験がある人は多いと思います。

吹き出しを使うことで記事の見た目の印象も変わったり、箸休め的な効果も得られ、読みやすくなります。

つまり、離脱率が低くなります。

Cocoonで吹き出しが表示されない原因と対処法

Cocoonで吹き出しが表示されない原因は、下記2つ考えられます。

それぞれの対処法を詳しく解説します。

画像サイズが大きすぎる

吹き出しが表示されない場合、下の画像のようになります。

吹き出しが表示されない原因は、画像サイズが大きすぎるからです。

吹き出しの画像サイズは、160～200pxの正方形で推奨されており、それ以上のサイズだと表示されない場合があります。

私も以前、吹き出しの画像サイズを幅500×高さ500pxで設定しており、

スマホのsafariやパソコンでは吹き出しが表示されたが、スマホのchromeだと表示されませんでした。

ですので、吹き出しの画像サイズを160～200pxの正方形に変更すれば、表示されます。

TinyMCEが無効になっている

新たに作った吹き出しが表示されない場合、TinyMCEが無効になっているからです。

ですので、TinyMCEを有効にすることで吹き出し一覧を表示させ、作った吹き出しを表示できます。

TinyMCEを有効にして吹き出しを表示する方法

TinyMCEを有効にして、新たに作った吹き出しを表示する方法は、下記の通りです。

まとめ：吹き出しで独自性のあるブログを作ろう

今回は、Cocoonで吹き出しの作成から使用までの3ステップを紹介しました。

吹き出しのアイコンをフリー画像から探したい人は、イラストACやいらすとやがおすすめ。

オリジナル画像を吹き出しに設定し、自分のブログだと実感するうれしさをより味わいたい人は、ココナラ で作成依頼するのがおすすめです。

作った吹き出しの画像は、

• プロフィール
• ファビコン
• SNSアイコン

にも使いまわせます。

作った吹き出し画像をプロフィールやファビコンに使いたい！という人は、下の記事も読んでみてください。

オリジナル画像を作って、本格的にブログを始めましょう！

_{＼まずは無料で会員登録／}

^{／300円割引クーポンもらえる＼}

また以下の記事では、吹き出し以外のカスタマイズ方法も紹介しています。