【要素の調査が反則的に使える】
文系でもできるWEBライティングの学び方
【これを読むだけでマナブさんになれる】

WEBプログラミング関係

こんにちは、インベスターDです!

今年の8月初旬にブログを始めて、2週間でグーグルアドセンスの審査が通り、同時に月数千円程度の収益化にも達成しました

しかし、私は高校までは普通科で、大学は経済学部と根っからの文系人間です。HTML、CSSやWEBライティングの基礎について何も知らない状態でブログを始めて、これまでがむしゃらに記事を書いてきました。
そうしている内に、ただ記事を書くだけでは長い目で見たらあまりプラスにはならないと思うようになりました。

そのため、最近ではライティング力の向上に勤しんでおり、トップブロガーのマナブさんをお手本に記事の構成を学んでいます。

そして、そこで活用しているのが要素の調査になります。

本記事で伝えたいこと・学べる事

  • 知識ゼロの人でもウェブサイトの構造を知ることができる
  • 知識ゼロでも1人前にブログを書けるようになる

ライティング力を高めるために『要素の調査』をしましょう

まずは記事のキーワ-ドである『要素の調査』について説明していきます。

『要素の調査』はWEBサイトのHTMLやCSSを確認するツールです。
無料WEBブラウザのFIREFOXの機能の1つとして誰でも使用することができます。

このツールを用いることでサイトの構成が丸裸になってしまうわけです。ここではその『要素の調査』の使い方を学び、活用方法について解説していきます。

HTMLとは

 WEBページを作成するためのコンピューター言語

 人間・PCにも理解できる文章の構造を作るもの 

CSSとは

 WEBページのデザインを設定するもの

 文字のスタイル等、画面上の見映えを調整するもの

『要素の調査』を始める

まず機能を使うために無料WEBブラウザのFIREFOXをダウンロードしてください。
⇒ FIREROXのダウンロード

ダウンロードが完了したら早速、FIREFOXを使用して要素の調査を行っていきます。

今回、調査対象とするサイトは先ほども名前を挙げましたが、トップブロガーのマナブさんが運営するmanablogになります。

別ウィンドウでマナブログで検索してください。

マナブログ

検索して頂きましたら1つの記事を例に要素の調査を行っていきます。
マナブさんは先日Twitterで下記の様な投稿をされています。

というわけでその期間で2018年3月のこちらの記事を調査していきましょう!

【月10万円】ベーシックインカムを稼げるスキルを身につける方法【超具体例】

サイトにアクセスして頂いたらまずは右クリックしてください

要素の調査

要素の調査という項目があるのでクリックします。
すると下記の様に複雑な文字列が並んだウィンドウが出てきます。
この複雑な文字列がこのWEBサイトのHTML、CSSの要素になります。

要素を調査2

今回はライティング力を上げるのが目的ですので、この複雑な文字列の一番左側のウィンドウについて見ていきます。
この部分にHTMLの要素、すなわち記事構成の主要素が含まれているのです。
そしてこの要素を抽出し、ライティング部分のみをピックアップします。

どこにライティング要素が含まれているかは下記の動画と画像を見て頂ければ分かります。

文字列にカーソルを合わせていくと記事のエリアだけ青くなる列があります。
その部分を右クリックしてコピーしましょう。その際はINNER HTMLを選択してください。

FIREFOX要素の調査

コピーしたら後はワードプレスのテキストエディターに貼り付けるだけです。

マナブログ

貼り付けるとこのように複雑な文字列が並んでいます。
これがマナブログの記事の構成要素となっています。
そして、プレビューを押すと・・

マナブログ3
なんとびっくりマナブさんの記事がそのまま表示されました。

しかし、1点だけ注意して頂きたいことがあります。
私の使用しているワードプレスのテーマはマナブさんから購入したものですのでCSS(ウェブデザイン用の言語)の設定が一緒なわけです。そのため皆さんのテーマによっては表示が全く一緒にならないかもしれません。
それでも文の構造だったりHTMLのタグは参考にすることができます

※試しに他のテーマ(ROWLING)
で試してみました。

ROWLING

この通り、テーマが違っていてもデザインこそは異なりますが、サイトの構造だったりは変わりません。

それではマナブさんの記事の構成について見ていきましょう。

記事の構成をマナブ

ここからはいよいよ記事の構成について触れていきます。まずはHTMLタグについてしっかりと覚えていきましょう。

HTMLのタグについては英単語を覚える感覚で学んでいくと良いと思います。

あまり深く考えないことが楽しくライティングする鍵になります。

HTMLタグの基礎を知る

マナブログライティング

①【ブラウザ表示】
ベーシックインカムを稼げるスキルを身に付ける方法です。
下記のTweetでに反応があったので、記事で深掘りしますね。

HTML
<p>ベーシックインカムを稼げるスキルを身に付ける方法です。<br>
下記のTweetでに反応があったので、記事で深掘りしますね。</p>

まずはWEBライティングの基礎中の基礎、pタグとbrタグです。

pタグは段落を指定するためのタグで『Paragraph』の略になります。
<p>ここに文章</p>、<p>と</p>で挟むことで文章のひとかたまりを表します。
brタグは段落のタグになります。pタグと違って挟む必要はなく、改行したい文章の頭にbrタグを入力するだけです。

②【ブラウザ表示】
※記事の質問はTwitterで受け付けます

HTML
<span class=”bold”>※記事の質問はTwitterで受け付けます</span>

ここで出てくるタグはbタグ(boldと表記されています)とspanタグになります。
bタグは文字を太字にする意味を持ち、spanタグは幅の指定を意味します。

spanタグについては難しく考えずに、今回、太文字にしたい部分だけを<span>ここに文字</span>で挟むだけです。

しかし、これだけでは範囲を指定しただけで太文字にする要素がまだ含まれていません。そこで使用するのがclass=”bold”になります。これをspanの後に入れることで、『太文字にする』といった命令を出すことができます。

ちなみにこのclass=”bold”の部分をstyle=”background-color: #ffff00;”に置き換えると、私も使用している黄色マーカーに様変わりしますよ!

また、bタグの兄貴分としてstrongタグがありますが、こちらはbタグよりも強調したい時に使用します。
【HTML】<strong>ここに文字</strong>
見た目は変わりませんがPCが強調する(重要な)文字として認識し、SEOにも影響が出てきます。
記事内で重要な事を述べる時には使用しても良いですが、使いすぎるとSEO的にマイナス要因になるそうですので、無駄な使用はやめましょう。

マナブログライティング

③【ブラウザ表示】

①HTML/CSSを学ぶ方法

HTML
<h3>①HTML/CSSを学ぶ方法</h3>

続いても文構成で欠かせないhタグになります。
Headingタグといい、見出しを意味します。
タグ内の数字を変えるだけで見出しの大きさも簡単に変えることができます。1~4までは良く使う大きさになると思いますので、色々試してみてください。

④【ブラウザ表示】

HTML
<ul>
<li><a href=”https://amzn.to/2GkkCgp” rel=”noopener noreferrer” target=”_blank”>よくわかるHTML5+CSS3の教科書|Amazon</a></li>
<li><a href=”https://dotinstall.com/lessons/basic_html_v3″>HTML入門 (全24回) – プログラミングならドットインストール</a></li>
<li><a href=”https://dotinstall.com/lessons/basic_css3_v2″>CSS3入門 (全19回) – プログラミングならドットインストール</a></li><li><a href=”https://prog-8.com/languages/html”>HTML & CSS | プログラミングを基礎から学べるプロゲート</a></li>
</ul>

文章をリスト化するulタグとliタグになります。少々複雑に見えますが、すごく簡単な構成になっています。

まずはリストを作成したい文の始めに<ul>、終わりに</ul>を入力して大枠を作ります。
ulタグがリストの要素(・~・~のようにリストを作成します。)になります。
そして、その中にリストの項目を入力していきます。
ここではliタグを使用しています。このタグを使いリストの項目を表示します。※pタグは使いません。

ちなみに数字で表示したい場合(1.・・2.・・3.・・のように)はulタグでなく<ol></ol>を使用してください。

  1. よくわかるHTML5+CSS3の教科書|Amazon
  2. HTML入門 (全24回) – プログラミングならドットインストール・・・以下略



【Add Quicktag】タグを打つのが面倒な方へ・・

ここまで、基本的なHTMLタグについていくつ触れてきましたが、多くの方は文章を作成するのに『いちいちタグなんて打ってられない』と思っていると思います。
そんな手間を省くプラグインが『AddQuicktag』になります。

『AddQuicktag』は有名なツールなので、ワードプレスのプラグイン検索で『add quicktag』と検索してください。一番、上部に出ると思います。

add quicktag

それでは、タグの登録をしていきます。登録するタグはこちらになります。

ここに文字

このチェックマークを入れられるタグですがカジュアルに強調できるので、かなりオススメです。
それでは設定していきましょう。

まずAddQuicktagをインストールすると、ワードプレスのダッシュボード【設定】にこのプラグインの名前が表示されているので、クリックしてください。
すると下記の画面に移り変わると思います。

add quicktag2

画像の黄色枠の部分を入力し、保存するだけで完了です。
ラベル名については自分が分かる名前で大丈夫です。私はcheckと打ちました。
また右端のチェック欄は全て適用にしてください。

大切なのはHTMLタグの入力になります。
『AddQuicktag』はボタンを押すことでタグをスタンプのように出力することができます。下記の動画を見ていただければすぐに納得いくかと思います。

そのボタンを押した時に表示されるコードを今から入力していきます。

【開始タグ】

<p class=”point”><i class=”fa fa-check” aria-hidden=”true”></i>ここに文字

【終了タグ】

</p>

以上のタグを開始タグと終了タグにそれぞれコピぺしてください。そして設定を保存して頂き完了です。






よろしければ↑クリックしてください!励みになります🐹

要素の調査でコピーライティング

ひとまずHTMLタグの説明についてはこの辺りで一段落して、続いては実際に記事を書いていきます。
※HTMLタグの解説は引き続き行っていきますので、続編にご期待ください。

方法としては先ほどコピペしたマナブさんのHTMLの要素を元にライティングをしていきます。
マナブさんのサイト構成は非常に論理的で次のようになっています。
意外とこの構成で書かれているブログは少ないです。

<h1>タイトル</h1>
冒頭文:課題提起、学べることについて等の記事の概要
<h2>大見出し</h2>
記事のテーマの大枠について解説、問題の解決策や見解など
<h3>小見出し</h3>
h2で述べた内容をさらに掘り下げる。具体的な説明を行う
+関連記事の紹介など
以下、大見出しと小見出しを繰り返す。
<h2>大見出し</h2>
記事のテーマの大枠について解説、問題の解決策や見解など
<h3>小見出し</h3>
h2で述べた内容をさらに掘り下げる。具体的な説明を行う
最後に
<h2>まとめ</h2>

構造自体はシンプルですが、最初から最後まで記事のテーマに沿っており、途中で論点やターゲットがズレてくることがありません。
長文のブログを書いていると、途中で話が脱線したりすることが良くあります。
私はたまに途中で何書いているんだっけとか思うことがあります。

それを防ぐためにも、まずは上記の記事の構造を元にメモ書きでも良いので、伝えたい内容を見出しごとに簡単に書いてください。
その際に『ターゲット』『目的』『キーワード』等、何か記事の軸となる物を作ると良いです。

書き終わりましたら、マナブさんのHTML要素を元に記事をライティングしていきます。

 注意:記事内容をコピーするのはNGです。

 記事構成を学んでいくのが目的です。

マナブさんの記事をベースにライティングする

それでは早速、抽出した要素を元に記事を書いていきます。
しかし、マナブさんの記事構成はかなり凝っていますので、私が最低限必要なタグを抽出したものをまとめました。
下記記事にアクセスして、上記で学んだ要素の抽出を行い、テキストエディタに貼り付けてください。

ここから抽出マナブログさんから記事要素抽出しました。

要素の調査

この文章構成をベースに書いていくうちにライティング力も高まると思います。
慣れるまでは大変だと思いますが、あきらめず、継続することが大切です。

また一つだけ伝えておきたいのですが、要素で抽出した文構造を全て真似する必要はありません。必要に応じて変更したり、タグを削除してください。

次のようなステップアップでライティング力は高まっていくと思います。

  1. pタグ、brタグやulタグといった基礎的なHTML言語を使用できるようになる。
  2. 蛍光ペンやチェックマークタグなどを使用し、文章に彩りやアクセントを加えられるようになる。
  3. 見出しタグを使い、論理的な記事構造を構築できるようになる。しかし、記事内容は論点とズレている部分もある。
  4. 徐々に論点に沿った文章を書けるようになる。また読者目線で記事を書くことを考えるようになる。
  5. 記事中のキーワード選定を行うようになる。SEO対策を意識する。

まとめ

文章は誰にでも書けますが、その反面、正しいブログの書き方というものはあってないようなものです。
しかし、成功している人のブログは文章の構成やウェブマーケティング力に目を見張るものを感じます。
ブログで稼いでる人は世の中に多くいますが、その中でもマナブさんをお手本にしている理由は

  • 苦難を乗り越えて6年間ブログ運営を継続している、ノウハウや知識が記事に集約されているから。
  • 決して見栄を張らず、読み手を意識した内容に他のブロガーとの差を感じた。派手さはないのに、心牽かれる。

今後もマナブログの記事を要素の調査を行い、その中で得た気づきや知識を共有していきます。

最後まで読んでいただき、ありがとうございました。

業界経験豊富なフリーランスやIT技術にも詳しいコンサルタントがサポート
しているため、初めてのフリーランスの方でも安心して案件獲得が可能です