初心者でも作れる!シンプルでおしゃれなブログデザインのコツ!

 
質問者
デザインがオシャレなブログを作るにはどうすればいいの?

こんな疑問に、現役広告デザイナーがお答えします。

  •  おしゃれなブログデザインのメリット
  •  おしゃれなブログのテンプレート4選
  •  おしゃれなブログデザインのコツ10個
  • 【個人的いいね】 おしゃれなデザインのブログ紹介
ありがたいことに、当ブログは読者から
読者
・デザインが良いサイトですね
・読みやすいブログですね
といった言葉を頂くことが沢山あります。

しかし筆者は、特別難しいことをやっているわけではありません。

誰でも出来るちょっとしたデザインのコツを意識しているだけです。

もし自分のブログで応用できそうなら、是非活用して下さい。

 
ハセガー
読みやすい文章(WEBライティング)ではないですよ
スポンサーリンク

おしゃれなブログデザインのメリット

ブログデザインをオシャレに整えることで、どんなメリットがあるか簡単にまとめました。

デザインの悪いブログは読まれない

厳しいことを言いますが、デザインが悪いブログは読まれません。

読者がブログを訪れてから、直帰するか判断する時間は平均2~3秒だと言われています。

どんなに良い記事を書いても、デザインが悪ければ即離脱されてしまうのです。

デザインを整えることで、離脱率が下がり収益UPに繋がる

ファーストビューの第一印象を良くすれば、自然と離脱率は下がります。

その結果、記事を読んでくれる人が増えるので、収益UPに繋がるのです。

稼いでいるブログはどれもオシャレでデザインが整っていますが、デザインの悪いブログで稼いでいるのを見たことがありません。

 おしゃれなブログのテンプレート4選

デザインに不安がある人は、デザイン性の優れたテンプレートを使うことをおすすめします。

オシャレでデザイン性の高いWordPressテーマを3つ紹介します。

デモサイトを見て気に入ったものがあれば、使った方が早いです。

おしゃれなデザインが、知識不要で簡単に手に入ります。

 
ハセガー
ちなみに、当ブログで使ってるのはTHE THORです。
THOR評判デメリット でユーザーの評判をまとめています。

おしゃれなブログデザインのコツ10個

おしゃれなブログデザインにするためのコツを10個紹介していきます。

誰でも取り組めることなので、使えそうなところは取り入れて下さい。

  1. 【全体】白黒ベースで画像をアクセントにする
  2. 【画像】写真・イラスト・アイコンの統一感を出す
  3. 【配色】カラーパレットを使用する
  4. 【記事が主役】メインカラム以外は主張しない
  5. 【余白】何もない「間」が大事
  6. 【記事内画像】背景が馴染むときは枠線で囲う
  7. 【テキストリンク】青文字下線を使う
  8. 【吹き出し】顔の向きを揃える
  9. 【目次】記事の全体像を把握する
  10. 【カテゴリー】記事を分類する
 
ハセガー
中でも「画像」「配色」はデザインの最重要項目です

①【デザイン】白黒ベースで画像をアクセントにする

オシャレなブログを目指すなら、全体の背景色や文字色などのベースカラーを白・黒・グレーにするのがベターです。

アイキャッチ画像やトップ画像が目を引く、バランスの取れたサイトを目指せます。

 
ハセガー
当ブログもベースカラーはグレーです。
ヘッダー(#222222)テーマカラー(#707070)

②【画像】写真・イラスト・アイコンの統一感を出す

画像の統一感はとても大事です。

筆者の場合は有料の画像素材サイトを使い、「イラスト」「デジタルアート」「同じ作者」のみを使って統一感を出しています。

最低でも、同じ記事内の画像の世界観統一は絶対にやった方がいいです。

ちなみに今一番コスパの良いおすすめのフリー素材サイトは「123RF」です。

商用利用OKの高クオリティな画像やイラストが、比較的安く手に入るのでおすすめです!

参考に、当ブログのアイキャッチ画像を並べてみました

 
質問者
吹き出しも世界観を統一したイラストを使用
 
ハセガー
アイキャッチ画像はフォントサイズを揃えて「統一感」が出るように意識しています

アイキャッチ画像の注意点

上記のように同じ画像に文字だけ変えて使いまわすアイキャッチ画像をよく見ます。

簡単に統一感は出ますが、引き換えにつまらないデザインになりやすいので注意して下さい。

改善方法は、カテゴリーごとに背景色を変えたり、挿し絵を変えるだけで改善できます。

③【配色】カラーパレットを使用する

複数の色を乱雑に使うと統一感が無くなるので、使う色は少なく抑えた方がいいです。

素人には難しいので、使う色は「カラーパレット」で決めましょう。

>>COOL COLORS

>>SCHEM COLOR

>>ColorSpace

>>PALETTABLE

カラーパレットを色々紹介してます
関連記事

 質問者 ブログをオシャレな配色にしたいんだけど、カラーパレットって何を使えばいいの? こんな疑問にお答えします。  カラーパレットを使うべき理由  Adobeの高機能カラーパレッ[…]

④【記事が主役】メインカラム以外は主張しない

一番注目して読んでほしいのはメインカラムの記事です。

サイドやフッターなどは目立たせないようにしましょう。

ベースカラーを白・黒・グレーにしていれば、この点も対応できます。

アドセンス広告はデザインを崩すので、貼りすぎには注意です。

⑤【余白】何もない「間」が大事

文章や画像でぎっちり詰まっていると、オシャレに見えないどころか読む気にもなりません。

参考に、同じ文字数のテキストで比較します。

▼空間無し

テキストテキストテキストテキストテキストテキストテキスト、テキストテキストテキスト、テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキスト、テキストテキストテキストテキストテキストテキスト、テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキスト、テキストテキストテキストテキストテキストテキスト、テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
▼空間あり
テキストテキストテキストテキストテキストテキストテキスト、テキストテキストテキスト、テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

 

テキストテキストテキストテキスト、テキストテキストテキストテキストテキストテキスト、テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

テキストテキストテキストテキストテキストテキスト、テキストテキストテキストテキストテキストテキスト、テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

後者の方が読む気になると思います。

程よく空白を入れて、読みやすさを意識しましょう。

 
ハセガー
1文を長文にしないのもポイントです

⑥【記事内画像】背景が馴染むときは枠線で囲う

背景と画像が同系色で馴染むときは、画像を枠線で囲ってください。

画像なのか背景なのか分からない部分は気持ちが悪く、整って見えません。

⑦【テキストリンク】青文字下線にする

テキストリンクは青文字下線にしておくのが無難です。

なぜなら、青文字下線はテキストリンクで昔からよく使用されるので、共通認識でリンクだと判断してもらえるからです。

例えばこの赤いテキストと比べてこちらの青いテキストはリンクに見えませんか?

読者に考えさせないで理解させるのも、良いデザインの基本です。

⑧【吹き出し】顔の向きを揃える

こんな感じで、吹き出しの画像が左右逆になっていませんか?
ダサく見えるので、吹き出し画像は正しい向きに揃えて下さい
右吹き出し・左吹き出し両方で使いたいなら、正面の画像を使いましょう

⑨【目次】記事の全体像を把握する

目次を作ることで「読者」だけじゃなく、「作者」も記事全体を把握することができるので、整ったブログを目指しやすくなります。

また目次が無いブログは、何個見出しがあるのか分からず、読者が読むのに疲れます。

⑩【カテゴリー】記事を分類する

記事のカテゴリーを分かりやすく整理整頓して下さい。

カテゴリーがぐちゃぐちゃだと印象悪いですし、他に関連記事があれば回遊してくれます。

必ずスマホで確認しよう(モバイルファースト)

ブログ制作をパソコンで行っている人がほとんどだと思いますが、必ずスマホでの確認をしてください。

今はむしろモバイルユーザーの方が多いので、パソコンよりスマホでの表示優先(モバイルファースト)が基本になってきています。

 
ハセガー
パソコンではいい感じなのに、スマホでは微妙に見えてる勿体ないブログをよく見ます

【個人的いいね】 おしゃれなデザインのブログ紹介

個人的にデザインがおしゃれだと思うブログを紹介します。

サルワカ

>>サルワカ

monograph

>>monograph

くうかんしんぷるライフ

>>くうかんしんぷるライフ

まとめ:デザインを制する者はブログを制す

ブログデザインをオシャレにするコツを10個紹介しました。

デザインが悪いと即離脱ということは、デザインはある意味記事より大事とも言えます。

デザインのことはよく分からんって人は、良いと思うデザインのサイトを参考にしちゃうのもありだと思います。

というわけで、今回は以上です!

テーマを使えば、楽にオシャレなデザインが手に入ります
関連記事

 質問者 THE THOR(ザ・トール)って実際どうなの?デメリットも知りたい! こんな疑問にお答えします  THE THORを使ってみて思ったこと  THE THORユーザーの評[…]

スポンサーリンク

最新情報をチェックしよう!