こんにちは "osaboo"
です。"@osaboo_Bot"
AFFINGER6の会話ふきだしブロックの使い方から設定方法、カスタマイズのポイントまで初心者向けにわかりやすく解説します。
AFFINGER6のふきだしってどうやって使うの？
簡易会話との違いがよくわからない…
読みやすい会話デザインにするコツはある？
＼初心者でも安心！ コスパ最強のWordPressテーマ／
＼効果測定に必要なプラグインをまとめた特別セット／
AFFINGER6の会話ふきだしブロックとは？
AFFINGER6の会話ふきだしブロックは、キャラクター同士の会話形式で文章を表示できる機能です。
例えば以下のように使えます。
- 読者の疑問を代弁する
- 難しい内容をやさしく補足する
- 会話形式でテンポよく見せる
- CTA前に興味を引く
特に長文記事では、ふきだしを入れるだけで圧迫感が減り、かなり読みやすくなります。
SEOに直接影響するわけではありませんが、滞在時間や離脱率の改善につながる重要な要素です。
会話ふきだしの表示例
AFFINGER6の会話ふきだしブロックには、「会話アイコン」と「簡易会話」の2種類の表示スタイルがあります。
以下の2つは、ブロック挿入ツールから「AFFINGER：会話ふきだし」ブロックを追加した表示例です。
サンプルでは枠付きデザインを使用していますが、設定によって「枠付き・枠なし」の両方に対応できます。
以下2つは、ブロック挿入ツールから「段落」ブロックを追加し、「スタイル」タブで「簡易会話」に変更した表示例です。
「AFFINGER：会話ふきだし」ブロックとは異なり、ふきだしの枠色が背景として表示され、枠付きデザインには対応していません。
- 枠付きふきだし設定の表示例（ボーダーデザインタイプ・枠線のみ）
会話ふきだしと簡易会話の違い（まとめ）
会話ふきだしと簡易会話の違いを整理すると、以下のようになります。
サイトデザインや記事の雰囲気に合わせて、使いやすいタイプを選んでみてください。
用途に応じて使い分けることもできますが、種類を増やしすぎると統一感が崩れやすいため、シンプルにまとめるのがおすすめです。、あまり複雑な使い分けはお勧めできません。
| 相違項目 | 会話ふきだし | 簡易会話 |
|---|---|---|
| アイコンの向き | 左右 | 左 |
| アイコンの登録数 | 8個 | 2個 |
| アイコンのタイトル | あり | なし |
| ボーダーデザイン（枠線のみ） | 対応 | 非対応 |
| 挿入ブロック | AFFINGER: 会話ふきだし | 段落（P） |
| 操作効率 | 普通 | 良い |
AFFINGER6の会話ふきだし設定方法
会話ふきだしブロックを使うには、あらかじめキャラクターアイコンを設定しておく必要があります。AFFINGER6では、最大8個までキャラクターを登録できます。
ここでは、AFFINGER管理画面で会話アイコン（キャラクター）を設定する方法を解説します。
会話アイコン（キャラクター）画像を設定する
Menu 『WordPress管理＞ダッシュボード＞AFFINGER管理＞会話アイコン（タブ）』をクリックします。
次の画面が表示されたら、以下の手順で設定を進めます。
メディアの追加方法とアイコン画像サイズについて
「アイコン画像」の「アップロード」をクリックすると、メディアライブラリ画面が表示されます。
手順は次の通りです。
- メディアライブラリ、または「ファイルをアップロード」から、アイコン用画像を選択します。
- 右側の「添付ファイルの詳細」にある「代替テキスト」欄へ、アイコン画像の説明テキストを入力します。
- ❷と同様に説明を入力しておくと、画像検索や管理がしやすくなります。
- 右側の「添付ファイルの表示設定」にある「サイズ（枠内）」をクリックし、ドロップダウンメニューから「会話風アイコン-100×100」を選択します。※ 画像サイズが大きい場合に設定してください。
- 『投稿に挿入』をクリックします。
公式では、アイコン画像サイズは「100px以上の正方形」が推奨されています。
当サイトでは、最小推奨サイズの「100px × 100px」の画像を使用しています。
なお、イラストなど比較的軽い画像であれば、512px程度のサイズでも問題なく使用できます。
おすすめ画像サイズ
- 画像サイズ：100〜512pxの正方形画像を推奨（※ 表示サイズは添付ファイル設定で「100×100px」に調整）
- ファイル容量：5KB以下を推奨（大きくても15KB程度を目安にすると安心）
代替テキスト（ALT）
例：読者の疑問を代弁する会話キャラクター
会話ふきだしのデザイン設定（背景・枠線のカスタマイズ）
会話ふきだしの背景色や枠線デザインは、カスタマイザーから設定できます。
カスタマイザーで変更した設定は、すべての「会話ふきだし」「簡易会話」ブロックに反映されます。
❶ カスタマイザー起動
カスタマイザーを起動します。
Menu 『WordPress管理＞ダッシュボード＞外観＞カスタマイズ』をクリックします。
カスタマイザーが起動すると、画面の左側に以下の画面が表示されます。
『オプション（その他）』をクリックして進みます。
オプション（その他）
➡︎
会話ふきだし
➡︎
会話ふきだし詳細
⬇︎
❷ 会話ふきだしの基本設定（カラーとスタイル）
会話ふきだし詳細メニューが表示されます。
背景色
- 全体または会話1
- カラーパレットから選択
- 会話2〜8
- カラーパレットから選択
- アイコンに枠線をつける
- ON / OFF
- 吹き出しを角丸にしない
- ON / OFF
ボーダーデザイン
- ボーダーデザインタイプ（枠線のみ）に変更
- 普通（2px）/ 太め（3px）/ 変更しない
- ボーダーデザイン適応時の背景色※一括
- カラーパレットから選択
❸ 会話ふきだしの主なカスタマイズ項目と設定場所
会話ふきだしで変更できる主な設定項目と、設定場所を画像で紹介します。
AFFINGER6の会話ふきだしを追加する方法
AFFINGER6の会話ふきだしは、用途に応じて2通りの方法で追加できます。
「会話ふきだしブロック」を使う方法と、「段落ブロック」のスタイルから「簡易会話」を設定する方法があり、それぞれデザインや使い勝手が異なります。
ここからは、それぞれの特徴や追加方法を順番に解説していきます。
会話ふきだしブロックで追加する方法
作業は投稿エディター画面で行います。
ブロックを追加する
投稿エディター画面で『＋（ブロックインサーター）』をクリックします。
- ＋（ブロックインサーター）
ブロックタブから「会話ふきだし」を選択する
ブロック挿入ツールが『ｘ』切り替わり 以下の画面が表示されます。
AFFINGERから『AFFIMGER: 会話ふきだし』を選択して投稿エディター画面に追加します。
会話ふきだしブロックの追加完了
投稿エディター画面に『会話ふきだし』ブロックが表示されます。
挿入直後では、以下のように表示されます。
会話ふきだしの「会話アイコン1」をクリックすると、ワンタッチでアイコンを切り替えできます。
ふきだしブロックの設定方法（記事ごとに変更できる項目）
設定メニューは、投稿エディター画面の右側にある「設定 ＞ ブロック」タブから確認できます。
表示されていない場合は、以下の画面を参考に右上の設定アイコンをクリックしてください。
ブロックタブメニュー詳細設定項目
AFFINGER6: 会話ふきだし
ショートコード
- 会話ふきだし
- ドロップダウンより選択（最大8個から選択可能）
- 向きを反転
- ON / OFF
高度な設定
- 追加 CSS クラス
- 今回は省略します。
段落ブロックで簡易会話を追加する方法
段落ブロックを追加したあと、「設定＞ブロック＞スタイル」タブから「簡易会話」を選択すると、簡単に会話風デザインを適用できます。
- スタイルタブを開き、「スタイル」項目の『簡易会話A』をクリックします。
- テキスト（文章）が「簡易会話A」スタイルに切り替わり、「会話アイコン1」が適用されます。
- スタイルタブを開き、「スタイル」項目の『簡易会話B』をクリックします。
- テキスト（文章）が「簡易会話B」スタイルに切り替わり、「会話アイコン2」が適用されます。
「簡易会話」スタイルでは、枠線（ボーダー）の表示や、ふきだしの向きを反転することはできません。
また、会話ふきだし設定で「ボーダーデザイン」を選択している場合は、設定したボーダーカラーが背景色として適用されます。
読まれるふきだしの使い方【重要】
読者の疑問を代弁する
ふきだしは「読者の心の声」を入れると効果的です。
例えば、
「初心者でも使えますか？」
「設定って難しくない？」
初心者でも使えますか？
設定って難しくない？
など。
読者が感じる疑問を先回りして表示すると、記事への没入感が高まります。
長文を読みやすくする
文章が続きすぎると、読者は疲れて離脱しやすくなります。
そこで会話ふきだしを入れると、視覚的に区切りができて読みやすくなります。
特に、
- 設定解説
- SEO解説
- カスタマイズ記事
との相性が抜群です。
CTA前に活用する
会話ふきだしは、CTA（ボタン・商品紹介）の前に入れる使い方も効果的です。
例えば、
初心者でも使いやすいテーマを探していました
このように読者目線の一言を入れることで、商品紹介への流れが自然になります。
文章だけでCTAを配置するよりも、やわらかい印象になり、クリックされやすくなることもあります。
会話ふきだしを使うときの注意点
使いすぎない
ふきだしを多用しすぎると、逆に読みにくくなります。
特にスマホでは縦長になりやすいため、入れすぎには注意しましょう。
長文を入れすぎない
ふきだしは短文向きです。
長すぎる文章を入れると、テンポが悪くなります。
1〜3行程度を目安にすると読みやすくなります。
キャラクターを増やしすぎない
登場人物が多いと、読者が混乱しやすくなります。
初心者向けブログなら、
- 管理人
- 読者キャラ
くらいに絞るのがおすすめです。
AFFINGER6の会話ふきだしはこんな記事におすすめ
特に以下の記事と相性が良いです。
- 初心者向け解説記事
- SEO記事
- 比較記事
- レビュー記事
- 操作マニュアル系記事
会話形式を入れるだけで、記事の雰囲気が柔らかくなり、最後まで読まれやすくなります。
よくある質問（FAQ）
ふきだしはSEOに効果ありますか？
直接検索順位が上がるわけではありません。
ただし、読みやすさ改善による滞在時間や離脱率の改善にはつながります。
スマホでも見やすいですか？
AFFINGER6はレスポンシブ対応なので、スマホでも問題なく表示できます。
ただし、ふきだしを使いすぎると縦長になりやすい点には注意しましょう。
ふきだし用アイコンは必要ですか？
必須ではありません。
ただし、アイコンがある方が視認性や親しみやすさはアップします。
こんな感じになります。
会話アイコン無しの場合のふきだし表示例
まとめ！AFFINGER6の会話ふきだしブロックの使い方｜読まれる記事にする設定とコツを解説
AFFINGER6の会話ふきだしを使うと、記事をやさしく読みやすい雰囲気にできます。
「会話ふきだしブロック」と「簡易会話」の2種類が用意されているので、記事デザインや用途に合わせて使い分けてみてください。
ただし、使いすぎると読みにくくなるため、デザインやキャラクターはシンプルに統一するのがおすすめです。
読みやすい記事作りに役立つ機能なので、ぜひ活用してみてください。
