選ばれるAI診断

SWELLのふきだしの使い方|登録と呼び出し、入稿を速くするコツ

公開日: / カテゴリ: WordPress入稿 / 執筆: エラバレル

SWELLのふきだしの使い方|登録と呼び出し、入稿を速くするコツ

「SWELLのふきだしを使ってみたいけれど、どこで登録するのか分からない」「記事のたびに、ふきだしを1つずつ作るのが面倒」。WordPressのテーマSWELLを使っている方から、こうした声をよく聞きます。

先に結論をお伝えします。SWELLのふきだしは、先に管理画面で「ふきだしセット」(アイコン・名前・色・向きの組み合わせ)を登録しておき、記事では「ふきだし」ブロックを置いてセットを選ぶだけで使えます。 よく使う人物を最初に登録しておけば、記事を書くときは文章を打つだけになります。

この記事では、ふきだしの登録方法、記事での呼び出し方、見やすい使い分け、よくあるトラブル、そして入稿を速くするコツまでを、順を追って説明します。Googleドキュメントで書いた原稿から、SWELLのふきだしを自動で作る方法も紹介します。

この記事でわかること

  • SWELLのふきだしとは何か、記事で使う効果
  • ふきだしセットの登録方法と、設定の項目
  • 記事でふきだしを呼び出す手順
  • 読みやすい使い分けのコツ
  • よくあるトラブルと直し方
  • 入稿を速くするコツと、原稿から自動で作る方法

SWELLのふきだしとは?

SWELLのふきだしは、人物のアイコンと、話している言葉を、マンガのふきだしのような形で表示する機能です。SWELLのブロックの一つとして用意されていて、プラグインを追加しなくても使えます。

ふきだしは、次のような場面でよく使われます。

  • 読者の疑問を代弁する(「設定が難しそう…」)
  • 筆者や専門家の一言を添える(「ここは大事なポイントです」)
  • 2人の会話の形で、むずかしい話をやわらかく説明する
  • お客さんの声や、よくある相談を紹介する

文章だけが続くと、読む人は疲れてしまいます。ふきだしをところどころに入れると、記事にリズムが生まれ、大事な一言が目に留まりやすくなります。とくにスマートフォンで読む人は、画面を流し読みしながら、目に留まったところで指を止めます。アイコンのついたふきだしは、その「止まる場所」を作るのに役立ちます。

ふきだしは「味付け」として使う

ふきだしは目立つぶん、使いすぎると記事が読みにくくなります。本文で説明したことを、ふきだしで一言まとめる、読者の気持ちを代弁して次の説明につなぐ、といった「味付け」として使うのがコツです。大事な説明そのものは、ふきだしの外の本文で書きましょう。

ふきだしが向いている記事、向いていない記事

ふきだしは、どんな記事にも合うわけではありません。

向いている記事向いていない記事
初心者向けの使い方の解説数字や条件を正確に伝える料金・規約の説明
読者の不安に寄り添う体験談やコラム手順を1つずつ追う、番号つきの操作説明の本文
商品やサービスのよくある相談の紹介会社概要やプライバシーポリシーなどの公式な情報

迷ったときは、「この一言を、本文で書くより、人が話している形にしたほうが伝わるか」を考えてみてください。そうでなければ、本文で書くほうが読みやすくなります。ふきだしは、多く使うほど効果が薄れることも覚えておきましょう。

ふきだしセットの登録方法

SWELLでは、ふきだしに使う人物の情報を「ふきだしセット」として登録しておきます。一度登録すれば、どの記事からでも呼び出せます。

登録の手順

  1. WordPressの管理画面にログインする
  2. 左のメニューにある「ふきだし」を開く
  3. 新しいふきだしを追加するボタンを押す
  4. 管理用のタイトル(例:「筆者・右」「読者・左」)を入れる
  5. アイコンの画像を選ぶ(メディアライブラリから選ぶか、新しくアップロードする)
  6. 名前を入れる(アイコンの下に表示される名前)
  7. 色・形・向きなどを選ぶ
  8. 保存する

画面の名前や並びは、SWELLのバージョンによって少し違うことがあります。左のメニューに「ふきだし」が見当たらないときは、SWELLが有効になっているか、テーマのバージョンが新しいかを確かめてください。

設定できる主な項目

項目内容選び方のコツ
アイコン画像ふきだしの横に出る人物の画像正方形の画像を用意すると、きれいに収まる
名前アイコンの下に出る名前「筆者」「店長」「お客さま」など、役割が分かる名前
色ふきだしの背景や線の色人物ごとに色を変えると、会話の区別がつきやすい
形普通の発言か、心の声(考えごと)か読者の心の中のつぶやきには「心の声」の形
向きアイコンが左か右か筆者は右、読者は左、のように固定する
線・アイコンの形枠線の有無、アイコンを丸にするか四角にするかサイト全体で統一する

登録は「人物×向き」で作っておく

同じ人物でも、左に出したいときと右に出したいときがあります。最初から「筆者・右」「筆者・左」のように、向きごとにセットを作っておくと、記事を書くときに毎回向きを変える手間がなくなります。よく使う組み合わせを最初に全部登録しておくのが、ふきだしを速く使ういちばんのコツです。

色を決めるときの考え方

ふきだしの色は、サイトの色づかいに合わせて選びます。サイトのメインの色が青なら、筆者のふきだしは青系、読者のふきだしは灰色系、のように、目立たせたい人物にサイトの色を使うと、全体がまとまって見えます。

色の濃さにも気をつけましょう。背景の色が濃すぎると、中の文字が読みにくくなります。スマートフォンの小さな画面でも読めるか、明るい場所でも見えるかを、実際の記事で確かめてから決めると安心です。ふきだしの色の細かな調整は、SWELLの設定画面でできる場合があるので、サイト全体の色を変えたときは、ふきだしの見え方もあわせて確かめてください。

アイコン画像の用意のしかた

アイコンには、筆者やスタッフの写真、イラストを使います。次の点に気をつけて用意しましょう。

  • 正方形にする:縦長や横長の画像だと、丸く切り抜いたときに顔が切れることがあります。
  • 大きすぎない画像にする:アイコンは小さく表示されるので、数百ピクセル四方あれば十分です。大きすぎる画像は、ページの表示を遅くする原因になります。
  • 使ってよい画像か確かめる:イラストを使う場合は、商用で使ってよいか、利用の条件を確かめてください。
  • altを入れる:メディアライブラリで、画像の代替テキスト(alt)に「筆者のアイコン」のように入れておきます。

記事でふきだしを呼び出す方法

登録したふきだしセットは、記事の編集画面(ブロックエディタ)で呼び出します。

  1. 記事の編集画面で、ふきだしを入れたい場所にカーソルを置く
  2. ブロックを追加する「+」のボタンを押す
  3. 検索欄に「ふきだし」と入れ、SWELLの「ふきだし」ブロックを選ぶ
  4. 画面の右側の設定(ブロックの設定)で、登録したふきだしセットを選ぶ
  5. ふきだしの中に、文章を打つ

ブロックエディタでは、空の行で「/」(半角のスラッシュ)を打ってからブロックの名前を入れると、ブロックを素早く呼び出せます。「/ふきだし」と打てば、マウスで「+」を探す手間が省けます。

セットを選んだあとでも、ブロックの設定で、その場だけ向きや色を変えることができます。ただし、記事ごとにばらばらに変えると、サイト全体の見た目がそろわなくなるので、基本はセットのまま使いましょう。

ブロックエディタの基本の操作は、WordPressのブロックエディタの使い方の記事で説明しています。

ふきだしの中の文章の書き方

ふきだしの中は、話し言葉で書きます。ただ、話し言葉といっても、くだけすぎると記事全体の印象が軽くなります。次の点を目安にしてください。

  • 筆者の台詞:本文と同じです・ます調で、少しやわらかく。「ここがいちばん大事なところです」「最初は下書きで試すと安心ですよ」
  • 読者の台詞:読者が実際に思いそうな言葉で、短く。「設定を間違えたらどうしよう…」「これって無料でできるの?」
  • 専門家の台詞:根拠のある一言だけを。言い切れないことは「〜とされています」のように控えめに

台詞の中でも、数字や手順を説明するときは、本文と同じように正確に書きます。ふきだしだから多少あいまいでもいい、ということはありません。ふきだしの中に書いたことも、読む人にとっては記事の情報の一部です。

読みやすい使い分けのコツ

人物の役割を決めておく

ふきだしを使う前に、サイトの中で誰をどう登場させるかを決めておきます。

  • 筆者(または店長・院長):説明やアドバイスをする。右側に置く。
  • 読者(または、お客さま):疑問や不安を口にする。左側に置く。
  • 専門家:専門的な一言を添える。必要なときだけ登場させる。

役割と向きが記事ごとに変わると、読む人が混乱します。サイト全体で固定してください。登場人物は、多くても3人までにしておくと、誰が話しているのかを追いやすくなります。人物を増やしたくなったら、本当にその人の言葉が必要かを考え直してみてください。

1つのふきだしは短く

ふきだしの中の文章は、1〜3文が目安です。長い説明をふきだしに入れると、ただの読みにくい枠になってしまいます。長くなりそうなら、要点だけをふきだしに残し、説明は本文に書きましょう。

続けすぎない

ふきだしが5つも6つも続くと、会話劇のようになり、記事の要点が分かりにくくなります。会話の形で説明する場合も、2〜4往復で区切り、本文でまとめを書くと読みやすくなります。

ふきだしの使い方の例

本文:アプリケーションパスワードは、WordPressのユーザーのプロフィール画面で発行します。
ふきだし(読者・左、心の声):プロフィール画面って、どこにあるんだろう…
ふきだし(筆者・右):管理画面の左のメニューの「ユーザー」から開けますよ。
本文:「ユーザー」→「プロフィール」を開き、画面の下のほうにある「アプリケーションパスワード」の欄で…

会話の形で説明するときは、先に台本を作る

2人の会話の形で記事の一部を説明するときは、いきなり編集画面でふきだしを置くのではなく、先に台本を作ります。

  1. 伝えたいことを、箇条書きで3つほど書き出す
  2. 読者が抱きそうな疑問を、1つの要点につき1つ考える
  3. 「読者の疑問→筆者の答え」の順に並べる
  4. 筆者の答えは、本文で詳しく書く内容の「要約」にとどめる

台本ができていれば、編集画面では、ふきだしを置いて文章を貼っていくだけです。会話がだらだらと続くのも防げます。読者役の台詞は、実際にお客さんから聞かれた言葉を使うと、自然な会話になります。

色は意味を持たせる

色を人物ごとに分けるだけでなく、「注意の一言は赤」「補足は青」のように意味を持たせる方法もあります。ただ、色の意味は読む人には伝わりにくいので、色だけに頼らず、言葉でも「注意してください」と書くようにしましょう。注意や補足を伝えるなら、ふきだしよりも、SWELLのキャプション付きのボックスなどの枠を使うほうが分かりやすいこともあります。

よくあるトラブルと直し方

困りごと主な原因直し方
アイコンが表示されない画像が削除された、画像のURLが変わったふきだしセットで画像を選び直す
アイコンの顔が切れる画像が正方形でない正方形に切り抜いた画像に差し替える
向きが思っていたのと逆選んだセットの向きが違う、ブロックで個別に変えているセットを選び直すか、ブロックの設定を確かめる
ふきだしが表示されなくなったテーマをSWELLから変えたふきだしはSWELLの機能なので、ほかのテーマでは表示されない
スマートフォンで読みにくいふきだしの文章が長い文章を短くし、説明は本文に移す

テーマを変えると、ふきだしは表示されなくなる

SWELLのふきだしは、SWELLのブロックです。将来ほかのテーマに乗り換えると、ふきだしは正しく表示されなくなり、中の文章が崩れて見えることがあります。テーマを変える予定があるなら、ふきだしを使いすぎず、大事な説明は本文に書いておくと、乗り換えのときの手直しが少なくて済みます。

入稿を速くするコツ

ふきだしを多く使う記事は、入稿に時間がかかりがちです。次の工夫で、手間を減らせます。

1. よく使う組み合わせを「パターン」にする

「読者の疑問→筆者の答え」のように、決まった組み合わせでふきだしを使うことが多いなら、WordPressのパターンの機能で、ブロックの組み合わせを保存しておけます。ブロックを選んで、ブロックのメニューからパターンとして保存すれば、次からは呼び出すだけで使えます。

2. 原稿での書き方を決めておく

ライターに外注している場合は、原稿の中でふきだしをどう指定するかを決めておきます。たとえば「【ふきだし:筆者】ここに台詞」のように書いてもらえば、入稿する人が迷わずにブロックを置けます。執筆のルールの作り方は、ライター向けの執筆マニュアルのテンプレートの記事で説明しています。

3. まず下書きで入れて、プレビューで確かめる

ふきだしは、編集画面とプレビューで見え方が少し違うことがあります。スマートフォンでの見え方も含めて、下書きの段階でプレビューを確かめてから公開しましょう。

4. ふきだしセットの管理用タイトルを分かりやすくする

ふきだしセットが増えてくると、ブロックの設定でセットを選ぶときに、どれがどれだか分からなくなります。管理用のタイトルは「筆者・右・通常」「筆者・右・心の声」「読者・左」のように、人物・向き・形が分かる名前にしておくと、選び間違いが減ります。複数の人で記事を書いているサイトでは、名前の付け方のルールを共有しておきましょう。

5. ほかの枠と使い分ける

SWELLには、ふきだしのほかにも、キャプション付きのボックスや、アイコン付きの枠など、本文を目立たせる部品がいくつもあります。人物の言葉として伝えたいならふきだし、注意や補足をまとめて見せたいならボックス、と役割を分けておくと、入稿のたびに「どれを使うか」で迷わずに済みます。原稿の段階で、どの部品を使うかを指定しておけば、入稿する人は指示どおりに置くだけになります。

原稿の段階で「部品」を決めておく

入稿に時間がかかる原因の多くは、編集画面で「ここはふきだしにしようか、ボックスにしようか」と考えることにあります。書く段階で部品を決め、原稿に書いておけば、入稿は機械的な作業になります。外注のライターにも、使ってよい部品の一覧を渡しておきましょう。

原稿から自動でふきだしを作る方法

Googleドキュメントで原稿を書いている場合、入稿のたびにふきだしのブロックを1つずつ置き直すのは手間がかかります。手作業で入稿する場合の流れは、GoogleドキュメントをWordPressの記事に変換する方法の記事で説明しています。

この作業を自動にしたい方には、私たちが作っている「ドクポス」というウェブサービスもあります。GoogleドキュメントのURLを貼ると、WordPressに記事を作るサービスで、原稿の本文に次のように書いておくと、SWELLのふきだしになります。

[吹き出し 名前=太郎 位置=右]ここに台詞を書きます。[/吹き出し]

ドキュメントの先頭に「テーマ:swell」と書いておくと、SWELL向けに変換されます。同じように、[ボックス 種類=注意 タイトル=…]〜[/ボックス] と書けばSWELLのボックスに、[目次] と書けば目次のショートコードになります。見出し・表・画像・蛍光ペンなども、WordPressのブロックに変換され、画像はメディアライブラリにアップロードされた状態で入ります。

文章をAIで書き換えることはなく、原稿のとおりに変換します。5記事まで、カード登録なしで試せます。Cocoonのふきだしにも対応していて、Cocoonでの使い方はCocoonの吹き出しの使い方の記事で説明しています。

ふきだしと、検索・AIの関係

ふきだしの中の文章も、ページの本文の一部として、検索エンジンやAIに読まれます。ただし、会話の形の文章は、話し言葉が多く、結論がどこにあるのか分かりにくくなりがちです。

検索やAIに内容を正しく伝えるには、次の点に気をつけましょう。

  • 見出しのすぐ下には、ふきだしではなく本文で、結論を1〜2文で書く
  • 大事な情報(手順、数字、条件)は、ふきだしの中だけに書かない
  • ふきだしは、本文の内容を補うものとして使う

SWELLのふきだしを使う前のチェックリスト

  • よく使う人物を、向きごとにふきだしセットとして登録した
  • アイコン画像は正方形で、使ってよい画像である
  • 人物の役割と左右の向きを、サイト全体で決めた
  • 1つのふきだしは1〜3文に収めている
  • 見出しの直後や大事な説明は、ふきだしではなく本文で書いている
  • 下書きのプレビューで、スマートフォンの見え方を確かめた

よくある質問

ふきだしセットは、いくつまで登録できますか?

必要な数だけ登録できます。ただ、数が多すぎると、記事を書くときに選ぶのが大変になります。よく使う人物と向きの組み合わせに絞り、管理用のタイトルを分かりやすく付けておきましょう。

登録したふきだしの画像を変えると、過去の記事も変わりますか?

ふきだしセットを選んで置いたふきだしは、多くの場合、セットの変更が過去の記事にも反映されます。ただし、ブロックの設定で個別に画像を変えている場合は、その記事だけ元のままになることがあります。変更したあとは、いくつかの記事で表示を確かめてください。

ふきだしの中に、リンクや太字は使えますか?

使えます。ふきだしの中の文章も、普通の段落と同じように、太字やリンクを付けられます。ただし、ふきだしの中に情報を詰め込みすぎないようにしましょう。

クラシックエディタでも、ふきだしは使えますか?

SWELLのふきだしは、ブロックエディタで使うことを前提にした機能です。クラシックエディタを使っている場合は、ブロックエディタに切り替えることをおすすめします。エディタの違いはブロックエディタとクラシックエディタの違いの記事で説明しています。

ふきだしを使うと、検索の評価は上がりますか?

ふきだしを使うこと自体が、検索の評価を上げるわけではありません。読みやすさが上がれば、読む人にとって役立つ記事になりますが、大事な情報は本文に書くことを忘れないでください。

ふきだしを、ほかの記事にコピーして使えますか?

使えます。ふきだしのブロックを選んでコピーし、別の記事に貼り付ければ、同じ設定のふきだしを使えます。よく使う組み合わせは、パターンとして保存しておくと、コピーする手間も省けます。

自分の写真を使うのが不安です。

イラストや、顔の写っていない写真を使ってもかまいません。大事なのは、記事の中で同じ人物のアイコンを使い続けることです。筆者のプロフィールのページにも同じアイコンを使うと、誰が書いているのかが読む人に伝わりやすくなります。

まとめ

SWELLのふきだしの使い方と、入稿を速くするコツをまとめます。

この記事のまとめ

  • SWELLのふきだしは、管理画面の「ふきだし」でセットを登録し、記事では「ふきだし」ブロックでセットを選んで使う
  • セットは「人物×向き」で作っておくと、記事を書くときに迷わない
  • 人物の役割と左右の向きはサイト全体で固定し、1つのふきだしは1〜3文に収める
  • テーマを変えるとふきだしは表示されなくなるので、大事な説明は本文に書く
  • パターンの保存や、原稿での書き方の決まりで、入稿の手間を減らせる
  • Googleドキュメントの原稿から、SWELLのふきだしを自動で作る方法もある

Googleドキュメントの原稿を、ふきだし・ボックス・表・画像ごとSWELLの記事にしたい方は、ドクポスを試してみてください。5記事まで、カード登録なしで試せます。

ドクポスを無料で試す

参考にした資料