このサイトは記事内に広告を含む場合があります。広告や表現について

初心者におすすめのブログ配色【カラーコードあり】

こんにちはあるです!

今日はブログの配色について書いていきます!
ベースカラーはどうしよう?
好きな色があるけど合わせるとなんだかイマイチ、、、なんてことはないですか?

そんな時に配色を真似するだけで綺麗なデザインにができるといいですよね!

フォントなどでもイメージは変わりますがまずは色から始めてみましょう!

今回はカラーコードも記載しているのでどなたでも簡単に真似することができますよ!
カテゴリなどはデフォルトの書体で進めていきますのでよりイメージしやすいと思います。

この記事にあるデザインはあくまで一例なので参考程度にみていただければと思います!

ではでは早速始めましょう!

目次

ベースカラーの決め方ってどうやるの?

まず大前提にベースカラーの決め方を考えていきましょう!

色には1色1色イメージというものがあります。例えば,

「緑=安心」 「青=冷静・爽やか」 「赤=情熱」 「黄=楽しい」 「黒=カッコいい」

色によってイメージがあります。

また緑一つでも明度・彩度が変わるとまたイメージが変わってくるので
このイメージを元に自分のブログに合った色味を見つけていきましょう!
今回は色味だけで表しているので写真などは使ってないですが、写真を使いたい!って方は写真の色味も一緒に考えながら作って見るときっとあなたの色が見つかりますよ!

また配色でもイメージがかわりますのでこれから紹介する色味の配色を変えるだけで何十通りも
できちゃいます!

今回は配色パターンをいくつか紹介しますので参考にしてみてくださいね!

【可愛いブログにしたい】

パステルカラーを使い柔らかいイメージ


パステルは相手に柔らかい印象を与えてくれる色味です。
使う時の注意点としては濃い色の割合を少なくして彩度を一定に保って使えば統一感のあるデザインになりなす。

可愛いけど少し落ちついた雰囲気にしたい方はパステルカラーを使いすっきりまとめてあげると
このように綺麗でスッキリした印象になりますよ!

ビタミンカラーで元気なイメージ


ビタミンカラーは目が醒めるような配色です。オレンジは元気なイメージがあるのでふんだんに使ってみましょう!合わせる色味は同じくらいの彩度を組み合わせてあげるとさらに賑やかなイメージになりますよ。

健康で元気な色味になるので明るいブログにしたい!って方はおすすめです!

ビビットカラーを使った派手なイメージ


ビビットカラーは賑やかで派手なイメージになります。
思い切って背景に色をひいて相性のいい色味で文字を乗せてあげれば目に止まる印象の強いデザインになります。ただやりすぎると目が痛くなってしまうので背景も一部分だけ色を引いてあげて残りは色味は派手だけどシンプルくらいがちょうどいいです。

ビビットカラーを使った配色です。派手派手がいい!という方や、
印象あるブログにしたい!って方におすすめですよ!

かっこいい系

シンプルなブラック&グレー


白・黒・グレーのみでつくるので色味の配分が難しい色味です。
配分を間違ってしまうと「デザイン」していると認識されないので配分に気をつけてデザインしてみましょう!ポイントは重すぎず軽すぎずグレーと黒を入れていきましょう!

シンプルの王道です。使用する色も2色というミニマムなデザインになっています!
自分の好きな色を差し色としてどこかに入れてあげるとグッとデザイン性もあがりますよ!

高級な大人系


ゴールドに近い黄色をメインに使用し、高級感溢れるデザインになる配色です。
ポイントは黒でデザイン全体をグッとしめてあげることです。そうしないとぼやっとした印象になるので濃い色はどこかで使うようにしましょう!


高級なイメージや、スッキリさせたいブログにしたい時はおすすめです!

爽やかだけどかっこいいイメージ


青を使い爽やかさを出しています。
配色を間違うと元気なイメージに寄ってしまうため配色はシンプルに。
ポイントは白と青の割合です!

青を使うことで一気に爽やかさが追加されます!

ナチュラル系

オーガニックなイメージ


深い緑をベースにオーガニックなイメージな配色です。
緑の濃淡でデザインしているのでまとまりがあり、落ち着いたイメージになります。

アースカラー


アースカラーを使って落ち着いた雰囲気のデザインです。
黄土色の面積を多くすることで一気にイメージがかわるのでチャレンジしてみてください!

おまけ

写真と入れるとこんなにもデザインが変わります!色味は全て右の写真からとっているので
全体も統一感が出ていいですね!
まだまだ伝えたいですがこの辺はまた近いうちに記事にしますので楽しみにしていただけたらと。。。

色味でお悩みの方や質問はツイッターでできる限り答えていきますので
気軽にフォローしてくださいね!

ではではみなさんも色味を整えてさらに素敵なブログにしていきましょう!
そのほかにもブログで使えるデザインブログがあるのでお時間のある時に読んでいただければと思います!

この記事はARU氏の運営していた「ARULOG」より2021年8月に移管された記事です。

この記事を書いた人
ARU

ARU

デザイナー歴11年
ブロガーに寄り添うプロデザイナー
Kindleでブロガーデザイン本発売中
フォロワーが伸びるヘッダーをココナラで販売中
twitterでデザインのヒントを発信 @awdesign6


どんぐり所長のおすすめツール

どこでも、どんなデバイスでも順位チェック

ブログ記事の順位を確認していますか?どんなキーワードが上下しているのか知る事はブロガーでは必須と言えます。

ほとんどの方がダウンロード型の順位チェックツールを使用されていますが、私はコレ。「Nobilista」。クラウド型のチェックツールです。

クラウド型とは、ネット上にあるサーバーにデータが保存されている順位チェックツールです。従って、お家のパソコン以外でも情報にアクセスできちゃうんです。これが想像以上に快適で、一度体験すると戻れなくなっちゃう。詳しい記事を書いていますので是非読んでみてください。

Nobilistaの詳しい記事はこちら >

実は私、Nobilistaの公式アンバサダーをさせて頂いています。使いだしたら超気に入ってしまって、気づいたらアンバサダーになっていました。そんな私が、おすすめする「Nobilista」。今なら7日間無料でお試しができます。クレジットカードなどの情報を入れなくても試せるので、ぜひあなたにも試してほしい。

\場所を選ばない快適さを体験して/

Nobilista公式サイト

当サイト推奨 デザインツール

当サイトでは、ブログ初心者でも簡単・無料で美麗なデザインが作成できる、オンライン画像作成フォーム「Canva」を推奨しています。数万点の素材やフォントが用意されていて、選ぶだけで簡単にプロ並みのデザインを作成する事ができます。これから先、会社員の仕事でも使用する事になるかもしれないほど普及が広まっています。覚えるなら早い方がいいですよ!

当サイトのデザインは、SWELLで再現可能

私はSWELLを2年使用してきました。現在4つのサイトでSWELLを使用しています。
SWELLを使用する理由は、簡単・綺麗・速い
実際このトップページも、SWELLの標準機能だけでデザイン。
お洒落なブログを作りたいあなたにピッタリのWordPressテーマです。
私が実際に使用して実感したSWELLの特徴は以下。

  • 完全ブロックエディタ対応
  • 直感で使える操作性
  • 便利な専用ブロックを多数用意
  • お洒落なトップページが簡単に作れる
  • 最速レベルのページスピード
  • 一度購入すれば複数サイトに何度でも使用可能
  • ユーザーの利便性を考える熱意の運営者
  • SWELLを紹介すればアフィリエイト報酬が貰える(購入者のみ参加可)
  • 販売価格 ¥17,600(税込)

唯一の欠点は価格の高さ。しかしそれは、SWELLがハイクオリティだから。
そして、運営者がとびきりの対応をしてくれる必要経費。

私が実際にSWELLを使用して感じた、本音レビューはこちら

SWELLにはアフィリエイトプログラムがあり、紹介すれば利益を得ることもできます。
よく、「アフィリエイトがあるから紹介しているんでしょ。」と言われますがこれは違います。
惚れ込んだWordPressテーマに、たまたまアフィリエイトがあっただけ。
あなたもSWELLを体験すれば、きっと紹介したくなります。

\圧倒的な操作性を体験せよ/

あなたも今日からSWELLER!

トップページへ戻る

お気軽にコメントください

コメントする

このサイトは reCAPTCHA によって保護されており、Google のプライバシーポリシー利用規約が適用されます。

reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

目次