あなたのブログの記事がどんなに面白くて、役に立ったとしても、読みづらくてデザインがダサかったら、読者は途中で離脱してしまいます。
いっぽう、当ブログは、よくこんなことを言われます。
- 記事が読みやすい
- ブログがおしゃれ
- すごいシンプルでまとまっている
- WordPressかと思ってた
- キャラクターがかわいい←
みなさん、ありがとうございます（照）
今でこそ、こんなことを言ってもらえるようになりましたが、僕はWebデザインの知識もなければ、IllustratorやPhotoshopの類も全くつかえません。ついでに絵もめちゃくちゃ下手くそです←
この記事ではそんな僕が、いろんな有名ブロガーのデザインを研究しまくって編み出した、「ド素人でも3分でおしゃれなブログデザインを実現する11の法則」を紹介します。
- 素人でもおしゃれなブログデザインに！
- 猿でもできるくらい簡単に！
- 時間もかからず、すぐできちゃう！
- 一度訪れた読者を逃がさない！
- 広告のクリック率もアップ！
こんなことに興味のある人はぜひ、このまま読み進めてください。
- おしゃれブログデザインの大原則はシンプル
- 1：見出しの上には必ず余白を！
- 2：画像の幅は記事のウインドウ幅とあわせる
- 3：リンクは青色で下線をいれる！
- 4：ブログカードはクリックされないからやめろ
- 5：文字は大きしない
- 6：色文字は使わない
- 7：ブログ全体に目立つ色を使わない
- 8：ブログにキャラクターを導入する
- 9：吹き出しを使う
- 10：記事下をごちゃごちゃさせない
- 11：固定フッター・追尾サイドバーはやめる
- 最低限のデザインを整えて記事に集中！
おしゃれブログデザインの大原則はシンプル
具体的なノウハウを紹介する前に僕の提唱する「おしゃれブログデザインの大原則」を紹介します。
それは「シンプル・イズ・ベスト」です。
これには大きな理由が2つあります。
ド素人に個性派おしゃれブログデザインは無理
カラフルで個性的でおしゃれなデザインのブログはたくさんあります。
しかし、そういったブログのデザインを参考にするのはやめましょう。それはブログデザイン素人の人にとってはハードルが高すぎるからです。
いっぽう、シンプルなデザインは、特別なセンスも必要なく、誰でも簡単に無難でおしゃれなデザインと記事の読みやすさを演出することができます。
ブログデザインを最短で簡単におしゃれにしたい人はシンプル・イズ・ベストを心がけましょう。
シンプルなデザインは収益化に最適？
僕がシンプルなブログデザインを提唱する最大の理由は収益化に最適だからです。
シンプルなブログデザインは読者を文章に集中させます。
なぜなら読者の視界を邪魔するような余計な装飾が無いからです。
そして、ベースがシンプルゆえに、目出させたいところを強調するのが簡単になります。
アドセンスやアフィリエイトのリンク、バナー、ボタン（のちに詳しく解説）こういった広告が勝手に目立ってくれます。
これから具体的なノウハウを紹介していきますが、基本の考えは「シンプル・イズ・ベスト」です！
そのことを頭にいれて、読み進めていってください。
1：見出しの上には必ず余白を！
ブログの記事を書くときに多くの人が見出しを設定するはずです。
見出しとは、文章の構成を読者にわかりやすく伝える大切な役割を担っています。
しかし、この見出しの上に余白がないと、文章がダラダラ続いているように見えてしまい、見出しの意味がなくなってしまうんです。
こんなのCSSで設定してしまえばすぐにできます。
たったちょっとの工夫で記事が読みやすくなり、読者の離脱率も下がるので必ず設定しましょう！
この見出しのデザインについては100万PVブロガーのヨッセンスのヨスさん記事を参考にさせていただきました。
参考：[デザインの基本] ブログの文章部分を読みやすくするために私がやっている7つの技 | ヨッセンス
2：画像の幅は記事のウインドウ幅とあわせる
記事を書く際に画像を使うことも多いと思います。
しかし、その画像の横幅のサイズが揃っていなくてガタガタだと、すごくダサく見えてしまいます。
なので、画像を使う際は記事のウインドウ幅にあわせて貼りましょう。
下の記事は画像の幅とウインドウ幅に気をつけて書かれています。
参考にしてみてください
↓↓↓
特に食レポなど、画像を多く使う記事は注意してください。
3：リンクは青色で下線をいれる！
あなたはリンクの色を気にしたことありますか？
ピンクだったり緑だったりカラフルな色にしている人も多いですが、オススメしません。
リンクはクリックされてなんぼです。
リンクをクリックされるためには、読者から「ここにリンクがある！」と認識してもらわなければいけません。
そして、人がリンクと一目で認識する色が青色なのです。
理由はGoogleやYahoo!、Amazonなどの大手のwebサイトがリンクの色に青を採用しているからです。慣れみたいなものですね。
個人的には下線もつけたほうがクリック率は上がると思っています。
リンクの文字色の変え方はこの記事が参考になります。
↓↓↓
はてなブログでリンクの文字色を変える方法 - よりどりみどり
4：ブログカードはクリックされないからやめろ
上の画像をごらんください。
これはヒートマップというツールを使っていて、スマホでタップされたところが、青くなっています。また、多くタップされているところは赤くなっています。
そうなんです。
ブログカードは死ぬほどクリックされません。
どちらも月間1万PV以上読まれている記事なのですが、テキストリンクのほうが圧倒的にクリックされます。
ブログカードって見た目はおしゃれだし、はてなブログだったらリンクを貼るだけで自動生成させるので使っている人が多いのでは？
しかし、ブログカードは普通の読者からしたらリンクとして認識してもらえません。
僕はこの事実に気づいてかからブログカードを使うのをやめて、下の枠で囲ったテキストリンクを使うようになりました。
5：文字は大きしない
いえーい。
みんなのってるかーい？
わふーーーー(・ω・)ノ
このように頻繁に文字の大きさを変えていると文章が読みにくくなってしまいます。あと、ちょっとバカっぽい。
文字の強調の方法は太字だけで十分です。
不用意に文字を大きくするのはやめましょう。
しかし、僕も例外的に文字を大きくするときがあります。
それはネタ記事でウケを狙いにいくときです。
（例）
布団が、、、
吹っ飛んだ（真顔）
この記事は意識的に大きい文字を使っています。参考にしてみてください。
6：色文字は使わない
こんにちは！
実は私モテるんです。
今年のクリスマスもみなとみらいで彼氏とデートよ♡
このように、自分の記事をカラフルに装飾する人がいますが、やめましょう。読みにくいです。
また、色んな色を使うと、本当に強調したい表現やリンクが、目立たなくなってしまいます。
繰り返しになりますが、文字の強調の方法は太字だけで十分です。
しかし、僕も稀に赤文字を使うことはあります。
それは注意・警告系の表現を使う時です。
米印と一緒に使います。
（例）
※バナナはおやつに含みません。
参考にしてみてください(・ω・)ノ
7：ブログ全体に目立つ色を使わない
ブログのメインカラーを何にするかによって、相手に与える印象は大きくかわります。僕は赤とか青とか目立つ色を使ったり、使う色が多くなるほど、デザインのセンスが問われる勝手に思い込んでいます←
ファッションでもそうですよね？
カラフルなデザインの服ほどコーディネートが難しいです。
その理論をブログに応用して、僕のブログは意図的に目立つ色を使わないようにしています。
その結果、白、黒、グレーが僕のブログの大半を占める色となっていて、シンプルでまとまっている印象を与えることに成功しました。
この理論の一番のメリットは目立たせたいところは思いっきり目立たせることができるところです。
ブログ全体がシンプルなので、こんなボタンを配置するとすごく目立ちます。
ふふふ、こうやってうまくアフィリエイトリンンクを目立たせるようにしてるんだぜ。
8：ブログにキャラクターを導入する
みんな大好きハシモトくんだよ(・ω・)ノ
先ほどからシンプルなデザインの重要性を語っていますが、あまりにもシンプルすぎると今度は読者に覚えてもらえなくなってしまいます。
顔出しをしているブロガーさんならそんなことはないかもしれませんが、僕みたいに顔出しをしていないブロガーならなおさらです。
そこで、僕はブログデザインのシンプル性を保ちつつ、読者に覚えてもらうためにキャラクターを導入しました。
それが、ナマケモノのハシモトくんです。
女性ファンを増やすためにかわいいキャラクターを作ったよ
僕はココナラ というサービスを使ってキャラクターを作ってもらいました。
こちらの記事で詳しく紹介しています。
↓↓↓
9：吹き出しを使う
パリピー(・ω・)ノ←
文字ばかりの記事で読者に最後まで読ませるためには、それなりの文章力が必要です。ちなみに僕にはそれがありません←
画像を使ったり、色々工夫をするわけですが、その中でも吹き出しはかなり効果的です。
会話形式やストーリー性がある記事にはもちろん使います。
それ以外にも記事の途中の箸休め的に使うこともあります。
この記事なんかうまく吹き出しが使えていると思います。
吹き出しのデザインはこの記事を参考にさせていただきました！
吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】
10：記事下をごちゃごちゃさせない
記事下に「これでもか！」ってくらい色々配置している人がいますよね。
- プロフィール
- オススメ記事
- 関連記事
- 人気記事
- カテゴリー
- 読者登録ボタン
- その他
などなど。
僕も一時期、いろいろとごちゃちゃ 配置していましたがやめました。
見た目も良くないですし、読者が本当に見て欲しいページに飛ぶ確率が減るからです。
僕の今の記事下は
- オススメ記事（3記事）
- プロフィール
- ハシモトくんLINEスタンプの宣伝
これだけです。
おかげさまで一番、見て欲しいプロフィール関連のページへのアクセスが増えましたし、それに比例してtwitterのフォロワー数も増加しています。
特に関連記事表示は必要ないですね。
僕も昔は設置していましたが、あまりクッリクされていない感じでした。だってあれって、同じカテゴリーから自動的に抽出している場合がほとんどですもんね。
例えばこの記事を読みに来た読者がいるとします。
その読者が同カテゴリーの町田のラーメンの食レポも読みたいと思いますか？
読者目線で考えればすぐにわかりますよね笑
この結論にたどり着いてから僕は関連記事の表示をやめました。
記事下では、ごちゃごちゃと色んな記事を提供するのではなく、本当に読んでもらいたい記事だけを表示させましょう。
11：固定フッター・追尾サイドバーはやめる
やめましょう。
読みづらいです。
特にスマホでの固定フッターは死ぬほど読みづらいです。
ブロガーは記事を読んでもらってなんぼです。そのブロガーが記事を読む邪魔をしては本末転倒。
直ちに外しましょう。
僕も設置していた時期がありましたが、固定フッターに広告を表示させてもほとんどクリックされなかったです。
うん、百害あって一利なし。
ちなみに固定ヘッダーは、読む邪魔にならないようです。
こちらの記事が参考になります。
最低限のデザインを整えて記事に集中！
なんども言いますが、ブログのデザインは大切です。
あなたのブログの記事がどんなに面白くて、役に立ったとしても、読みづらくてデザインがダサかったら、読者は途中で離脱してしまいます。
しかし、僕が言うブログのデザインの大切さというのは「最低限の読みやすい工夫はしましょうね」くらいのニュアンスです。
必要以上に個性的にしたりする必要はないと思っています。
ブロガーは記事を書いてなんぼです！
この記事では素人でも簡単におしゃれっぽく見せるブログデザインのノウハウを紹介しました。
その一番の理由は、デザイン面の問題を最短で解決して、記事の執筆に時間をかけてもらいたかったからです。
ここに書いてあることを全て実行しても、それほど時間はかかりません。
ぜひ、お役立てください(・ω・)ノ