統一感のあるデザインの配色|ブログやTwitterの画像の配色

新社会人のスキル向上
スポンサーリンク

今回はブログに関する記事です!

実は最近、Twitterのアイコン、ヘッダー、ブログのデザインを見直しました。

軽い気持ちで始めたブログがだんだんと多くの人に見てもらえるものになったため、手を加えたいと思うようになったからです。

PVのわりに見た目はプロっぽくなったのではないでしょうか。

今回はデザイン、特に配色について書いていこうと思います。

」はイメージの要とも言える非常に重要な要素です。

ブログは特に、ヘッダーやキャビコンをはじめとした画像、そして文字色や背景色など、色に関して決めなければいけないことがたくさんあります。

この記事で「配色」について学び、ぜひ統一感のあるブログを作る参考にしてください!

当ブログのデザイン

まずは最近見直した、このブログのデザインをお見せします。

このように、ヘッダーとメニューを青系統の色でシンプルにまとめてあります。

※テーマはcocoonです。

配色で重要なポイント

今回はデザインはサンプルに頼り切ってしまっているため、「配色」にフォーカスしたいと思います。

色選びのコツをご紹介しましょう。

色には効果がある

色にはそれぞれ効果があります。

まずはブログのテーマやどのような雰囲気にしたいかで、だいたいの色の系統を決めましょう。

赤 : 緊張、興奮、情熱

青 : 知的、誠実、落ち着き

黄 : 明るさ、エネルギー、危険

緑 : 癒し、調和、健康

黒 : 高級感、威圧感、力強さ

使う色は3色までにする

あまりに多くの色を使用すると、ガチャガチャしていて安っぽく見えます。

どんなに多くても使用する色は3色までにしましょう。

2色までに抑えるとなおいいでしょう。

迷ったら便利なグレーを選ぶ

グレーを使った配色は、無難におしゃれなデザインにしてくれます。

グレー×カラフルな色は、実は最高の組み合わせなんです。

それだけで雰囲気がでるからです。

ビビットなカラーにきれいなグレーがマッチしていますよね。

明度と彩度の同じ色を使う

2色の選び方のコツの一つとして、明度と彩度が同じ2色を使うことが挙げられます。

ブロガーさん御用達のデザイン作成アプリ、「Canva」 では、このようにパレットで色を変えることができます。

主導で色(点の位置)を動かすこともできますし、気に入ったカラーコード(#6991B6など)を入力することもできます。

左にいくほど明るい色になり、右にいくほど暗い色になります。これを明度と言います。

上にいくほど鮮やかな色になり、下にいくほど黒っぽい色になります。これを彩度と言います。

この上下左右のバランスが同じ場所にある二点を選ぶのです。

上の画像は、白い点が同じ位置にあるのがわかると思います。

当ブログではこの2色をテーマカラーとしています。

見出しが左の青色、イラストは右の緑色ですね。

どの記事でもこのような配色にするようにしています。

イラストの色を自由に変えられる当ブログ一押しのイラストサイトはこちらの記事をご覧ください。

彩度が違う色を使う

もう一つの選び方としては、明度は同じで、彩度の異なる色を使うことです。

同じ色を使っていても、下の二つの画像は、高さ(彩度)が違います。

なんとなく理解できますでしょうか。

左の方が鮮やかですね。

このように高さだけが違う2色を選んでも、統一感のあるカラーになるでしょう。




おまけ

最後に、簡単にブログのヘッダーが作成できる方法をちょこっとご紹介します。

非常に簡単&手抜きです。

センスない!という方も安心してお読みください。

例では、DIYのブログのヘッダーを作成してみます。

サンプルを選ぶ

Canva のスマホアプリを使用します。

Facebookカバー」のサンプルからデザインを探してみましょう。

「Facebookカバー」は横長のサンプルなのでヘッダーの作成にはぴったりです。

このようにいろいろなタイプのデザインのサンプルがあるのがありがたいですね。

サンプル選びのポイントは、気に入ったアウトラインのものを選ぶことです。

配色や写真はあとから変更できるからです。

というわけで選んだのがこちら。

DIYとは全く関係ないですが、構造が気に入ったのでこちらにしました。

写真、フォント、大きさを変更する

まず、写真があるサンプルならば自分のテーマに合ったものに変更します。

写真が決まったら次は文字を入れ、カスタマイズしていきましょう。

文字は、大きさやフォント、色によって雰囲気が大きく変わるので、いろいろ試しながらびびっとくるものをさがしていきます。

配色を決める

最後に配色です。

雰囲気を一番左右すると言っても過言ではないですね。

今回の例では、当ブログのテーマカラーで作成してみました。

雰囲気がガラッと変わりましたね。

この記事を参考に素敵な配色を見つけてみてください。

カラーコードはメモしておく

そして最後に、ここで決めたカラーは、サイトの色彩にも使用しましょう。

上の画像のように、色にはカラーコードと呼ばれるコードがついています。

※当ブログのカラーコードは69B6B2と6991B6です。

これを覚えておくと、サイトのメインカラーもそろえることができます。

ご要望をいただいたので、cocoonの場合のサイトメインカラーの替え方も追記しておきます。

サイトのメインカラーの替え方(cocoonの場合)

テーマをcocoonを使用している方は、cocoonの設定からサイトのいろいろな色を変更することができます。

cocoon設定ヘッダー

から、このようにいろいろなカラーを変更する画面がでてきます。

サイト全体のポイントとなるカラーを変更することができます。

サイトキーカラーは、見出しの色などになります。

ブログのイメージカラーがあるほうが見た目も美しく、覚えてもらいやすくもなるのではないでしょうか。

ナビやメインなどの色もそろえることができ、整ったサイトにすることができるのです。

サイトのメインカラーにするカラーコードをメモしておくと、サイトのカラーや挿入するイラストのカラーを決めるときに便利ですね。

まとめ

いかがでしたか。

意外と簡単に美しい配色にできるとおわかりいただけたのではないでしょうか。

簡単なのに、配色にこだわるだけで一気に統一感のあるおしゃれな雰囲気になりますよね。

ぜひぜひ、 配色にこだわってCanva でデザイン作成を試してみてください!

コメント

  1. […] 統一感のあるデザインの配色|ブログやTwitterの画像の配色こんにちは、学生ママのわるつです。実は最近、Twitterのアイコン、ヘッダー、ブログのデザインを見直しました。軽い気持ち […]

  2. […] 統一感のあるデザインの配色|ブログやTwitterの画像の配色今回はブログに関する記事です!実は最近、Twitterのアイコン、ヘッダー、ブログのデザインを見直しました。軽い気持ちで始 […]

タイトルとURLをコピーしました