【公開中】アメブロ開始4ヶ月・わずか20記事でも毎月5万PVで安定する「資産記事」手法はこちら ⇒
アメブロカスタマイズ

【コピペOK】アメブロ用の吹き出し素材42選(画像アイコン付き・会話風)

アメブロ用の会話形式の吹き出し(アイコン画像つき)

この記事の特徴

重要度 5.0
難易度 3.0
備考 アイコンつきの吹き出しを使うと、記事の途中に会話を挟む雰囲気となります。アイコンでブログ運営者を覚えてもらうことも可能です。

アメブロでも以下のような「会話形式の吹き出し」を使えたらいいと思いませんか?

 

くますけ
 

このようなアイコン画像つきの吹き出しのことだよ。会話調で読みやすく、印象にも残りやすいね。

実際にアメブロで吹き出しを使った記事はこちら

  

 
アメブロで吹き出しを使うメリット
  • 記事が読みやすくなる(離脱防止
  • 目立つので、読者の印象に残りやすい(収益UP
  • アイコンつきだから読者に覚えられる(信頼感UP

  

文字だらけの記事は読者に途中離脱されるので、吹き出しなどで「読ませる工夫」「印象に残す工夫」が大事ですよね。

  

くますけ
くますけ

アメブロで「吹き出し」を使う人が増えてるよね!

あめっくま
あめっくま

おしゃれなだけではなく、集客・収益UPにつながるからだね。

  

使い方は3STEPで簡単!

HTMLやCSSを知らなくてもOK、コピペして貼り付けるだけ

アメブロの吹き出しの作り方

  

しかも、スマホやアプリで記事を見る読者にも対応。(レスポンシブデザイン) 

さらにブログの雰囲気に合わせて、各デザイン7色(青・水色・緑・赤・ピンク・オレンジ・茶)から選べます。

  

あめっくま
あめっくま

アメブロでも吹き出しを使って、集客・収益UPを目指しましょう!

 

この記事を書いた人
  • アメブロで毎月収益7桁を達成
  • アメブロ集客・売上UPの指導多数
  • アメブロで資産記事を作り安定した集客を実現

 

アメブロたった20記事で5万PVの手法

アメブロで資産記事を作る方法はこちら ⇒

ついに登場!アメトピ攻略法

アメトピ採用率UPのテクニックはこちら ⇒

 

おしゃれな吹き出し

おしゃれな会話調の「吹き出し」で、7色・左右を自由に選べます。

ここに名前

実線のシンプルな吹き出しです。どんなデザインでも合わせやすいので人気があります。

ここに名前

実線のシンプルな吹き出しです。どんなデザインでも合わせやすいので人気があります。

ここに名前

実線のシンプルな吹き出しです。どんなデザインでも合わせやすいので人気があります。

ここに名前

実線のシンプルな吹き出しです。どんなデザインでも合わせやすいので人気があります。

ここに名前

実線のシンプルな吹き出しです。どんなデザインでも合わせやすいので人気があります。

ここに名前

実線のシンプルな吹き出しです。どんなデザインでも合わせやすいので人気があります。

ここに名前

実線のシンプルな吹き出しです。どんなデザインでも合わせやすいので人気があります。

ここに名前

右からの吹き出しです。左からの吹き出しと合わせて使うと、会話しているように見えます。

ここに名前

右からの吹き出しです。左からの吹き出しと合わせて使うと、会話しているように見えます。

ここに名前

右からの吹き出しです。左からの吹き出しと合わせて使うと、会話しているように見えます。

ここに名前

右からの吹き出しです。左からの吹き出しと合わせて使うと、会話しているように見えます。

ここに名前

右からの吹き出しです。左からの吹き出しと合わせて使うと、会話しているように見えます。

ここに名前

右からの吹き出しです。左からの吹き出しと合わせて使うと、会話しているように見えます。

ここに名前

右からの吹き出しです。左からの吹き出しと合わせて使うと、会話しているように見えます。

\ 永久ライセンス公開中 /

  

  

かわいいLINE風の吹き出し

LINE風の「吹き出し」も人気が高いです。7色・左右を自由に選べます。

ここに名前

LINE風のオシャレな吹き出しです。ブログがオシャレになりますね。

ここに名前

LINE風のオシャレな吹き出しです。ブログがオシャレになりますね。

ここに名前

LINE風のオシャレな吹き出しです。ブログがオシャレになりますね。

ここに名前

LINE風のオシャレな吹き出しです。ブログがオシャレになりますね。

ここに名前

LINE風のオシャレな吹き出しです。ブログがオシャレになりますね。

ここに名前

LINE風のオシャレな吹き出しです。ブログがオシャレになりますね。

ここに名前

LINE風のオシャレな吹き出しです。ブログがオシャレになりますね。

ここに名前

右からのLINE風吹き出しです。左からの吹き出しと組み合わせて、会話する雰囲気を出せますね。

ここに名前

右からのLINE風吹き出しです。左からの吹き出しと組み合わせて、会話する雰囲気を出せますね。

ここに名前

右からのLINE風吹き出しです。左からの吹き出しと組み合わせて、会話する雰囲気を出せますね。

ここに名前

右からのLINE風吹き出しです。左からの吹き出しと組み合わせて、会話する雰囲気を出せますね。

ここに名前

右からのLINE風吹き出しです。左からの吹き出しと組み合わせて、会話する雰囲気を出せますね。

ここに名前

右からのLINE風吹き出しです。左からの吹き出しと組み合わせて、会話する雰囲気を出せますね。

ここに名前

右からのLINE風吹き出しです。左からの吹き出しと組み合わせて、会話する雰囲気を出せますね。

\ 永久ライセンス公開中 /

  

  

考えごと風の吹き出し

心の中の声を表現した、考えごと風の「吹き出し」です。7色・左右を自由に選べます。

ここに名前

考え事風のかわいい吹き出しです。心の中の声を書いて、共感を得ることもできます。

ここに名前

考え事風のかわいい吹き出しです。心の中の声を書いて、共感を得ることもできます。

ここに名前

考え事風のかわいい吹き出しです。心の中の声を書いて、共感を得ることもできます。

ここに名前

考え事風のかわいい吹き出しです。心の中の声を書いて、共感を得ることもできます。

ここに名前

考え事風のかわいい吹き出しです。心の中の声を書いて、共感を得ることもできます。

ここに名前

考え事風のかわいい吹き出しです。心の中の声を書いて、共感を得ることもできます。

ここに名前

考え事風のかわいい吹き出しです。心の中の声を書いて、共感を得ることもできます。

ここに名前

右からの考え事風の吹き出しです。お好みで使って下さいね。

ここに名前

右からの考え事風の吹き出しです。お好みで使って下さいね。

ここに名前

右からの考え事風の吹き出しです。お好みで使って下さいね。

ここに名前

右からの考え事風の吹き出しです。お好みで使って下さいね。

ここに名前

右からの考え事風の吹き出しです。お好みで使って下さいね。

ここに名前

右からの考え事風の吹き出しです。お好みで使って下さいね。

ここに名前

右からの考え事風の吹き出しです。お好みで使って下さいね。

\ 永久ライセンス公開中 /

  

  

効果的な活用方法

アイコン画像つきの吹き出しを上手に使うと、読者数UP・収益UPにもつながります。

  

読者に大事な内容を伝える

吹き出しの中に、読者に伝えたい内容を書いて印象に残すことができます。

「吹き出し」と「普通の文章」を比べてみましょう。

アメブロにおける吹き出しの効果

吹き出しに入れた方が、大事な内容が伝わりやすいですよね。

しかもあなたが話しかけているように見えるので、読者の共感も得やすいです。

  

くますけ
くますけ

吹き出しの内容は印象に残るよね!

  

  

記事を読みやすくする

内容が良くても文字だらけの記事は読みづらく、読者に途中で離脱されます

忙しい読者には流し読みされ、肝心の内容が伝わらないことも・・・

よくあるアメブロでの書き方を、吹き出しで修正してみます。(記事の途中の箇条書きをイメージ)

アメブロで吹き出しや囲み枠を使うと読みやすい・印象に残りやすい

  

Beforeはアメブロでよく見る絵文字を用いた箇条書きで、あまり良い書き方ではありません。

Afterはボックス枠に箇条書きを入れ、さらに吹き出しで小まとめにしました。

同じ内容でも吹き出しなどを使うだけで、読みやすく・納得する読者も増えます

  

あめっくま
あめっくま

読者のニーズに合う記事を書いて、カスタマイズで読者の印象に残すことが大事ですね。

  

【補足】囲み枠はタグに注意

なおアメブロの囲み枠で、デメリットの多い「fieldset」「legend」タグを使っている人が一部います。

スマホで見れない読者が出てくるので、使わないようにしましょう。(知らずに推奨する人がいるので、要注意)

下記の記事では、安心して利用できる「アメブロ用の囲み枠」のみを紹介しています。

  

  

申し込みフォームの前に置く

吹き出しを申込フォームの前に置くと、安心感を与え・申込者数を伸ばすことも可能です。

アメブロにありがちなデザインと比べてみましょう。(記事の最後にセッションやセミナー紹介をするイメージ)

アメブロのNGデザイン例

Beforeはアメブロでよく見るデザインで、残念ながら申込者数のUPはあまり期待できません。

  

くますけ
くますけ

これは古いデザインだね。さすがに厳しそう・・・

  

そこで以下のように修正して見ます。

アメブロで画像つきの吹き出しを使ったケース

Afterは事前に吹き出しを使い、読者に安心感を与えます。ボックス枠も他の人とは違うデザインを使いました。

リンクもクリック率が上がるボタンを併用しています。

  

あめっくま
あめっくま

同じ内容でも、見せ方を変えるだけで申込者数UPも狙えます。

  

  

  

吹き出しの設置手順

吹き出しには画像が入るので、事前にアイコンを用意する作業があります。

具体的な流れを分かりやすく紹介しますね。

  

【事前準備】アイコン画像の準備(最初の1回だけ)

初めて吹き出しを使う人は、専用のアイコンを準備しましょう。(2回目以降は不要な作業です)

アイコン画像は横100px・縦100pxの円形に切り取った画像を使って下さい

吹き出しアイコンのサイズは100px
補足

アメブロ用の吹き出しは横100px・縦100pxの円形画像で、PC・スマホ表示どちらも対応する調整をしています。サイズが異なると表示が崩れる可能性があります。

  

例として「Photo Scape」(無料で簡単に使える画像編集ソフト)を使ってアイコン画像を作成してみます。(アイコンに使う画像はご自身で用意して下さいね)

Photo Scapeのダウンロードはこちら

  

まずはアイコンに使う画像を「Photo Scape」上で表示します。

以下のように「円形にトリミング」機能を使い、円を作り・サイズ縦横100PXに調整します。

トリミングして円形アイコンを作成

  

「トリミング」をクリックすると、次のように切り取られます。

円形アイコン画像ができた

画像とサイズを確認して保存して下さい。

  

作成したアイコン画像を、アメブロにアップロードしておきましょう。

  

くますけ
くますけ

この作業は最初の1回目のみです。

  

  

STEP①専用コードをコピー

次に吹き出しデザイン・色を選んで下さい。

デザインは「おしゃれ」「LINE風」「考えごと風」の3種で、それぞれ7色を用意。

専用コードは、下記リンク先のページでライセンス公開しています。

  

お好きなデザイン・色を選んだら、ライセンスページ内にある専用のHTMLコードをコピーします。

下記の黒い部分ですね。

吹き出しのコードをコピー

  

あめっくま
あめっくま

HTMLコードの意味は分からなくてもOKです。

  

  

STEP②アメブロに貼り付け

続いてアメブロの記事作成画面を、「HTML表示」に切り替えます。

そして吹き出しを挿入したい部分に、コピーしたコードを貼り付けます。

HTML表示に切り替え

  

コードを貼り付けたら、アイコン画像を挿入します。

専用コードの「ここに画像」の文字をマウスで選択した状態で、事前にアップロードしたアイコン画像をクリックしましょう。

コードを貼り付け

  

下記のように、アイコン画像のURLが入ります。

吹き出しにアイコン画像を入れた

  

続いて、アイコン画像がクリックで拡大されないようにします。

アイコン画像を拡大する意味はないので、「<a ~>」「</a>」の両方のタグを消しておきましょう。(片方だけ消すのは表示崩れになるので厳禁)

アイコン画像を調整

画像を表す「<img ~>」タグがあればOKです。(拡大されてもいい人は消さなくてもOK)

   

  

STEP③吹き出しの中身を書く

最後に「通常表示」に戻して、吹き出しに名前と中身を書きましょう

アメブロの吹き出しの中身を書く

  

吹き出しの中身や名前は、「ENTER」または「SHIFT+ENTER」のどちらでも改行可能です。

名前は5文字までならスマホでも1行表示されます。長い場合は改行して下さいね。

  

あめっくま
あめっくま

コピーしたら貼り付けて、吹き出しの中身を書くだけですね。

  

  

2回目以降簡単に貼り付ける方法

2回目以降は、簡単に吹き出しを貼り付けましょう。

「中身の文章の書き換え」だけにするのがポイント!サクッと使えるようになります。

2つの方法を紹介するので、お好みで選んで下さいね。

  

【方法①】作成したHTMLコードをコピーしておく

吹き出しにアイコン画像や名前を入れた状態で、HTMLコードをメモ帳や付箋などに貼り付ける方法です。

吹き出しをアメブロで使う時に、HTML表示に貼り付ければOK。

アイコン画像や名前は1度作ったら変わらないので、サクッと貼り付けできるようにておきます。

  

あめっくま
あめっくま

HTMLコードの状態でメモ帳などに保存して下さいね。

  

【方法②】記事の複製機能を使う

アメブロの記事複製機能を使う方法ですね。

吹き出しを使った記事を複製すれば、中身の文章を書き換えるだけなので簡単。

  

ちなみに同一エディタ内なら、通常表示でもコピペできます

過去に使った吹き出しを記事複製で表示させて、下記のようにコピペして下さい。

  

すると下記のように、全く同じものが簡単に作成できますね。

  

記事複製⇒エディタ内でコピペの順です。

HTML表示に切り替えなくていいので、簡単ですね。

【注意】
別タブや別ウインドウで開いたエディタからコピペしても、完全には再現できません。

  

  

よくある質問・注意点

吹き出し作成でよくある質問・注意点を紹介します。

  

カバー画像を設定する

アメブロ記事でカバー画像を設定することで、記事一覧などでサムネイル画像として表示される機能がありますよね。

カバー画像を設定しない場合は、記事の一番上に置いた画像がサムネイル表示されます。

つまりカバー画像を設定せず・吹き出しの上に何も画像がないと、サムネイルにアイコン画像が出てしまいます

  

アイコン画像ではなく、記事内容に合ったサムネイル画像があるとアクセス数が伸びやすいです。

カバー画像を必ず設定しておきましょう

  

あめっくま
あめっくま

吹き出しのアイコン画像がサムネイルにならないよう、注意して下さいね。

  

   

  

画像に代替に代替テキストは入れるべき?

通常の画像には代替テキストを入れた方がアクセス数で有利です。

多くの人がアクセス数UPのために、画像に代替テキストを入れていますよね。

ただし今回のアイコン画像は記事内容に直接関係ないので、代替テキストは空白でOKです。