沖ケイタのプロフィールはこちら

3分でおしゃれなブログデザインを実現する11の法則

1,919 views

あなたのブログの記事がどんなに面白くて、役に立ったとしても、読みづらくてデザインがダサかったら、読者は途中で離脱してしまいます。

いっぽう、当ブログは、よくこんなことを言われます。

  • 記事が読みやすい
  • ブログがおしゃれ
  • すごいシンプルでまとまっている
  • WordPressかと思ってた
  • キャラクターがかわいい←

みなさん、ありがとうございます(照)

今でこそ、こんなことを言ってもらえるようになりましたが、僕はWebデザインの知識もなければ、IllustratorやPhotoshopの類も全くつかえません。
ついでに絵もめちゃくちゃ下手くそです←

この記事ではそんな僕が、いろんな有名ブロガーのデザインを研究しまくって編み出した、「ド素人でも3分でおしゃれなブログデザインを実現する11の法則」を紹介します。

  • 素人でもおしゃれなブログデザインに!
  • 猿でもできるくらい簡単に
  • 時間もかからず、すぐできちゃう
  • 一度訪れた読者を逃がさない
  • 広告のクリック率もアップ

こんなことに興味のある人はぜひ、このまま読み進めてください。

スポンサーリンク

おしゃれブログデザインの大原則はシンプル

具体的なノウハウを紹介する前に僕の提唱する「おしゃれブログデザインの大原則」を紹介します。それは「シンプル・イズ・ベスト」です。

これには大きな理由が2つあります。

ド素人に個性派おしゃれブログデザインは無理

カラフルで個性的でおしゃれなデザインのブログはたくさんあります。

しかし、そういったブログのデザインを参考にするのはやめましょう。それはブログデザイン素人の人にとってはハードルが高すぎるからです。

いっぽう、シンプルなデザインは特別なセンスも必要なく、誰でも簡単に無難でおしゃれなデザインと記事の読みやすさを演出することができます。

ブログデザインを最短で簡単におしゃれにしたい人はシンプル・イズ・ベストを心がけましょう。

シンプルなデザインは収益化に最適?

僕がシンプルなブログデザインを提唱する最大の理由は収益化に最適だからです。

シンプルなブログデザインは読者を文章に集中させます。

なぜなら読者の視界を邪魔するような余計な装飾が無いからです。そして、ベースがシンプルゆえに、目出させたいところを強調するのが簡単になります。

アドセンスやアフィリエイトのリンク、バナー、ボタン(のちに詳しく解説)こういった広告が勝手に目立ってくれます。

これから具体的なノウハウを紹介していきますが、基本の考えは「シンプル・イズ・ベスト」です!
そのことを頭にいれて、読み進めていってください。

ブログの収益化に興味がある人は下の記事もチェック!

<おしゃれブログデザインの法則その1>
見出しの上には必ず余白を!

f:id:keita-agu-ynu:20161221010955p:plain

ブログの記事を書くときに多くの人が見出しを設定するはずです。

見出しとは、文章の構成を読者にわかりやすく伝える大切な役割を担っています。
しかし、この見出しの上に余白がないと、文章がダラダラ続いているように見えてしまい、見出しの意味がなくなってしまうんです。

こんなのCSSで設定してしまえばすぐにできます。

たったちょっとの工夫で記事が読みやすくなり、読者の離脱率も下がるので必ず設定しましょう!
この見出しのデザインについては100万PVブロガーのヨッセンスのヨスさん記事を参考にさせていただきました。

参考:[デザインの基本] ブログの文章部分を読みやすくするために私がやっている7つの技 | ヨッセンス

<おしゃれブログデザインの法則その2>
画像の幅は記事のウインドウ幅とあわせる

f:id:keita-agu-ynu:20161221020223p:plain

記事を書く際に画像を使うことも多いと思います。

しかし、その画像の横幅のサイズが揃っていなくてガタガタだと、すごくダサく見えてしまいます

なので、画像を使う際は記事のウインドウ幅にあわせて貼りましょう。下の記事は画像の幅とウインドウ幅に気をつけて書かれています。

参考にしてみてください
↓↓↓
浜松餃子の有名店「むつぎく」の餃子が超ヘルシーでハマる!

特に食レポなど、画像を多く使う記事は注意してください。

<おしゃれブログデザインの法則その3>
リンクは青色で下線をいれる!

f:id:keita-agu-ynu:20161221021255p:plain

あなたはリンクの色を気にしたことありますか?ピンクだったり緑だったりカラフルな色にしている人も多いですが、オススメしません。

リンクはクリックされてなんぼです。リンクをクリックされるためには、読者から「ここにリンクがある!」と認識してもらわなければいけません

そして、人がリンクと一目で認識する色が青色なのです。

理由はGoogleやYahoo!、Amazonなどの大手のwebサイトがリンクの色に青を採用しているからです。慣れみたいなものですね。

個人的には下線もつけたほうがクリック率は上がると思っています。

<おしゃれブログデザインの法則その4>
ブログカードはクリックされないからやめろ

f:id:keita-agu-ynu:20161221025018p:plain

上の画像をごらんください。

これはヒートマップというツールを使っていて、スマホでタップされたところが、青くなっています。また、多くタップされているところは赤くなっています。

そうなんです。ブログカードは死ぬほどクリックされません

どちらも月間1万PV以上読まれている記事なのですが、テキストリンクのほうが圧倒的にクリックされます。

ブログカードって見た目はおしゃれだし、はてなブログだったらリンクを貼るだけで自動生成させるので使っている人が多いのでは?

しかし、ブログカードは普通の読者からしたらリンクとして認識してもらえません

僕はこの事実に気づいてかからブログカードを使うのをやめて、枠で囲ったテキストリンクを使うようになりました。

合わせて読みたい

このような枠で囲ったテキストリンクの作り方はこちちらの記事が参考になりますのでチェックチェック

↓↓↓

はてなブログの動く記事リンク作ったよ!【ブログカスタマイズ】

<おしゃれブログデザインの法則その5>
文字は大きくしない

いえーい。

みんなのってるかーい?

わふーーーー(・ω・)ノ

このように頻繁に文字の大きさを変えていると文章が読みにくくなってしまいます。あと、ちょっとバカっぽい。

文字の強調の方法は太字だけで十分です。不用意に文字を大きくするのはやめましょう。

しかし、僕も例外的に文字を大きくするときがあります。それはネタ記事でウケを狙いにいくときです。

(例)
布団が、、、
吹っ飛んだ(真顔)

<おしゃれブログデザインの法則その6>
色文字は使わない

こんにちは!
実は私モテるんです。
今年のクリスマスみなとみらい彼氏とデートよ♡

このように、自分の記事をカラフルに装飾する人がいますが、やめましょう。読みにくいです。
また、色んな色を使うと、本当に強調したい表現やリンクが、目立たなくなってしまいます。

繰り返しになりますが、文字の強調の方法は太字だけで十分です。

しかし、僕も稀に赤文字を使うことはあります。

それは注意・警告系の表現を使う時です。

米印と一緒に使います。

(例)
※バナナはおやつに含みません。

参考にしてみてください(・ω・)ノ

<おしゃれブログデザインの法則その7>
ブログ全体に目立つ色を使わない

ブログのメインカラーを何にするかによって、相手に与える印象は大きくかわります。僕は赤とか青とか目立つ色を使ったり、使う色が多くなるほど、デザインのセンスが問われる勝手に思い込んでいます←

ファッションでもそうですよね?

カラフルなデザインの服ほどコーディネートが難しいです。

その理論をブログに応用して、僕のブログは意図的に目立つ色を使わないようにしています。
その結果、白、黒、淡い青色が僕のブログの大半を占める色となっていて、シンプルでまとまっている印象を与えることに成功しました。

この理論の一番のメリットは目立たせたいところは思いっきり目立たせることができるところです。

ブログ全体がシンプルなので、こんなボタンを配置するとすごく目立ちます。

 

 

ふふふ、こうやってうまくアフィリエイトリンンクを目立たせるようにしてるんだぜ。
Wordpressテーマのストークを使えば上のようなボタンも簡単に作ることができます。

<おしゃれブログデザインの法則その8>
ブログにキャラクターを導入する

ハシモトくん
みんな大好きハシモトくんだよ(・ω・)ノ

先ほどからシンプルなデザインの重要性を語っていますが、あまりにもシンプルすぎると今度は読者に覚えてもらえなくなってしまいます。

顔出しをしているブロガーさんならそんなことはないかもしれませんが、顔出しをしていないブロガーならなおさらです。

そこで、僕はブログデザインのシンプル性を保ちつつ、読者に覚えてもらうためにキャラクターを導入しました。

それが、ナマケモノのハシモトくんです。

ハシモトくん
僕は女性ファンを増やすために作られたぽん

僕はココナラ というサービスを使ってキャラクターを作ってもらいました。

こちらの記事で詳しく紹介しています。
↓↓↓

<おしゃれブログデザインの法則その9>
吹き出しを使う

ハシモトくん
パリピー(・ω・)ノ

文字ばかりの記事で読者に最後まで読ませるためには、それなりの文章力が必要です。ちなみに僕にはそれがありません←

画像を使ったり、色々工夫をするわけですが、その中でも吹き出しはかなり効果的です。
会話形式やストーリー性がある記事にはもちろん使います。それ以外にも記事の途中の箸休め的に使うこともあります。

WordPressテーマのストークを使えば上のような吹き出しも簡単に作ることができます。

<おしゃれブログデザインの法則その10>
記事下をごちゃごちゃさせない

記事下に「これでもか!」ってくらい色々配置している人がいますよね。

  • プロフィール
  • オススメ記事
  • 関連記事
  • 人気記事
  • カテゴリー
  • 読者登録ボタン
  • その他

などなど。

僕も一時期、いろいろとごちゃちゃ 配置していましたがやめました。見た目も良くないですし、読者が本当に見て欲しいページに飛ぶ確率が減るからです。

僕の今の記事下は

これだけです。

おかげさまで一番見て欲しいプロフィール関連のページへのアクセスが増えましたし、それに比例してtwitterのフォロワー数も増加しています。

特に関連記事表示は必要ないですね。

僕も昔は設置していましたが、あまりクッリクされていない感じでした。だってあれって、同じカテゴリーから自動的に抽出している場合がほとんどですもんね。

例えばこの記事を読みに来た読者がいるとします。
浜松餃子の有名店「むつぎく」の餃子が超ヘルシーでハマる!

その読者が同カテゴリーの町田のラーメンの食レポも読みたいと思いますか?

読者目線で考えればすぐにわかりますよね笑
この結論にたどり着いてから僕は関連記事の表示をやめました。

記事下では、ごちゃごちゃと色んな記事を提供するのではなく、本当に読んでもらいたい記事だけを表示させましょう。

<おしゃれブログデザインの法則その11>
固定フッター・追尾サイドバーはやめる

やめましょう。読みづらいです。

特にスマホでの固定フッターは死ぬほど読みづらいです。

ブロガーは記事を読んでもらってなんぼです。そのブロガーが記事を読む邪魔をしては本末転倒。直ちに外しましょう。

僕も設置していた時期がありましたが、固定フッターに広告を表示させてもほとんどクリックされなかったです。

うん、百害あって一利なし。ちなみに固定ヘッダーはあまり読む邪魔にならないようです。
こちらの記事が参考になります。

Webデザインの観点から考えた読みやすい文章の特徴

最低限のブログデザインを整えて記事に集中!

なんども言いますが、ブログのデザインは大切です。

あなたのブログの記事がどんなに面白くて、役に立ったとしても、読みづらくてデザインがダサかったら、読者は途中で離脱してしまいます。

しかし、僕が言うブログのデザインの大切さというのは「最低限の読みやすい工夫はしましょうね」くらいのニュアンスです。

ブロガーは記事を書いてなんぼです!

この記事では素人でも簡単におしゃれっぽく見せるブログデザインのノウハウを紹介しました。その一番の理由は、デザイン面の問題を最短で解決して、記事の執筆に時間をかけてもらいたかったからです。

ここに書いてあることを全て実行しても、それほど時間はかかりません。ぜひ、お役立てください(・ω・)ノ

スポンサーリンク

最速でおしゃれなデザインを実現するならストークがおすすめ

WordPressでブログを運営するなら「ストーク」がおすすめです!

  • 初心者でも簡単にカスタマイズできる
  • カスタマイズ無しでも読みやすいブログデザイン
  • ボタンや吹き出し枠のデザインが標準装備
  • アドセンスなどの広告の配置が簡単
  • 購入後の使い方ページの充実度がヤバい

ストークは誰でも簡単に読みやすいブログを作ることができる最強のWordpressテーマです。
このブログもストークを使って作られています。

これからブログを始めるなら是非ストークを使ってみてください!