2020年12月22日SHAREツイートシェアはてブLINEPocketにっきーまいどです!にっきーです。にっきーは普段、基本的に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のサンプル記事を見てみるさて、基本の装飾を知ったところで、いよいよ本題の「吹き出し装飾」の話をします。え?noteの装飾を見たけど、吹き出し装飾なかったよ?アドさんにっきーそうなんです。そこでにっきーが提案するのは、画像を使った吹き出し「風」装飾です!noteでできる吹き出し装飾は2パターンにっきーはnoteで吹き出し装飾をやりたいがために、「♡」が多いいろいろなnoteを読み漁りました。それを見る限り、吹き出し装飾の主流が「セリフを記入済みの吹き出し画像」であることがわかりました。セリフを入れた画像を使うnoteユーザーに一番多い「吹き出し装飾」は、予め台詞を吹き出しの中に書き込んだ画像を用意するやり方です。これはデザインソフトを持っている人であれば、ご自身の望む形の吹き出しを作ることができると思います。Screen(Windows)をしたり、スクショ(Mac)をしたりというのでもokですね!そのまま使える「キャラが喋っている画像」を用意するわけね〜!アドさんフリー素材配布もあります例えば、Windowsの「ペイント」やMacの「プレビュー」があれば、プロブロガーのヨスさんが紹介している「吹き出し形の画像」を拝借することで、手軽に作ることもできます。Webフォントも作ったよ!(ヨッ!センス)無料で配布してくれているのはありがたいね!アドさんこの他にも、WordPressサイトを持っている人なら、今まさに↑でアドさんが喋っているようなのを作り、それをスクショするのもできますね。いや...WordPress持っているなら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です!左上の方に置いておいてください。左のメニューの「アップロード」を選び、使いたいアバター画像をアップロードします。このときアップロードするアバター画像は切り取られていない状態でokですが、できるだけ余白が多くあったほうがトリミングの調整をしやすいです。アバター画像を用意できたら、先程作った丸窓へドラッグ&ドロップします。丸窓の中に画像が入り込んだところで手を離してくださいね!.にっきーみたいに白い画像の場合は、フチがどこなのかわからないので、丸い線を画像に重ねます。「素材」から「図形」のグループを選び、線で描かれた丸を探します。見つかったらポチッとクリックしてください。画像に重なるように、大きさを調整します。このとき重ねる丸い線は、後々フキダシの色と合わせるので、できるだけはっきりした色を選んだほうがいいです。手順3フキダシの形づくりアバターのアイコンができたら、フキダシを作ります。フキダシは「素材」の「図形」グループの中にあります。複数種類があるのですが、右下にフキダシの三角があるやつを選んでください。押したら、180度回転させます。回転させたら、フキダシの位置をアイコンにあわせてください!※色の変更などの基本操作は、Canva公式サイトの「ヘルプ」にある情報を読みながら行ってください。ここまでできたら、右上の「↓ダウンロード」から画像をダウンロードします。画像の形式は「JPG」でokです。※ダウンロードしたデータは、コピーして2つにしておいてください!後々、データを2つに加工するため、誤って保存しても予備が残るようにするためです。手順4必要なところだけトリミングダウンロードした画像を2つのパーツに分けます。上半身(アイコンとフキダシ[上]のみ)を作ります。このとき、線は少し太めに残すといいです。にっきーはMacを使っているので、「プレビュー」を使って画像を編集しました。Windowsの方々は、「ペイント」などを使ってこの作業を行ってください。上半身のみに加工できたら、次は下半身(フキダシの終わりの線)を作っていきます。先程使用したのと同じ画像を使って、線の状態にしていきます。素材の用意はここだけです!あとは今回作ったものを使い回せるので、大変な思いは一度だけです。noteの編集画面へ貼り付ける画像を用意できたら、noteの編集画面に移動します。noteで画像を配置するマークを押して、先程作った2つのうち「上半身」を掲載します。画像を貼ったら、台詞を入力してください。これも後でいくらでも変えられるので、とりあえずの文章でokです。文章を入力し終えたら、台詞を閉じるための線を貼り付けて完了です。複数のキャラクターを使いたい場合は、アイコンの位置を変えることをおすすめします。メーンのキャラクターが左にいるなら、サブキャラクターは右にするといいです。視覚的にわかりやすくするために、吹き出しの色もあまり似ていない色にしたほうがいいです。上記のにっきーはターコイズブルーの枠ですが、もう1人のキャラクターを用意するなら、サーモンピンクのような...青から遠い色を選びますね。まとめ今回は、人気のオンライン記事作成サービス「note(ノート)」で吹き出し風の装飾を作る方法をご紹介しました。吹き出しを作ると言っても、特性上、WordPressのような吹き出しは作れないので「吹き出し風」のものを作ることになります。MEMOnoteはテキスト装飾の種類が少ないnoteに吹き出し装飾の機能はない画像を使うことで「吹き出し風」に見せることはできる吹き出し風装飾の方法は、1文章まで入れた「吹き出し画像」を使う、2吹き出し風にする画像でテキストを挟む、の2パターンnote上で何度も台詞を編集したいなら、2がおすすめCanvaを使えば2の画像を作ることができるnoteは気軽に記事を有料公開にできることや、タグをつけて交流しやすくできるというメリットがあります。noteに向いている記事のジャンルというのもあります。他方で、今回のような装飾上の制限も大きくあります。自分の中で「これはnoteのほうがいいな」「これはWordPressで書きたいな」ということを棲み分けて利用することをおすすめします!noteの装飾に不自由さを感じている人や、規約の度重なる変更がちょっとストレスと言う人は、WordPressで自由な記事を書くこともできます。隠れ副業ネットworker隠れ副業ワーカーの「にっきー」です。ために本業は辞めたくないけど、もうちょっと稼ぎたい』の精神でネットビジネスを2018年にスタート。開始9ヶ月でmax.月31万円を稼ぎ、今も月5〜10万を副収入で得ています。連休は稼いだお金でプチ旅行&ちょっと贅沢な宿に宿泊。いつか暖炉のある家に住みたい。通りすがりの人さんへコメントありがとうございました!noteはできることが少ない分、文章勝負なところはありますが、工夫をすればいろいろと見た目をきれいに整えられます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。date*日本語が含まれない投稿は無視されますのでご注意ください。次の記事Chatwork(チャットワーク)の登録方法と超基本の使い方【...プロフィールnickey(にっきー)隠れ副業ワーカーの「にっきー」です。元ブラック企業勤務&鬱経験者。クラッシャーの先輩・上司・社長のカルテットで何かある度にLINEリンチされる日々を3年間過ごす。4年目に鬱診断書を渡すも怒鳴られる・否定されるが、なんとか退職。転職後にインターネットビジネスを知る。『収入安定のために本業は辞めたくないけど、もうちょっと稼ぎたい』の精神で2018年にスタート。開始8ヶ月でmax.月31万円を稼ぎ、今も月5〜10万を副収入で得る日々。連休は稼いだお金でプチ旅行&ちょっと贅沢な宿に宿泊。いつか暖炉のある家に住みたい。うさみさん(2o22.02)他みなさんそれぞれ、ご経験なさったことを元に書いた記事でAdSenseを突破しています。