【初心者向け】AFFINGER6の吹き出し機能の使い方｜読まれる記事を作る為の“視線誘導”テクニック

「記事が読みづらいと言われる…」

「文章が長くなりがちで、読者が途中で離脱してしまう…」

そんな悩みを解決してくれるのが、吹き出し機能です。

吹き出しを使うだけで…

• 会話のようにテンポが良くなる
• 長文の“圧”がなくなり、読者が読みやすい
• ポイントを目立たせて記憶に残りやすい
• 表現が柔らかくなり、記事の雰囲気が親しみやすくなる

読者がスクロールしたくなる“読みやすいブログ”に変わります。

この記事ではAFFINGER6で「会話吹き出し」に必要な画像を準備する方法から作成手順までを解説しています。

AFFINGER6の吹き出し機能とは？｜初心者でも簡単に使える万能パーツ

他テーマにも吹き出しはありますが、AFFINGER6は次のような特徴があります。

• アイコンは８種類まで登録可能
• 左右の入れ替えはワンクリック
• アイコンを少し動かし目立たせられる
• しゃべるモードを搭載

しゃべるモードとは・・・

タイピングアニメーションによって、まるで喋っているような表示が可能な吹き出し機能です。

AFFINGER6｜吹き出し機能活用する為の準備

会話吹き出し機能をスムーズに使用する為にまず次の準備をしておきましょう。

• アイコン画像を用意する
• アイコン画像をアップロードする

①　アイコン画像を用意する

アイコン画像を用意するには次のような方法があります。

• 無料のイラスト素材サイトを利用する
• 有料でオリジナルアイコン画像を作成してもらう
• 自分で作成する

プロフィール用画像を用意する一番簡単な方法は無料のイラスト素材サイトなどを利用することです。

お勧めの無料イラスト素材サイトをご紹介します。

サイトオリジナルのキャラを有料で作成する方法もあります。

「ココナラ」でアイコン画像の作成をイラストレーターさんに依頼するのもいいと思います。

イラストレーターなどを使える方なら自分でアイコン画像を作成することも可能です。

また、現在ではAIによる画像作成がとても簡単にできる時代になりました。

AIによって作成したアイコン画像を使用する際は著作権について注意するようにしましょう。

AI画像の著作権について文化庁の見解・参考資料を確認することができます。

いくつか参考になるような項目をまとめておきます。

• AI画像もAIを利用せずに絵を描いた場合と同様の著作権が適応される
• AI生成物が既存の著作物と「類似性」と「依拠性」が認められる場合はNG,
• 「類似性」と「依拠性」が認められる場合でも権利者から許可があればOK
• 私的鑑賞での生成物はOK
• 授業目的の複製はOK

参考：文化庁（AIと著作権について）

何か難しくてAI画像の利用に不安を感じるかもしれないですね。

しかし、AI画像の利用がどんどん一般化しています。

著作権に注意しながらAI画像を積極的に利用していく時代になったのかなと感じています。

AI画像生成ってどうやってやるの？

という方もいると思います。

無料かつお手軽に作成できるのは、やはり「Chat GPT」です。

「Chat GPT」は画像生成の他に様々なことに活用することができます。

また、有料になりますがAI画像生成に特化して操作も簡単な画像生成サービスを利用する手段もあります。

例えば、次のようなツールです。

→　ブラウザだけでできる 本格的なAI画像生成 【ConoHa AI Canvas】

②　アイコン画像をアップロードする

アイコン画像が準備できたら、その画像をアップロードして登録しておきます。

アイコン画像を登録する手順は次の通りになります。

「AFFINGER管理」→「会話アイコン」で「会話アイコン設定」の画面を開く

「会話アイコン設定」の画面からアイコン画像をアップロードする。

「アイコン名」は「会話吹き出し」で使用した際に表示される名称になるので、表示させたいキャラネームを入力してください。

「アップロード」のボタンを押すと下の画面がでるので、アイコンとして登録したい画像をドロップまたはファイルから選択してください。

アップロードが終了したら「会話アイコン設定」画面下の「Save」ボタンをクリックして保存するのを忘れないで下さい。

「会話アイコン設定」では最大8つまでアイコン画像を登録できます。

あらかじめ複数のアイコン画像を登録しておいた方が便利です。

これで記事に「会話吹き出し」を設置する下準備が整いました。

AFFINGER6｜吹き出し機能の使い方

下準備が完了していれば「会話吹き出し」を記事内に設置するのは簡単です。

メニューから「AFFINGER：会話吹き出し」を選択すればOKです。

「AFFINGER:会話ふきだし」を選択すると・・・

登録した「アイコン画像」と「吹き出し」が作成されました。

「アイコン画像」（登録済み）の種類を変更する方法

「ショートコード設定」から登録した「アイコン画像」を変更することが可能です。

「吹き出し画像」の向きを変更する方法

下画像の矢印部分の「向き」で吹き出しの位置を左右に変更することができます。

複数のアイコン画像と吹き出しの向きを調整すれば、見やすい「会話吹き出し」が作成できます。

こんな感じに吹き出しを作成できます。

「会話吹き出し」の背景色を変更する方法

①　ワードプレスのメニューから「外観」→「カスタマイズ」を選択する。

②　「オプション（その他）」→「会話ふきだし」を選択する。

③　登録した各「会話ふきだし」の背景色を設定する。

各「会話ふきだし」の背景色を設定したら「公開」ボタンをクリックしてください。

「編集」画面で確認してみると「吹き出し」部分が設定した背景色に変更されています。

AFFINGER6では８つまで「会話吹き出し」のアイコン画像を登録でき、それぞれに背景色を設定することができます。

ここで設定した背景色はそのアイコンキャラ専用の背景色になります。

カスタマイズで背景色を変更すると、そのキャラを使用した「会話吹き出し」は一括で設定した背景色になります。

AFFINGER6独自の特別機能

AFFINGER6では会話吹き出しに次のような機能を付加することができます。

• 会話アイコンを少し動かす
• しゃべるモード

会話アイコンを少し動かす

会話アイコンを少し動かして視覚的にアクセントを加えることができます。

設定方法は「AFFINGER管理」→「会話アイコン」の画面で設定可能です。

しゃべるモード

しゃべるようなタイピングアニメーションを付加する機能で視覚的にとても目を引くことが可能です。

このブログでも活用しています。

「しゃべるモード」も「AFFINGER管理」→「会話アイコン」の画面から設定可能です。

関連記事：

まとめ｜吹き出しの効果的使用で記事滞在率をアップ

AFFINGER6の吹き出し機能は初心者でも簡単操作可能です。

また、「しゃべるモード」といった、より読者の視覚を誘導する機能をAFFINGER6は兼ね備えています。

効果的に使用することで、読者の滞在率を上げることができます。

結果的にSEO効果や収益化に繋げることができる機能です♪

AFFINGER6に興味のある方は公式サイトをチェックしてみてください。

AFFINGER6の使い方

AFFINGER6の使い方については、このブログで詳しく解説しています。

AFFINGER6：関連記事