ゆるふわイラストでわかる!ブログの作り方→

noteの吹き出し装飾のやり方|画像とCanvaで「編集画面で文字変更可能」な方法【動画あり】

にっきー

まいどです!にっきーです。

にっきーは普段、基本的にWordPressで記事を書いています。 ただ、「ブログをいきなり作るのはちょっとハードルが高い」という方が時々、にっきーに「note(ノート)を使ってまずは文章を練習したい」と話してくれることがあります。

 

ちょっと前の「アメブロ」みたいに、気軽に文章を書けるツールとして捉えると、noteはかなり優秀です。

 

AdSenseやアフィリエイトで稼ぐつもりはないけど何か記事を書きたい」「定期的に更新するつもりはないけど、2〜3個だけ発信したいことがある」という人になら、noteを進めるかも?と思いました。

にっきー

ブログを教えている以上、「触ったことない」なんて恥ずかしくて言えない!

そう思ったにっきーは、noteを触ってみることにしました

 

しかし、操作してみると…WordPressよりも自由度が低く、できる装飾の数がかなり少ないことが分かりました。(だからこそ操作が簡単なわけでもありますが…)

特ににっきーがショックだったのは「吹き出し装飾ができない」ということです。

htmlタグでなんとなかるならいいのにね

アドさん

にっきー

htmlで無理やり解決するのもちょっと難しそうだなと思いました…

 

 

そこで、今回は、にっきーがおすすめする「noteでできる吹き出し装飾」のやり方をご紹介します!

 

noteでできる基本の装飾は?

 

note(ノート)はその名の通り、web上のノート的な役割を狙いとして作られています。

その特性上、WordPressのようなボックス装飾はできません。画像と文章、そして簡単な見出し装飾と太字・リンク・引用くらいしか、飾る方法はありません。

にっきー

具体的にイメージしてもらうべく、基本の装飾を紹介しますね!

 

見出し装飾

 

noteにも、Wordのような基本の見出し装飾があります。

こんな感じで、文字が太字になり、大きさも本文よりも2周りくらい大きくなります。

ただ、WordPressのように見出しの大きさが選べるわけではありません。ワンサイズです。

見出しに大きい小さいもないわ!見出しといったら見出しなんじゃい!…ってことだね。

アドさん

「見出し」にしたものは、目次を導入するときに目次項目に自動的に含まれることになります。目次になるということも考慮して設定しましょう

 

 

太字で強調

 

noteには、本文を太字にする機能もあります。

B(Bold)というマークで「強調」という名前がついているのが、太字変換です。

太字の装飾は、本文の途中でも取り入れることができます。「この単語だけ太くしたい」という場合はもちろん、「この文章はすべて太字にしたい」ということも可能です。

ただ、フォントがもともとあまり繊細ではないものなので、「強調(太字)」を利用しても、そこまで強く目立たない印象を受けました。

にっきー

太字にするのと同時に、改行をうまくつかうのも大切になりそうだね。

 

 

引用のグレー枠

 

どこかのwebサイトや書籍などから文章を引用したことがわかりやすいように、ということで用意されているのが「引用」の機能です。

装飾としては、うすいグレーのベタ塗りのボックスができます。

 

本文よりも若干小さい文字です。

本来は「引用」の機能なのですが、四角く囲む“ボックス装飾”が存在しないnoteでは、多くのユーザーがボックス装飾としてこれを利用しています

ええ…そんな文化があるの?引用なのか自分で書いた文章なのかわかりにくいね…

アドさん

にっきー

それを区別するためにも、この「引用」装飾を使用する際は引用表記をきちんと書きましょう。本当に引用であるなら、文末に「引用:〇〇(引用元のサイト名やURL)」というのを加えましょう。

URLはリンク先へ飛べるようにしておくこともお忘れなく!

文章を引用するときのマナーだね。

アドさん

某大型掲示板の「ソースは?」ってやつと同じです。引用である場合は引用元を記載することで、情報の信憑性も上がります。

 

 

テキストリンクの下線

 

noteでは、テキストリンクも設置できます。

テキストリンクを用いると、文字にアンダーラインが引かれます。

これは、さっきの「引用装飾」みたいに、目立たせるために装飾として使う人はいないの?

アドさん

にっきー

「アンダーラインがある=リンク」と認識している人からすると、目立たせる装飾としてこれを使われるのはとっても迷惑です。

「リンクだと思ってクリックしたらリンク切れ?で変なサイトに飛ばされた」みたいな、読者への迷惑につながる可能性もあります。

テキストリンクはあくまでもテキストリンクとして使用しましょう。

 

 

さて、基本の装飾を知ったところで、いよいよ本題の「吹き出し装飾」の話をします。

え?noteの装飾を見たけど、吹き出し装飾なかったよ?

アドさん

にっきー

そうなんです。そこでにっきーが提案するのは、画像を使った吹き出し「風」装飾です!

 

noteでできる吹き出し装飾は2パターン

 

にっきーはnoteで吹き出し装飾をやりたいがために、「♡」が多いいろいろなnoteを読み漁りました。

それを見る限り、吹き出し装飾の主流が「セリフを記入済みの吹き出し画像」であることがわかりました。

 

セリフを入れた画像を使う

 

noteユーザーに一番多い「吹き出し装飾」は、予め台詞を吹き出しの中に書き込んだ画像を用意するやり方です。

これはデザインソフトを持っている人であれば、ご自身の望む形の吹き出しを作ることができると思います。

にっきー

Wordで作って、Print Screen(Windows)をしたり、スクショ(Mac)をしたりというのでもokですね!
そのまま使える「キャラが喋っている画像」を用意するわけね〜!

アドさん

 

フリー素材配布もあります

例えば、Windowsの「ペイント」やMacの「プレビュー」があれば、プロブロガーのヨスさんが紹介している「吹き出し形の画像」を拝借することで、手軽に作ることもできます。

無料で配布してくれているのはありがたいね!

アドさん

 

この他にも、WordPressサイトを持っている人なら、今まさに↑でアドさんが喋っているようなのを作り、それをスクショするのもできますね。

いや…WordPress持っているならnoteで記事かかなくない?

アドさん

にっきー

まぁありえるかも知れないので…一応提案をね。しておかないとね。

 

ただ、にっきーは「記事を書きながら吹き出しの中の台詞も調整したい」「画像をその都度つくってデータが増えていくのが厄介だな〜」と思いました。

 

画像吹き出しの注意
画像に文字を乗せてしまうと、文章を変える度に画像編集が必要。誤字を発見したら画像編集して掲載し直す必要がある。

 

そこでにっきーが考えたやり方は、吹き出しに見える装飾の方法です。

 

吹き出しに見える装飾テンプレートを作る

 

まずは完成形から。こちらがにっきーのやり方を使った場合の、「noteでもできる吹き出し風装飾」です!

 

 

…結構かわいくないですか!?(自画自賛)

 

POINT
  • 台詞の文章は、note上で編集が可能
  • 一度テンプレート用の画像を作ったら、noteでコピペすればok
  • 文章がどれだけ長くなっても&短くてもレイアウトの調整をしなくていい

 

普通の文章を吹き出し風の装飾挟むやり方なので、台詞が長くなろうが短くなろうが、関係ありません。

例えば、長い文章の場合はこんな感じになります。

 

 

にっきーってねずみなのに「猫である」なの?

アドさん

にっきー

そこはスルーしてください。文章の長さを見てくださいね!

 

通常のテキストを挟んでいるだけなので、改行をすることはもちろん、文中で太字にしたり、リンクを貼ったりすることもできます。

 

ただこのやり方は、1つの吹き出しに対して「画像2つ」と認識されるので、有料記事などに用いる場合は「吹き出し装飾を用いているので画像数が本来より多く表示されています」のように、注意書きをしたほうがいいかなと思います。

「たくさん説明画像のある記事かと思ったら吹き出しだけかい!」ってがっかりさせるのはよくないもんね。

アドさん

にっきー

良心に委ねられる部分ではありますが、書いておいた方が購入者と販売者の間の認識のギャップは起きにくいかなと思います。

 

それではここから、この「note用の吹き出し風装飾」のための画像をどうやって作るのかをご紹介しておきます。

 

 

noteで吹き出し装飾をやる方法

 

まず、今回お見せした吹き出し風装飾がどんなデータ状態になっているのかを見ていきましょう。

 

基本の考え方は「画像で挟む」

 

noteに配置した画像はこんな感じになっています。

1枚目の画像はキャラクター(アバター)のアイコン吹き出しの上部の役割をする線、2枚目の画像は吹き出しの終わりの役割をする「太めの線」です。

この2つの画像を用意することで、にっきーおすすめのnote用吹き出し風装飾を作ることができます。

 

画像を作るときの注意点

 

noteに画像を配置するときに意識したいことが1つあります。

それは、noteで白い画像を貼り付けると、周りにうっすらと枠ができることです。

 

色付きの画像だとほぼ気にならないのですが、白い背景の画像だと、このグレーがうっすらと見えてしまいます

 

つまり、吹き出しの線や、アバターのフチがあまりにも薄い色だと、このグレーの線が結構目立ちます

そのため、アバターのフチの線や吹き出しの先は、できるだけ濃い色強めの色を選んでおいたほうが、灰色の枠が目立たない(本来の吹き出しに目がいく)ようになります。

 

ただ、ここまで読んだけど「自分のPCはそんな画像を作れるようなソフトがない」という人もいるのではと思います。

そんな人には、無料のオンラインデザインツールの「Canva(キャンバ)」がおすすめです!

 

Canvaを使って吹き出しテンプレをつくる!

 

Canva(キャンバ)を使うことで、画像編集ソフトがなくても、今までに紹介した吹き出し風画像素材を作ることができます。

無料のオンライン画像作成ツール「Canva(キャンバ)」の公式サイトはこちら

 

作成には操作の慣れも必要ですが、一応、にっきーがどんな風に作ったのかを紹介しておきますね!

にっきー

にっきーは「YouTubeサムネイル」っていうテンプレートサイズを選んで作りました!

YouTubeサムネイルは、「ソーシャルメディア」の中にあります。

※最終的に出来上がったものはトリミングして使うので、ここで選ぶサイズは正直あまり関係ないです。

にっきー

とりあえず何選べばいいか分からない!って人は、にっきーと同じやつを選んでみましょう

 

 

手順1
アバター画像用の丸窓をつくる

Canvaのツールの「素材」から「フレーム」のシリーズを選ぶと、かんたんに画像を形にあわせてトリミングをしてくれます。

丸い形をポチッと押して、サイズを調整します。

にっきー

この丸窓のサイズは後からでも変えられるので、だいたいでokです!左上の方に置いておいてください。

 

手順2
使いたいアバター画像を用意

左のメニューの「アップロード」を選び、使いたいアバター画像をアップロードします。

このときアップロードするアバター画像は切り取られていない状態でokですが、できるだけ余白が多くあったほうがトリミングの調整をしやすいです。

アバター画像を用意できたら、先程作った丸窓へドラッグ&ドロップします。

丸窓の中に画像が入り込んだところで手を離してくださいね!

.

にっきーみたいに白い画像の場合は、フチがどこなのかわからないので、丸い線を画像に重ねます

素材」から「図形」のグループを選び、線で描かれた丸を探します。

見つかったらポチッとクリックしてください。

画像に重なるように、大きさを調整します。

このとき重ねる丸い線は、後々フキダシの色と合わせるので、できるだけはっきりした色を選んだほうがいいです。

 

手順3
フキダシの形づくり

アバターのアイコンができたら、フキダシを作ります。

フキダシは「素材」の「図形」グループの中にあります。

複数種類があるのですが、右下にフキダシの三角があるやつを選んでください。

ポチッと押したら、180度回転させます。

回転させたら、フキダシの位置をアイコンにあわせてください!

※色の変更などの基本操作は、Canva公式サイトの「ヘルプ」にある情報を読みながら行ってください。

ここまでできたら、右上の「↓ダウンロード」から画像をダウンロードします。

画像の形式は「JPG」でokです。

※ダウンロードしたデータは、コピーして2つにしておいてください!

後々、データを2つに加工するため、誤って保存しても予備が残るようにするためです。

 

手順4
必要なところだけトリミング

ダウンロードした画像を2つのパーツに分けます。

まずは上半身(アイコンとフキダシ[上]のみ)を作ります。このとき、線は少し太めに残すといいです。

にっきーはMacを使っているので、「プレビュー」を使って画像を編集しました。

Windowsの方々は、「ペイント」などを使ってこの作業を行ってください。

上半身のみに加工できたら、次は下半身(フキダシの終わりの線)を作っていきます。

先程使用したのと同じ画像を使って、線の状態にしていきます。

フキダシ(上)とフキダシ終わりの線(下)が用意できたら、その画像を使ってnoteで編集をしていきます!

大変だった〜

アドさん

にっきー

素材の用意はここだけです!あとは今回作ったものを使い回せるので、大変な思いは一度だけです。

 

 

noteの編集画面へ貼り付ける

 

画像を用意できたら、noteの編集画面に移動します。

noteで画像を配置するマークを押して、先程作った2つのうち「上半身」を掲載します。

 

画像を貼ったら、台詞を入力してください。

これも後でいくらでも変えられるので、とりあえずの文章でokです。

 

文章を入力し終えたら、台詞を閉じるための線を貼り付けて完了です。

 

この吹き出し風装飾を1つ作っておけば、同じ手順で何回も使うことができます!

にっきー

複数のキャラクターを使いたい場合は、アイコンの位置を変えることをおすすめします。例えばメーンのキャラクターがにいるなら、サブキャラクターはにするといいです。

また、視覚的にわかりやすくするために、吹き出しの色もあまり似ていない色にしたほうがいいです。例えば上記のにっきーはターコイズブルーの枠ですが、もう1人のキャラクターを用意するなら、サーモンピンクのような…青から遠い色を選びますね。

 

まとめ

 

今回は、人気のオンライン記事作成サービス「note(ノート)」で吹き出し風の装飾を作る方法をご紹介しました。

吹き出しを作ると言っても、特性上、WordPressのような吹き出しは作れないので「吹き出し風」のものを作ることになります。

MEMO
  • noteはテキスト装飾の種類が少ない
  • noteに吹き出し装飾の機能はない
  • 画像を使うことで「吹き出し風」に見せることはできる
  • 吹き出し風装飾の方法は、①文章まで入れた「吹き出し画像」を使う、②吹き出し風にする画像でテキストを挟む、の2パターン
  • note上で何度も台詞を編集したいなら、②がおすすめ
  • Canvaを使えば②の画像を作ることができる

noteは気軽に記事を有料公開にできることや、タグをつけて交流しやすくできるというメリットがあります。また、noteに向いている記事のジャンルというのもあります。

ただ他方で、今回のような装飾上の制限も大きくあります。

 

にっきー

自分の中で「これはnoteのほうがいいな」「これはWordPressで書きたいな」ということを棲み分けて利用することをおすすめします!

noteの装飾に不自由さを感じている人や、規約の度重なる変更がちょっとストレスと言う人は、WordPressで自由な記事を書くこともできます。

 

WordPressを使ったブログ運営をしてみたい人は、無料メルマガ登録超わかりやすいイラスト付きのブログの作り方ガイドをプレゼントしています!

よかったら読んでみてください!

無料メルマガ登録で、ブログの作り方ガイドを受け取る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)