「おしゃれなブログにするためには、どうすれば良いのだろう…」
「サイトの色は何色が良いのかわからない…」
「第三者が見ても評価されるサイトを作りたい！」
この記事を訪れたあなたはこのような悩みを持っていませんか？
ブログのデザインはサイトを立ち上げた時だけでなく、サイトを運営しながら周りのサイトをみて、
「自分にもできるのだろうか？」
「周りのレベルが高くて自分にはできないかもしれない。」
と迷いが生じるものです。
ですが、他のサイトと自分のサイトを比べながら、一つずつ改善していくことで、負けないおしゃれなサイトを作ることができます。
今回の記事では、ブログのデザインと色について詳しく解説していきます。
ブログのデザインは第三者が見て信頼が持てるかが大切！
ブログに求められるデザインとは、『第三者が見てどう感じるのか』が大切です。
趣味ブログであり、収益も不要であれば、この限りではありませんが、収益を少しでも求めるのであれば、ユーザーファーストにしなければいけません。
自分のサイトのテーマとペルソナを明確にし、
『使いやすくて、伝えたいことが正確に伝わる』ことを第一にデザインを行いましょう。
商用目的のブログであれば第三者の意見を聞くこと
特に商用目的であるブログに関しては、第三者の意見を聞くようにしましょう。
友人でも、家族でも、彼氏彼女でも構いません。
「私のブログを見てどう思う？」
と聞いて、客観的なアドバイスをもらって改善することが大切です。
第三者の意見はとても参考になりますよ！
ブログのメインテーマ色は何が良いの？
サイトの色はサイトの雰囲気が大きく変わる重要事項です。
ほとんどのサイトは、これから『紹介する色』と『白色』の組み合わせが良いです。
色によって第三者に与えるイメージについて解説していきます。
他のブログサイトで良く使われている順に解説していきますね！
① グレー・ネイビー
| 与える印象・心理効果 | 控えめの上品さ、知性、清潔さ、誠実さ、落ち着きなど |
特にネイビーは統計学上、最も日本人が好む色合いです。
② 青色
| 与える印象・心理効果 | 集中力を高める、冷静にさせる、リラックスさせる、涼しさを感じる 誠実さ、真面目さ、寂しさを与える、気品がある |
青白の組み合わせは、ブログテーマ『SANGO』が最も有名であり、人気があります。
無難に行くなら間違いない組み合わせです。
③ 白色・黒色
| 白色が与える印象・心理効果 | 清潔さ、純粋さ、シンプル、新しさ |
| 黒色が与える印象・心理効果 | 高級感、重厚感、スタイリッシュ、シンプル、圧倒的な存在感、暗さ |
白黒の組み合わせもシンプルでかっこいいおしゃれなブログになります。
高級感を出したい時などにおすすめです。
④ オレンジ
| 与える印象・心理効果 | 暖かさ、元気、フレンドリー、カジュアルさ、フランクさ、健康的 |
オレンジ色のサイトであれば『ヒトデブログ』が有名ですね。
心理的にも印象の良い組み合わせです。
⑤ 緑色
| 与える印象・心理効果 | リラックス、目を休める、緊張を抑える、環境にやさしい エコ、自然的、保守的 |
緑色白の組み合わせは、当サイトのような感じですね。
私自身が好きな色が緑色というシンプルな理由で決めました。
組み合わせも悪くはないと感じております。
⑥ 赤色
| 与える印象・心理効果 | 興奮する、情熱的、やる気を出す、エネルギーに溢れる、怒り、生命力に溢れる、熱さ、暖かさ、怒りなど |
赤白の組み合わせが意外と良く、あまり見かけないテーマ色である為、かなり目立ちます。
ただし、赤の配色は少なめにした方が良いです。
周りと差別化したい場合に使用するのも手です。
⑦ 黄色
| 与える印象・心理効果 | 注目させる、活力を与える、明るさ、活動的にさせる、陽気さ、アクティブさ、緊張を与える |
黄色白の組み合わせは、競合サイトを見ても少ない傾向にあります。
希少性は高いですが、テーマによっては合わない可能性もあります。
試行錯誤やってみましょう。
⑧ 紫色
| 与える印象・心理効果 | 上品さ、神秘的、アーティスティック、感覚を敏感にさせる、妖しさ、不気味さ |
かなりマニアックな色ですね。ブログではほぼ見かけません…。
まとめ
- グレー＋白色
- ネイビー＋白色
- 青色＋白色
- オレンジ＋白色
- 緑色＋白色
他のサイトを確認しながら、作ってみてください！
「みんブロ」がおすすめです。
ブログのデザインをおしゃれにするコツ9選
なんとなく色について理解したところで、ブログのデザインをおしゃれにするコツを9つ紹介していきます。
基本的には、あなたが「このブログ見やすいな。」と感じたサイトを真似るのが良いです。
あくまでも真似るようにし、パクるのはやめましょう。
トラブルの元となります。
① デザイン・色は統一すること
デザインは基本的に統一すると良いです。
あくまで個人的な主観ですが、サイトのテーマカラーで使用する色は2色、補完的に使用するもので1〜3色あれば良いと考えます。
あまりにカラフルにしてしまうと、読み手の目が疲れてしまいます。
サイトテーマカラーは好きな色と白の2色の組み合わせ、
表やボタンなど部分的に使用するもので1色〜3色あれば十分です。
人気のあるブログのほとんどは、目が疲れないシンプルなブログが多いはずです。
| 色を考える必要があるもの | |
| 見出し | サイトテーマと合わせるのが基本 当テーマは『緑色』 |
| 表 | サイトテーマと合わせるか、グレーか黒 当テーマは『グレー』 |
| ボタン | 目立たせる為に、サイトテーマと別の色を使うのが良い ボタンは統計上、オレンジまたは青色が最もCVRが高い 当テーマは『オレンジ』 |
| 枠線 | 自由 当テーマは『グレー』『青色』『緑色』 |
| 文字色 | 赤文字と黒文字と黄色下線の使い分けが最も人気 |
ぜひ参考にしてください！
② 画像を適切なサイズで使用する
ブログでは基本的にアイキャッチ画像以外にも使用した方が良いです。
場合によりますが、見出し(h2)の下は画像があった方が良いです。
文章だけのブログは目が疲れますので、読み手の目を休める意味でも入れるようにした方が無難です。
画像サイズに関しては、統一感を出すようにしましょう。
③ 本文の文字は拡大しない
本文の文字の大きさ統一した方が綺麗です。
参考例
- 少しずつ前に進んでいるという感覚は、人間としてすごく大事
- 少しずつ前に進んでいるという感覚は、人間としてすごく大事
このように部分的に大きくしてしまうと、違和感が生じてしまい、読みづらくなってしまいます。
④ 枠線・箇条書き・表を使用する
ブログはだらだら書き続けるより、まとめられる内容は、枠線・箇条書き・表があると一目で伝えたい内容が伝わるので便利です。
私が第三者に伝える上で、「分かりにくいな。」と感じる内容であれば必ず使用するようにしています。
参考例
- ブログ
- 特化ブログ
- 超特化ブログ
| 雑記ブログ | ジャンルに拘らず、好きな内容を書いていくブログのこと |
| 特化ブログ | 特定のジャンルに絞って書いていくブログのこと |
上記のように、枠線、箇条書き、表があるだけで、非常に分かりやすくなり、サイトの信頼性も向上します。
⑤ 漢字・ひらがな・数字のバランスをよくする
本文を書いていく上で下記のように、『ひらがな』が続くと読みづらくなります。
参考例
- 人にかつというかちかんではブログをやっていない
- 人に勝つという価値観ではブログをやっていない
適度に漢字や数字を入れることが大切です。
どうしても『ひらがな』が続く場合、カギカッコなどを使用すると分かりやすくなります。
読みやすさを考えて、書いていきましょう！
⑥ 吹き出しを使用する
吹き出しは他のブログと差別化できる内容です。
吹き出しがあるだけで、サイトがとても見やすくなります。
ただし、吹き出しが多すぎると、スマホで文章が読みづらくなるので、使いすぎないように注意しましょう。
読者はキャラの細かい設定は気にしておりませんので、あまり考えなくても良いですよ！
⑦ 改行後の行間を調整する
文章が長くなると、ダラダラ書いている本文は非常に見づらくなります。
適度に改行や行間を調整すると見やすくなるので、試してみてください。
⑧ 表記ゆれは原則避ける
文章の中で表記が統一されていないことを「表記ゆれ」と言います。
例えば下記の内容です。
- YouTube⇄youtube
- Google⇄グーグル
- WEBサイト＝ウェブサイト
- Amazon⇄アマゾン
読者はあなた以上にブログをしっかり見ているので、違和感に感じることが多いです。
基本的には統一するようにしましょう！
⑨ 有料のWordPress(ワードプレス)テーマを使用する
ブログはデザインの自由度が高いWordPress(ワードプレス)が最も良いですが、おしゃれなブログを作るなら、有料テーマを検討した方が良いです。
無料ブログと比べ、文字や見出しの装飾、枠線、ボタンなど、最初から装備されていることが多いので、初心者でもおしゃれなブログを作りやすいです。
WordPress(ワードプレス)おすすめ有料ブログテーマ7選
その他WordPress(ワードプレス)有料ブログテーマ8選
このあたりがメジャーで使いやすいですね！
ブログのデザインと色 まとめ
いかがでしたか？
ブログのデザインと色について詳しく解説してきました。
これまでの内容をまとめると
- グレー＋白色
- ネイビー＋白色
- 青色＋白色
- オレンジ＋白色
- 緑色＋白色
- デザイン・色は統一すること
- 画像を適切なサイズで使用する
- 本文の文字は拡大しない
- 枠線・箇条書き・表を使用する
- 漢字・ひらがな・数字のバランスをよくする
- 吹き出しを使用する
- 改行後の行間を調整する
- 表記ゆれは原則避ける
- 有料のWordPress(ワードプレス)テーマを使用する
上記のようになりました。
ぜひ参考にしていただき、おしゃれなブログを作ってみてください！
