簡単に会話風の表現(記事)が作れるプラグインの紹介と使い方

んにちは！今回はブログや様々なコラムなどで見られる「会話形式」の表現を簡単に行う方法についてご紹介していきます。

このように、キャラクターや画像を使うことで、漫画のような表現ができて読む方の負担を減らし、よりわかりやすい表現ができるようになります。

この機能を「吹き出し」というふうに呼ぶことが多いです。

この「吹き出し」を使うことで、読み手の負担を軽減できます。例えば、教師と生徒といった関係で会話をしながら説明していくと、テンポよく読み進めることができて、より理解が深まる表現ができるかもしれません。

さて、実際にどうやってこの「吹き出し」が使えるようになるのか、簡単に解説していきます。

「吹き出し」を使う方法は「テーマの機能」もしくは「プラグイン」

「吹き出し」を使う方法は２つあります。まずあなたが使っているWord Pressテーマにデフォルト(標準)機能として「吹き出し」が備わっている場合です。すでに機能が備わっている場合はそのまま使用しちゃいましょう！

もう一つはプラグインで「吹き出し」機能を実装する方法です。※今回はこちらがメインです

ここで言う「プラグイン」とは、追加で取り付ける機能のことです。

「プラグイン」とはなんぞや？ということですが・・・まず、Word PressとはCMS(コンテンツマネジメントシステム)という、ブログなどの記事を書きやすくしたウェブサイト管理ソフトのことです。この管理ソフトに「テーマ」というテンプレートを掛け合わせることでウェブサイトが出来上がっていきます。このソフトには、様々な機能が備わっているのですが、それは何でもできるすべての機能では有りません。そこで、「プラグイン」という追加ソフトを加えることで、新たな機能を追加することができます。

今回紹介する、吹き出し機能を追加するプラグインは２つあります。

①LIQUID SPEECH BALLOON(吹き出し)

リキッド・スピーチ・バルーン、というプラグインになります。こちらはWord Pressで吹き出し機能を追加したい時によく使われるプラグインです。

こちらの特徴は「至ってシンプル！」アイコンの登録を、コントロールパネルから行う必要がありますが、それ以外はブロックエディタで操作ができます。また、アイコンの左右配置や吹き出しの大きさ等の調整も容易にできます。

②Word Balloon

ワードバルーンというプラグインです。こちらも同様に簡単な操作で吹き出しを作ることができます。基本的には無料ですが、ライセンスソフトとなっているため一分機能は有料のようです。(無料範囲で十分使えます！)

このワードバルーンの特徴は、「表現方法が多彩！」色を変える、吹き出しの位置を左右だけでなく上下に配置したりしてみる、色を変える、アイコンを追加する・・・などなど、できることが沢山ありすぎです。

表現の幅を広げたい、もっとコミカルに表現したいという場合はこちらがおすすめです。

プラグインのインストール方法

それではまず、おさらいも含めて「プラグイン」のインストール方法を簡単に解説します。

まずは管理画面から【プラグイン】を選択します。

「新規追加」をクリックします。

画面右に出てくる検索枠にキーワードを入力します。ここではWord Balloonと入力してみます。(LIQUID Speech Balloonの場合はそのまま「LIQUID Speech Balloon」と入力)

右上の「今すぐインストール」をクリック、続けて出てくる「有効化」をクリックして完了です。

吹き出し機能の使い方

それでは、それぞれのプラグインの使い方をざっくり紹介していきます。より細かく見ていきたいという方、興味のある方のプラグインを実際に追加してみて下さい。実際に使うとより理解が深まると思いますよ。

LIQUID SPEECH BALLOONの使い方

まずは吹き出しを入れたい記事の編集ページを開きます。ブロックを選択して・・・

ブロック一覧にある【Speech Balloon】を選択してください。

【SpeechBalloon】を選択すると、いきなり吹き出しが現れます！これは楽ちんです・・・！

吹き出し内のテキストは、吹き出し内に直接書き込むことができます。

・・・なにか足りない気がする・・・。

そうそう、せっかく吹き出しをつくったんだからキャラクターの顔や名前を入れたいですよね！あとは、会話形式にしたいなら、対話している相手は右側に顔や名前を表示させたい・・・・

どうすればいいの？？

まずはWord Pressの管理画面まで戻ります。管理画面まで戻ったら、【設定】→【LIQUID Speech Balloon】を選択します。

そうすると上のような画面になります。この画面の赤枠の部分に情報を入れると、吹き出しのキャラクターが設定できます！

左側の【名前】に表示したいキャラクターの名前を、右側の【画像URL】には表示する画像のURLを入力します。

【画像URL】って何？ですが、これはこのWord Pressにアップロードしてある画像のURLということになります。

上の画像の位置にある【ファイルURL】をコピーしましょう！コピーしたら先程の【設定】→【LIQUIDSpeechBalloon】の画面に戻りましょう。

このように左側に名前、右側に先程コピーしたURL入力します。おっと！最後に下の【変更を保存】を忘れずに押しましょう！

これで準備完了です！それでは記事編集画面に戻ります。

さてさてどうなっているのでしょうか・・・？

無事表示されていました！複数登録した場合は、右側のメニューにある【AVATAR】から選択して変更できますよ。

ちなみに、キャラクターの位置を右側にする方法ですが、これも右側のメニューで変更可能です！

【DECORATION】のRightを選択することでキャラクターの位置が変わります。簡単ですね！

このLIQUID Speech Balloonはとてもシンプルで使いやすいプラグインです。キャラクターの登録が手間ですが、一度登録するとサクサク使える為、同じキャラクターを使う場合はおすすめです。

Word Balloonの使い方

wordBalloonは、いろいろな吹き出し表現ができるプラグインとなっています。LIQUID Speech Balloonがとてもシンプルなのに対して、Word Balloonはその表現の幅が広いことが特徴です。

まずは、編集画面からブロックの選択を行います。

ブロック一覧にある【Word Balloon】をクリックしましょう！

そうすると早速吹き出しが表示されました！簡単ですね〜。

この吹き出しに関する編集は、右のメニューで編集することができます。【LIQUIDSpeechBalloon】と比べて、できることが多めです。

それでは早速、基本的な編集をしてみます。まずはキャラクターの画像を表示してみましょう。シルエット部分をクリックすると、すぐにメディアデータの選択画面が現れます。

ここで表示させたい希望の画像を選択します。

選択すると、早速吹き出しに反映されました！とっても簡単です。

キャラクターの名前を入れてみたいと思います。右側のメニューから、【アバター】という箇所を選択します。

【アバター】を選択すると、メニューが開くので、下にスクロールします。「名前」と書かれた箇所があるので、そこに表示させたい希望のテキストを入力します。そうすると、キャラクター画像の下に入力したテキストが表示されましたね！

最後に、会話風に表現するためにキャラクターを右側に移動させてみましょう。右のメニューにある【アバターの位置】の矢印をクリックしてみてください。なんとクリックするだけでその矢印の方向にキャラクターが移動します・・・なんて簡単！

吹き出しの本文については、表示の通り吹き出し内に直接入力をしていけばOK！

基本的な使い方はこれで完了ですが、このWordBalloonは他にも吹き出しの形状を変更したり、テキストやキャラクターにモーションを付けたりできます。

実際に触ってみていただければ、とてもおもしろいかなと思いますよ。

1点、LIQUIDSpeechBalloonよりもできることがある反面、キャラクターの固定登録数が3人までという制限があります。これは、基本的には有料サービスなのである程度機能の制限があるためです。

ただ無料状態でも十分に使用できるものなので、都度キャラクターを設定することが面倒でなければこちらを使用しても良いかもしれません！

注意事項

この吹き出しプラグインを使う上で注意することは、すでにお使いのテーマに吹き出し機能がついていないかを事前に確認することです。

プラグインは機能が重複すると不具合を起こしやすいと言われています。この吹き出しのプラグインで不具合が起こったという問題は現状ありませんが・・・既にお使いのテーマに機能として備わっているのであれば、そちらを優先して使うことをおすすめします。

まとめ

今回は、簡単に会話風の表現(記事)が作れるプラグインの紹介と使い方ということで、２つのプラグインを紹介させていただきました。

どちらも操作が簡単で、魅力的なプラグインです。

LIQUID Speech Balloonはシンプルかつキャラクターの登録が何人でも可能な仕様になっています。

WordBalloonは、色々な表現ができる一方、無料ライセンスで機能が制限されているため、キャラクターの登録数に限りがあります。

実際に使ってみて、良いと思ったほうを使ってみてください！それでは〜！