クエスト12：reCAPTCHAとContact Form7の設定でサイトを鉄壁に！
jinlab
JIN:Rクエスト
クエスト3：吹き出しで読みやすい会話形式の記事を作ろう
jinlab
記事内に商品プロモーションを含む場合があります
ブログの記事って、ただ文章が並んでいるだけだと、どうしても読みにくく感じませんか？
そんなときに役立つのが 「吹き出し」。
吹き出しを使えば、登場人物の会話のように文章が進むので、内容がスッと頭に入ります。
しかも、文章に表情や感情が加わるので、読み手との距離もぐっと縮まります。
この記事では、初心者でも迷わずできる吹き出しの作り方と、会話形式で読みやすくするコツをやさしく解説します。
あなたの記事をもっと楽しく、もっと読まれるものにしていきましょう。
目次
今日のゴール
今回のクエストで目指すのは、この3つです。
今日のクエストの目的は？
- 吹き出しのデザインをカスタマイズしてみること
- 吹き出しブロックの使い方を覚えること
- 会話形式で読みやすく記事を組み立てること
これができれば、あなたの記事は“ただの説明文”から“親しみやすく伝わる記事”にレベルアップ！
いきなり完璧を目指す必要はありません。
まずは、「吹き出しで会話を入れる」感覚をつかんでいきましょう。
吹き出しカスタマイズ方法
吹き出しは、記事の雰囲気や読みやすさを大きく左右する重要な要素です。
JIN:Rでは、吹き出しのデザインや色、アイコン画像を自由にカスタマイズできるので、自分のブログの雰囲気やキャラクターに合わせて整えておきましょう。
カスタマイズを開こう
左メニュー「外観」＞「カスタマイズ」をクリックする。
吹き出しの設定画面を開く
カスタマイズ内の「吹き出し」をクリックする。
吹き出しを作成
一覧の中から「吹き出し1」をクリックします。
キャラクターの設定
- キャラクター画像設定：推奨サイズ【150 × 150】。写真やイラストでOK。
- キャラクター名：会話の話者を区別できる名前を入力。
吹き出し部分の設定
吹き出しのタイプ
- ノーマル
- こころの声（点線の吹き出し）
- インタビュー（名前欄付き）
色の設定
最初は、吹き出しの背景色だけ変更してみましょう。
色を変えるだけでも印象は大きく変わります。
- キャラクター画像の枠色：サイトデザインに合わせる
- 吹き出しの背景色：文字が読みやすいコントラストを意識
- 吹き出しの枠色：背景色と同系色やアクセントカラーを使用
色選びのヒント
最初の吹き出しカスタマイズでは、以下のような色がおすすめです。
- ghostwhite（#f8f8ff）：白に近い柔らかな印象
- azure（#f2fdfd）：淡く透明感のあるブルー
- ivory（#fffcf0）：やさしく温かみのあるアイボリー
- cherry-blossom（#fff5fa）：桜の花びらのような淡いピンク
- pale-purple（#f1f1fe）：ほのかな紫で上品な印象
背景色は濃くしすぎると文字が読みにくくなるため、彩度を少し落とした色を選ぶと、長時間見ても疲れにくくなります。
詳細設定
- レイアウト：左向き or 右向き
- 全体の枠の太さ：好みに合わせて調整
吹き出しの登録名を変更
- 登録名をわかりやすいものに変更
（例：「女性キャラ左」「男性キャラ右」） - 記事作成時に選びやすくなります
保存する
設定が終わったら「公開」ボタンをクリックして保存します。
ポイント
JIN:Rでは最大10種類まで吹き出しを設定できます。
複数のキャラクターや色パターンを事前に作っておくと、記事作成がぐっと楽になります。
吹き出しブロックの使い方を覚えよう！
ブログ記事を書くときに役立つのが、「吹き出しブロック」。
これを使いこなせるようになると、会話形式で読みやすく、親しみやすい記事が書けるようになります！
ブロックを追加
まず、投稿画面を開きましょう。
そこで画面の「＋」ボタンを押します。
吹き出しブロックを選択する
検索バーに「吹き出し」と入力すると、JIN:Rの吹き出しブロックが表示されます。
そこから「吹き出し」をクリック。
吹き出しの種類を選ぶ
登録済みの吹き出し一覧から「キャラクター」を選びます。
（最大10種類まで登録済みの中から選べます）
文章を入力する
吹き出し内に、表示したいセリフやコメントを入力します。
1〜2行程度にまとめると、読みやすくテンポの良い会話になります。
吹き出しは、ただの説明文を“会話のあるストーリー”に変えてくれる魔法のツールです。
まずは1つ使ってみて、その効果を実感してみましょう！
読まれる記事にするための「吹き出し」の工夫
吹き出しは、こんなシーンで効果的です。
- 会話形式で説明（例：「初心者」×「経験者」のやり取り）
- Q&A形式（読者の疑問に答える）
- ストーリー展開（キャラ同士の掛け合いで情報を伝える）
使用例
吹き出しって、どうやって入れるの？
記事の編集画面で “＋” ボタンを押して『吹き出し』を選ぶだけですよ！
こうすると、ただ説明するよりも読みやすく、感情も伝わりやすくなります。
よくあるミスと対処法
- 吹き出しを登録しているとカスタマイズから変更するとすべての投稿に反映される
-
登録済みの吹き出しをカスタマイズ画面で変更すると、その吹き出しを使っているすべての記事に自動で反映されます。
全体のデザインを統一できる反面、記事ごとに違う見た目にしたい場合は注意が必要です。
Q
- 背景色と文字色の組み合わせに注意
-
背景色と文字色のコントラストが低いと、読みづらくなります。
特にパステルカラーや淡い色を背景にする場合は、文字色を濃くするなど調整しましょう。
Q
まとめ｜今日の成果を振り返ろう！
今回のクエストでは、吹き出しの基本操作からデザインのカスタマイズ、記事への挿入方法まで一通りマスターしました！
成果を振り返ろう！
- JIN:Rで吹き出しを登録・変更する方法がわかった
- 記事に吹き出しブロックを挿入できるようになった
- 吹き出しの使い方を理解できた
吹き出しを意識して入れるだけで、「ただの説明文」が「会話のある読みやすい記事」にレベルアップします。
最初から完璧を目指さなくても大丈夫。まずは1つ、記事に吹き出しを入れて会話風にしてみましょう！
ABOUT ME
デザイン初心者でも、おしゃれなブログやホームページは作れます！
JIN:Rを使ったWeb制作の手順や、見た目を整えるコツを発信中。
難しい操作や専門用語はできるだけかみくだいて解説。
「自分でサイトを作りたい」と思ったあなたの最初の一歩を応援します。
