みやねえのWebuzz!!

二拠点生活フリーライター・編集者 みやねえ

ブログ初心者へ丁寧・簡潔に解説!優れたUI機能、無料ブログツール「note」の使い方とブログ更新メソッド Vol.2

ブログ初心者へ丁寧・簡潔に解説!優れたUI機能、無料ブログツール「note」の使い方とブログ更新メソッド Vol.2

沖縄を拠点に活動する二拠点生活フリーライター・編集者みやねえ(@miya_nee3)です。2019年1月、沖縄のライターコミュニティ「OKINAWA GRIT(略して、オキグリ)」のオンラインコミュニティをスタートしました。

コミュニティの中で、無料ブログのプラットフォームnoteを活用した「#オキグリnote部」を始動。今回は、そのメンバーにも向けた初心者でも簡単に使いこなせる「note活用術!第二弾」として、「noteのブログ術」と「執筆する際のちょっとした裏技」を解説します。

 

アカウント開設と各種設定方法、各ページの説明については、下記のページをご覧ください。

初心者でも使いやすい!noteでブログを書こう

無料で使えるブログのプラットフォーム「note(ノート)」の好きな部分を挙げるとすれば、「簡単に使いこなせる・シンプルなデザイン・テキストベース」なところが気に入ってます。

また、個人ブログの制作によく活用されているオープンソース「WordPress」と比較した場合、何がいいのかをツイートでまとめたので参考にしてください。

 

初めて「note」を使う人でも簡単にわかるよう、丁寧・簡潔な解説でお届けします。と思ってましたが、今回はやや基礎知識的な専門用語の説明を入れてます。長くなったよー(パソコン画面で説明)

 

1. ブログを書くなら「テキスト」を使おう

ブログを更新する前に。まずは、noteのトップページ( https://note.mu/ )を表示。個人アカウントでログインして、パソコン画面の右上アイコンから「マイページを表示」を選択します。

https://note.mu/note ID 」のURLが表示されます。このマイページをGoogle Chromeなどのブラウザで「★お気に入り」に登録しておくと、次に使う時、ネット検索せずに「★お気に入り」から簡単にブログを表示できます。

 

無料ブログツール「note」の使い方(初心者編)noteのトップページ、またはマイページから、右上の「投稿」をクリックすると、「テキスト、画像、つぶやき、音声、動画」の5項目が表示されます。ブログを更新するには「テキスト」を選択します。

 

ブログ初心者へ丁寧・簡潔に解説!優れたUI機能、無料ブログツール「note」の使い方と出来ること Vol.2次の画面で、このようなページが表示されます。

めちゃくちゃシンプル!ブログ初心者でも直感で使いやすく、わかりやすい構造。すぐに使い方を理解できると思います。

 

2. アイキャッチ画像を挿入する

ブログ初心者へ丁寧・簡潔に解説!優れたUI機能、無料ブログツール「note」の使い方と出来ること Vol.2アイキャッチ画像を挿入していきます。

私の場合、ブログを書いたあと、最後にアイキャッチ画像を挿入しています。主に、自分で撮影した写真を使用。たまに、その画像にテキストを入れたり、複数の写真を合成したり、ブログのタイトルや内容に合うイメージ画像を選んで投稿しています。

Web業界では、記事のメインとなる画像のことを「アイキャッチ」「キービジュアル」などと言います。このnoteではサービス上、「見出し画像」と呼んでいるようです。

 

ブログ初心者へ丁寧・簡潔に解説!優れたUI機能、無料ブログツール「note」の使い方と出来ること Vol.2写真マークをクリックして、「画像をアップロード」を選択。パソコン上で操作するなら、パソコンで取り出せるファイルからアップロードできます。これでアイキャッチ画像の挿入完了。

●見出し画像のサイズ:1280px × 670px(2018年6月公式発表)

 

3. クリックされるかは「記事のタイトル」で決まる

ブログ初心者へ丁寧・簡潔に解説!優れたUI機能、無料ブログツール「note」の使い方と出来ること Vol.2記事のタイトルは、読者のクリックを誘導する入口となる大事な要素です。

以前は、「Web記事がクリックされるかは、記事のタイトルで9割決まる」とも言われ、情報過多の現代においても、記事が読まれるかは「タイトル次第で7〜8割決まる」と感じています。

一瞬で興味を引くタイトルでなければ、記事を読んでもらえません。「記事のタイトルを考えるコツ」を超基本中の基本的な基礎知識として、いくつか挙げておきますね。

●意味が伝わるタイトルになっているか
●キャッチコピー並みのインパクト
●複数のキーワードを盛り込む
●数字や語彙力を使って訴求力を上げる
●理想的な文字数がある(30文字前後)

 

noteの記事タイトルは、文字数制限がなさそうですね。検索エンジンで表示されるタイトルが「30文字強」です。その文字数を超えると「…(三点リーダー)」に変換されて非表示になります。デバイスの環境にもよりますが、35文字以内に収めるのが無難だと言えます。

noteの場合、数多くシェアされたり、PV(ページビュー)が上がると、GoogleやYahoo!などの検索エンジンにも上がってきます。原稿料の話をしよう!現役フリーライターが語る「初心者Webライターが陥りやすい罠」の記事は、「ライター 原稿料」のキーワードで検索2〜3位に上ってきてます。

 

この記事に「Web記事の構成」や「記事を書く上での重要なポイント」をまとめてます。良かったら読んでみてください(有料ですが…)

 

4. 見出しの設定(目立たせる、区切り、h3で入力される)

ブログ初心者へ丁寧・簡潔に解説!優れたUI機能、無料ブログツール「note」の使い方と出来ること Vol.2noteでは、見出しに設定すると、ソース上〈h3〉タグが使われ、視覚的には大きめの文字サイズ・太字で表示されます。最初に文字を入力。その後、文字をドラッグすると、画像のように文字装飾の操作ができる黒いパーツが現れ、「T」を選択すると「見出し設定」できます。

記事を書く上で「見出し」の意味を理解しておきましょう。見出しとは、記事上の区切りでもあり、書籍でいう目次のような役割りです。

「見出し=次に説明する文章の要約」となります。大きく話が変わる場面、「○○なグルメ3選」で3つの見出しを使う(1グルメ1見出しで紹介)、このブログのように手順を追った見出しをつける(ナンバリング)など。一般的なブログやWebメディアの場合、CSSや画像でデザインした見出しを使用しています。

HTML上では、〈h1〉〈h2〉〈h3〉〜〈h6〉までの見出し用のタグで入力されています。

 

5. 文字の装飾について

ブログ初心者へ丁寧・簡潔に解説!優れたUI機能、無料ブログツール「note」の使い方と出来ること Vol.2文章を入力したあと、一部の文字をドラッグすると、文字装飾用の黒いパーツが現れます。「見出し、太字、左寄せ・中央寄せ、リンク、引用符、code」を設定可能。簡単に設定できる分、逆に複雑なことはできません。このシンプルさがnoteの良さでもあり、ブログ初心者でも使いやすいのです。

[左側からマークの説明]
●見出し:「T」を選択
●太字:「B」を選択
●左寄せ・中央寄せ:横線のマーク
●リンク:鎖マーク
●引用符:「”」を選択。背景色:薄いグレー
●code:ソースのコードを入力。背景色:黒

※「引用符」については、あとから追記します

 

6. リンクを挿入

ブログ初心者へ丁寧・簡潔に解説!優れたUI機能、無料ブログツール「note」の使い方と出来ること Vol.2「リンク」とは、URLやテキストをクリックして、指定したWebページに飛ばす設定のこと。

一般的には、このように「 https://note.mu/miya_nee 」テキストにリンクを設定します。また、「リンクされているテキスト」だとわかるように、文字色を変えたり、アンダーバーを入れたり、視覚的に変化を認識できる状態がベスト。一般的なWebサイトでは、CSSで文字装飾をしています。

noteは、アンダーバー付きでリンクを表示。

 

ブログ初心者向けに説明すると、ブログ上に、URLを配置しただけではリンクされません。URLのテキストに「リンク設定」を行って初めて、その該当ページに飛ばすことが可能になります。HTMLですと〈a〉タグ設定ですね。

「note」でテキストにリンク設定をする方法は、URLを入力後、その文字をドラッグして黒いパーツの中から「鎖マーク」を選択。上の画像のように「リンク先のURL」を入力するパーツが現れ、URLをペーストしてEnterキー。これでリンク設定完了です。

 

ブログ初心者へ丁寧・簡潔に解説!優れたUI機能、無料ブログツール「note」の使い方と出来ること Vol.2ここ近年では、プラグインを利用して、デザインのような視覚的にも目立つ表示でのリンク設定が可能になりました。画像のような表示になり、noteなら設定方法は簡単です。

記事内にカーソルを挿入すると「+マーク」が現れます。「7. 画像を挿入する」のように、円マークが出現するので〈〉を選択。緑枠が表示されたら、リンク先のURLをペーストしてEnterキーです。

 

7. 画像を挿入する

ブログ初心者へ丁寧・簡潔に解説!優れたUI機能、無料ブログツール「note」の使い方と出来ること Vol.2記事内にカーソルを挿入すると「+マーク」が現れ、写真マークを選択して画像をアップロードします。

画像について1点だけ注意点を挙げるならば、「画像サイズの比率を合わせる」ことが大切です。通常のスマホ写真のサイズが「横4×縦3」、一眼レフ撮影だと「横3×縦2」と変わるので、使用する画像の比率を合わせましょう。私の場合、一眼レフ撮影の「横3×縦2」の比率に合わせてます。

基本、縦長写真は使用しません。スマホで見た時、全画面を埋めてしまう縦長写真だとインパクトが強すぎることと、パソコン表示のレイアウトが美しくないから、です。

 

8. 余白も大切!「改行とスペースの違い」を理解しよう

記事には余白を作る。文章にも余白を残したほうが、読後感の余韻が残るといいます。視覚的な余白に使用するのが「改行と1行分のスペース」です。この余白の違いを理解して、コンテンツ作りに生かしてください。

 

ブログ初心者へ丁寧・簡潔に解説!優れたUI機能、無料ブログツール「note」の使い方と出来ること Vol.2改行は、スマホ表示を意識して視覚的な意味で改行することが多いです。

改行するよ。改行したよ。
改行するよ。改行したよ。
改行するよ。改行したよ。

この表示が「改行」です。パソコンでは「Shift+Enter」で改行できます。「Enter」を押すだけだと、HTML上では段落といって〈p〉タグで表示されます。

段落だよ。段落だよ。段落だよ。

段落だよ。段落だよ。段落だよ。

こんな感じですね。パソコン表示とスマホ表示で見比べてみてください。

 

ブログ初心者へ丁寧・簡潔に解説!優れたUI機能、無料ブログツール「note」の使い方と出来ること Vol.21行分のスペースは、話の内容が変わる時に使います。見出しのテーマからは逸脱しないけれども、ここから話の内容が少し変わるよ、といった場合です。

あと、エッセイやおもしろ系コラムを書く場合、余白を作るために、2〜3行分の余白を入れることも。数行の余白を入れることで、記事を読んでるときに「間」のような余白を作ることができます。しかし、これには経験値から来る直感的な感覚が必要。適当に余白を入れるとレイアウトの美しさが損なわれ、間がズレると素人っぽさが出てしまい、幼稚な印象をもつ粗雑な薄っぺらいコンテンツに仕上がってしまうからです。

 

9. 下書き保存をする

記事が完成したら「下書き保存」をしましょう。この「下書き保存」を怠り、誤ってページを閉じてしまうと、ゼロの状態に戻るのでご注意ください。

 

一度、「下書き保存」した記事を再開するには、右上アイコンから「マガジンを一覧で管理」のページへ。編集したい記事の右端、「編集」をクリックすると、編集画面に戻ります。

 

ブログ初心者へ丁寧・簡潔に解説!優れたUI機能、無料ブログツール「note」の使い方と出来ること Vol.2「下書き保存」したページを閉じてない場合、右側の「…(三点リーダー)」から「編集」に入ると、執筆を再開できます。「仕事依頼として表示」なんて項目もあるんですね。今度使ってみたいと思います。

 

10. 検索に有利な「ハッシュタグ」の選定

ブログ初心者へ丁寧・簡潔に解説!優れたUI機能、無料ブログツール「note」の使い方と出来ること Vol.2記事が完成したら「公開設定」をクリック。「ハッシュタグ」「マガジン」を設定できます。

「ハッシュタグ」は、より多く使われてるものだと検索に引っかかりやすく、読まれる確率が上がります。スマホアプリからだと、タグの検索時に使用件数が表示されるので、これをひとつの目安に。

また、オリジナルのタグを作ると、自分の作品集にもなります。私の場合、#みやねえ講座(沖縄で開催するWebライティング講座のこと)#okinawa_grit(沖縄のライター小コミュニティ立ち上げた)#オキグリnote部(2019年1月に始動したnoteでブログを更新する部活)など、オリジナルのタグを使っています。

 

11. ブログでいうカテゴリの役割り「マガジン」を設定する

「マガジン」は、一般的なブログでいうカテゴリ的な役割りです。雑誌のような感覚でテーマごとにまとめていくと楽しいですよ。

「ブログで一体何を書いたらいいのか」

ネタに迷ってる人がいたら、先に「マガジン」のテーマを決めてからスタートすると、どんどんネタが湧いてくると思います。その理由は、ブログで発信するテーマの軸が決まるからです。

 

無料ブログツール「note」の使い方(初心者編)先に「マガジン」機能を設定することも可能です。ブログ初心者さんは、1本目のブログを書く前に、マガジンから作成しましょう。(理由は前述したとおりです)

●ヘッダー画像のサイズ:横1250px × 縦450px

 

●ヘッダー画像のサイズ:横1250px × 縦450px(但し、スマホ表示では崩れます)右上アイコンから「マガジンを一覧で管理」のページへ。「マガジンを作る」をクリックして「基本情報」を入力していきます。

●マガジンタイトル
●マガジンの説明
●販売価格:有料販売できる
●レイアウト:ストリームを選択(好みで選択)
●公開範囲:公開

「メンバー管理」で管理者を追加できます。グループでもマガジンを運用可能となります。また、自作したマガジンに、第三者の記事を格納できます。記事を表示して記事下の「スキ」の横にある「+マーク」をクリック。マガジンリストから「マガジン」を選択して追加してください。

 

12. 記事を公開

ブログ初心者へ丁寧・簡潔に解説!優れたUI機能、無料ブログツール「note」の使い方と出来ること Vol.2晴れて記事を公開したら、SNSでシェアしていきましょう。ここ、とっても大事です!ブログを読んでもらうためには、SNSで拡散しなければ「誰にも読まれない」のです。

しかーし。noteでブログを書くと、フォロワーやタグ検索から来た読者が読んでくれることも。最初はフォロワーが増えないと思うので「フォローする、スキをつける、SNSで発信する」など、余程の著名人でもない限り、自分から動くことが大切です。

 

各ブログ記事の下に、読者が支援できる「サポート機能」を設置しています。

ブログ下の「サポートする」から、100円以上の金額をnoteブロガーに支援できるサービス。サポート機能エリアに説明文を掲載しておくと、読者の支援を後押しすることにも繋がります。とても重要な文章だからこそ、「どびっきりのひと言」を掲載して支援を募りましょう。

もちろん良質な記事を更新するのが、最も大切なこと。その上で、自分らしいコメントを設定してみてください。

 

13. スマホで表示を確認する

ブログを公開したら、スマホ表示も確認しましょう。

私の場合、基本的には、スマホ表示にレイアウトを合わせてます。変な部分での改行、数行分の余白スペースの調整、太字の設定など。このあたりをチェックします。

パソコンとスマホの表示をチェックする習慣を身につけると、読みやすくて美しいレイアウトの理解が増すとともに、Webメディアでの執筆やブログ運営の勉強にもなります。Webでコンテンツを作る際の必須スキルなので、習慣化してみてください。

 

ザザッと書いたので若干雑な記載もありますが、後日追記&校正したいと思います。文字数チェックしたら、6,000文字!?(何だそりゃー)沖縄を拠点に活動する二拠点生活フリーライター・編集者みやねえ(@miya_nee3)でした。それでは、また!!

●note関連のマガジン(連載中!)
ブログ初心者へ丁寧・簡潔に解説!優れたUI機能、無料ブログツール「note」のアカウント開設と使い方 Vol.1 

 

【参加者募集中!】2019年1月21日(月)より、沖縄のライターコミュニティ「OKINAWA GRIT」オンラインコミュニティを始めます。

〚スポンサーリンク〛

この記事を書いたライター

みやねえ(miya-nee)
沖縄を拠点に活動する、二拠点生活フリーライター・編集者。沖縄のライターコミュニティ「OKINAWA GRIT」代表。2015年からWebライティング「みやねえ講座」を運営。[職歴]ツアーコンダクター➡HTMLコーダー/Webディレクター➡フリーランス/複数の新規立ち上げメディアに参画➡Webメディア編集長➡ライター講座の講師/二拠点生活フリーライター・編集者(いま)。