extension-tools-for-bloggers_ec

ブログ

【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個のツール

先日、とある交差点で信号待ちをしていた時のこと。見たこともない小太りなおっちゃんが横にピタッと並び、顔を近づけていきなりまくし立ててきたのです。

おらァな、こー見えてWEBマーケティング担当者じゃねんだ。”ぶろぅがぁ”。いわゆるブロガーってやつだ。よく勘違いするやつがいるがまーったく失礼なハナシだ。あんたならわかるだろぉ?コムズカシイもんはいらねぇ、おらァな、“ブログ記事をつくるのに本当に使えるツール”を知りてぇんだ。それも無料で使えるとびっきりのシロモンだ!ワガママな頼みだって?いーや、んなこたァない。考えてみろってばよ、みんなそう思ってるハズだろぉ?今のご時世、そんな需要にゃあ世の中の誰かが応えてくれるもんだ。みんなナンダカンダ言うけどよぉ、世知辛くもいい時代だと思ってる。おらァそー思ってる。そー思うだろぉ?するってーとあれだ、そんなこったから、まぁ今回はウマいこと面倒見てくれやな。
じゃあ、よろしく頼むぜ!

extension-tools-for-bloggers_ins1

のそのそと横断歩道を歩いていくおっちゃんに、ツバまみれになった私は後ろから答えました。

知っていることはきっと、きっと全部惜しみなく伝えると誓うよ!

extension-tools-for-bloggers_ins2

おっちゃんは、振り返ることなくそっと手を挙げて応えました。もしかしたら行き交う車への”いま渡ってるとこだから気をつけてね!”の合図だったのかもしれません。

それでも私は・・・「こんな大きな声で叫んだの、久しぶりだな」なんて少し興奮気味の自分を新鮮に感じながら、小太りなミスターのその姿が見えなくなるまでずっと、晴れやかな気持ちで眺めていたのでした。


というわけで、今回は【ブログ記事のクオリティー底上げ・効率化に役立つ10個のツール】を作業順に沿って出し惜しみなく紹介します。そう、あの日ミスターに誓ったとおりに・・・。

 冒頭のストーリーはフィクション(茶番)です。

【作業順その1】
予備知識

extension-tools-for-bloggers_ins3

今自分が見ているページの「あの場所」や「あの画像」の、幅と高さってどのくらいのサイズなんでしょう?そもそも自分のWEBサイトの幅、知ってますか?

記事に挿入した画像が明らかに大きかったはずなのに『なんかうまくハマってくれてるんだよね… 』なんて曖昧なままにしてませんか?

もうこの機会にその辺りのことは知っておいて「モヤモヤするけどイッタレイッタレェ!」状態は終わりにしましょう。便利なツールがあるんです。

Page Ruler、View Image Info (properties)

”WEBサイズマスター”へ。Chrome拡張「Page Ruler」「View Image Info (properties)」でなんでも計測!

 WEB上に表示されているもののサイズって、どうやって調べるの?

 記事画像って、どのくらいのサイズで貼り付けるのがベストなの?

Page Ruler】と【View Image Info (properties)】でその答えを知ることができます。これ、実はサイトの表示速度にも影響してくるので、まず知っておきたいことなんです。

使用中の様子

 Page Ruler

browzer-extension_new02

 View Image Info

browzer-extension_new05

Page Ruler】【View Image Info (properties)】の活用法・インストールはこちら 

”WEBサイズマスター”へ。Chrome拡張「Page Ruler」「View Image Info (properties)」でなんでも計測!

【関連予備知識】初心者じゃなくても意外と知らない「WordPressのメディア設定」。
これもなるべく早い段階で知っておくべき内容です 

知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケンな関係

【作業順その2】
インプット

extension-tools-for-bloggers_ins4

いざ記事を書こうとすると、人に伝えるためにはあまりにも曖昧だった自分の知識に気づくこともしばしば。でもそれは決して悪いことではありません。伝えようとすることをきっかけに、曖昧な部分を調べ直し、結果的に自分の知識を補うことにもなるからです。

伝えるための責任感から自分の成長へと繋がる感覚は、教職関係など教える立場にいる人には日常的なことのようですね。そしてブログ記事を書く上でも同じように、“執筆のためのインプット”を無意識ながら行っているわけです。そんな時、役立つツールがあります。

Show Title Tag

もっと…見せてくれませんか?タブに隠れた見えないタイトル。Show Title Tagを使って全表示!

 ブラウザのタブ表示では入りきらない、ページタイトルを表示してくれる

ブラウザ拡張【Show Title Tag】。このツールで出来ることはそれだけです。

使用中の様子

つまりこの”全部見えない”不便さを・・・

extension-tools-for-bloggers_03

extension-tools-for-bloggers_04

画面右下に、こう表示して解消してくれるだけのこと。しかし侮るなかれ。

想像して下さい。上の画像のように、ひとつのタブでもタイトル表示は全部見えていません。例えば、参考記事をたくさん開いて吟味検討している時はどうなるでしょう?それぞれのタブの幅はもっと狭まって、もはや何のページなのか、タブ上では判断出来なくなっていきます

「ちょっとした機能なのに助かるツール」の、代表的な例ですね。

Show Title Tag】の活用法・インストールはこちら 

もっと…見せてくれませんか?タブに隠れた見えないタイトル。Show Title Tagを使って全表示!

【作業順その3】
記事作成

extension-tools-for-bloggers_ins5

いざ記事を書き始めると、行き詰まったり、分からないことがどんどん出てきます。書きたいことは決まっているのに、文章を書く手が止まっては行ったり来たりしてしまう。あのサイトのように見栄えよくしたいけど、その方法が分からない。

記事の構成方法】【伝わりやすい画像作成】【デザイン性の高い外部リンクの作成】。ここではこの3点にフォーカスして、役立つツールを紹介します。

Todoist

ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法

 書きたいことや伝えたいことをリストアップできる

 直感操作で”ひたすら”構成づくりに集中できる

 完成までに必要な情報が整理され、スムーズに書き進められる

 すぐに実践して活かすことができる

Todoist】はタスク管理ツール。噛み砕いて言えば『やることリスト』を登録しておくツールですが、その直感操作と情報整理能力の高さから、ブログ構成に大いに活用できます。

使用中の様子

 階層化して情報整理 / サクサク登録

extension-tools-for-bloggers_05

extension-tools-for-bloggers_06

頭の中がこんがらがって、ウンウン唸りながら記事を書くなんて絶対にイヤです。

その点、「書き方の手順」を知ることができれば、すぐに実践して活かすことができます。ぜひ参考にしてください。

ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法

Todoist自体の操作方法も徹底解説しています 

【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹底解説!


LightShot

Windows?Mac?なんでもゴザレ。スクリーンショットに特化したキャプチャーツールLightShot先輩の使い方

 選択範囲を自由に調整してキャプチャーできる

 簡単な画像注釈ができる

今見ている画面の一部を画像保存して、記事に挿入したい。そんな時、何度もスクリーンショットの撮り直し、してませんか?

LightShot】先輩なら、その煩わしさをきっと解消してくれます。

使用中の様子

LightShot_DEMO

LightShot】の活用法・インストールはこちら 

 Windows?Mac?なんでもゴザレ。スクリーンショットに特化したキャプチャーツールLightShot先輩の使い方


Screenpresso

『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテンツ

 角が丸い場所もキレイにキャプチャーできる

 ブログレベルで必要な画像注釈はほとんどできる

 画面を録画して説明動画を作成できる

Screenpresso】は万能ソフトウェア。これひとつで、ブログの表現力は格段にアップします。特に画像注釈の表現力がケタ違い。

Photoshopが無いと、見やすい注釈画像なんて作れないんでしょ…?

注釈文字や矢印を入れても、どーも見にくい…

なんて思っている人は必見です。

使用中の様子

 クリックで拡大

extension-tools-for-bloggers_06

extension-tools-for-bloggers_07

Screenpresso】の活用法・インストールはこちら 

『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテンツ

LightShotとの機能比較・併用の魅力はこちら 

辿り着いたキャプチャーツール、LightShotとScreenpresso。その機能比較と併用の魅力


Pushbullet

瞬間転送。写真もURLもポンっ!スマホとパソコン間のデータ移動が捗るPushbulletの使い方

 スマホとパソコン間のデータ移動がラクラク。

Pushbullet】を使えば、スマホで撮ったキャプチャー画面も瞬間転送。すぐに記事作成に利用できます。メールで送るより、ずっとラクです。

使用中の様子

Pushbullet】の活用法・インストールはこちら 

瞬間転送。写真もURLもポンっ!スマホとパソコン間のデータ移動が捗るPushbulletの使い方


Embedly

クリックひとつで完成。Embedlyで見栄えの良いカード型の記事リンクを貼る方法

 カード型の見栄えのいい記事リンクを簡単挿入できる

Embedly】なら、紹介したいページを開いた状態でワンクリック。それだけでレスポンシブなカード型の記事リンクを作成してくれます。

使用中の様子

 クリックで拡大

extension-tools-for-bloggers_08

カード全体の大きさや抜粋文もこの状態で変更可能。プラグインやカスタマイズ無しで気軽に記事リンクを挿入したい人にはもってこいなサービスです

Embedly】の活用法・インストールはこちら 

クリックひとつで完成。Embedlyで見栄えの良いカード型の記事リンクを貼る方法

【作業順その4】
公開前チェック

extension-tools-for-bloggers_ins6

記事が完成するとそのまま勢い良く公開ボタンを押してしまいたくなる衝動に駆られますが、そこをグッ!とこらえて最終チェックです。

本文に関してはもちろんなのですが、ブロガーでも最低限気にしておきたい、超基本的なSEOが存在します。検索にヒットした時にどのように表示されるか。またSNSでシェアしてもらった際の体裁など。これらの設定は今や「最適化」に必須と言えるでしょう。

SEOに関しては様々な見解がある中で、マーケティング担当者でないブロガーがまず気にすべき点は【意識次第で出来ることを、出来ているか】の確認です。

あらゆる対策をする必要があるかどうかは別の話。自分が「やっておいた方がいい」と思うことであれば、チェックしておくべきだと考えます。以下2つのツールはそんな時に役立ちます。

META SEO inspector

基本的なSEOチェックに。DescriptionやOGPを確認できるChrome拡張META SEO Inspectorの使い方

 メタタイトル・ディスクリプションなどを確認できる

 alt属性抜けなど、ページ内の注意点を確認できる

 nofollowリンクを視覚化して確認できる

META SEO inspector】があれば、記事公開前に基本的なSEOチェックが可能です。どちらかと言うと「ど忘れ防止」に役立つ、と考えたほうが良いかもしれません。

うっかり忘れがちな(?)Facebook用OGP設定なんかも、文章内容まで表示してくれます。

使用中の様子

extension-tools-for-bloggers_09

一見ややこしそうですが、自分にとって必要だと考える部分だけ見ればOK。すぐに慣れます。

META SEO inspector】の活用法・インストールはこちら 

基本的なSEOチェックに。DescriptionやOGPを確認できるChrome拡張META SEO Inspectorの使い方


Alt & Meta viewer

Alt & Meta viewer

 alt属性抜け画像の特定ができる

Chrome拡張機能【Alt & Meta viewer】は、上で挙げた【META SEO inspector】の補助として利用します。META SEO inspectorではalt抜け画像があった場合、その個数がアラート表示されますが、「alt属性が抜けているのはどの画像なのか」までは特定できません 

extension-tools-for-bloggers_13

そこで役立つのがAlt & Meta viewer。アイコンをクリックして「画像のAlt表示」の吹き出しマークをクリック。すると…

extension-tools-for-bloggers_11

 クリックで拡大

extension-tools-for-bloggers_12

そのページに存在する画像のalt属性が一斉表示されます!これで抜けがあれば一目瞭然。META SEO inspectorで既に、alt抜けしている”個数”は分かっている状態なので、ざっと探せばすぐに見つかります。なんてナイスフォローなヤツなんでしょう。

 インストールはこちら

Chrome ウェブストア

まとめ

今回は”ブログ記事作成順”に沿って、記事クオリティーの底上げ・効率化に役立つ10個のツールを紹介しました。もちろん全てのツールが記事作成に必須なわけではありませんが、実際に使ってみるととても便利なものばかりです。

もし知らなかったツールがあればこの機会にぜひ試してみてください。ご自身の作業フローに必要なものを組み込んで、うまく役立ててもらえれば幸いです。

自分に合った環境を自分なりに作りだすことが、何より大切なことだと考えています。

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…
  2. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…
  3. きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG…
  4. 実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本
  5. 子テーマ使用者必見!カスタマイズしたWordPressテーマのアップデート方法と…

関連記事

  1. backwpup-japanese_ec

    ワードプレス

    アップデートで英語化された!?BackWPupをサクッと日本語化する方法

    アップデートしたら、設定画面が英語化された!? 2…

  2. compress-jpeg-png-images_ecrt

    ワードプレス

    きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG & PNG ima…

    どうせ圧縮するなら、きれいにしっかり。WEBサイトで表示されている…

  3. tcd-mag_ecmg-ps
  4. gif-animation_ec

    WEBデザイン

    ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方

    色が変わっていく...目を引くサイトロゴを簡単に。休むことなく働き…

  5. backup-all-in-auto_ec

    ワードプレス

    WordPressサイトを丸ごとバックアップ!「BackWPup」で丸投げタイマー設定

    一度設定したら、後はおまかせ!せっかく作った自分のWEBサイトが、…

  6. retina-slider_ec

    ワードプレス

    【Retinaディスプレイ対応5】もっと美しくワガママに。スライダー画像さえも綺麗に表示させてしまう…

    スライダー嬢も、綺麗に。このサイトのトップページには、スライダーが…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. tcd-mag_ecmg-ps
  2. todoist-extension_ecmg
  3. display-speed_ec
  4. tcd-theme-user-review_ecmg
  5. business-books_ecmg
  6. extension-tools-for-bloggers_ec

ピックアップ記事

  1. jpg-gif-png_ecmg
  2. intuitive-custom-post-order_ec
  3. unroll-me_ec
  4. gif-animation_ec
  5. spark-tutorial-ecmg
  6. todoist-class_ecrt

タスク管理で、自己管理。

todoist

掘り出し記事

  1. pushbullet_ec
  2. todoist-design_ec
  3. analytics-ip-filter_ecmg
  4. facebook-fast-display_ecmg

魅力的なブログを、今すぐ作る。

tcd-mag

ブログのRetina対応、始めませんか?

retina-os-solution

ピックアップ記事

  1. spark-tutorial-ecmg
  2. child-theme_ecmg
  3. lightshot_ecmg
  4. widgetoon-js-count-jsoon_ecmg

ゆっくり、フシギなGIFアニメ。

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. spark-tutorial-ecmg
  2. modern-dilemma-ecmg
  3. paradigm-shift-ecmg
  4. irreplaceable-ecmg

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考系ピックアップ記事

  1. blog-contents_ecrt
  2. restriction_ecmg-ps
  3. modern-dilemma-ecmg
  4. reset-button_ecrt
  1. tcd-mag_ecmg-ps

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  2. tcd-theme-selection_ecmg-ps

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  3. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
  4. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
  5. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー目線レビュー
PAGE TOP