SWELLふきだしブロックの使い方｜豊富な機能でおしゃれなデザインに！

「ふきだしを設定したい」

「ふきだしのおすすめな活用方法は」

「ふきだしアイコンの推奨サイズを教えて」

この記事では、そんな方に向けて、SWELLでふきだしブロックの使い方を解説します。

ふきだしブロックとは…セリフを話すアイコンを表示できるSWELL専用カスタムブロック

この記事を読めば、あなたも簡単に

• よく使うふきだしを登録できる
• ふきだしブロックの使い方が分かる
• ふきだしに適したアイコンサイズが分かる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、おしゃれなデザインのふきだしを使って自分の意見や感想を伝えることができています。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

SWELLふきだしブロックでできること3選

SWELLのふきだしブロックでは以下のようなことができます。

それぞれ詳しく解説します。

ふきだしの色やスタイルなどをカスタマイズできる

SWELLのふきだしブロックは、以下の8項目でカスタマイズできます。

当ブログのふきだしをカスタマイズすると、以下のようなものができますよ。

よく使うふきだしを複数登録できる

SWELLではよく使うふきだしを複数登録することができます。

登場人物を2人以上使いたいときは始めから設定し直す必要がなく、すぐに呼び出すことができるので非常に便利ですよ。

アイコン下に名前を表示できる

SWELLのふきだしブロックでは、アイコン下に名前を表示することができます。

ユーザーに名前を憶えてもらって、氏名検索されるようになると嬉しいですね。

SWELLふきだしブロックの使い方とカスタム設定9つ

SWELLのふきだしブロックの使い方はSWELL公式サイトでもまとめられているが、本記事ではより詳しく紹介します。

公式：①SWELLのふきだしブロックの使い方｜②管理も簡単！SWELLのふきだし機能の使い方

ちなみに、ふきだしブロックは以下2つの方法からも呼び出せます。

自分の好きな方法で呼び出しましょう。

ふきだしブロックで設定可能な項目は9つあります。

それぞれ詳しく解説します。

ふきだしセットの登録や編集をする

SWELLのふきだしブロックで呼び出したいふきだしを登録・編集できます。

上の画像にある「ふきだし管理ページ」のテキストリンクをクリックすると、ふきだしを登録・編集できるページへ移動します。

表示されたページの新規ふきだし追加をクリックすると、ふきだしセットを登録・編集できるページへ移動します。

ここで設定できる項目は以下の8つです。

カスタマイズし終えたら、ふきだしセットのタイトルを入力して登録ボタンをクリックしましょう。

これでふきだしセットの登録完了です。

登録したふきだしセットは、以下の2ヶ所で確認できますよ。

なお、登録したふきだしセットは後から編集したり、別のふきだしセットを複数作ったりできますよ。

色をカスタマイズする

SWELLのふきだしブロックにあるセリフの背景と枠の色を設定できます。

以下にあるセリフの背景と枠の色はデフォルトで、設定できる色は5種類あります。

色の設定は、上の画像にある「SWELL設定」のテキストリンクをクリックして行いましょう。

移動したページ内にある「ふきだしカラー」に5つのカラーセットがあります。

それぞれ「背景」と「ボーダー」をクリックして色を設定しましょう。

色を設定する方法は以下の2通りあります。

カラーピッカーとは…画面上に表示された色を選択することで、その色を文字色や背景色に使うことができる機能のこと

カラーコードとは…色を数字やアルファベットなど文字の羅列で表した符号のこと

カラーコードが分からない…カラーコードの調べ方が分からない…という人はGoogle Chromeの拡張機能「ColorPick Eyedropper」を使うとかんたんに調べられますよ。

_{＼クリックで開く／}

ふきだしの形を選ぶ

SWELLのふきだしブロックで、ふきだしの形を以下の2通りから選ぶことができます。

ふきだしを1種類しか使わない場合は形を1つに統一し、ふきだしを2種類以上使う場合はお好みで設定するといいですね。

ふきだしの向きを選ぶ

ふきだしの向きを左側 or 右側で選ぶことができます。

基本、ふきだしの位置は左側がおすすめです。

なぜなら、文章は左側から右側に読まれるからです。

ふきだしの位置を左側にした場合、

• 「誰が？(アイコン)＝主語」
• 「何を言う？(セリフ)＝述語」

の順番になり、スムーズに理解できるでしょう。

ふきだしの線の有無を決める

SWELLのふきだしブロックでは、以下のようにふきだしの線の有無を設定できます。

線なしと比べて、線ありではふきだし内のテキストが強調されますね。

アイコンの丸枠の有無を決める

ふきだしアイコンの丸枠の有無を設定できます。

個人的に、枠があったらアイコンの邪魔になるので、枠なしがおすすめです。

スマホ表示でテキストとアイコンの並びを選ぶ

SWELLのふきだしブロックでは、スマホ表示でのテキストとアイコンの並びを変えることができます。

PCと比べてスマホは画面が小さいので、横並びにするとふきだし内のテキストが複数行に分かれて表示されてしまいます。

縦並びにすれば、横に表示できる文字数が増えるので、行数を抑えることができますよ。

アイコン下に表示する名前を入力する

SWELLのふきだしブロックでは、アイコン下に表示する名前を設定できます。

以下のように当ブログの著者名である「かめコンパス」や「著者」と表示させることもできますよ。

アイコン画像を選ぶ

ふきだしのアイコン画像を設定できます。

メディアから選択をクリックして、アイコンに設定したい画像を選びましょう。

アイコンの推奨サイズが幅200×高さ200pxの理由や画像サイズの変更方法は、後ほど詳しく解説します。

【実例】SWELLふきだしブロックのおすすめな活用例4つを紹介

当ブログで使用しているSWELLのふきだしブロックのおすすめな活用方法を4つ紹介します。

それぞれ詳しく解説します。

自分の意見・感想・感情を伝える

ふきだしを使うことで、自分の意見や感想、感情をユーザに伝えることができます。

もしふきだしを使わないと他の文章と自分の意見や感想、感情がごちゃ混ぜになって、読みずらい文章になります。

ですので、他の文章との区別をつけるためにふきだしを使いましょう。

また、ふきだしを使うことで著者本人が話しかけているような感覚を与えてくれて、よりユーザーの心に響きますよ。

ユーザーの意見や疑問を代弁する

あなたも他の記事を読んでいる中で「これはどういう意味だろう…」と疑問に思ったことがあると思います。

そんなときはふきだしを使って、ユーザーが今思い浮かんだ意見や疑問を代弁しましょう。

吹き出しに代弁してもらうことで、「私も同じ疑問を感じた！私の気持ちをよく理解してくれてる！」と信頼感を得ることができますよ。

2種類のふきだしを会話させる

「悩んでいる人」と「悩みを解決する人」の2種類のふきだしを会話させて、ユーザーの理解を深めることができます。

以下の例は、ふきだしを使った場合と使わなかった場合の比較です。

ふきだしを使えば会話口調で話すことができるので、読みやすくもなりますよ。

テキストだらけの表示画面を華やかにする

文字だけの記事だと読みづらく、途中で離脱したした経験がある人は多いと思います。

そんなときに、ところどころにふきだしを使うことで記事の見た目の印象が変わったり、箸休め的な効果も得られ、読みやすくなりますよ。

つまり、離脱率が低くなるでしょう。

【体験談】SWELLふきだしのアイコンサイズは200pxの正方形がおすすめ！

SWELLでふきだしに使うアイコンのサイズは、幅200×高さ200pxの正方形がおすすめです。

なぜなら、

• 大きすぎると画像が重くなり、表示速度が遅くなる
• 小さいと画像がぼやけてしまう
• 小さすぎるとスマホで見づらい

からです。

当ブログのアイコンを例に、サイズの異なるアイコンを5つ用意して、画像の重さや見やすさを比べてみました。

アイコンのサイズ幅200×高さ200pxを基準に、

ことが分かります。

ですので、ふきだしのアイコンサイズを幅200×高さ200pxにしましょう。

アイコンのサイズを変更する方法

もし利用したいふきだしのアイコン画像が推奨サイズでなければリサイズしましょう。

リサイズ方法は以下の2通りあります。

• Canva（外部サイト）※おすすめ
• ペイント（PCに元々入っているアプリ）

ちなみに、ふきだしに使うアイコン画像はプロフィールやファビコンにも使えますので、推奨サイズでそれぞれ作成しておきましょう。

Canvaでアイコンをリサイズする

ペイントでアイコンをリサイズする

SWELLふきだしブロックまとめ

今回は、SWELLでふきだしブロックの使い方を紹介しました。

当ブログでは、SWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。