この記事では、読みやすいブログのレイアウトやデザインについて解説しているとん
ブログにアクセスや人気を集めるには、様々な方向に気を遣う必要があります。
アクセスアップの常套手段としてSEO対策がありますが、これは誰もがして当たり前の部分です。
ライバルが多い現状を考えると、ただ機械的にSEO対策をしていてもアクセスはなかなか集まらないでしょう。
じゃあどうすればいいんだぶぅ〜！
今回はSEO対策以外に気を遣うべき項目として、主にブログのレイアウトやデザインについて解説していきます。
「ブログは文章がメイン」という認識の方は意外とレイアウトについて考えていないことが多く、実はこの点で周りに劣ってしまっていることもあるのです。
今まで見た目に頓着のなかったブロガーの方は、この記事を読んで、レイアウトやデザインについて少しでも意識できるようになっていただければと思います。
文章と同じくらいデザインも大事なんだトン
SEO以外に行うべき施策
まずはじめに、先ほど少し触れましたが、SEO対策以外に行うべき施策について触れておこうと思います。
ブログ初心者はどうしても文章の部分だけにとらわれてしまい、他の部分を疎かにしてしまっていることが多いです。
しかし、いくら上手い文章と検索キーワードで記事を書いても、その他の部分で足を引っ張ってしまうと結果が出にくいのがブログです。
ブログを収益化するためには、文章以外にも多くの工程が必要になります。
正直骨が折れると思いますが、メディア運営は手間のかかるビジネスですので、少しずつ整えていきましょう。
SEO対策以外で行った方がいい施策は、主に以下の４点になります。
- プラグインの初期設定
- セキュリティ対策
- SNSからの集客
- ブログのレイアウトデザイン
プラグインの初期設定
ブログ運営には、ワードプレスに様々な追加機能をつける必要があります。
そのプラグインの初期設定も重要です。
SEO対策の前に、ブログの運営体制を作っておかないと効率の悪い運営になってしまいますので、まずはプラグインの設定をしておきましょう。
プラグインについては以下の記事を参考にしてください。
セキュリティ対策
続いてはセキュリティ対策です。
どんなにSEOを頑張っても甘いセキュリティでは意味がありません。
最悪の場合ハッキングされることもありますので、Googleの評価を上げるための最低限の対策である「SSL化」は必ず行っておきましょう。
SNSからの集客
SNS集客も重要な施策の一つです。
今の時代、ほとんどのブロガーはSNSと連動してブログを運用しています。
SEOだけでは集客に限界がきているのと、多くのユーザーがSNSを利用して情報を収集しているからです。
ですので、ブログ運営だけでも大変ですが、SNSの運営も頑張って行きましょう。
出来れば動画との連動も
そして出来れば、YouTubeとの連動もすれば最強です。
実際、多くの発信者はブログと動画を連動しています。
そうすることで多角的にブランディングできますので、余裕のある方は試してみましょう。
ブログのレイアウトデザイン
最後は今回の記事で紹介する、レイアウトデザインの設定です。
こちらについて今から詳しく解説しますね。
ブログのレイアウトやデザインの重要性
ブログのデザインやレイアウトはなんで重要なんだぷう？
そもそも、ブログのレイアウトがなぜ重要なのか疑問に思っている方もいると思いますので、その重要性について伝えたいと思います。
確かにブログは文章がメインで、欲しい情報さえあればユーザーは目的を達成してしまいます。
しかし、ユーザーはブログの外観もかなり気にしているのです。
実際ブログを離脱する理由として、以下のように思われていることがあります。
- 昔のサイトっぽくて古い情報しかなさそう
- 素人が運営してるブログみたい
- 改行がなくて読みづらいから閉じよう
どれもブログデザインに原因があることがわかります。
記事を読んでもらうためにも、そして自身のブランディングのためにも、ブログデザインにはある程度クオリティが必要です。
この問題は既存のブログテーマを使用すれば概ね解決できますので、まずはデザインの重要性について意識しましょう。
ワードプレスのブログテーマについては以下の記事をご覧ください。
ブログの基本レイアウト
ブログの基本レイアウトを教えて欲しいぷう
まずは基本的なブログの構成について解説したいと思います。
成功している多くのブログは大体同じようなレイアウトで構成されています。
この基本構成さえ守っておけば大きく間違えることはないでしょう。
ブログを構成しているパーツは概ね以下の８点です。
一つずつ解説していきますね。
- ヘッダー
- トップメニュー
- トップページ
- スライダー等
- サイドバーウィジェット
- 本文
- 関連記事
- フッター
ヘッダー
まずはヘッダーからです。
ヘッダーは画像の赤枠で指した通り、ブログの一番上に表示されるパーツになります。
ジャストサーバーブログの場合はかなりシンプルなデザインにしていますが、自分独自のバナーを用意して飾るのもOKです。
ヘッダーはアクセスした際に一番はじめに目に入る部分ですから、とても重要になります。
自分のブログを印象付けるために、アピールがあれば記載した方が良いですね。
特に、
- タイトル
- 説明文
- キャッチコピー
は重要です。
ブログのヘッダーを見ただけでどんな情報を受け取れるのかがわかるデザインが理想です。
ただし、あまりごちゃごちゃしすぎるのも良くないので、難しい場合はシンプルな内容にした方が無難だと思います。
SNSのボタンを設置するとSNSとの連携もできてオススメとん！
トップメニュー
続いてはトップメニューになります。
トップメニューとは、ブログの下に並んでいるメニューです。
この項目は、トップページや個別記事から別のカテゴリーなどへ飛ばす導線になりますので、必ず設置しましょう。
トップメニューに表示する項目は、
- カテゴリー
- 固定ページ
- 個別記事
- LP
- 問い合わせ
などさまざまです。
トップメニューには特にアクセスを流したいページを設定し、そこからの商品成約などに繋げましょう。
トップページ
トップページとは主に記事一覧のデザインを指します。
こちらについてはテーマによりけりですが、記事一覧を、画像のように縦に一列にしたり、ブロック形式にしたりとやり方はさまざまです。
トップページにアクセスした人がスムーズに記事に移動できるように無難な設定にしておきましょう。
特に正解はありませんので、サムネイルとタイトルが見やすく表示され、10件程度の記事が表示されているのが理想です。
スライダー等
続いてはスライダーなどについてです。
ジャストサーバーブログでは設置していませんが、トップメニューの下などに記事の一覧が横にスライドしていく、いわゆる「スライダー」を設置しているブログも多くあります。
動きのあるデザインで非常に目立ちますし、注目してほしい記事をピックアップしておけば更なるアクセスアップも期待できます。
今はテーマの標準機能で搭載されていたり、プラグインで簡単に設置できるようになっていますので、トップページのデザインが寂しい場合は設置してみるのも良いと思います。
ただし、こういった動きのあるレイアウトはJavaScriptというプログラムで行うことが大半です。
そうなるとサイトが多少重くなり表示が遅くなる可能性もあるため、動きのあるプログラムの導入はほどほどにしておくことをオススメします。
動きのあるプログラムは取捨選択するとん！
サイドバーウィジェット
続いてはサイドバーウィジェットです。
サイドバーはパソコンで見た際に横（サイド）に表示されるパーツになります。
様々なブログを今まで見てきましたが、ほとんどのブログはサイドバーを右に設置していました。
ですので、特に理由がないのならサイドバーは右に設置するようにしましょう。
サイドバーを設置するには、ワードプレスの「ウィジェット」という機能を使います。
ウィジェットは直感操作で色々なパーツを設置できますので、初心者の方でも簡単に設置可能です。
オススメのウィジェットは以下の５点になります。
- 人気記事ランキング
- 最新投稿
- カテゴリー
- SNS埋め込み
- 広告バナーなど
サイドバーも他コンテンツへの誘導に最適なパーツですので、ユーザーがブログ内の記事を巡回できるようにしっかり設定しておきましょう。
ちなみにウィジェットについてはこちらの記事で解説していますので、参考にしてください。
本文
続いては本文になります。
本文については、特にレイアウト的にあまり差が生まれない部分です。
ただ、これだけは言えることとして、
背景色：白
文字色：黒
これは絶対に守った方が良いです。
稀に、背景が黒で文字が白のブログもありますが、大半の方が読みにくいと感じるでしょう。
人間にとって一番見やすいのが「背景：白、文字：黒」ですので、これは守るようにしましょう。
また、本文については、デザインもそうですが「読みやすい文章を書く」ということを意識した方が良いです。
こちらの記事でコツを解説していますので、参考にしてください。
関連記事
続いては関連記事になります。
今読んだ記事に関連した記事を案内することによって、直帰率の低下や滞在時間を上げる効果に繋がります。
主に記事の下に設置することが多いですね。
ほとんどのテーマで対応していますので、こちらも必ず設定するようにしましょう。
ちなみに直帰率についてはこちらの記事で解説しています。
フッター
最後はフッターになります。
あまり見る人はいないと思いますが、ブログの一番下に表示されている項目になります。
このブログではかなりシンプルにしていますが、SNSへのリンクなどを載せてもいいでしょう。
また、ブログ運営上、法律的に載せないといけない特商法やプライバシーポリシーもありますので、その点は必ず記載しておきましょう。
ブログ運営上の法律問題についてはこちらの記事で解説していますので、参考にしてください。
お洒落なブログデザインにするための工夫点
ブログのレイアウトやデザインの工夫点を教えて欲しいぷう
上記の基本的なレイアウトが終わったら、次はさらに差別化するための施策に移りましょう。
ただ、レイアウトやデザインというのは正解がありません。
正直センスの部分もありますので、もし不安でしたら他の成功ブログのレイアウトを真似するか、デザイナーにデザインしてもらいましょう。
それでは、ブログをおしゃれにするための施策について紹介します。
今回ご紹介するのは以下の10項目です。
- ブログのテーマカラーを統一
- アイキャッチデザインを統一
- 見出しを装飾
- 目次を設置
- 画像の幅＝ウィンドウ幅
- 内部リンクは埋め込む
- 本文の文字を大きくしない
- 色文字を使わない
- 改行と行間を意識する
- 吹き出しを使う
ブログのテーマカラーを統一
まずはブログのテーマカラーを設定し、各所で統一しましょう。
このブログのテーマカラーは青色です。
ヘッダーや見出しの装飾など、青を基調に設定されています。
もしサイドバーだけ赤色だったら、バランスの悪い配色になってしまうでしょう。
また、テーマカラーは売りたいサービスのテーマカラーと合わせるとさらに統一感がでます。
自分のキャラやサービスに合わせて色を設定するところから始めましょう。
色には固有のイメージがあるから慎重に選ぶトン！
アイキャッチデザインを統一
アイキャッチのデザインを統一するのも効果的です。
アイキャッチ画像は、自分で作る場合と外注して作る場合があると思いますが、いずれにせよデザインのテイストは統一しましょう。
これがバラバラですと、統一性のないダサいブログになってしまいます。
デザイナーによって雰囲気は違うと思いますので、なるべく同じデザイナーに依頼してテイストを合わせるようにしていきましょう。
見出しを装飾
見出しの装飾は必須と言ってもいいでしょう。
このブログ記事でも既に行なっている通り、テーマカラーに合わせて見出しのデザインを行うと、よりクオリティが上がります。
見出しの装飾については、多くのテーマで複数パターンを選択できるようになっています。
なので、色々なデザインを試してみて、ブログに一番マッチしたデザインに設定するようにしましょう。
目次を設置
目次も重要な要素です。
記事を見やすくする上でも大切ですが、目次を設定することによって、ユーザーが情報を探しやすくなります。
ブログのデザイン的にもワンランク上がりますので、必ず設置しましょう。
目次の設定についてはこちらの記事で解説していますので、参考にしてください。
画像の幅＝ウィンドウ幅
続いての工夫は、画像の幅をウィンドウの幅にするという施策になります。
どういうことかわかりにくいと思いますので、事例を見せたいと思います。
[小さい画像]
[ウィンドウ幅に合わせた画像]
こちらを比べた時、中途半端な大きさの画像よりも、ウィンドウ幅に合わせた方がレイアウトが自然になりますよね。
ですので、画像を貼る場合はウィンドウ幅に合わせて貼るようにしましょう。
内部リンクは埋め込む
続いては、内部リンクを埋め込むという施策です。
このブログでもよく使ってますが、自分のブログの他記事への誘導する際は、このように埋め込み機能を使うようにしましょう。
これだけでもオシャレになります。
外部リンクは青色に
ほとんどの方は大丈夫だと思いますが、稀にリンクの色を別の色に設定しているブログを見かけます。
外部リンク＝青文字という認識で一般に普及していますので、リンクを他の色にするとクリック率が大幅に落ちるでしょう。
https://justsv.com/
これだとこの文字列がリンクだとわかりづらいですよね。
ですので、リンクを貼る場合は青色を指定しましょう。
本文の文字を大きくしない
本文の文字を大きくしないという点も重要になります。
これも稀に見ますが、文字の一部を大きくして強調していると、非常にダサく見えます。
一部の文字を大きく
普通の記事の中に、突然大きな文字があっても不自然なだけですので、大文字を使うことは避けましょう。
デザインも崩れやすいトン
色文字を使わない
続いては色文字についてです。
これは使っている方が多いと思いますが、文字を黒ではなく他の色に指定して記事を装飾している場合があります。
このように、文字に色をつけると非常に見にくいです。
なので、装飾を行う際は色文字ではなく、マーカーなどを使用して強調することをオススメします。
改行と行間を意識する
改行と行間を意識するのも重要です。
こちらは読みやすい記事の作成でも触れましたが、改行のない記事は非常に読みづらいです。
それだけで離脱の可能性が上がりますので、改行は必ず行いましょう。
基本的には、「。」で終わった後に改行をすれば問題ありません。
ただ、改行のしすぎもよくありません。
「、」で改行するとメルマガなどでは割と読みやすいですが、ブログだとやりすぎ感があります。
PC表示だとまだいいのですが、スマホ表示の場合、画面の幅によっては中途半端な箇所で改行されてしまいます。
ですので、「。」で改行するのが一番無難でしょう。
また、行間については、テーマを使用して改行を行えば自然になりますので、特に問題ないと思います。
吹き出しを使う
吹き出し機能を利用するのもいいでしょう。
少し手間は増えますが、ブログに個性が出ますしデザイン的にも良くなるのでオススメです。
吹き出しがあるとちょっと一息つけるブゥ〜♪
さらにオリジナルのキャラクターを作れば、それをツイッターやYouTubeにも利用できます。
それだけでブランディング可能ですので、ブログ運営に非常に有効な戦略になるでしょう。
キャラクターさえあれば簡単に設定できますので、記事に物足りなさを感じたときは追加することをオススメします
ブログレイアウトを工夫する上での注意点
レイアウトを工夫する上での注意点を教えて欲しいぷう
ブログのレイアウトやデザインを頑張るのは非常に良いことなのですが、一つ大事な注意点があります。
それは、デザインにこだわりすぎないという点です。
デザインを気にしすぎるあまり、色を沢山入れたり凝ったデザインにしてしまうと、どうしてもごちゃついてきてしまいます。
ごちゃごちゃしていると逆に見づらくなってしまいますので、それだったらシンプルなデザインの方がマシです。
こだわりすぎて複雑なデザインにしないように心掛けつつ、オシャレなサイト作りを目指していきましょう。
