2017/04/05
初心者ブロガーが絶対覚えておくべき読まれるブログデザインの大原則
ブログ運営の楽しみ方のひとつは、自分の色を出すデザインづくりとカスタマイズですよね。ついデザイン変更に没頭するあまり肝心の記事を書く暇がなくなってしまうこともしばしば。
どんなデザインにしようとそれは運営者の勝手なわけですが、できれば「読まれる」ブログにしたいもの。そこには一定のルールが存在しています。
今回は、ブログ初心者が覚えておくべきデザインの基本とルールを見ていきましょう。
目次
デザインは何のためにあるの？
ブログデザインの最終目的は、訪問者が読みやすい導線づくりです。実際に訪れてくれるお客様の目線をないがしろにしてはいけません。
じゃあ、お客様目線って何なのか。
たとえば、ブログを開いて一番最初に目にするヘッダーには「ブログタイトル」があり、その下には「メインコンテンツ」があり、最下段のフッターにはコピーライトの表記がある。これってだいたいどのブログでも一緒ですよね。
目線の動きに合わせたデザインをZ型配置やF型配置なんて言いますが、この基本を守りながら3カラムにしたりメニューをヘッダ下に表示したり広告を配置しています。
もしブログタイトルがヘッダに表示されていなければ、それだけで訪問者はちょっと戸惑うかもしれません。「左上のロゴをクリックすればトップページに戻れる」という常識があるからです。
実際にタイトルを消して運営したらどうなるか、という実験をしたことがありますが、PV数は見事に激減し、検索順位も下がるという結果になりました。どうやらSEO上でも好ましくないようです。
デザインで記事の信頼度が落ちる？
こうした一定のルールに基づいたデザインは読者に安心感を与えます。
でも、みんながみんな同じテンプレートで運営していると、これまたつまらないですよね。ルールを守りつつ自分のカラーを出したいものです。とくにブロガー目線になってしまうと、似たようなデザインに拒絶感を覚えるかもしれません。
たとえば僕も使っていた「Stinger」というWordPressテーマ。採用しているブログは多いですが、フッターを見なくても『あ、これスティンガーじゃん！』というのがすぐわかります。
わかったところでどうだって感じですけど、ブロガー目線だとこんな意見も出てきます。
どんなに個性的で濃くて面白い記事書いていても、一見さんで来た読者に少しでも読んでみようかと感じてもらうためには、最低限の自分の色をデザインで出すべきだと思うんですよ。つかみっす。
最も重要なのは記事本文であることは間違いないですが、デザインも含めてひとつのブログです。さりげなく自分をアピールしつつ、読みやすい環境を提供しましょう。
ただ、『それはちょっと違うんじゃない？』というデザインをたまに見かけるので、ブログデザインの原則8項目を挙げてみたいと思います。
ブログデザインの大原則8項目
ファーストビューに広告を置きすぎない
ファーストビューとは、ブログにアクセスした時に最初に見える部分です。
モニターの解像度やブラウザの幅で変わりますが、ヘッダーからメインコンテンツの記事タイトルが表示されるブログが多いんじゃないでしょうか。僕がいつも使っている環境でこのブログを見た時は、こんな感じです。
ここに広告がベタベタと貼ってあれば、それだけで訪問者の印象はマイナスです。どんなに中身が面白くてもプラスマイナスゼロになるでしょう。
プラスのイメージをもったまま離脱してくれればリピーターになってくれるかもしれませんが、ゼロ～マイナスの印象だともう戻ってこない可能性が高くなります。
ファーストビューにやたら広告を貼るのはSEO上でもマイナスで、Googleでは「ページレイアウトアルゴリズム」を常に改良しています。
Above the foldに広告を設置するとペナルティを与えると言っているわけではありません（そもそもアルゴリズムによる評価基準の変更であって手動ペナルティではない）。
検索結果をクリックしてそのページに着陸したら、広告に埋もれていて自分が求めていたコンテンツ（情報）がどこにあるか見つけられないとか、下にスクロールしないとメインコンテンツが見えてこないといったようなユーザーエクスペリエンスを著しく損なうページが対象になります。
目的の情報に素早くたどり着いてもらうために、広告の貼りすぎは禁物ということです。
現在はスマホからのアクセスも増加していますので、PCだけではなくあらゆる端末からの見た目も考えてデザインしなければなりません。
アドセンスだと、スマホのファーストビューに大きなユニットを配置すると広告配信が停止されます。アドセンスじゃなきゃOKということではありません。ユーザー目線で考えてみてください。
広告に関してはファーストビューに限ったことではなく、ページ全体の配置も考える必要があります。
これは広告だというのをハッキリ見分けることができて、なおかつ全体のデザインを損なわないようにするのが理想です。
そう、難しいんですこれが…。
ヘッダーが高すぎると中身が見えない
ファーストビューの話を続けていきますが、広告のあるなしに関わらずやたらヘッダー領域が高いブログもよくみます。
ブログタイトルをでかでかと掲載したり、検索窓やSNSアイコンをつめ込んでいることが多いですね。試行錯誤の結果、それなりに反応があってヘッダーを大きくするデザインを採用しているなら問題ありません。
でもその高さのせいで、余計にスクロールしなければ目的のコンテンツへたどり着けません。訪問者は記事を読みたいから来てくれるのであって、ブログタイトルを覚えたいとかシェアしたいから来るわけじゃないですよね。
必要以上のヘッダーは邪魔なだけです。さらに、ごてごてとしたデザインにしているならファーストビューで圧迫感を与えることにもなります。
一時期流行ったんですが、あまりお勧めしません。
余分なブログパーツはゴチャゴチャするだけ
無料ブログサービスでは各種ブログパーツが提供されています。また、外部サービスもたくさんあります。
面白い（と運営者が思う）パーツを設置するのは良いですが、たいていゴチャゴチャした印象だけで終わります。サイズも配色もバラバラなので統一感が崩れるからです。
表示スピードにかなり影響する部分で、サービス提供元が配信を中止するとサイドバーが表示されないなどの不具合が起きることも。ブログに関係ないパーツは極力外しましょう。
表示スピードが遅すぎると誰も読んでくれない
せっかくアクセスしたのにページが表示されるまで何秒も待たなければならないブログは、直帰率がものすごく高くなります。しかも滞在時間がコンマゼロ秒とか。
記事を読んでくれてからの直帰ならまだしも、一文字も読まれないうちに検索結果ページに戻られたりブラウザを閉じられるのは悲しいですよね。
頑張って練り上げた履歴書送ったのに、開封もされずに送り返されるのと同じです。せめて中身見て判断してくれよ…と。
表示スピードが遅くなる原因は、不要なものを読み込もうとしているか、サーバーが貧弱なことが原因です。
回避するための策はいろいろありますが、WordPress初心者なら安易にキャッシュ系プラグインに手を出すべきではありません。逆にもっと遅くなるか、あちこちに不具合が生じます。
サーバー移転が難しいなら、不要なものを削除してみましょう。プラグインやSNSのウィジェットを削るだけでも表示速度は確実に上がります。
文字の大きさで読みやすさが変わる
訪問者がメインコンテンツに素早くたどり着けるデザインができあがったら、次は記事本文に集中してもらうデザインを考えましょう。
最も基本となるのが、文字の大きさと色です。
無料ブログサービスが提供しているテンプレートだと、かなり小さい文字で固定されていることがあります。WordPressでは文字の大きさを自由に変更できますが、CSSの知識がなければ変更できなかったり全体のバランスが損なわれるテーマもあります。
10～12pxぐらいの文字で設定されているとかなり読みづらく、それ以下になれば解像度によっては識別できない大きさになってしまいます。
10pxに指定するとこのぐらいになります。ワンポイントで使うならまだしも、文章全体がこのサイズだと「読みやすい」とは言えませんね。
ブラウザの設定で文字の大きさを変えることもできますが、そんな機能があることを知らない方だっています。ですから、あらかじめ読みやすい大きさを設定しておくべき。
あまりに大きければまた読みづらいので、14～17pxぐらいの間で調整してみてください。文字の大きさに合わせた行間設定もお忘れなく。
文字色と背景色のバランスが狂うと読みづらい
基本文字色ですが、背景を白（#FFFFFF）にしている場合、文字色は黒（#000000）ではなくグレーのほうが読みやすくなります。もっとも、薄すぎれば逆に読みづらくなるので注意が必要。
このブログでは#333333を指定してありますが、読みやすさを追求するなら明度差と色差を考えて指定しましょう。一般的には「明度差125以上」「色差500以上」が必要とされています。
背景色#FFFFFFと文字色#333333を比べた時、「明度差204」「色差612」となります。
黒っぽい背景に白文字というデザインもありますが、あれも読みづらいのでやめたほうが無難です。常識にとらわれないデザインはインパクトを与えますが、インパクトだけで終わっては何にもなりません。
「どうすれば記事を読んでもらえるか」を考えると、やはり常識に沿ったデザインが一番といえます。
リンク色が青以外だと読者は混乱する
CSS で何も設定しなければリンクは必ず青（#0000FF）になりますが、この「青文字（＋下線）＝リンク」というのが常識です。
全体のデザインによっては色を変えても良いですが、その場合はそこがリンクだと誰が見てもわかるようにしておくべき。そうでなければ読者が混乱してしまいます。
反対に、強調したい文字に下線をつけて青色にすると、そこがリンクだと思われてしまいます。クリックできないイライラ感を与えることになるので避けましょう。
一口に青色と言っても、ほんのり薄い青からどぎつい青まで様々。どんな青にするかでクリック率が変わるようで、このブログでも定期的にリンクの色を微妙に変えて調べています。
デフォルトの#0000FFよりも薄い青を使うサイトが増えていますので、テーマカラーに合わせて調整してみましょう。
カラフルすぎるブログは統一感が生まれない
「ブログ初心者が最低限覚えておくべきブログの書き方10ヶ条」でも取り上げましたが、記事本文の過度の装飾はできるだけ避けましょう。
強調したいあまり赤や緑、さらにはオレンジや紫などを多用しているブログを見かけますが、読みづらいしどこを強調したいのかわからないしで良いことはありません。
また、全体の配色にも気をつけなければいけません。どんな色をメインに据えるかで、サブカラーや補色は変わってきます。テーマカラーに合わせて記事本文の強調したい文字色を考えれば、ブログ全体に統一感が生まれます。
色の使い方でそのブログに対するイメージが決まるので、内容に合わせてメインカラーを選定しましょう。
まとめ
以上8項目を挙げてみましたが、これらはあくまでWEB上の常識であり、強制するものではありません。ただ、常識に沿ったデザインのほうが読まれるブログになりやすいのは確かです。
枠にとらわれてきっちりかっちりハメてしまうと、味気ないブログになることもあります。実際、僕もデザインセンスがないので無難にまとめたデザインにしています。もう少しセンスがほしい…。
勉強すればするほど奥が深い分野なので、こまめに検証と修正を繰り返して自分だけのブログを作り上げてみてください。
Stingerをご利用中なら、Qtaroさん（@Daisuke_9taro）が様々な子テーマを作成していますので試してみると良いかも。
誰が見ても「かっちょいい！」「読みやすい！」と思ってくれるブログを作りたいですね。
それでは、また。
