こんにちは、yuji（@yuji_invest）です。
このブログでは、WordPressとアフィリエイトのノウハウを解説しています。
読みやすくオシャレなブログを作りたいです。
ブログデザインのコツを教えてください。
以上のような、ブログデザインに関する質問にお答えします。
✔この記事の内容
・ブログをおしゃれにするデザイン5個
・記事を読みやすくするデザイン10個
・参考サイト17選
当ブログはコツコツ更新した結果、月間22万PVとなりました。
またアフィリエイト収入も増えており、現在は月100万ほどを稼いでいます。
本記事では、おしゃれなブログデザインを作る15のコツ解説しました。
ブログデザインは「印象」や「読みやすさ」に直結するので、キレイに整えておくとメリットが大きいです。
「ブログのデザインがいまいちパッとしない…」と感じている方は、この記事を読むことで悩みが解決しますよ！
見るだけで勉強になる美しいブログ17選も紹介してますので、是非参考にしてみてくださいね。
ブログデザインの効果とは？
ブログデザインは、記事の内容と同じくらい大切です。
ブログのデザインを整えておくと、
・直帰率が減る
・滞在時間が伸びる
・アクセス数が増える
・ブログのファンが増える
といった効果があり、ブログ収益化に必須となっています。
ブログデザインは簡単です
ブログデザインは、大きく2つの方向性で作ることができます。
・ブログをおしゃれにするデザイン
・記事を読みやすくするデザイン
どちらも特別なスキルは不要なので、是非実践してみてください↓
ブログをおしゃれにするデザイン5個
ブログをおしゃれにすると「ハロー効果」で記事の説得力が上がります。
おしゃれにするデザインはこちら↓
✔ブログをおしゃれにするデザイン
①シンプルな色使いにする
②ブランドカラーを決める
③統一性を意識する
④アイキャッチの雰囲気を合わせる
⑤余白をつくる
以下で解説します。
①シンプルな色使いにする
ブログデザインに使う色は、シンプルさを意識しましょう。
基本は白/黒/グレーなどの落ち着いた配色で、
・デザインを際立たせる
・雰囲気をまとめる
・文字を見やすくする
というように、読みやすさを優先するのがおすすめです。
また、文字は目に優しい色を使うのがおすすめです。（※当ブログでは#333333を利用しています。）
②ブランドカラーを決める
ブログデザインでは、色の持つイメージを利用して「ブランドカラー」を決めましょう。
✔色の影響
・白：清潔/正しさ
・黒：高級感/権威
・グレー：大人/落ち着き
・赤：活力/情熱
・青：信頼/速度
・緑：安定/自然
・黄：軽快/カジュアル
・ピンク：可愛さ/柔らかさ
このような色の心理効果で、ブログの印象を方向付けることができます。
また、色のバランスは以下の配色パターンを参考にしてください↓
》配色パターン見本40選
》Scheme Color.com
》canva-配色パターン100選
③統一感を意識する
デザインに必要なのは「統一感」です。
・文字の大きさを揃える
・フォントは1つに絞る
・画像の大きさを均一にする
・見出し/枠の雰囲気を合わせる
装飾を抑えることで、必要なデザインを際立たせることが可能。
要素を絞ることは、高級感・特別感に繋がります。
④アイキャッチの雰囲気を合わせる
アイキャッチ画像はブログ内のあらゆる場所に表示されるので、雰囲気を大事にしましょう。
全て同じデザインにする必要はないですが、統一感を持たせておくと効果的ですね。
簡単な作成手順とデザインのコツを以下にまとめていますので、是非参考にしてみてくださいね。
》ブログのアイキャッチ画像の作り方
⑤余白をつくる
ブログのデザインでは「余白」を使うとバランスが整います。
・行間を空ける
・枠に余裕をもたせる
・ページ両端に空白を作る
というように、ゆとりを持たせることで「ごちゃごちゃ感」を減らせます。
以上が、サイト全体の雰囲気を整えるデザインです。
WordPressテーマを使おう
ブログの見た目を整えるには、WordPressテーマの利用が必須。
プロ仕様のデザインを実装できるので、以下から気に入ったものを使ってみてくださいね。
》おすすめWordPressテーマ15選
記事を読みやすくするデザイン10個
続いて「記事を読みやすくするデザイン」について解説します。
✔記事を読みやすくするデザイン
①箇条書きを使う
②枠・背景色を使う
③画像・図解を使う
④アイコン・吹き出しを使う
⑤見出しを目立たせる
⑥文字装飾は控えめに
⑦文章表現を統一する
⑧漢字かなの比率を整える
⑨文章は短くまとめる
⑩広告を減らす
以下で詳しく解説します。
①箇条書きを使う
具体例や条件などが3つ以上揃うときは、すぐに箇条書きにまとめましょう。
✔箇条書きのメリット
・情報がまとまる
・注目されやすい
・文字数を減らせる
・無駄をはぶける
このように、文章に緩急を付けながら読者をサポートできますよ。
②枠・背景色を使う
要点や具体例を書くときなどは、枠や背景色で情報を目立たせましょう。
・記事のポイントを区別できる
・読者を飽きさせない
といった効果があります。
③画像・図解を使う
ブログ記事には、適度に画像を挟むのがおすすめです。
例えばH2ごとに画像を入れることで、話の区切りがわかりやすく、読者さんにとって若干の休息になりますね。
また、説明するなら文字だけよりも「図解」が効果的です。
ちなみに当ブログではフリー素材を利用しており、以下でおすすめのサイトを紹介しています。
》ブログにおすすめの無料画像サイト11選
④アイコン・吹き出しを使う
アイコンや吹き出しを使って、文章にリズムを作ることができます。
例えば会話調にすると、話の展開が読みやすくなりますね。
ブログに本腰を入れている方なら、似顔絵やオリジナルのキャラクターを制作するのも効果的です。
》ブログのアイコンの作成方法
⑤見出しを目立たせる
見出しは読者にとって、記事内容を把握するための大切なポイントです。
文章構成を正しく伝えるためにも、目立つ大きさ・デザインで装飾しましょう。
また、複雑な情報は理解されにくいので、見出しはH2〜H3までにするのがおすすめです。
⑥文字装飾は控えめに
ブログでは、文字装飾の使いすぎに注意しましょう。
例えば、
✕…文字を大きくする
✕…文字色を変える
✕…アンダーライン
などは見た目がごちゃついて読みにくくなってしまいます。（※アンダーラインはリンクと誤解されるのでNG。）
記事内で強調したい箇所は、
○…太文字
○…マーカー
などの大手メディアでも使われている、見慣れた装飾を使いましょう。
また、Googleのジョンミューラー氏は「段落上の重要なポイントを太字にすることは、SEOやランキングに役立つ」と解説しています。（SearchEngineRoundTable）
⑦文章表現を統一する
アルファベットや送り仮名などの文章表現は、ブログ内で統一しましょう。
・WordPress ↔ ワードプレス
・申し込み ↔ 申込み
・12月 ↔ １２月
・3つ ↔ 三つ
どちらが正解などは決まっていませんが、ばらつきがあると不自然な印象を受けます。
⑧漢字かなの比率を整える
読みやすい文章にするには、漢字・ひらがな・カタカナのバランスが大切です。
・漢字：30%
・ひらがな：60%
・カタカナ：10%
このようなざっくりとした目安で、読みやすい比率を意識しましょう。
⑨文章は短くまとめる
文章は、長くなりすぎないように注意。
適度に短い文章の方が理解しやすく、PC・スマホの両方で読みやすいです。
⑩広告を減らす
ブログの広告の貼りすぎはNGです。
・アドセンス広告
・バナー広告
はベタベタ貼っても意味がないので、控えめにしておきましょう。
広告を減らしつつ的確にクリックしてもらう方法をまとめたので、以下をご覧ください。
》アフィリエイトリンク作成方法と貼り方のコツ【ブログ収入が10倍伸びる】
以上が、記事を読みやすくするためのデザイン10個です。
この他にも読みやすい文章を書くテクニックを以下で深掘りしてますので、こちらも是非お読みください。
》ブログの文章力を鍛えるコツ11個
続いて、おしゃれなデザインのブログを紹介します。
おしゃれなデザインのブログ17選
ここからは、見ていて飽きないおしゃれなブログを17個紹介します。
どれも説明不要でキレイなので、チェックしてみてくださいね！
カラシソエルの絵と文具
https://karashi-soell.com/press/
macaroni
milieu
monograph
トバログ
サルワカ
DESIGN MEMO
BOTANIST
https://journal.botanistofficial.com/
WIRED
DRESS CODE
lopan
eureka.design
world of wanderlust
https://worldofwanderlust.com/
hand luggage only
https://handluggageonly.co.uk/
brit+co
microsoft story lab
https://news.microsoft.com/stories/
zoella
以上が、参考サイト17選です。
ブログデザインについてのよくある質問
最後に、ブログデザインについての質問に答えます。
- QWordPressテーマは有料と無料どちらがおすすめですか？
- A
WordPress初心者の方がおしゃれなブログを使いたいなら、有料テーマがおすすめです。
有料テーマは高機能でサポートもあり、安心して使えます。
- Q初心者でもCSSでデザインを作れますか？
- A
CSSの基礎を学べば簡単なデザインは作れます。
また、当ブログのデザイン（Cocoon使用）も公開しているので参考にしてみてくださいね。
》【コピペOK】ブログ初心者でもできるCocoonカスタマイズの完全マニュアル
以上が、ブログデザインのよくある質問です。
おしゃれなデザインで、ブログを伸ばそう
この記事では、おしゃれなブログデザインを作るコツを紹介しました。
WordPressテーマを活用＋本記事で紹介したテクニックを抑えていれば、誰でもおしゃれなブログを作ることが可能です。
おすすめのWordPressテーマはこちらにまとめていますので、設定がまだの方は以下から選んでみてくださいね。
そして、ブログのデザインが整ったら、あとは質の高いコンテンツを用意するだけです。
下記んて詳しい手順を解説していますので、参考にしていただければと思います。
》SEOに強いブログ記事の書き方テンプレート
この記事が少しでもお役に立てたら幸いです。
最後まで読んでいただき、ありがとうございました！
コメント