見やすいブログデザイン【サイドバーの役割】

悩む人

サイドバーは必要なの？
どんなサイドバーにすればいい？
見やすいサイドバー作りたい

こんな悩みを解決します。

ブログの構成要素のうちの一つ「サイドバー」

広告を設置したり、他記事にナビゲーションする役割があります。

しかし、間違ったサイドバー設計をしてしまうと、収益や滞在率の減少に繋がります。

本記事では、サイドバーについて役割やサイドバーの作り方を解説していきます。

【ブログデザイン】サイドバーとは

サイドバーとは、メインコンテンツ（記事やカテゴリーページ）の右側（または左側）に設置された領域のことです。

あきしゅん

あきブログでは右側に設置しているよ。

サイドバーがあることによって読者に、サイト情報を知ってもらうことができます。

例えば「プロフィール」を掲載することで読者に自分がどんな人なのか伝えたり、他のオススメ記事や関連記事を表示させることでブログの直帰率を減らすことができます。

つまり、サイドバーにはサイトをより使いやすくする効果があります。

【ブログデザイン】サイドバーの役割

サイドバーにはたくさんの役割がありますので、まとめました。

順に解説していきます。

ブログの全体像を伝える

カテゴリーをサイドバーに加えることで、サイト全体のジャンルを読者に伝えることができます。

例えば、あきブログを例にすると現在この記事のカテゴリーは「デザイン」です。

デザイン以外にも「ブログ」や「アフィリエイト」の記事を書いていることがサイドバーから伝わります。

そのため、「あきブログ」はブロガーのためのブログと読者に解釈してもらえます。

また、アーカイブを加えることで、ブログの運営期間や更新頻度なのか伝えることができます。

特にトレンド系の記事を書く場合は、最新情報の重要性が高くなるのでアーカイブは必須です。

どんな人がサイト運営しているのか伝える

サイト運営主を設置することは以下のメリットがあります。

どんな人が書いたか分からないと心配になる人もいます。

このブログでもプロフィールを設置することで、安心感を与えることを狙ってます。

また、プロフィールに実績を載せることで、サイト自体の信頼性を高める効果もあります。

さらには、プロフィールにアイコンを設置することで、サイトを覚えてもらえる役割があります。

他の記事を検索した時に、同じアイコンが出てきたら「見たことある！」ってなりますよね。

その結果、「この人の記事だから読んでみよう」とファンを作ることにも繋がります。

あきしゅん

僕の顔覚えてもらえましたか？

他記事に誘導

サイドバーで記事を設置することで他の記事に誘導することができます。

その結果、収益UPしたりサイト滞在時間を増やすのに貢献します。

記事の誘導には以下のものが効果的です。

新着記事はあなたのブログにファンができた時に大きな効果があります。

ファンはあなたの記事を見逃したくありません。

そのため見逃しがあった場合に、サイドバーの新着記事から読んでもらうことに繋がります。

また、トレンド系ブログ運営してる方は、新しい記事の価値が高くなるので必須です。

人気記事はあなたが読んでもらいたい記事を読んでもらうことに繋がります。

特にアフィリエイトで稼ぎたいという方は、収益用記事を人気記事として設置することで収益UPが見込めます。

まとめ記事が人気記事では効果が期待できます。

あきしゅん

人気と聞いたら気になってしまうよね。

関連記事は読者が読んでいる記事に近い内容の記事を設置することで、サイトの滞在時間を増やす効果が見込めます。

読者目線から考えても、似た内容の記事が表示されれば、より詳しく調べることができるので便利です。

SNSアカウントに誘導

TwitterやFacebook、InstagramといったSNSアカウントのタグを設置することで、ブログからSNSに誘導することができます。

その結果、フォロワーの増加が期待できます。

また、ブログからSNSアカウントをフォローしてもらうことで、より深いファンを作れる可能性があります。

広告に誘導

グーグルアドセンスやアフィリエイト広告を設置することで、クリックしてもらえるチャンスが増えます。

その結果、アドセンスやアフィリエイトから収益が発生する頻度が増えます。

記事の補足

この記事を読んでるあなたはサイドバーで「目次」を確認することができますよね？

このように記事の補足をすることができます。

その結果ユーザビリティが向上し、SEO評価の向上にも繋がります。

【ブログデザイン】サイドバー注意事項

ここまでサイドバーについてプラスの要素を述べてきました。

しかし、使い方を間違うとマイナスにもなってしまいます。

以下のことに注意しましょう。

順に解説していきます。

広告を載せずぎない

グーグルアドセンスやアフィリエイト広告を載せることで収益UPに繋がることを述べました。

しかし、広告をサイドバーに設置しすぎると、サイト全体が広告クリックを誘導してる感が出てしまいます。

すると、読者さんが離れてしまう原因になります。

サイドバーには多くても広告を２つまでにしておきましょう。

情報を載せすぎない

これまで紹介した通りに実践するなら、「サイドバーに全て載せればいいのでは？」と思う方もいるでしょう。

しかし、情報がありすぎるのもデメリットになってしまいます。

例えば以下のような記事があったとします。

どちらがこの記事を読んで購入されやすいと思いますか？

答えは「オススメシャーペン５選」です。

「オススメシャーペン５０選」のように情報を与えすぎると、読者は混乱してしまい購入しづらくなってしまいます。

サイドバーも同じことが言えます。

情報がありすぎると、読者は混乱してしまい他記事や広告に誘導がしづらくなります。

また時々、トップページでメインコンテンツよりサイドバーが長すぎるサイトを見かけます。

サイドバーが長すぎると、バランスが悪くなり見た目が残念になります。

さらには、サイドバー後半の内容はスルーされてしまい、サイドバーの役割が果たせません。

あきしゅん

サイドバーに載せる内容は程々にしましょう。

【ブログデザイン】サイドバーの設定

サイドバーに何を設置するのが正解なのか気になりますよね。

答えは「サイトジャンルによって違う」です。

それぞれのサイトに合わせたサイドバーを作る必要があります。

私のブログを例に、あなた自身のサイトに必要な項目を検討してください。

サイドバーに必要な項目

一般的にサイドバーに設置する候補としては以下の通りです。

これら全てを載せてしまっては、サイドバーに情報を載せすぎることになってしまいます。

この中からあなたのブログにあったものを選択していきましょう。

各項目から期待できるメリットごとにジャンル分けすると以下の通りです。

また、これらの中から読者視点で考えると、以下の2つは必ずサイドバーに設置しましょう。

例：あきブログのサイドバー必要項目決め

私のブログを例に、読者にどう読んでもらいたいか決めてデザイン設計していきます。

「あきブログ」では初心者ブロガーのためのブログです。

使いやすくてシンプルなデザインにこだわっています。

掲載項目

あきブログで達成したいことを考えた結果以下のように上から設置しました。

設置を今後検討中の項目

広告　→　収益UPため

アーカイブ　→　ブロ運営歴が長くなったら

サイドバーに設置しなかった項目理由

新着記事、関連記事　→　サイドバーに記事が多くなりすぎる

タグ　→　検索ウィンドゥで十分

サイドバーは右側？左側？3カラム？

たくさんのサイトを訪問すると上記の3パターンのサイドバーを目にします。

サイドバーはどこに配置した方がいいのでしょうか。

3パターンの滞在時間や直帰率を調査した結果以下の通りです。

つまり「右サイドバー」か「左サイドバー」が適していると言えます。

この2つはサイドバーのデザインによって適性が変わってきます。

サイドバーを決定する前に読者の視点移動の仕方はご存知でしょうか？

Fの法則とZの法則

読者がサイト記事を閲覧してる時、視点は上記画像のように認識していきます。

アルファベットの「F」、「Z」の動きで視点が移動することから「Fの法則」、「Zの法則」と呼ばれています。

これら法則の特徴は以下の通りです。

これらの法則から大事なコンテンツは左側や上側に設置した方がいいということです。

これを踏まえて「右サイドバー」か「左サイドバー」どちらを選択すればいいか考えると以下の通りです。

一般的に右サイドバーを使用しているサイトがほとんどなので、特にこだわりがなければ右サイドバーがオススメです。

あきしゅん

ブロガーさんは基本右サイドバーにしておけば間違いない！

あまり見かけませんが、サイトの直帰率を減らすには左サイドバーの方が効果的です。

しかし、記事を読みにきた読者は記事の内容が理解しづらくなってしまいます。

特に、サイドバーに文字が文字が多いと記事に集中しづらいです。

記事の内容が写真や動画などたくさんの場合は左サイドバーの方が適しています。

あきしゅん

Amazonやアフィリエイトサイトは左サイドバー活用してたりするね！

AFFINGER5でサイドバーをカスタマイズ

テーマによってデザインの自由度や難度はさまざまです。

幅広いデザインが可能なAFFINGERなら、先ほど決めたデザインを簡単に思い通りに作成することができます。

AFFINGER5でのサイドバーカスタマイズ方法について詳しく下の記事でまとめてあります。

私のサイドバー設定を全て公開してるので、「あきブログ」をマネしたいという方は参考にしてください。

AFFINGERを使ってデザインをこだわりたいという方は、こちらから購入して思い通りにデザインを作成しましょう。

AFFINGER5の購入はこちら

見やすいブログデザイン【サイドバー編】まとめ

ブログの構成要素のうちの一つ「サイドバー」について役割や注意事項をまとめました。

サイドバー次第で滞在率や収益UP、ファンの獲得を目指せます。

しかし、間違ったサイドバー設計をしてしまうと、これらは達成できません。

想定する読者にあったサイトバーを設計してブログを伸ばしていきましょう。

また、他に役に立つデザイン記事は下記にまとめていますので、ご活用下さい。

デザイン記事一覧

以下の文章は WordPressテーマ「AFFINGER」を購入しようと思っている方向けです。

AFFINGERならサイドバーを簡単にカスタマイズできます。

実は私がWordPressでブログを初めて1週間の初心者時代から、このサイドバーのデザインはほとんど変わっていません。

初心者でもAFFINGERなら、あなたが作りたいサイドバーを簡単に作ることができます。

こちらの記事を読めばAFFINGERがいかにデザインカスタマイズ性が高いか評判を確認することができます。

これらに当てはまる方は是非早いうちに、AFFINGER導入を考えてみてください。

記事を数十本書いてからのテーマ変更は時間がかかったり、記事が修正不可能だったり大変なことだらけです。

効率よく、そして楽しくブログを運営していくために少し初期投資してみませんか？

AFFINGER5の購入はこちら