上の「検索窓」または「3本線のカテゴリー」から好きな記事を検索可能です!(^^)! トップページ下に「様々なランキング」も用意しています♪

【2021年】おしゃれなブログデザインの作り方27選【無料で作れる】

目次

ブログのデザインが記事の文章よりも重要な理由

ブログの画像
こんにちは!タカ(@THE_TAKABLOG)です^_^

僕は2019年7月にブログを開設し、世界が変わりました!

 

なぜブログを始めたかと言うと、以下の通り↓

ブログを始めた理由
  • 自分の頭の中をデータとして記録しておく日記的な場所を作りたかった
  • ブログを始めて影響力を持ちたかった(インフルエンサーになりたかった)
  • 会社員(サラリーマン)を辞めて、誰にも縛られず自由に暮らしたかった
  • 何もしなくても月30万は稼げるようになり、南の島でゆっくり暮らしたかった

 

この記事を読んでいただいているあなたは、少なくともブログに少しでも興味を持っている方ではないでしょうか?

そして、そんなあなたは、以下のような悩みがあるんじゃないですか?

 

悩み
  • ブログのデザインってどれくらい重要なんだろう・・・
  • カッコいいおしゃれなブログを作りたいな
  • おしゃれなブログで参考になるサイトがあれば知りたいな

 

筆者
僕も当時は同じような悩みを抱いていました!

 

↑この記事では上記のような悩みを解決します!

 

 

この記事を書いている現在の僕はブログ歴3年ほど。
アフィリエイト収入から生活費を自動化で稼いでいます。

 

上記の画像はSEO検索順位を1度にチェックできる『GRC』というツールの画面なのですが、ブログを更新し続け、半年間でSEO検索順位が爆上がりしました↓

関連記事

アフィリエイトを半年やってみた結果まずは、こちらの画像をご覧ください↓ もう1つの運営サイトである #サクキミ英語 がSEOブレイクしました❗実は、ある事情で、半年程前に記事を全て一端[…]

アフィリエイトを半年やってみた結果→SEO検索順位が爆発しました
関連記事

GRC検索順位チェックルールについて徹底解説します!この記事にたどりついていただき、ありがとうございます。この記事を読んでいただいている皆さんにはこんな悩みがあるのではないですか? 悩み 自分[…]

GRC検索順位チェックツールとは?料金プラン・評判・使い方を解説

 

僕が運営しているもう1つのブログサイト↓(Twitterで紹介しているサイトですね)
» サクキミ英語

 

筆者
ここから毎月20~30万円程の収益が入ってきます♪
ちょうど、英語学習ブログのアフィリエイトです!

 

僕は2019年の7月からブログ記事を書き始めているので、かなり後発です!

 

筆者
それでもしっかりと30万以上は稼げているので、
最新のブログ、アフィリエイト情報について詳しいはず!

 

学習者
確かに世に出ているブロガーさん達はかなり前もって始めていますもんね!

 

僕は現在、300記事を書き終え、ブログ継続期間は3年程。

本格的に動き始めたのは1年半程前ですが、その中で感じたことがあります↓

ブログのデザインって記事の文章よりも重要じゃね?

 

いきなり衝撃的な一文からスタートさせてしまってすいません。しかしこれは残念ながら事実です。

もっと言ってしまうと「おしゃれなブログの方が稼げる」と断言しても過言ではありません。

 

学習者
どういうことですか?

 

筆者
まぁまぁ、慌てずに!
それを今から解説するのです!

 

というわけで今回は、ここまでいろいろと試行錯誤してきた僕が、300記事書き続けてわかった『ブログのデザインがいかに重要か』と、『おしゃれなブログデザインの作り方27選』を中心に解説していきたいと思います^_^

 

この記事に関する注意点
この記事は『自分のブログのPV数を増やして稼ぎたい人』向けに書いています!
『俺は、自己満の日記のような記事を書きたいだけだ!』という方はそっとこのページを閉じてください(笑)

 

この記事の内容
  1. ブログのおしゃれなデザイン3大要素
  2. おしゃれなブログのメリット
  3. 初心者でもおしゃれなブログを作れるテンプレートTOP2
  4. おしゃれなブログの作り方【フォント編】
  5. おしゃれなブログの作り方【装飾編】
  6. おしゃれなブログの作り方【形状編】
  7. おしゃれなブログの作り方【画像編】
  8. おしゃれなブログの作り方【色合い編】
  9. おしゃれなブログの作り方【シンプル編】
  10. おしゃれなブログの作り方【上級編】
  11. おしゃれなデザインが参考になるおすすめブログ10選

 

ちなみに、「まだブログ始めてないぜ!」という方は、
以下の記事で『ブログの始め方・開設方法』を初心者向けに解説しているので、ぜひ始めてみてください^_^↓

関連記事

ブログの始め方・開設方法を知りたい方へ僕は、2019年7月にブログを開設し、世界が変わりました!なぜブログを始めたかと言うと、以下の通り↓ 自分の頭の中をデータとして記録しておく日記的な場所を作りたかった ブ[…]

【初心者向け】ブログの始め方・開設方法5つの手順【月5万稼げる】

 

また、『THE TAKABLOG』では、
『IT分野に関する最新記事をTwitterでも配信』しているので、
よかったら、フォローお願いします↓(^^)

 

筆者
では、いきましょう!

 

ブログのおしゃれなデザイン3大要素

3の画像

まずは、ブログにおけるおしゃれなデザインの3大要素を解説します!

結論から言うと、以下の通り↓

ブログのおしゃれなデザイン3大要素
  1. ブログ全体の色合い
  2. デザインの統一
  3. 画像が美しい

1.ブログ全体の色合い

色がデザインに与える影響は大きいです。なので、おしゃれに見える正しい配色を心がけましょう。

これについては後ほど詳しく説明しますが、以下の3つを意識するだけでも大きく変わります。

おしゃれ配色のポイント
  • 使用する色の種類を増やしすぎない
  • シンプルな色を基調にする
  • おしゃれなブログの配色をそのまま真似する

色の種類が増えれば増えるほど、濃くて目立つ色を使えば使うほど、おしゃれなデザインにする難易度は上がります。

 

筆者
これはファッションと一緒ですね。

2.デザインの統一

デザインを統一することで全体的におしゃれなイメージになります。

例えば、以下のような要素ですね↓

  • 画像の大きさ
  • 記事中の枠のデザイン
  • 画像内の文字の大きさ
  • フォント

特に意味もなく色、大きさ、フォントをコロコロ変更する人がいますが逆効果です。

合わせられるところはしっかり統一するだけで、読みやすいブログへと生まれ変わります。

3.画像が美しい

文字だけの記事で読者を飽きさせずに最後まで読ませることは至難の技です。

画像がある方が文字数が少なく感じる

また、これ豆知識ですが、画像があることで、同じ文字数でも画像がある記事の方が文字数が少なく感じるというデータが出ています。

ブログにおいて画像は読者を飽きさせない手段の1つです。

逆に言えば画像を入れるだけで、読者の満足度が上がるので入れないという選択肢は考えられません。

 

筆者
h2やh3の下に画像を入れ込むことは必須テクニックですよね^_^

 

おしゃれなブログのメリット

メリットの画像

ちなみに、ブログをおしゃれにすると2つのメリットがあります↓

おしゃれなブログにするメリット
  • メリット1:違和感が消え読者が文章に集中できる
  • メリット2:ブログデザインがおしゃれだと収益性が上がる

 

筆者
説明します!

メリット1:違和感が消え読者が文章に集中できる

本が光っている画像
ブログデザインがおしゃれであるメリットは、ブログ全体の違和感が消えて、読者が文章に集中できる点にあります。

いつも読んでいるWEBメディアと180度ちがうデザインだと、読者はビックリして離脱してしまいます。

想像してみてほしいのですが、Google検索で調べ物をしているときに、デザインがめちゃくちゃなサイトにたどり着いたら思わず画面を閉じませんか?

とりあえず内容を読んでみようと思ってもらうために、引っかかりのないブログデザインに整えておくことは重要なのです。

 

メリット2:ブログデザインがおしゃれだと収益性が上がる

お金の画像

結論、収益性UPが期待できます。

なぜなら、デザインの違和感が消えることで、記事の離脱率が下がるからですね。

離脱率が下がると、読者はブログをしっかり読んでくれるので、成約へと繋がる可能性も高まります。

 

例えば、当ブログは2019年7月にTHE THORというWordPressテーマを導入してデザインを整えたのですが、2020年はブログ収益で月30万円をキープできています。
※WordPressテーマ:デザインテンプレートのこと(有料です)。

ブログデザインをおしゃれにすることで、ブログの収益性は向上します。

もちろん、ブログを書かずにデザインばかり追求しても、収益にはつながらないので注意です。

 

『記事の書き方』は以下の記事が参考になると思います↓

関連記事

ブログアフィリエイト記事の書き方を紹介しますアフィリエイトを始めた方!アフィリエイトを始めたけど思うように収益が伸びない方!こんな悩みはありませんか? 悩み ブログアフィリエイトを収益化さ[…]

ブログアフィリエイト記事の書き方

 

初心者でもおしゃれなブログを作れるテンプレートTOP2

テンプレートの画像

WordPressテーマを導入して、デザインを整えましょう。

WordPressテーマとは「デザインテンプレート」みたいなものでして、最近はデザインのみならずSEO内部対策がされているテーマも多いです。

下記は、SEO対策が施されていて、おしゃれなWordPressテーマを2つご紹介しています。

WordPressのテーマで言えば、下記2つがトップ2ですね↓

おしゃれなWordPressテーマ2選
  1. スタイリッシュ系:THE THOR
  2. かっこいい系:AFFINGER5(アフィンガー5)【WING】

 

ご自身が実現したい方向性のテーマを導入していただけるとよいかなと思います。

※どれも、SEO対策は完了しているので安心です。

 

筆者
ちなみに、当ブログで使っているのはTHE THORでして、かなり重宝しています。迷ったら、THE THORを選んでおけば間違いないです。

 

『Wordpressのテーマ』は以下の記事で解説しています↓

関連記事

アフィリエイトにおすすめのWordpressテーマ選びに悩んでいる方へアフィリエイトを始めようとしている方!アフィリエイトを始めたばかりの方! こんな悩みはありませんか? 悩み[…]

アフィリエイトにおすすめのWordpressテーマ

 

おしゃれなブログの作り方【フォント編】

Webデザインで使用されるフォント

では、ここからおしゃれなブログにするための作り方を以下の要素ごとに分けて解説していきたいと思います!

おしゃれなブログの作り方
  1. フォント←本章はここ
  2. 装飾編
  3. 形状編
  4. 画像編
  5. 色合い編
  6. シンプル編
  7. 上級編

フォントはそのブログの命です!

ここで説明する基本を抑えておきましょう!

 

フォント編1:ブログに最適なフォントがゴシック体

モダンなWebデザインで使用されるフォントは主に下記の3つ↓
Webデザインで使用されるフォント2
ちなみにおすすめは断然、ゴシック体です!1番左ですね!

ブログにゴシック体が最適な理由

細字のゴシック体を選ぶべき理由は、単純にブログの文字はゴシック体が読みやすいからです。

明朝体は長文字を『読む』小説や論文には適していますが、文字を『見る』ブログやスライドにはゴシック体が最適。

デザイン書体や太字のフォントは見出しには最適ですが、文字数の多い本文に使うと逆に見にくくなるので避けるようにしましょう。

 

フォント編2:ブログの文字色は黒、背景は白

ブログの背景は『無地の白』が基本。

背景に模様や色があると文字を読むのが疲れるという問題があります。

超上級者は別にして、迷ったら見やすい無地の白背景に黒文字にしておきましょう。

人気ブログの文字は完全に黒色ではない

見た目では気づかないレベルの違いですが、見やすいサイトはすべて『真っ黒』の文字を使用していません。

気づかないレベルでグレーを混ぜて目に優しい色にしています。

 

筆者
ちなみに現在見てもらっている僕のブログの文字色や背景色も真っ黒・真っ白じゃなく、色を混ぜてます。

 

フォント編3:デカ文字は使わない

フォントサイズが大きなデカ文字は、あまり使わないようにしましょう。

理由としては、記事全体のまとまりを崩してしまうからですね。

例えば、大手メディアなどでデカ文字を使っているところは、ほとんどありません。

どうしても使わないといけないとき以外は、デカ文字は極力使わない方が無難です。

 

フォント編4:文字だけでわかりにくいものは図解で解説

アフィリエイト仕組み図・図解
箇条書きと表は情報をまとめるのに適していますが、図解を利用することでさらにわかりやすく情報を伝えることが可能になります。

 

フォント編5:顔文字は使わない

デカ文字と同様に、顔文字もあまり使わないようにしましょう。

こちらも、大手メディアでは全くといっていいほど使われていません。

どうしても使わないといけないタイミング以外は、顔文字の利用も控えましょう。

 

フォント編6:文字の色はカラフルにしない

  • ×の色はカラフルにしない
  • :文字の色はカラフルにしない

またリンクなのか文字の強調なのか、区別できなくなるので、文字リンクの色と同じ色にするのは絶対にNG。

 

文字の色は使っても「テキストリンクの青」と、「重要な部分を強調させる赤」くらいでとどめておきましょう。

 

筆者
僕もそうしてますよ^_^

 

おしゃれなブログの作り方【装飾編】

装飾している画像
続いては、『装飾編』です!

おしゃれなブログの作り方
  1. フォント
  2. 装飾編←本章はここ
  3. 形状編
  4. 画像編
  5. 色合い編
  6. シンプル編
  7. 上級編

 

装飾編1:見出しデザインを整える

H2, H3, H4 などの、見出しデザインを整えてみましょう。

読者としても、見出しの位置を認識できるので、どこを読むべきかパッと分かりますよね。

無料テーマを使っている方は、サルワカさんやJAJAAANさんのサイトを参考に、見出しのデザインを整えるとOKです。

 

筆者
本記事でご紹介したWordPressテーマだと、見出しデザインの種類も豊富に揃っているので、その中から選んでみてください。

 

装飾編2:吹き出しを使用する

吹き出しは会話形式で話すことができるので、読み手としても頭に入ってきやすいというメリットがあります。

 

筆者
まさにこれですね!

 

学習者
僕もいます(笑)

 

上記のような感じで、吹き出しを活用することで、視覚的に情報が入ってきやすくなります。

また、吹き出しでオリジナルなイラストを使うことで、自分の作りたい世界観を作ることができるので、吹き出しを使ってみましょう。

人によっては、おしゃれじゃないと感じるかもですが、アクセントとして活用できるはずです。

 

装飾編3:箇条書きでまとめる

3つ以上の概念は、箇条書きでまとめてみましょう。

3つ以上の例をあげるときや、1つ目・2つ目・3つ目といった番号が続いていくときは、箇条書きにすることでスッキリとまとまります。

箇条書きを使わないパターン

僕が行きたい旅行先はアメリカ、ドバイ、フランスです!

箇条書きを使うパターン

僕が行きたい旅行先
  1. アメリカ
  2. ドバイ
  3. フランス

 

上記のような感じで、3つ以上の概念をまとめるときは箇条書きを使うことで、スッキリとまとめることができます。

3つ以上の概念は、箇条書きでまとめましょう。

 

装飾編4:テーブルで一覧化する

何かを比較するときは、テーブル(表)を使って一覧化してみましょう。

スマホ版でも横スクロールができるタイプもあるはずなので、記事公開前にスマホでも確認しておくとベターです。

 

筆者
スマホとパソコンだと、テーブル(表)の印象が全然違う時があるんですよね(笑)

 

装飾編5:ボックスで目立たせる

ボックスとは「囲み」をつける装飾のことです。

  1. 見出しごとに内容要約する
  2. 箇条書きをより目立たせる
  3. おすすめ記事をまとめてみる

まさにこれですね↑

といった用途に使うことができ、文章に強弱をつけられます。

 

筆者
ボックス(囲み or 枠)は、本記事で紹介したWordPressテーマに豊富な種類が揃っているので、ご自身の使いたいものを選んで使ってみましょう。

 

装飾編6:マーカーで重要性を伝える

重要なポイントは、マーカーで下線を引いてみましょう。

上記のように、マーカーで線を引くことで、読者にどこが重要なポイントなのかを視覚的に伝えることができるようになります。

僕はこの文章のように文字を赤文字にすることもよくしています!

ご自身でマーカーを作りたいという方は、WEBクリエイターの部屋さんの記事が参考になります。
» 【css】蛍光ペンで引いたようなラインマーカーをテキスト上に設置する方法

 

装飾編7:アニメーション装飾は控えめに

ブログの装飾も文字の装飾と同じで過剰装飾は避けましょう。

過剰装飾で特に注意したいのが、画面で動くものです。

  • 追従するボタンやヘッダー
  • 動いたり点滅するボタン
  • 動いたり点滅する背景

これらはひたすら気が散るので本文に集中できず、頻繁に視線がそれることになります。

また、装飾が増えれば増えるほど、本当に強調したい場所が強調されなくなるというデメリットもあります。

アニメーション装飾にはCV効果あり

動く装飾の線誘導効果は凄まじいので反応率をあげたい場所に厳選して使いましょう。

押してほしいボタンを動かしたり光らせたりして目を引くというのは有効ですが、常に表示されていると邪魔すぎます。

 

筆者
大事なのはあくまでユーザー目線。読んでほしいなら自己満足デザインにならないように注意。

 

おしゃれなブログの作り方【形状編】

夕焼けにOKをしている画像
続いては、『形状編』になります。

おしゃれなブログの作り方
  1. フォント
  2. 装飾編
  3. 形状編←本章はここ
  4. 画像編
  5. 色合い編
  6. シンプル編
  7. 上級編

 

形状編1:改行で文章にまとまりを与える

改行することで、文章にまとまりが出てきます。

改行のコツとしては、文章をブロックだとイメージすることですね。

1〜2文ごとに改行を入れることで、パッと見たときにブロックごとに文章を読めるので、まとまっているように感じられます。

改行をすることで、文章にまとまりを与えましょう。

 

形状編2:ひらがなを増やして読みやすくする

漢字がたくさん入っている文章は、WEB記事としては読みにくいです。

そのため、「ひらがな・カタカナ・漢字・数字・アルファベット」などをバランスよく配合した文章を意識することで、読みやすい文章になります。

最新の研究では、「漢字:ひらがな=3:7」の配分が、もっとも読みやすく美しい文章になるとのことです。

ひらがなが多いと柔らかい文章になりますし、漢字が多いと硬い文章になります。

自分の表現したい世界観にあわせて、配分をかえましょう。

 

筆者
いかに、ユーザー様を記事から離脱させないかが重要です!

 

形状編3:一文を長くしすぎない

一文は、長くしすぎないようにしましょう。

一文が長いと、文章として読みにくく、内容も頭に入ってきません。

イメージとしては、話が長い人の説教をずっと聞いているような感じでして、苦痛ですよね。

コンパクトに文章を書くためのコツは、「結論ファースト」でまとめることです。

分かりやすい本文の書き方

  • P(Point)結論:良い記事を作るには、まず設計書となる構成を作ろう。
  • R(Reason)理由:なぜなら、流れの悪いガタガタの記事になってしまうから。
  • E(Example)具体例:たとえば、家を建てるのと同じ。いきなり建築したらズレますよね。
  • P(Point)再結論:まずは構成を作って、ユーザーが読みやすい記事にしよう。

こんな感じで、PREP法に沿って書きましょう。
※PREP法:Point(結論)→Reason(理由)→Example(具体例)→Point(結論)の4つに沿って、相手に情報を上手に伝えるテクニックのこと。

 

読みやすい文章を書くコツについては、下記の記事でも詳しく解説しています↓

関連記事

ブログは文章力を鍛えるのに最適な媒体という話こんにちは!タカ(@THE_TAKABLOG)です^_^僕は2019年7月にブログを開設し、世界が変わりました! なぜブログを始めたかと言うと、以[…]

ブログで文章力を鍛えて向上させるコツ15【文章力がない人へ送る】

 

おしゃれなブログの作り方【画像編】

電球を指で指している画像
続いては、『画像編』を紹介します!

おしゃれなブログの作り方
  1. フォント
  2. 装飾編
  3. 形状編
  4. 画像編←本章はここ
  5. 色合い編
  6. シンプル編
  7. 上級編

 

画像編1:配置を統一する【例:H2下】

画像は、配置する場所を統一しておきましょう。

画像の配置に一貫性があると、読者は一定のリズムを感じながら記事を読むことができます。

例えば、当ブログでは「H2見出しの下」に、必ず画像を1枚いれるようにしています。

 

ブログやアフィリエイトで画像を使う効果は以下の記事で解説しています↓

関連記事

ブログやアフィリエイトでもっと稼ぎたい方へブログやアフィリエイトを始めたけど伸び悩んでいる方!ブログやアフィリエイトでもっと稼いでいきたい方! こんな悩みはありませんか? 悩み[…]

ブログやアフィリエイト記事に画像を入れる効果【引用は著作権に注意】

また、画像を使う時のルールについては以下をどうぞ↓

関連記事

ブログでの正しい画像の引用方法を知っていますか?こんにちは!タカ(@THE_TAKABLOG)です^_^僕は2019年7月にブログを開設し、世界が変わりました! なぜブログを始めたかと言うと、以下の[…]

ブログでの正しい画像の引用方法4つ【知っておきたい著作権ルール】

 

ちなみに、当ブログでよく使っているフリー素材は、下記の記事でご覧いただけます。

関連記事

アフィリエイトでイラストを使おうとしている方へアフィリエイトを始めようとしている方!アフィリエイトの記事に独創性を持たせたい方! こんな悩みはありませんか? 悩み 何か記事に[…]

アフィリエイトにおすすめ無料イラスト素材サイト10選

 

画像編2:同じ記事では画像を統一する

同じ記事では、画像のテイストも統一しておきましょう。

テイストが統一された画像を使うことで、違和感が消えて、文章に集中してもらうことができます。

例えば、

  • 写真で統一
  • イラストで統一
  • 画像の作者で統一

といった感じで、何かを軸としてテイストを統一していけばOKです。

記事内画像のテイストは、あわせておきましょう。

 

画像編3:画像サイズも同じものを使う

画像のサイズもあわせておきましょう。

具体的なサイズ感としては、1280×720が推奨されているケースが多いです。

もし、ちょうどいい画像が見つからないという場合は、実際にアイキャッチ画像にいれてみて、目視で判断しても問題ありません。

 

筆者
ちなみに、Google推奨サイズは1200px以上ですよ^_^

 

画像編4:デザイン的にも読みやすさ的にもアイキャッチは重要

アイキャッチは本文を読む上での箸休めにもなりますし、内容と関連する画像を挿入することで内容がより理解しやすくなるという心理効果も。

アイキャッチイメージだけでも使える心理効果として『プライミング効果』『クレショフ効果』があります。

記事中のアイキャッチを効果的かつおしゃれに見せるには統一感が大事。

  • 内容と関係するものを使う
  • 画像の雰囲気を統一する
  • 画像のサイズを統一する

これらが統一されていないとちぐはぐな印象を与えることになってしまうので注意が必要。

 

おしゃれなブログの作り方【色合い編】

色の画像
続いて、『色合い編』です!

 

おしゃれなブログの作り方
  1. 装飾編
  2. 形状編
  3. 画像編
  4. 色合い編←本章はここ
  5. シンプル編

 

色合い編1:配色はあらかじめ決めておく

記事で使う配色は、あらかじめ決めておきましょう。

王道パターンとしては、よく使う3〜4色を決めておくことです。

ちなみに、僕のサイトでは、

 

僕のサイトの場合、

  • THE TAKABLOG:自分の得意なITスキルと日常を書いていくので、カッコいい感じにした
  • サクキミ英語:英語の勉強系なので、爽やかな印象を与えるブログにした

など、ブログのジャンルや分野によって色を使い分けています!

 

まずは、どんなジャンルなのかを念頭に、どんな印象をユーザーに感じて欲しいのかを考えましょう!

以下の記事が参考になると思います↓

関連記事

はじめにアフィリエイトの商材選びって難しいですよね! 皆さんの中にもこんな悩みを抱えている方はいませんか? 学習者アフィリエイト商材選びってどうやってやればいいの?ASPを[…]

アフィリエイト商材とジャンルの選び方
関連記事

成功しているアフィリエイトブログサイトから分析してみる重要性こんな悩みを抱えている方はいませんか? 悩み アフィリエイトを始めたけど伸び悩んでいる アフィリエイトを始めたいけどどんなサイトにすれ[…]

アフィリエイトおすすめブログ例4選

 

色合い編2:リンクの色は統一する

リンクの色は、統一しておきましょう。

2020年10月現在のGoogleのリンク色は、「#1a0dab」となっており、これが基本的なリンク色といえます。

ちなみに、当ブログでは、「#1e73be」というリンク色を使用しています。

ちなみに、リンクは色を変えるだけでなく、下線も引いておくと、よりリンクだと認識してもらえるのでおすすめです。

 

おしゃれなブログの作り方【シンプル編】

スマホの画像
続いて、『シンプル編』を紹介します!

おしゃれなブログの作り方
  1. フォント
  2. 装飾編
  3. 形状編
  4. 画像編
  5. 色合い編
  6. シンプル編←本章はここ
  7. 上級編

 

シンプル編1:長々と説明しない

説明は、簡潔にしましょう。

長々と説明してしまうと、テキスト量が増えてしまい、読者も読むのが大変です。

もちろん、しっかり説明をしないといけないシーンでは、読者が100%理解できるように、言葉を尽くして解説する必要はあります。

とはいえ、基本スタイルとして、端的な説明を心がけましょう。

 

シンプル編2:一文の途中で改行しない

一文の途中で改行をするのは、やめましょう。

スマホビューを意識して、「。」がくる前に改行をする人がいますが、「。」がくるまでは改行しなくてOKです。

 

改行がある文章

途中で改行すると、
読みやすくはあるのですが、
ビジネスメールではないので、
極力避けましょう!

改行がない文章

途中で改行すると、読みやすくはあるのですが、ビジネスメールではないので、極力避けましょう!

 

上記のように、文章の途中で改行してしまうと、アマチュア感が強くなりすぎるので、「。」がくるまでは改行はしなくて大丈夫です。

 

シンプル編3:広告リンクを貼りすぎない

広告リンクは、必要なタイミングのみ貼りましょう。

たまに、全てのH2上にGoogleアドセンスが置いてあったり、各見出しの終わりにバナーでアフィリエイトリンクが置いてあるブログを見かけます。

収益を得るために広告をたくさん貼りたくなるのは分かりますが、無闇に広告を貼りすぎると、おしゃれなブログから遠ざかってしまうので注意しましょう。

 

『広告の貼り方やタイミング』については、以下の記事で解説しています↓

関連記事

アフィリエイト広告の貼り方を解説アフィリエイトを始めようとしている方!アフィリエイトを始めたけど伸び悩んでいる方!それは、アフィリエイト広告の貼り方にあるかもしれません。 こんな悩みはありませんか?[…]

アフィリエイト広告の貼り方コツ3つ【クリック率が2倍になる】

 

おしゃれなブログの作り方【上級編】

階段を上がっている画像
最後に上級編を紹介します!

余裕がある方は、実践してみてください^_^

おしゃれなブログの作り方
  1. フォント
  2. 装飾編
  3. 形状編
  4. 画像編
  5. 色合い編
  6. シンプル編
  7. 上級編←本章はここ

 

上級編1:プロフィールアイコンを入れて個性を出す

プロフィール(キャラクター)アイコンを入れると個性が出るのでおすすめしています。

僕のアイコンはフリー素材を合成して作られていますが、こういう風にひと手間加えるだけで、印象がガラッと変わりますよね!

 

上級編2:表記ゆれを無くす

文章の中で表記が統一されていないことを「表記ゆれ」と言います。

例えば下記のようなものです。

  • Google ⇔ グーグル
  • Webサイト ⇔ ウェブサイト
  • 申し込み ⇔ 申込み
  • 引っ越し ⇔ 引越し
  • 猫 ⇔ ネコ

表記ゆれは読んでいてストレスになりますので、できるだけ統一しましょうね。

 

おしゃれなデザインが参考になるおすすめブログ10選

OKの画像
では、上記テクニックが施された個人ブログ・法人メディアに分けて、紹介していきます。

デザインのみならず、記事の書き方も参考になるサイトばかりです。

 

個人ブログ編1:manablog

manablogの画像

超有名ブロガーのマナブさんのmanablogです。

余計な装飾が削ぎ落とされたミニマルなデザインです。

アイキャッチも統一感があってとてもおしゃれなデザインです。

 

個人ブログ編2:サルワカ

サルワカさんのブログ
本記事でもたびたび参考にさせていただいたサルワカさんです。

「フラットデザイン」や「マテリアルデザイン」と呼ばれるスタイルを取り入れており、シンプルながらも洗練されたデザインが特徴のサイトですね。

 

個人ブログ編3:321Web

321Webの画像

Apple製品・Adobeソフトに関する個人ブログ、321Webです。

本記事でご紹介した、SWELLというテンプレートを利用しているサイトでして、オリジナルのサムネイル画像や、きれいめな装飾が使われている本文が参考になりますね。

 

個人ブログ編4:幼児教材ガイドブック

3つ目は、幼児向け教材の特化サイトである、幼児教材ガイドブックです。

こちらは本記事で紹介した、AFFINGER5で構成されているサイトで、ユーザー層に向けて親しみのあるデザインや、統一感のある写真がとても参考になります。

 

個人ブログ編5:monograph(モノグラフ)

monograph(モノグラフ)の画像

ガジェットブログとして有名な、monographです。

とにかく写真が美しく、本文も超シンプルで洗練されている点が、とても参考になります。

 

法人メディア編1:WIRED

WIREDの画像
1つ目は、WIREDです。

おしゃれなメディアの代名詞ともいえる、WIREDはいつ見ても美しいデザインです。

 

法人メディア編2:タビナカマガジン

タビナカマガジンの画像
2つ目は、旅メディアのタビナカマガジンです。

基本に沿って書かれている記事は、とても読みやすく、思わず旅に行きたくなるような写真も豊富に使われているメディアといえます。

 

法人メディア編3:CRAZY MAGAZINE(クレイジーマガジン)

CRAZY MAGAZINE(クレイジーマガジン)
3つ目は、ウエディングプロデュースを提供するCRAZYが運営している、CRAZY MAGAZINEです。

背景が動くところがおしゃれなんですが、ごちゃごちゃしているわけではなく、シンプルさも保たれている点が優れています。

 

法人メディア編4:BAMP

BAMPの画像

4つ目は、BAMPです!

クラウドファンディング事業を行う株式会社CAMPFIREのオウンドメディア。

アイキャッチ画像の統一感と白、黒、グレーの配色がとても参考になります。

 

法人メディア編5:macaroni

macaroniの画像

最後は、macaroniです!

暮らし系メディアのマカロニ。サイト全体の色数が抑えられていてミニマルな印象のサイトデザイン。

そのおかげでアイキャッチの料理の写真がとても際立っています。

 

こんな感じで成功しているサイトかた学ぶとすぐに成長できますね!

以下の記事も併せて読んでみてください↓^_^

関連記事

成功しているアフィリエイトブログサイトから分析してみる重要性こんな悩みを抱えている方はいませんか? 悩み アフィリエイトを始めたけど伸び悩んでいる アフィリエイトを始めたいけどどんなサイトにすれ[…]

アフィリエイトおすすめブログ例4選

 

まとめ:おしゃれなブログは無料で作れるが、有料テーマも選択肢の1つ

お金の画像
いかがでしたか?

今回は、『ブログのデザインがいかに重要か』と、『おしゃれなブログデザインの作り方27選』を中心に解説してきました!

 

ここで紹介した手法はcssをいじれば無料でできます!

ただ、ここで紹介した27個を全部でデザインするのはかなり大変です(笑)

 

なので、僕のおすすめはWordpressの有料テーマを導入してしまうこと!

文字や見出しなどの装飾は、CSSで調整しなくてもほとんど装備されているので、ブログ初心者でもデザインの統一感を簡単に出せます。

高くても1~2万円です!27個のデザインを時間をかけて実践するのであれば、時間をお金で買ってしまった方が良いと思います!

 

以下の2つのテーマならプロ並みのサイトがすぐに作れます↓

おしゃれなWordPressテーマ2選
  1. スタイリッシュ系:THE THOR
  2. かっこいい系:AFFINGER5(アフィンガー5)【WING】

 

僕は『THE THOR』を使っていますし、しっかりと稼げているので、買ってしまって本当によかったなと思っています!

『THE THOR』については、愛しすぎて解説記事を作りました↓

関連記事

WordPressテーマに悩んでいる方へブログを開始しようとしている方!アフィリエイトを始めようとしている方! こんな悩みはありませんか?  悩み Wo[…]

THE THOR(ザ・トール)の評判【凄さがわかる54の機能・特徴も解説】

 

繰り返しですが、デザインは文章より重要だったりします!

有料なのでお金に余裕があったり、好きなデザインテーマがみつかったら検討してみてくださいね。

 

今回は以上です。

最後まで読んでいただき、ありがとうございました^_^

【2021年】おしゃれなブログデザインの作り方27選【無料で作れる】
最新情報をチェックしよう!
>このブログは最強のWordPressテーマ『THE THOR』を利用しています!

このブログは最強のWordPressテーマ『THE THOR』を利用しています!

ブロガーやアフィリエイターのために開発された『SEO最強のWordPressテーマ』です!当ブログと似たようなデザインにしたい方、興味がある方は『評判や凄さがわかる54の特徴・機能』を徹底解説した記事を用意したので、以下のボタンからぜひ読んでみてください^_^↓

CTR IMG