Lightningの吹き出しの設定方法！会話デザインのコツ

ワードプレスでLightningを使っているのに、「吹き出しってどう出すの？」「触ってみたけれど、なんだかダサく見える…」と感じていませんか。

この記事では、Lightningの吹き出し機能の基本から、デザインの整え方や活用アイデアまでを、私の実体験も交えながらやさしく解説します。

この記事を読むと分かること

Lightningで吹き出しを表示する具体的な手順
VK Blocksを使った吹き出しブロックの主な設定項目とおすすめの使い方
アイコン画像や色の選び方など、デザイン面のちょっとしたコツ
ブログ記事やLPでの吹き出しの活用パターン
吹き出しが表示されない・レイアウトが崩れるときのチェックポイント

先に結論を一言でお伝えすると、Lightningと対応するブロックプラグインを組み合わせれば、特別な知識がなくても、吹き出しを使った読みやすい会話コンテンツを誰でも作れます。

Lightningで吹き出しを使うと何が変わるのか
Lightningの吹き出しを使う前に知っておきたい準備
Lightningの吹き出しの基本的な使い方と設定手順
Lightningの吹き出しをおしゃれに見せるデザインのコツ
Lightningの吹き出しの活用アイデア集
Lightningの吹き出しがうまく表示されないときの対処法
よくある質問（FAQ）
まとめ：Lightningの吹き出しで読みやすいサイトにしよう

Lightningで吹き出しを使うと何が変わるのか

ごとう

ここでは、Lightningで吹き出しを使うとサイトにどんな良い変化があるのかを、イメージしやすいように整理します。「そもそも吹き出しは必要なのか？」と迷っている人は、まずメリットから確認してみてください。

Lightningの吹き出しでできること一覧

最初の見出しでは、Lightningの吹き出しで具体的に何ができるかを一覧でまとめます。ざっくり言うと、「読みやすくて、雰囲気のあるページにできる」のが一番のメリットです。

できること	内容のイメージ	向いている場面
会話形式の説明	キャラA・キャラBが話す形で解説	ブログの導入、ハウツー記事
Q&A表示	質問者と回答者のやり取り	FAQページ、よくある質問
お客様の声	利用者と運営者の会話で紹介	LP、サービス紹介ページ
ストーリー風演出	物語調で商品や体験を語る	体験談、ストーリー記事
キャラづくり	アイコンで案内役のキャラクターを固定	ブログ全体のブランド化

吹き出しは単なる装飾ではなく、「誰が」「どんな立場で」話しているのかを伝えるための道具です。同じ説明でも、「店長」と「初心者のお客様」が会話しているように見せると、一気に読みやすくなります。

どんな読者にLightningの吹き出しは刺さるのか

Lightningの吹き出しが特に効果を発揮しやすいのは、次のような読者です。

文字ばかりの記事だと読む前に疲れてしまう人
専門用語が多いジャンルで、かみ砕いた説明を求めている人
ストーリーや会話形式の方が頭に入りやすい人

こういった読者に向けて、例えば次のような工夫ができます。

難しい説明を、吹き出しで一問一答の会話に置き換える
悩んでいる人役と、それをサポートする私（運営者）を登場させる
アイコンや名前でキャラクターを固定し、愛着を持ってもらう

このように、吹き出しを使うと文章そのものだけでなく、「伝え方のデザイン」まで整えやすくなります。

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

稼げる広告
稼げるキーワード
稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

Lightningの吹き出しを使う前に知っておきたい準備

ごとう

ここでは、実際にLightningの吹き出しを使い始める前に確認しておきたいポイントをまとめます。「吹き出しブロックが見つからない」「設定画面が出てこない」といったトラブルの多くは、この準備段階でつまずいているケースが多いです。

テーマとブロックプラグインが使える状態か確認する

Lightningで吹き出しを使うときは、テーマとしてLightningを有効にしたうえで、対応するブロックプラグイン（VK Blocksなど）を組み合わせるのが一般的です。まずは次のチェック項目を確認してみてください。

チェック項目	内容	OKの状態
テーマ	有効なテーマがLightningか	「外観」→「テーマ」でLightningが「有効」になっている
プラグイン	Lightningと相性の良いブロックプラグインがあるか	プラグイン一覧にVK Blocksなどが表示されている
ブロックエディター	ブロックエディターを使っているか	投稿・固定ページでブロック形式の編集画面が開く
更新状況	テーマやプラグインが古すぎないか	管理画面に大量の更新マークが溜まっていない

もし対応プラグインが見当たらない場合は、プラグインの新規追加画面から「VK Blocks」などを検索し、説明を確認したうえで導入しておきましょう。Lightningと組み合わせて使うことを前提にしたブロックプラグインなので、吹き出し以外のブロックもまとめて活用できます。

吹き出しで使うアイコン画像を用意する

Lightningの吹き出しを本格的に使うなら、「誰が話しているのか」をひと目で伝えるアイコン画像も重要です。事前に次のような方針を決めておくと、迷いが減ります。

自分の顔写真を使うのか、イラストにするのか
サイト全体で共通するキャラクターを用意するのか
お客様役、講師役など、複数パターンのアイコンを用意するのか

よくある選択肢は、例えば次のようなものです。

商用利用可能なフリーイラストサイトから探す（利用規約を確認）
イラスト制作サービスでオリジナルアイコンを依頼する
自分でイラストアプリを使って描く
シンプルなシルエットアイコンで統一する

最初はフリー素材でも十分ですが、ブログやサービスに個性を出したくなってきたら、オリジナルアイコンに切り替えると一気にブランド感が出ます。画像サイズは、正方形で少し余白を残しておくと、丸型アイコンにも対応しやすくて便利です。

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐその秘密を見る

Lightningの吹き出しの基本的な使い方と設定手順

ごとう

ここからは、実際にLightningで吹き出しをどのように挿入して、どんな項目を設定していくのかを、ステップ形式で解説します。ブロックエディターの画面を思い浮かべながら読み進めてみてください。

ブロックエディターで吹き出しを挿入する基本手順

まずは、Lightningで吹き出しを挿入する、一番シンプルな手順です。流れとしては、通常の段落ブロックを追加するときと大きくは変わりません。

投稿または固定ページの編集画面を開く
本文エリアで「＋」ボタンをクリックする
「VK」や「VK Blocks」といったカテゴリーを探す
その中から「吹き出し」またはそれに近い名称のブロックを選ぶ
ページに追加された吹き出しブロックの中にテキストを入力する

イメージしやすいように、操作の流れを表にまとめます。

ステップ	操作	画面上のポイント
1	投稿・固定ページを開く	ブロックエディターで編集画面を開く
2	「＋」ボタンを押す	本文内または左上の「＋」ボタン
3	ブロック一覧からVK系のカテゴリーを選ぶ	カテゴリー表示で「VK」「VK Blocks」などを探す
4	「吹き出し」系ブロックをクリック	名前が似たブロックと間違えないように注意
5	追加された吹き出しに文章を入力	プレースホルダーの文章を上書きする
6	右側の設定パネルでデザインを調整	位置・色・アイコンなどをここで変更

この段階では、細かい見た目よりも「一度表示できるようにする」ことを優先して大丈夫です。細かな調整は、次の項目でまとめて行っていきます。

吹き出しの位置・幅・タイプを設定する

Lightningの吹き出しの良さは、位置や形をある程度自由に調整できる点です。ここでは、よく使う設定項目と、おすすめの使い分けを整理します。

設定項目	主な選択肢	おすすめの使い方
位置	左・右	話し手Aを左、話し手Bを右に固定する
幅	自動・100%	基本は自動、強調したいときだけ100%を使う
タイプ	標準の吹き出し・雲のような形など	通常は標準、独り言や心の声は柔らかい形にする
枠線	あり・なし・太さ調整	メインの会話は枠線ありにすると読みやすい
背景色	色の設定	サイトのテーマカラーやグレー系でまとめる
角丸や影	数値やオン・オフ	角丸＋うっすら影でやわらかい印象にする

特に位置については、最初にルールを決めておくと迷いません。「このキャラはずっと左」「このキャラは右」というように固定しておくと、読者も誰の発言かを直感的に理解できます。

アイコンと名前・テキストを設定する

吹き出しを見た瞬間に「誰のセリフか」が分かるようにするには、アイコン画像と名前のセットが欠かせません。

アイコン画像を設定する
アイコンの形（丸・角丸・四角など）を選ぶ
名前欄に「店長」「初心者Aさん」など役割が伝わる名前を入れる
テキスト欄に会話文を入力する

名前を「私」や「筆者」だけにしてしまうと、読者の頭の中でキャラクターが分かれにくくなります。例えば、次のような組み合わせにしておくと、ストーリーが想像しやすくなります。

私（運営者）
初心者ブロガーAさん
すでに成果が出ている上級者Bさん
お客様役（30代男性、主婦などのイメージ）

アイコンと名前の組み合わせは、一度決めたらメモに残し、記事をまたいで統一するのがおすすめです。毎回雰囲気が違うと、読者の印象にも一貫性が出にくくなってしまいます。

Lightningの吹き出しのアニメーションと細かい設定

テーマやブロックプラグインのバージョンによっては、吹き出しにささやかなアニメーションを付けられる場合があります。例えば、少し揺れるような動きや、強調して見せる動きなどです。

アニメーションは目を引く一方で、多用すると落ち着かない印象になりやすいので、使い方のバランスが大切です。次のような感覚で調整してみてください。

基本はアニメーションなしで十分
特に読んでほしい一言だけ、軽く動きを付ける
1画面に動く吹き出しは1つまでにする
実際の表示をプレビューしながら、不自然に感じないか確かめる

アニメーションの種類や有無は、テーマやプラグインの更新で変わることもあるので、管理画面の表示を確認しながら、自分のサイトに合う範囲で取り入れてみてください。

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

センスが必要
文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

Lightningの吹き出しをおしゃれに見せるデザインのコツ

ごとう

ここでは、Lightningの吹き出しを「とりあえず出せた」状態から、「おしゃれで読みやすい」状態にレベルアップさせるコツを紹介します。難しいデザイン理論ではなく、すぐ真似できるポイントに絞ってお伝えします。

色とコントラストの決め方

【稼げるキーワード教えます】
▼　　▼　　▼

吹き出しのデザインでまず意識したいのは「色の数」と「文字の読みやすさ」です。色選びで迷ったときは、次のような考え方をベースにすると整いやすくなります。

サイト全体のメインカラーを1つ決める
吹き出しの背景は、メインカラー＋グレー系でまとめる
文字色は濃いめの黒〜濃いグレーで統一する
背景色と文字色のコントラストをしっかり付ける

イメージしやすい組み合わせを、いくつか例として挙げておきます。

吹き出しの背景色	文字色	印象
薄い水色	濃いグレー	読みやすく、やさしい雰囲気
薄い黄色	濃いグレー	注意喚起やポイント説明に向いている
薄いグレー	黒	ベースの会話に使いやすい
白	黒	シンプルでビジネス系サイトにも合う

色を使いすぎると、どこが重要なのか分からなくなってしまいます。「基本は1〜2色＋グレー」でまとめて、特に見せたい部分だけアクセントカラーを入れるくらいがちょうど良いです。

会話の長さとレイアウトのバランス

Lightningの吹き出しは便利ですが、1つの吹き出しに長文を詰め込みすぎると、かえって読みにくくなります。私が意識しているポイントは次の通りです。

1つの吹き出しは2〜3行程度に収める
長い説明は、吹き出し＋通常の本文を組み合わせる
会話のキャッチボールは、3〜4往復くらいで一度区切る
吹き出しが続く場合は、途中で見出しや画像を挟む

ざっくりとした目安を表にすると、次のようなイメージです。

項目	目安	理由
1吹き出しの行数	2〜3行	視線の往復が少なく読みやすい
連続する吹き出し数	4〜6個	会話として十分なボリューム
吹き出しと本文の割合	おおよそ半々	読みやすさと情報量のバランスが取りやすい
画像を挟むタイミング	1画面に1つ程度	単調さを防ぎつつ、重くしすぎない

「全部を吹き出しで説明しよう」とすると、ページがごちゃごちゃしてしまいます。イメージしてほしい場面や、読者の気持ちを描写したい場面だけを会話形式にするのがおすすめです。

吹き出しテンプレートをパターン化する

毎回ゼロからLightningの吹き出しを設定するのは、正直かなり手間です。そこで、よく使うパターンはあらかじめ決めておき、再利用ブロックやブロックパターンとして登録しておくと作業が一気に楽になります。

例えば、次のようなテンプレートを用意しておくと便利です。

「筆者と読者」の会話テンプレート
「お客様と店長」の会話テンプレート
「質問と回答」のFAQテンプレート

テンプレート化しておくと、見た目の統一感も生まれます。どの記事を開いても、「あ、このキャラ知っている」と読者に感じてもらえると、安心感や親近感につながります。

★ブログでは公開できない裏情報★

私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。

例えば、

実際に10万稼いだキーワード
今やるべきおススメ広告

などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。

⇒あっさり10万稼ぐためのメルマガ

Lightningの吹き出しの活用アイデア集

ごとう

ここでは、Lightningの吹き出しをどんな場面で使うと効果的かをケース別に紹介します。「どこに吹き出しを入れれば良いか分からない」という人は、まずここで紹介するパターンから試してみてください。

ブログの導入部分を会話で始める

ブログ記事の冒頭は、読者が「読むか・離脱するか」を決める重要なポイントです。ここでLightningの吹き出しを使い、「悩んでいる読者」と「解決策を持っている私」の会話を見せると、一気に引き込むことができます。

例えば、次のような流れです。

読者役の吹き出しで、よくある悩みをそのまま書く
私の吹き出しで、「分かります」と共感しつつ解決の方向性を少しだけ見せる
読者役の吹き出しで、「それなら知りたいです」と前向きな一言を入れる

導入部分でこのような会話を入れてから、本格的な説明に入ると、「自分のための記事だ」と感じてもらいやすくなります。実際、私もこのパターンに変えてから、スクロールが明らかに増えました。

FAQ・Q&AページにLightningの吹き出しを使う

よくある質問のページは、どうしても堅くなりがちです。そこで、質問者と回答者の会話形式にすると、ぐっと読みやすくなります。

質問者の吹き出し：読者が抱えがちな不安や疑問
回答者の吹き出し：専門家としての私の答え
必要に応じて、補足説明を通常の本文や箇条書きで追加

特に、料金や契約、サポート内容など、人によって不安を感じやすいテーマほど、やわらかい会話形式と相性が良いです。「こんな聞き方をしてもいいんだ」と思ってもらえるだけで、問い合わせのハードルも下がります。

商品紹介・サービス案内での活用

商品やサービスを紹介するとき、スペックや特徴だけを並べても、なかなか魅力が伝わりません。そこで、「悩んでいるお客様」と「それを提案する私」の会話にしてみると、使っているシーンが具体的にイメージしやすくなります。

例えば、次のようなイメージです。

お客様役：「時間がなくてブログ更新が続きません…」
私：「吹き出しのテンプレートを用意しておくと、文章を考える負担が減りますよ。」
お客様役：「それなら私にも続けられそうです！」

このようなやり取りをLightningの吹き出しで見せることで、読者は「自分が使うとしたら？」と自然に想像しやすくなります。

Lightningの吹き出しがうまく表示されないときの対処法

ごとう

ここでは、Lightningの吹き出しでありがちなトラブルと、私が実際によく行っているチェック方法をまとめます。「設定はしたはずなのに、なぜか変だ」というときは、慌てずに一つずつ確認していきましょう。

吹き出しブロックが見つからない・追加できない

吹き出しブロックそのものが見つからない場合、次のような原因が考えられます。

対応するブロックプラグインがインストールされていない
インストールされているが、有効化されていない
ブロックの検索窓に入れているキーワードが合っていない

チェックの流れをざっくり整理すると、次のようになります。

プラグイン一覧で、VK Blocksなどのブロックプラグインが有効になっているか確認する
ブロックの検索窓で「吹き出し」「フキダシ」「VK」など、ひらがな・カタカナ・アルファベットのパターンを試す
プラグインの設定画面がある場合は、吹き出し系ブロックがオフになっていないか確認する

ブロック検索は入力した文字にかなり敏感なので、「ふきだし」「フキダシ」など、表記違いも試してみると見つかりやすくなります。

レイアウト崩れ・スマホ表示が変なとき

パソコンではきれいに見えるのに、スマホでLightningの吹き出しが崩れてしまうこともあります。その場合は、次のようなポイントを見直してみてください。

吹き出しの幅を100%にしすぎていないか
左右の吹き出しを詰め込みすぎていないか
ブロック同士の余白（マージン・パディング）が極端に少なくないか
複雑なカラムレイアウトの中に吹き出しを入れすぎていないか

おおまかな対処の方向性を表にまとめると、次のようになります。

状況	原因の例	対処の方向性
スマホで左右がギチギチに見える	幅の設定が広すぎる	幅を自動に戻すか、少し狭める
吹き出し同士がくっついて見える	余白の設定不足	ブロック間に余白を入れる、スペーサーブロックを使う
文字が小さくて読みにくい	フォントサイズの指定が小さすぎる	モバイル表示向けに少し大きめのサイズを指定する
カラム内で崩れてしまう	レイアウトが複雑になりすぎている	一度カラムから出し、単純な配置で試してみる

特にスマホ表示をチェックするときは、自分のスマホだけでなく、ブラウザのプレビュー機能も活用して、画面幅を変えながら確認すると安心です。

★初心者さん必見★

「あと3ヶ月早くこの情報を知りたかった…」

そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。

無料で読めるうちに受け取っておいてください。

⇒あっさり10万稼ぐためのメルマガ

よくある質問（FAQ）

ごとう

Lightningの吹き出しについてよく聞かれる質問を、簡単なQ&A形式でまとめます。同じような疑問を持っている方は多いので、気になるものがあればチェックしてみてください。

Q1. Lightningの吹き出しはプラグインなしでも使えますか？

A1. テーマだけでも似たレイアウトを作ることはできますが、一般的にはLightningと相性の良いブロックプラグインを一緒に使う方が便利です。専用の吹き出しブロックを使うと、位置やアイコン、デザインの調整がしやすく、結果的に作業時間の短縮につながります。

Q2. Lightningの吹き出しを入れすぎるとSEO的に良くないですか？

A2. Lightningの吹き出しそのものが直接SEOに悪影響を与えることは、あまり気にしなくて大丈夫です。ただし、吹き出しばかりで本文のテキストが少なかったり、会話が長すぎて本題になかなか入らなかったりすると、読者が途中で離脱しやすくなります。目安としては、通常の本文と吹き出しのバランスをおおよそ半々くらいにして、重要なポイントを会話で補足するイメージがおすすめです。