LINEっぽい会話調の記事が作れるWordPressプラグイン「Speech Bubble」が面白い！

今以上にブログの読者に楽しんでもらえるような記事にできたら、使ってみたいと思いませんか？

今回ご紹介するWordPressプラグインspeech Bubbleは、LINEで会話しているような記事が作れますし、キャラクターが吹き出しでしゃべっているように見せることができるので、文字だらけではない”魅力的な記事”にすることができます。

好きなキャラクターや似顔絵を使用してオリジナル要素満載のブログ記事が書けますし、スタッフ同士の会話など、似顔絵アイコンで会話風にしたら楽しそうですよね！ここではSpeech Bubbleの使用例をご紹介いたしますので、店舗のスタッフブログやご自身のブログなどに導入する際の参考にして見てくださいね。

Speech Bubbleで会話風の記事に

WordPressでブログをやっているなら、Speech Bubbleプラグインを入れることで、キャラクターが吹き出しでしゃべっているように文章を書くことができます。実際に会話しているかのように見えるので、目がそちらに惹きつけられますよね。

視覚的にも情報が取り込みやすいので、ユーザーに伝えたいことを吹き出しの中に敢えて書くという使い方もできますね。そして、適度に配置することで、記事全体をテンポよく読み進められるようになります。

キャラクターアイコンは自分で作ったアバターや写真、似顔絵など好きなものを使用できるので、店舗のブログならスタッフの似顔絵や写真を設定して、スタッフ同士の会話を演出するのもいいですね。

 

吹き出しの種類も豊富で、LINEやFacebookのような見た目のものを選ぶことができて面白いですよ。女性向けにピンクの可愛い吹き出しから、男性向けのクールな吹き出しもあります。全9種類から好きなものを選んで使うことができますよ。

1. drop
2. std
3. fb
4. fb-flat
5. ln
6. ln-flat
7. pink
8. rtail
9. think

の9種類ですね。実際にはこのようになります。

 

変わり種としては、頭の中で考えている風の吹き出しもあるので、場面や用途によって使い分けもできます。吹き出しの向きも左右変えることができるので、2人以上のキャラクターを用意しても楽しいですし、複数のキャラクターを設定して会話させても面白いですね。

疑問や質問に答える内容であれば、キャラクターに会話させると適度に文章も読みやすく、伝わりやすくなります。アイコン画像のキャラクターの表情をいつくのパターンで作っておくと、表情とセリフをあわせて臨場感も演出できます。

でも、こういったプラグインはどうしても設定が難しそう・・・そう思っていませんか？

プラグインの導入や設定は簡単

WordPressのプラグインを使ったことがあると、ついつい「設定するのが面倒」「英語でよくわからない」と思ってしまいますよね。でも、このプラグインはインストールしたらそのまま有効化するだけなのです。

実際に、吹き出しの見た目やキャラクター設定などは自分で好みのものに設定をする必要がありますが、最初に設定してコピペして使うなり、ショートコードのプラグインと併用してあげれば、簡単に使用することができます。プラグインをインストールしたら有効化するだけ。あとは・・

1. 使用したいアイコン画像を用意
2. ファイルのアップロード
3. 使用したい吹き出しデザイン、向き、画像を基本のコードに当てはめる

この3ステップです。この設定ができれば、記事を投稿する画面で、指定のコードを入力するだけなので簡単です。

使用するアイコン画像をあらかいじめ用意しておく

使用したいアイコン画像の用意ですが、基本的には自動でリサイズされるので正方形の画像であれば問題なく使用できます。こちらの記事で、ブログのプロフィールなどで使えるおすすめのスマホアプリを紹介しているので参考にしてください。

Speech Bubbleで使える、画像ファイルの拡張子はjpg・png・ gif・ svg・ tifのいずれかでなければ表示されないので、ファイルの種類と拡張子が一致している事も確認しておきましょう。キャラクターごとにいくつか表情を分けて作成しておくと、感情の表現もできますよね。

アイコン画像ファイルのアップロード

Speech Bubbleで使用するアイコン画像の設定は、FTPの使用が必要です。WordPressを使用しているのであれば、すでに使用してるFTPソフトから、指定のフォルダ「ドメイン＞public_html＞wp-content＞plugins＞speech-bubble＞img」にドラッグ＆ドロップでファイルをアップロードします。

※注意：speech-bubbleプラグインをアップデートするとアイコン画像が格納されたフォルダが上書きされて、アイコン画像が消えてしまう事象があるようです。speech-bubbleプラグインをアップデートする際には、【img】フォルダを手元（デスクトップ上）などに1度ダウンロードしておき、speech-bubbleのアップデートが完了したら再度【img】フォルダ内のアイコン画像をアップロードしましょう。

もし、使い方やアップロードの仕方がわからない場合は、こちらの記事を参考にして見てくださいね。

使用したい吹き出しのデザイン・向き・画像を基本コードに当てはめる

使用する時にはベースとなるコードに対して↓を書き換えましょう。

1. 吹き出しのデザイン
2. 吹き出しの向き
3. 使用する画像（アップロードしてある画像）
4. キャラクター名
5. セリフ（吹き出しの中の文章）

デザインは先ほどお伝えした9つのタイプからお好きなものを選びます。吹き出しの向きはL1（左）R1（右） L2（左・考えている風） R2（右・考えている風）の4つから任意の向きを入力しましょう。

アイコン画像は先ほどアップロードした画像ファイルの名前を入力し、キャラクター名の所にはアイコン画像の下に表示されるキャラクターの名を入力します。セリフは吹き出しの中でキャラクターに喋らせたい内容を入力すると、下記の画像のように表示されます。

コードを毎回入力するのは面倒、コピー＆ペーストも手間だと感じるようであれば、短縮コードを設定できるプラグインと併用すればサクサク使用できるようになりますよ。頻繁に使うものは予めコードを登録しておくといいですね。

「セリフを変更するだけ」の状態にしておくと便利ですよ。これもクイックタグの設定方法として、こちらの記事で紹介していますので、まだ持っていないという場合は、参考にしてみてくださいね。

コードもあっているし画像もちゃんとアップロードされてるのに画像が表示されない、設定が反映されないという場合は「全て半角英数字になっている」か再確認して見ましょう。””と””、同じダブルクォーテーションのように見えますが、全角と半角が混ざっているときちんと反映されないので、うまくいかないときはこれも疑って見てください。あとは文章だけを書き換えれば良いので、最初に必要な分のキャラクターだけを設定してしまえば、あとは通常の文章を書くのとさほど変わらない手順で使用することができます。

吹き出しの中の文章はSEO的にもテキストとして認識されるので、通常の記事を書いているように、コンテンツの一部として認識されるのも嬉しいところですね。

最初の3ステップだけサクッと済ませてしまえば、より親しみやすくユーザーに楽しんでもらえるような記事を増やしていけますね。ファイルの拡張子に注意して、指定のフォルダに格納するだけなので、1つ1つ確認しながら行えば設定自体も難しくありませんね。プラグインのインストールから設定については、こちらの記事が参考になります。

実際に、私もこちらの記事を参考にプラグインを導入し、使用しているのですが、案ずるより産むが易し！やってみたら思っている以上に簡単なので、ぜひトライしてみてくださいね。

まとめ

いかがでしたか？ブログ記事の中で、会話をしているかのように魅せることができるspeech Bubbleプラグイン、使用するイメージをつかんでいただけましたか？

• プラグインはインストールから有効化するだけ
• 使用する画像は指定フォルダにファイルをアップロードするだけ
• 使用する際は、吹き出しのデザイン・向き・アイコン画像・セリフを基本のコードに当てはめるだけ

でしたね。頻繁に使用するようであれば、クイックタグのプラグインを使用して、吹き出しのデザインやキャラクターごとに登録させておくと、とっても便利です。ぜひ、ブログに導入して素敵な記事を増やしてみてくださいね。