こんにちは、yuji（@yuji_invest）です。
このブログでは、WordPressとアフィリエイトのノウハウについて詳しく解説しています。
読みやすくオシャレなブログを作りたいです。
ブログデザインのコツを教えてください。
以上のような、ブログデザインに関する質問にお答えします。
✔この記事の内容
・ブログをおしゃれにするデザイン5個
・記事を読みやすくするデザイン10個
・参考サイト17選
本記事では、おしゃれなブログデザインを作る15のコツ解説しました。
ブログのデザインは「印象」や「読みやすさ」に直結するので、キレイに整えておくとメリットが大きいです。
「ブログのデザインがいまいちパッとしない…」と感じている方は、この記事を読むことでお悩みが解決しますよ！
見るだけで勉強になる美しいブログ17選も紹介してますので、是非参考にしてみてくださいね。
ブログデザインの効果
ブログのデザインは、記事の内容と同じくらい大切。
ブログのデザインを整えておくと、
・直帰率が減る
・滞在時間が伸びる
・アクセス数が増える
・ブログのファンが増える
・アフィリエイト売り上げが伸びる
といった効果があり、おしゃれなデザインが必要不可欠となっています。
ブログデザインは簡単です
ブログデザインは、大きく2つの方向性でできます。
✔ブログデザインの要素
・ブログをおしゃれにするデザイン
・記事を読みやすくするデザイン
どちらもデザインスキル不要なので、以下の方法でおしゃれなブログを作成してくださいね↓↓
まずは、ブログをおしゃれにするデザインから紹介します。
ブログをおしゃれにするデザイン5個
まずは、サイト全体の雰囲気を整えるデザインから。
ブログの第一印象が良くなると「ハロー効果」で記事の説得力が上がりますよ。
✔ブログをおしゃれにするデザイン
①シンプルな色使いにする
②ブランドカラーを決める
③統一性を意識する
④アイキャッチの雰囲気を揃える
⑤余白をつくる
以下で解説します。
①シンプルな色使いにする
ブログで使う色はシンプルさを大事にしましょう。
目立ちすぎない色を使い、文章の邪魔にならないことが大切です。
基本は白/黒/グレーなどの落ち着いた配色で、
・デザインを際立たせる
・雰囲気をまとめる
・文字を見やすくする
というように読みやすさを優先するのがおすすめです。
また、文字色は黒に若干の色を混ぜて、目に優しい表示にしておきましょう。（※当ブログでは#333333を利用しています。）
②ブランドカラーを決める
色の持つ影響度合いは大きいので「ブランドカラー」を決めるのもおすすめです。
✔色の影響
・白：清潔、正しさ
・黒：高級感、権威
・グレー：大人、落ち着き
・赤：活力、情熱
・青：信頼、速度
・緑：安定、自然
・黄：軽快、カジュアル
・ピンク：可愛さ、柔らかさ
このような色の心理効果で、ブログの印象を方向付けることができますよ。
また、ブログに使う色は配色パターンを参考にしてください。
✔配色パターンがわかるサイト
》配色パターン見本40選
》Scheme Color.com
》canva-配色パターン100選
こちらから統一感のある色のグループを見つけて、そのままブログに活かせます。
③統一感を意識する
デザインに必要なのは、統一感です。
色を使う場所や装飾をシンプルにすることで、必要なデザインだけが際立ちますよ。
例えば以下の通り。
✔統一感を意識
・文字の大きさを揃える
・フォントは1つに絞る
・画像の大きさを均一にする
・見出し/枠の雰囲気を合わせる
このように、デザインを統一することでブログは簡単に読みやすくなります。
また、要素を絞ることは高級感・特別感に繋がるので、無駄を減らす工夫が効果的です。
④アイキャッチの雰囲気を揃える
アイキャッチ画像はあらゆる場所に表示されるので、雰囲気を大事にしましょう。
全て同じデザインにする必要はないですが、系統を合わせておくことが大切です。
フリー素材サイトで高品質な画像をダウンロードできるので、以下で探してみてくださいね。
》Shutterstockの無料トライアル登録と解約手順
⑤余白をつくる
Webデザインでは、余白をうまく残すとバランスが整います。
✔余白の使い方
・行間を空ける
・段落の間を空ける
・見出しと本文を離す
・枠に余裕をもたせる
・ページ両端に空白を作る
このように、ゆとりのある余白の使い方でごちゃごちゃ感を減らせますよ。
以上が、サイト全体の雰囲気を整えるデザインです。
ちなみに、見た目を整えるためにはWordPressテーマの利用が必須なので、以下でおすすめを紹介しています。
》SEOに強いおすすめWordPressテーマ16選
次に、記事を読みやすくするデザインについてまとめます。
記事を読みやすくするデザイン10個
ここからは、記事を読みやすくするデザインについて解説します。
ブログの文章は常に流し読みされるので、パッと見のわかりやすさが大切です。
✔記事を読みやすくするデザイン
①見出しを目立たせる
②箇条書きを使う
③枠を使う
④画像を使う
⑤アイコンや吹き出しを使う
⑥文字の装飾は控えめに
⑦文章表現を統一する
⑧漢字かなの比率を整える
⑨リンクには青を使う
⑩広告を貼りすぎない
以下で詳しく解説します。
①見出しを目立たせる
見出しは読者にとって、記事内容を把握するために必要なポイントです。
文章構成を正しく伝えるためにも、ブログのブランドカラーを使って装飾してください。
また、使う見出しはH2〜H3までにするのがおすすめ。
複雑な情報は理解されにくいので、2段階までの構造で文章をまとめましょう。
②箇条書きを使う
文中に箇条書きを挟むことで、読者が要点を理解しやすくなります。
具体例や条件などが3つ以上揃えば、すぐに箇条書きにまとめましょう。
✔箇条書きのメリット
・情報がまとまる
・注目されやすい
・文字数を減らせる
・無駄をはぶける
このように、文章に緩急を付けながら読者をサポートできますよ。
③枠を使う
要点や具体例を書くときなど、枠で囲うことで情報を目立たせることができます。
また、まわりと違う背景色にすることで、記事のポイントが他の文章と混ざらないように区別できますね。
このように、枠で囲うことで読者を飽きさせない効果があります。
④画像を使う
ブログを読む人にとって、文字だけの記事を目で追うのは苦痛です。
そこで、一定の割合で画像を挟むことで、読むハードルを下げることができますよ。
例えばH2ごとに画像を入れることで、それは読者にとって休息になります。
このような文章を飽きにくくさせる工夫で、少しでも離脱を減らしていきましょう！
ちなみに当ブログではフリー素材を利用しており、以下でおすすめのサイトを紹介しています。
》ブログにおすすめの無料画像サイト11選
⑤アイコンや吹き出しを使う
記事を読みやすくする工夫の1つに、アイコンや吹き出しがあります。
例えば、会話調にすることで、話の展開をわかりやすく進めることができますね。
吹き出しに使うアイコンは、以下のサイトで無料ダウンロードが可能です。
》ICOON MONO
》フラットアイコンデザイン
》ヒューマンピクトグラム
またブログに本腰を入れている方なら、似顔絵やオリジナルのキャラクターを制作するのも効果的ですよ。
》ブログのアイコンの作成方法
⑥文字の装飾は控えめに
文章に統一感を持たせるために、文字の装飾は控えましょう。
使わない方がいい装飾はこちら↓
✔文字の装飾は控えめに
・文字を大きくする
・文字色を変える
・アンダーライン
どれも強調に使われるデザインですが、結果的にとても読みにくくなってしまいます。（※特にアンダーラインはリンクと誤解されてしまうのでNG。）
もし記事内で強調したい箇所があれば、太文字やマーカーがおすすめです。
・太文字
・マーカー
こちらは大手メディアでも使われている装飾なので、読者が違和感を覚えることはありません。
流し読みをしている読者にも効率的に要点を伝えられるので、適度に入れておくと良いですね。
⑦文章表現を統一する
記事内での文章表現は、ブログ内で統一しておきましょう。
✔文章表現を統一させる
・Googleアドセンス ↔ GoogleAdSense
・3つのポイント ↔ 三つのポイント
・ワードプレス ↔ WordPress
・申し込み ↔ 申込み
・12月 ↔ １２月
どちらが正解など決まっていませんが、アルファベットや送り仮名にばらつきがあると不自然な印象を受けます。
自分の中で表記ルールを決めておくのがおすすめです。
⑧漢字かなの比率を整える
読みやすい文章にするには、漢字・ひらがな・カタカナのバランスが大切です。
日本語の理想の比率は、
・漢字：30%
・ひらがな：60%
・カタカナ：10%
となっているので、ある程度は読みやすい比率を意識しましょう。
また、文章を長くしすぎないことも大切。
適度に短い文章の方がすぐに理解しやすく、PC表示・スマホ表示どちらでも読みやすいですよ。
⑨リンクには青を使う
記事内でリンクを貼る場合は、必ず青を使いましょう。
「リンク＝青」は共通認識なので、ここでは個性を出さずに一目でリンクだとわかる青色を使うのが無難。
特にアフィリエイトではクリック率が重要なので、読者にリンクを認識してもらうことが重要ですね。
⑩広告を貼りすぎない
ブログ内のアドセンス広告やアフィリエイトリンクは、貼りすぎないように注意しましょう。
例えば、H2見出しごとに広告が表示されると、頻度が高すぎて読者にとっては読みづらくなりますよね。
また、広告の内容によっては雰囲気が崩れてしまうので、アドセンス広告はバランス良く貼ることが大切です。
アフィリエイトのバナー広告などもほとんどクリックされないことが多いので、見た目も邪魔にならないテキストリンクがおすすめですよ。
以上が、記事を読みやすくするためのデザイン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カスタマイズの完全マニュアル
以上が、ブログデザインのよくある質問です。
まとめ：簡単な工夫1つで、ブログはおしゃれになる
この記事では、おしゃれなブログデザインを作るコツを紹介しました。
WordPressテーマを活用＋本記事で紹介したテクニックを抑えていれば、誰でもおしゃれなブログを作ることが可能です。
おすすめのWordPressテーマはこちらにまとめていますので、設定がまだの方は以下から選んでみてくださいね。
そして、ブログのデザインが整ったら、あとは質の高いコンテンツを用意するだけです。
下記んて詳しい手順を解説していますので、参考にしていただければと思います。
》SEOに強いブログ記事の書き方テンプレート
この記事が少しでもお役に立てたら幸いです。
最後まで読んでいただき、ありがとうございました！
コメント