炭酸せんべい

気になったことを適当に。 MacやiPhoneのこと多め、DIYも。

MENU

おしゃれで読みやすいブログデザインにする為の11の法則を取り入れてみる

 

f:id:ypmemo:20170621171549j:plain

 

オーブ落ちてへんかな、どうもナカニシ(@tssb26)です。

カスタマイズしまくってCSSやらHTMLが煮込みハンバーグみたいになってr、あれ、ゴチャゴチャ感無いなこれ

エビフライ定食みたいn、ん?、生姜焼き定食、ブタモダン(って食べたいやつばっかりやないか)

肉じゃがみたいになっている方いませんか? はい、私です

以前、Google評価を上げるためにサイト表示の高速化に取り組んで、内部をある程度最適化しました

 

 

今回は、とある11の法則に基づいて、はたしてこの炭酸せんべいは読みやすいブログなのかどうか

ちょっとチェックしてみました

 

 

 

基本は「シンプル・イズ・ベスト」

こちらの記事を参考にさせていただきました

 

 

基本は「シンプル・イズ・ベスト

読んで欲しい記事、飛んで欲しいリンク、チェックして欲しい内容

ブログのデザインをシンプルにすることで、この辺がパッと見てすぐわかるように差別化されるというわけです

モノクロデザインのブログに、真っ赤なリンク張れば目立ちますよね

自ずと広告クリック率にもつながり収益化も狙えるらしい

見直してみる価値は大いにあるということで、11の法則、早速見ていきましょう

 

11の法則

 

1)見出しの上には必ず余白を入れる

見出しを設定していても、だらだら文章が続いてたら区切りがわからなくなるため
見出しの上に、必ず余白を設けましょうということ

こうすることで、読者は話題が変わったことがわかるため読み進めやすくなるらしい

これは無意識にやってました、上下に1行あけたらいいかも

 

2)画像の横幅は記事のウインドウ幅とあわせる

記事を読み進むうちに、画像の横幅あってないとガタガタ感が出てダサく見えてくるらしいので、横幅を統一しましょうということ

これ、最近意識しだしました
横幅は640px、画像容量もできるだけ50~100kb以内に収まるよう調整して表示スピードアップも狙ってます

 

3)リンクは青色で下線を入れる

クリックして欲しいリンクの色をカラフルにするのはNGだそうです

ほとんどの大手サイトが採用しているリンクは青色で下線付き

青で下線があると読者からは「それがリンクである」と認識してもらいやすくなるため、クリック率も上がるらしい

リンクは元々青だけど下線が付いてないな

 

4)ブログカードはクリックされない

他ブログや記事紹介の為に使うブログカードが、死ぬほどクリックされないからやめた方がいいとのこと

↓こういうやつ

 

www.tssb26.com

 

これ、よく使ってるわぁ、クリックされなかったら意味ないのでもうやめとこ
普通のテキストリンクの方がよっぽどクリックされるらしいです

ということで、ブログカードやめてこういう枠を採用しました

 

タイトル

ここに文章

ここに文章

ここに文章

 

↓こちらの記事を参考にちょっといじりました

 

5)文字は大きくしない

文字の大きさをころころ変えると読みにくくなるので、不用意に変えるのはやめましょうということ

見た目ガタガタになるので、今まで大きさを変えたことはないですね

ウケを狙うときだけ使うのがベストらしいです

 

6)色文字は使わない

頻繁に色を変えてカラフルにすると読みにくくなるだけなのでやめましょうということ

基本、強調するところは太字だけで十分で、色を変える場合は、注意や警告の表現時に絞る

こうすることで、色を変えた部分をより強調できる

 

7)ブログ全体に目立つ色を使わない

ブログの基調に目立たない色(黒、白、グレー)などを使うことでシンプルでまとまってる感を出せるとのこと

また、目立たせたいところは思いっきり目立たせることができる効果もある

 

8)ブログにキャラクターを導入する

キャラクターや似顔絵なんかを採用すると覚えてもらいやすいとのこと

これは難しいなぁ・・・炭か・・・炭なぁ

 

f:id:ypmemo:20170621172635j:plain

 

あかんわこんなん

 

9)吹き出しを使う

文字ばっかりの記事に、箸休め的に吹き出しや会話形式を採用するのもいいとのこと

一問一答なんかで読者が疑問に思ってそうなことを先回りで書いてしまって、不安感を払拭してしまうのもよし

 

10)記事下をごちゃごちゃさせない

いろいろ配置しすぎると、読者さんに本当に見て欲しいページへ飛んでもらう確率が減るためすっきりさせましょうということ

また、同カテゴリーから抽出されている関連記事表示は必要ないらしい

大阪のたこ焼きの記事見に来てるのに、京都のラーメン屋の記事も見ようと思いますか、という話

確かにそうかもしれませんが、スパッと消してしまうのもどうかなぁとは思います

ブログカスタマイズ関連の記事を見た人は、他のカスタマイズも見たいでしょうし

ここはちょっと考えますわ、ま、ごちゃごちゃせんようにテキストにしてしまうのは賛成

 

11)固定フッター・追尾サイドバーはやめる

固定フッターはスマホでは邪魔になるだけ、追従サイドバーもうっとうしいのでやめましょうということ

確かに、うっそうしい、邪魔でしゃーない

案の定クリックもされないらしいので、やめときましょう

 

最後に

いかがでしたか、最初のうちはいろいろ置いてみたくてカスタマイズしてしまいがちですよね

私もそうでしたが、あえてデザインはシンプルにすることで、記事やリンクを目立たせる

その辺を追求することで自ずとすっきりまとまったデザインに仕上がり、読者に優しいブログに仕上がる

極論言うたら、白紙のブログにリンク一つ、なんかクリックしてしまいますよね(逆に妖しいやろ)

心当たりある方、チェックしてみてはいかがでしょうか

さて、私もできるところからぼちぼち修正していきます