おしゃれなブログデザインを実現する方法17選【保存版】

どうも。ブログで生活している沖ケイタと申します!

この記事を読んでいるあなたは、きっとブログが大好きで、これからもブログを頑張っていきたいという素晴らしい気持ちを持っている方なのでしょう。

しかし、ここで悲報。
あなたがどんなに良質な記事を書いたとしても、読みづらくて汚いブログデザインだったら、読者は途中で離脱してしまいます。

ブログと言えど、見た目が大切なのです…

そこで、この記事では「ブログ初心者でも今すぐマネできるオシャレなブログデザインの法則」を紹介します。

  • プログラミングがわからなくてもOK!コピペで実現
  • 短時間で実現可能
  • IllustratorやPhotoshopも不要

とにかく短時間かつ簡単にオシャレなブログデザインを実現することにフォーカスして紹介しています!

目次

おしゃれなブログデザイン17の法則

おしゃれなブログデザインを実現する17の法則について紹介します!

<ブログデザイン法則 1>
白・黒・グレーなどシンプルな色をメインカラーにする

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

しかし、初心者がそういったブログのデザインを参考にするの少々ハードルが高いです。

これはファッションで考えるとわかりやすいはず。
雑誌モデルのような派手な色で目立つ服装を素人がマネしようとすると、めちゃくちゃダサくなりますよね笑

しかし、下は黒のスキニーパンツ、上は白シャツというシンプルなファッションなら誰でもそこそこおしゃれに見えます。

ブログデザインも一緒で、ベースの色を白・黒・グレーなどのシンプルな色にすることで、何となくまとまったオシャレな雰囲気を演出できます。

ミニマリストしぶくんのブログはこのシンプルな配色が徹底されているので、とても参考になります。

<ブログデザイン法則 2>
おしゃれな配色パターンをそのままパクる

「白と黒だけじゃやっぱりつまらなくて嫌だ…」という方もいるかもしれません。そんな人にオススメなのが、おしゃれな配色パターンをそのままパクるという方法です。

そこでオススメなのが、サルワカさんが提供する「COOL COLORS」というツールです。僕もよく利用させていただいてます。

これは40個のおしゃれな配色パターンとそのプレビュー画面を一覧できる素晴らしいツールです。
自分の気になる配色パターンをクリックしたら、右にその配色を使ったプレビューがでます。

このツールを使ってお好みの配色をそのままパクってしまえばOK!
簡単におしゃれなブログデザインを実現できます。

<ブログデザイン法則 3>
見出しを装飾する

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

見出しとは、文章の構成を読者にわかりやすく伝える大切な役割を担っています。しかし、この見出しが装飾されていないと、ただの大きい太文字と勘違いされてしまうのです。

ワードプレスだと有料テーマならデフォルトで見出しの装飾が設定されていますが、無料テーマだと設定されていないものもあります。

サルワカさんの「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」という記事を参考にすれば、コピペでオシャレな見出しを実現することができます。

H2〜H4までの見出しはしっかり装飾しましょう!

<ブログデザイン法則 4>
画像の幅は記事のウインドウ幅とあわせる

記事を書く際に画像を使うことも多いと思います。しかし、その画像の横幅のサイズが揃っていなくてガタガタだと、すごくダサく見えてしまいます

実際の例がこちら。

特に食レポなど写真を多く使う記事では幅を揃えるだけで、見やすいデザインを実現できます。

<ブログデザイン法則 5>
リンクの色は原則「#0044CC」にする

リンクの色を気にしていない人は意外と多いです。しかし、青以外の色をリンク色に使うと読者がリンクと認識しづらくなります。

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

特にブログと並行してアフィリエイトで収益を上げていきたい人はリンクのクリック率はとても重要なので、しっかり押さえておきましょう。

一番クリックされる色は「#0044CC」と言われているので、当ブログでもこの色をリンク色に採用しています。 個人的には下線付きの方がさらにリンクとして認識されやすいのでオススメです。

逆にリンク以外の文字を青色にすると、読者がリンクと勘違いしていまうのでオススメしません!

<ブログデザイン法則 6>
文字を大きくしない

強調するために文字を大きくする人がいますが、オススメしません。

理由としては見た目が少し汚く見えてしまうからです。実際に大手Webメディアで文中の文字を大きくしているところはほとんど見あたりません。

ただ、例外もありまして。
僕もごく稀に文字サイズを大きくすることがあります。それはネタ記事でウケを狙う時です。

(例)
布団が…

吹っ飛んだ。

これは僕の中でのマイルールですが、特別な理由がない限り文字を大きくするのはやめましょう。

<ブログデザイン法則 7>
色文字は使わない

このように、自分の記事をカラフルに装飾する人がいますがやめましょう。

単純に読みにくいです。
また、色んな色を使うと、本当に強調したい表現やリンクが目立たなくなってしまいます。

「色々強調しすぎるのは、全部強調していないのと一緒」ということを覚えておきましょう。実際に僕が強調に使っているのは太文字だけです。

しかし、僕も稀に赤文字を使うことはあります。それは注意や警告を喚起する時です。

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

これは僕の中でのマイルールですが、参考にしてみてください。

<ブログデザイン法則 8>
行間を調整する

なかなか意識が回らないところかもしれませんが、文字と文字の行間はブログ全体のイメージに大きな影響を与えます。

行間が狭すぎても、広すぎても読みづらいです。

WordPressの有料テーマなら、初めからちょうど良い行間に設定されているかもしれませんが、もしそうでない場合は必ず自分で設定しましょう。

サルワカさんの「【CSS】line-heightで行間を調整する方法:おすすめの値は?」という記事を読めば誰でも簡単に行間を調整できるのでおすすめです。

<ブログデザイン法則 9>
吹き出しを使ってみる

沖ケイタ

こんな感じで吹き出しを使うのも時には有効だよ!

デザイン的に吹き出しを使うことが、おしゃれかどうかは賛否両論ありますが、ワンポイント的に使えば読者の読みやすさはアップすると思います。

またインタビュー記事にもとても有効。文章よりも会話形式の方が読みやすく読者の離脱率を下げることができます。それ以外にも記事の途中の箸休め的に使うこともありますね。

有名なメディアだと新R25が吹き出しを多く使っています。

<ブログデザイン法則 10>
ブログにキャラクターを導入する

先ほどから「シンプル!見やすく!」という法則ばかり紹介していますが、見やすさ重視とはいえ、100%無個性のブログデザインになるのも少々もったいないです。

そこでオススメなのがブログにキャラクターを導入することです。

もちろん自分をキャラクター化してもいいのですが、もう一人いることで会話させたりすることもできます。

僕も「ハシモトくん」というナマケモノのキャラクターを作ったことがあります。

沖ケイタ

やっほー

ハシモトくん

わふー(・ω・)ノ

一時期はLINEスタンプを作るくらい溺愛していましたが、今となってはレアキャラと化しました笑

しかし、一度作っておけばアイキャッチ画像や文中の画像にも使えて、簡単にオリジナル感を演出できます。

有名なブロガーさんだと「BANK ACADEMY」の小林亮平さんもブログにペンギンのキャラクターを導入しています。

ココナラで発注すれば、キャラクターは簡単に作れるので、興味がある人はおすすめです。

 

 

<ブログデザイン法則 11>
箇条書きを使う

箇条書きは意外と使ってない人が多いですが、かなり見やすくなるので使わない手はないです。

僕は3つ以上のものを並列で表記するときは箇条書きを使うようにしています。

(例)
「僕の好きな食べ物はリンゴとスイカとマンゴーです。」

↓(箇条書き)

僕の好きな食べ物は以下の3つです。

  • リンゴ
  • スイカ
  • マンゴー

これだけでもかなり読みやすがアップするのがわかると思います。
ぜひ、意識して使って見てください(・ω・)ノ

<ブログデザイン法則 12>
枠を使う

先ほどから多用していますが、枠を使うことで文章を読みやすくできるシーンは多いです。僕も先ほどから例を紹介するときは他の文章と混ざらないように、枠を使って区別しています。

他にも記事の大事なところをワンポイント的にまとめたり、過去記事を紹介するとき、なども枠を使って目立たせることができます。

WordPressの有料テーマだとデフォルトで枠が設定されているものも多いですが、そうでない人は、サルワカさんの「【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30」という記事が役にたちます。

<ブログデザイン法則 13>
表記のルールを統一する

細かい表記のルールをちゃんと統一すると、読みやすいブログを実現できます。

初心者のブロガーさんによく見られるのが、、、

  • 「」と『』がごちゃ混ぜ
  • 数字の全角と半角がごちゃまぜ
  • YouTubeとyoutubeのような表記揺れ

などなど。他にも色々なパターンをよく見かけます。

このように、なんとなく意識せずに表記がバラけているものはしっかりと統一しましょう。
これは意識次第で今すぐ実行できるので、やらない手はないですよ!

<ブログデザイン法則 14>
記事内の画像のルールを統一する

やはり記事内に画像が入っていた方が読者の離脱率が下がります。
僕は最低でもH2見出しの下にはオリジナルの画像を入れるようにしています。

しかし、1枚1枚丁寧に作っていても時間がかかるし、デザイン素人の人はかっこいい画像なんて作れないですよね。

そこでオススメなのが全ての画像に統一感を持たせるという方法です。

5つ統一するだけでオシャレ感を演出

  1. アイコンを統一する
  2. 色を統一する
  3. フォントを統一する
  4. 配置を統一する
  5. 大きさを統一する

例えば「ブログが続かない9つの原因と対策をプロブロガーが解説」という記事ではこの5つをしっかりと統一して記事内の画像作成しました。

実際の画像がこちら
↓↓↓

スライドショーには JavaScript が必要です。

アイコンはオリジナルのものでなくても構いません。
下のフリー素材なんかはシンプルで統一感がでるのでおすすめですよ!

スポンサーリンク

<ブログデザイン法則 15>
アイキャッチ画像の世界観を統一する

実はこれは僕はできていません笑

ブログのアイキャッチ画像も同じような世界観で統一することで、ブログ全体をおしゃれに見せることができます。

「同じような世界観」と言われてもピンとこないと思うので、具体例を紹介していきます。

 

こちらはmanablogのマナブさんのブログです。統一感あっておしゃれですよね〜。

先ほどから、何回も紹介させていただいてるサルワカさんです。
マテリアルデザイン風のオシャレなアイキャッチですね!

 

海外を旅しながらブログで生活するテツヤマモトさんの「面白ハンター」です。
全てのアイキャッチ画像が「写真+文字」の形で統一されていて、フォントや大きさ色も統一されています。

<ブログデザイン法則 16>
固定フッター、追尾サイドバーはいらない

これも賛否両論わかれそうですが、個人的には固定フッターや追尾サイドバーは不要です読者が記事を読むことに集中できないのに加えて、あまりクリックされないんですよね。

僕としてはやっぱり記事を読んでほしいし、そのためのブログデザインでもあるので、これらのデザインは本末転倒と考えております。

ただ、固定フッターは有名なブロガーさんでも利用している人が多いので、意見が分かれるところだと思います。

<ブログデザイン法則 17>
とりあえず有料テーマを使う

ここまで紹介してきたデザイン法則はWordPressの有料テーマならほとんどデフォルトで付いている機能です。

  • 吹き出し
  • 見出しの装飾
  • ブログのメインカラーの変更
  • 行間の調整

などなど。
もちろん無料のテーマでもCSSをいじれば大丈夫ですが、その辺の知識がない人は有料テーマでサクッとデザインを整えて、記事の執筆に集中するのがおすすめです!

おすすめの有料テーマ

ストーク
僕が以前使っていたテーマです。もしかしたら、一番使われているブログテーマかもしれません。
「迷ったらストークにしよ!」とオススメできるテーマです。

SANGO
僕が現在使っているテーマです。この記事でも何度も登場したサルワカさんが開発したテーマ。マテリアルデザイン風のおしゃれなデザインにしたい人はおすすめ

JIN
有名アフィリエイターのひつじさんが開発に関わっているテーマです。ここ最近で一番見かけるテーマですね。アップデートも頻繁に行われており、どんどん進化しています

オシャレなデザインで参考になるブログ11選

最後に参考になるオシャレなブログをまとめておきます!

1. manablog

2.サルワカ

3.面白ハンター

4.ミニマリストしぶのブログ

5.monograph

6. DRESS CODE

6.ひつじアフィリエイト

7.アフィリエイト進化論

8.ぱるろぐ

9.  ヨッセンス

10.ルカルカアフィリエイト

11.RYUKEN OFFICAL BLOG