ブログ nakyublog

【初心者向け】ブログのレイアウトを最適化する方法【5つのポイント】

【初心者向け】ブログのレイアウトを最適化する方法【5つのポイント】
初心者ブロガー
ブログのレイアウトどうしようかな。デザインの知識なんてないし。。ブログのレイアウトを最適化する方法を初心者にもわかりやすく教えて欲しい。

こういった疑問に答えます。

 

✔︎ 本記事の信頼性

本記事の信頼性

この記事を書いている私、なきゅはブログ歴３年かつ、現役Webエンジニアです。

ブログのレイアウトを試行錯誤して、今はブログで月１０万円の収益を得ています。

 

✔︎ 本記事の内容

本記事の内容
  1. ブログのレイアウトを最適化する目的
  2. ブログのレイアウトを最適化する前にやるべきこと【２つだけ】
  3. ブログのレイアウトを最適化する方法【5つのポイント】
  4. ブログのレイアウトを最適化した後にやるべきこと【３つ】

今回は、【初心者向け】ブログのレイアウトを最適化する方法【5つのポイント】をお伝えします。

 

ブログのレイアウトは自分でやろうとすると、プログラミングの知識が必要です。

時短するためにも、WordPressテーマを導入して簡単にレイアウトを整えましょう。

 

この記事を読めばブログのレイアウトの最適化が初心者でも必ず達成できます。

なきゅ
ブログのレイアウトを効率的に最適化して、ユーザーに親しまれる、そして稼げるブログを目指しましょう！

ブログのレイアウトを最適化する目的

ブログのレイアウトを最適化する目的

ブログのレイアウトを最適化する目的を明確にして、行動に移していきましょう。

目的は以下の通り。

✔︎ ブログのレイアウトを最適化する目的

  1. SEO対策をする
  2. 読みやすいブログにする
  3. ブログの信頼度を上げる

上記を深掘りしていきます。

 

SEO対策をする

ブログのレイアウトを最適化すると、SEO対策になります。

理由は以下の通り。

 

✔︎ ブログのレイアウトを最適化するとSEO対策になる理由

  1. Googleロボットから「コードが整っているサイト」という評価をもらえるため
  2. 読者の滞在時間が長くなるため
  3. 読書の直帰率が低くなるため

 

分かりにくいので、以下でもう少し掘り下げてみます。

 

✔︎ ブログのレイアウトを最適化するとSEO対策になる理由（深掘り）

  1. コードが整っている → サイト設計がされている
  2. 読者の滞在時間が長くなる → 読者の悩みをきちんと解決している
  3. 読書の直帰率が低くなる → 読者にとって有益なサイト

→Googleから評価される！

 

なきゅ
ブログのレイアウトを整えるのはSEO対策になるので、やらない理由がないです。初心者なら、尚更ここはしっかりと取り組みましょう。

わかりやすいブログにする

ブログのレイアウトを最適化すると、わかりやすいブログになります。

具体例は以下の通り。

 

✔︎ わかりやすいブログのレイアウト

  1. ヘッダーにブログの情報を与える
  2. ピックアップ記事を導入する
  3. プロフィールを表示する

 

ブログのレイアウトを最適化して、ブログの情報を読者に伝えましょう。

もう少し深掘りしていきます。

✔︎ わかりやすいブログのレイアウト（深掘り）

  1. ヘッダーにブログの情報を与える → ブログの概要が伝わる
  2. ピックアップ記事を導入する → ブログにどんな記事があるのか伝わる
  3. プロフィールを表示する → ブログの作者が伝わる

→ブログの情報が伝わりやすくなる！

 

なきゅ
ブログのレイアウトを整えるのはSEO対策になるので、やらない理由がないです。初心者なら、尚更ここはしっかりと取り組みましょう。

ブログの信頼度を上げる

ブログのレイアウトで手を抜いているブログは、

「このブログはレイアウトで手を抜いているから記事も大したことないだろう」

と読者に思われてしまいます。

ブログの信頼度を上げるためにも、レイアウトを最適化しましょう。

 

✔︎ ブログのレイアウトを最適化すると信頼度が上がる理由

  1. レイアウトの質が高ければ記事の質も高いと思われる
  2. 本気で運営しているならレイアウトにも気を使っているはず
  3. レイアウトでブログの第一印象は決まる

 

なきゅ
どんなに良い内容の記事を書いても、レイアウトが整っていなければ読者からの信頼は得られません。

ブログのレイアウトを最適化する前にやるべきこと【２つだけ】

ブログのレイアウトを最適化する前にやるべきこと【２つだけ】

ブログのレイアウトを最適化する前にやるべきことは２つだけ。

 

✔︎ ブログのレイアウトを最適化する前にやるべきこと

  1. WordPressブログを開設する
  2. WordPressテーマを導入する
なきゅ
すでにやっている場合は、読み飛ばしてください！

WordPressブログを開設する

WordPressブログをまだ開設してない人は、開設しましょう。

下記の記事で初心者にもわかりやすく説明しているので、ご覧ください。

【簡単すぎ】ブログ初心者がWordPressを始める手順【クイックスタートが神】

なきゅ
WordPressブログを開設していないと、WordPressテーマが使えないので、必ず開設しましょう。

WordPressテーマを導入する

ブログのレイアウトはWordPressテーマでやってしまうのがベストです。

※ このブログのようなレイアウトにする場合は「STORK」というテーマを選んでください。

✔︎ WordPressテーマとは？

WordPressテーマとは、WordPressで作られたブログのデザインを一気にカスタマイズできる便利ツールです。

 

✔︎ WordPressテーマのメリット

WordPressテーマのメリット
  1. プログラミング不要でレイアウトをカスタマイズ可能
  2. SEO対策、デザイン修正も簡単にできる
  3. コストパフォーマンスが非常に高い

 

以下の記事でオススメのWordPressテーマと、導入方法を解説しています。

初心者でも簡単に導入することができるので、安心してください。

 

【2020年最新】ブログ初心者にオススメなWordPressテーマ５選【SEO対策済み】

 

※ このブログのようなレイアウトにする場合は「STORK」というテーマを選んでください。

 

STORK(ストーク)を見てみる

 

注意

WordPressテーマを導入せずにブログ運営するのは正直言って無謀です。

膨大な時間をプログラミングに充てることになるので、初心者は迷わず導入しましょう。

ブログのレイアウトを最適化する方法【5つのポイント】

ブログのレイアウトを最適化する方法【5つのポイント】

それでは実際にブログのレイアウトを最適化していきましょう。

以下の通り、ポイントは５つあります。

 

✔︎ ブログのレイアウトを最適化する方法【５つのポイント】

  1. ヘッダー（ロゴ、カテゴリ）
  2. プロフィール
  3. 固定記事、スライドショー
  4. 人気のある投稿
  5. 目次

 

スライドショーについて

スライドショーについてはWordPressテーマ「STORK」でのやり方を紹介しています。

もし「STORK」でない場合、やり方が異なるのでご注意ください。

（初心者は「STORK」を選ぶことをお勧めします。）

 

STORK(ストーク)を見てみる

 

詳しく解説していきます。

ポイント① ヘッダー（ロゴ、カテゴリ）

ヘッダー、カテゴリ

上記画像の通り、ヘッダーのロゴ、カテゴリを設定しましょう。

 

✔︎ ヘッダーのロゴを選ぶコツ

  • ブログタイトルを必ず入れる
  • シンプルで見やすいものにする
  • 画像はCANVAで作るか、PCの機能(Macならプレビュー)で作れば十分
なきゅ
ヘッダーのロゴ画像はCANVA等、PC機能で作れば十分です。それほど凝らなくても大丈夫です。

 

✔︎ ヘッダー画像の設定方法

ヘッダー画像の設定方法1

「外観」のカスタマイズをクリック。

 

ヘッダー画像の設定方法２

「サイトロゴ・アイコン」をクリック。

 

ヘッダー画像の設定方法３

「画像を変更」をクリックして、ヘッダー画像をアップロードしましょう。

 

✔︎ ヘッダーカテゴリの設定方法

カテゴリの設定方法１

「外観」＞「カスタマイズ」＞「メニュー」をクリック。

 

カテゴリの設定方法２

「メニュー」をクリック。

 

カテゴリの設定方法３

「項目を追加」＞「カテゴリ」＞カテゴリを選択して追加完了。

 

なきゅ
もうお気づきかと思いますが、「外観」の「カスタマイズ」でレイアウトやデザインを編集できるので、いろいろ試してみましょう。

 

ポイント② プロフィール

プロフィール

ブログの情報を伝えるために、自分のプロフィールを作成、表示しましょう。

✔︎ プロフィールのコツ

  • 自分の名前（ニックネーム）は書く
  • 職業、実績を簡潔にまとめる
  • SNSのリンクを貼っておく（Twitterはマスト）
なきゅ
プロフィールは雑記ブログなら必ず設定した方が良いです。特化ブログなら設定しなくてもOK。

 

✔︎ プロフィールの設定方法

プロフィールの設定方法１

「外観」の「ウィジェット」をクリック。

 

プロフィールの設定方法２
  1. 「カスタムHTML」をクリック
  2. 「PC:メインサイドバー」をクリック
  3. 「ウィジェットを追加」をクリック

 

プロフィールの設定方法３
  1. 「PC:メインサイドバー」内の「検索」の下に先ほどの「カスタムHTML」を移動
  2. 「カスタムHTML」のタイトルに「プロフィール」と入力
  3. プロフィール用のコードを入力して保存すれば完了（下にコード例を載せます）

 

✔︎ プロフィールのソースコード（テンプレ）

<div style=”text-align:center;display:block;margin:1em auto -1em”><img src=ここにプロフィール画像URL alt=”profile“></div><h4 style=”text-align:center;display:block;margin:1em auto 0.5em”>ここに名前 (<a href="https://twitter.com/ここにTwitterID">Twitter</a>)</h4><p>ここに自己紹介</p>

✔︎ プロフィールのソースコード（このブログの場合）

<div style=”text-align:center;display:block;margin:1em auto -1em”><img src=https://nakyublog.com/wp-content/uploads/2019/02/2rN05LKP_400x400.jpg alt=”profile“></div><h4 style=”text-align:center;display:block;margin:1em auto 0.5em”>なきゅ (<a href="https://twitter.com/nakyu_blog">Twitter</a>)</h4><p>現役のホワイトWeb系自社開発Railsエンジニア。４ヶ月間働きながら猛勉強し、公務員から転職を成功させた。ブログ収益月１０万円突破。</p>

上記でプロフィール用の画像URLを入力する必要があります。画像URL取得方法は下記の通り。

 

✔︎ プロフィール用の画像URLの取得方法

プロフィール用の画像URLの取得方法

画像を追加する画面（メディアを追加）で画像を選択すると、右下に画像URLがあります。

 

ポイント③ 固定記事、スライドショー

固定記事、スライドショー

ブログの固定記事、スライドショーを設定し、特に読者に見てほしい記事を選びましょう。

 

✔︎ 固定記事、スライドショー記事を選ぶコツ

  1. 読者に一番見て欲しい記事(収益記事など)
  2. 読者に役立つであろう記事
  3. まとめ記事

 

✔︎ 固定記事の設定方法

固定記事の設定方法１

設定したい記事の編集画面で「公開状態」の「編集」をクリック。

 

固定記事の設定方法２

「この投稿を先頭に固定表示」にチェック✔︎を入れれば完了。

 

✔︎ スライドショーの設定方法

スライドショーについて

スライドショーについてはWordPressテーマ「STORK」でのやり方を紹介しています。

もし「STORK」でない場合、やり方が異なるのでご注意ください。

（初心者は「STORK」を選ぶことをお勧めします。）

STORK(ストーク)を見てみる

 

スライドショーの設定方法１

「投稿」の「タグ」をクリック。

 

スライドショーの設定方法２
  • 「名前」は任意。「ピックアップ」で良いでしょう。
  • 「スラッグ」は必ず半角で「pickup」と入力
  • 「新規タグ追加」をクリック

 

スライドショーの設定方法３

スライドショーに表示したい記事の編集画面で、

タグに先ほどのタグの名前（ピックアップ）を設定し、追加ボタンをクリックして完了。

 

ポイント④ 人気のある投稿

人気のある投稿

人気のある投稿（閲覧回数が多い記事）を表示させましょう。

 

「WordPress Popular Posts」というWordPressプラグインが簡単なのでオススメ。

WordPress Popular Posts

WordPress-Popular-Posts

 

以下の記事で初心者必携のWordPressプラグイン、および導入方法を解説しています。

✔︎ WordPressプラグインの記事

ブログ初心者必携のWordPressプラグイン５選【使い方も解説】

 

WordPress Popular Postsを見てみる
なきゅ
基本的にこのプラグインはインストールして有効化し、ウィジェットに設置するだけです！

 

✔︎ 人気のある投稿の設定方法

プラグインの新規追加

「プラグイン」＞「新規追加」をクリック。

 

人気のある投稿の設定方法１

「WordPress Popular Posts」と検索、「今すぐインストール」をクリック。

 

人気のある投稿の設定方法２

「有効化」をクリック。

 

人気のある投稿の設定方法３

「外観」＞「ウィジェット」に移動すると、

「WordPress Popular Posts」が追加されています。

 

人気のある投稿の設定方法４

先ほどのプロフィール設定の時と同様にウィジェット内で追加すれば完了です。

ウィジェットの場所はPCのメインサイドバーがお勧め。

 

ポイント⑤ 目次

目次

目次を表示させましょう。

 

「Rich Table of Contents」というWordPressプラグインが簡単なのでオススメ。

 

Rich Table of Contents

Rich Table of Contents

 

Rich Table of Contentsを見てみる

 

なきゅ
基本的にこのプラグインはインストールして有効化するだけです！

 

✔︎ 目次の設定方法

プラグインの新規追加

「プラグイン」＞「新規追加」をクリック。

 

目次の設定方法１

「Rich Table of Contents」と検索。「今すぐインストール」をクリック。

 

目次の設定方法２

「有効化」をクリックして完了。自動的に目次が表示されます。

 

ブログのレイアウトを最適化した後にやるべき事【３つ】

ブログのレイアウトを最適化した後にやるべき事【３つ】

ブログのレイアウトを最適化した後にやるべき事をお伝えします。

 

✔︎ ブログのレイアウトを最適化した後にやるべき事

  1. ASP（アフィリエイトサイト）に登録する
  2. アフィリエイトでまずは「月５万円」を稼ぐ
  3. 質の高いブログ記事を書いていく

 

ASP（アフィリエイトサイト）に登録する

レイアウトを整えただけでは収益は発生しません。

適切なレイアウトにして、ASPを利用し、アフィリエイトリンクを貼りましょう。

以下の記事が参考になります。

ブログのマネタイズに必須な、ASP５選【広告収入】

なきゅ
ブロガーでASPに登録していないのは致命的です。上記の記事を参考に、必ず登録しておいてください！

 

アフィリエイトでまずは「月５万円」を稼ぐ

ASPでアフィリエイトリンクを貼り、そこから「月５万円」を稼ぎましょう。

以下の記事を参考にどうぞ。（初心者にもわかりやすく説明しています。）

ブログ初心者がアフィリエイトで「月5万円」を稼ぐ方法【簡単３ステップ】

 

なきゅ
アフィリエイトで月５万円を達成するのは初心者でもやり方さえ守れば十分に可能です！

 

質の高いブログ記事を書いていく

ブログのレイアウトが整っていても、記事の質が低ければ収益は発生しません。

以下の記事を参考にどうぞ。

【SEO】知らないと致命的な、ブログ記事の書き方【アフィリエイト】

 

なきゅ
レイアウトと、記事の質を両方高めることにより、質の高いブログができます！

RECOMMENDこちらの記事も人気です。