【おしゃれブログへの第一歩!】見やすい配色が簡単に作れるツールと使い方

困っている人のアイコン画像困っている人

ワードプレスでブログを作ったんだけど、なんかオシャレじゃないんだよなぁ・・・。

もうちょっと見た目にまとまりが欲しいんだけど、どうしたらいいかな?

Mochiのアイコン画像Mochi

ちょっとしたコツを知るだけで、WEBサイトのイメージをガラッと変えることが出来るよ!

この記事では、テーマカラーを決めるべき理由見やすい配色を使うのに便利な無料ツールを紹介するよ!

この記事はこんな人におすすめ!

  • ブログ初心者の人
  • ワードプレスで作ったブログをオシャレにしたいと思っている人
  • ブログに統一感を出したいけど、その方法が分からない人
目次

おしゃれで統一感のあるブログ作成には、テーマカラーが必須

おしゃれで統一感のあるブログ作成には、テーマカラーが必須です。

色を統一することでブログに一体感が生まれ、ブランディングにも繋がります。

大手企業のテーマカラーを見てみよう!

大手企業の名前を聞いたら、頭に「色」が思い浮かびませんか?

大手企業のロゴ
大手企業のロゴ

マクドナルドと聞けば、「赤地に黄色のM」が思い浮かぶでしょうし、ローソンと聞けば「青」もしくは「水色」が思い浮かびますよね。

ブロガーさんならご存じのデザインツール「Canva」も、「ブランディングに役立つ、色が表す意味や象徴」について以下のように示しています。

ブランドのロゴやビジュアル・アイデンティティには、様々な視覚的要素が含まれています。そうした視覚的要素には、形、シンボル、数字、言葉などがありますが、最も人の記憶に残りやすいのは、それが何色だったかということでしょう。実際のところ、何色を用いるかということで企業の認知度は最大80%も高まるとされています。

引用:https://www.canva.com/ja_jp/learn/color-meanings-symbolism/

つまりブログにもテーマカラーを決めることで統一感を出すことができ、サイトに訪問してくださった方に

 のアイコン画像 

この色とこの雰囲気ってことは、○○ブログだ!

と認知してもらうことが出来ます。

おしゃれで統一感のあるブログ作成のために、テーマカラーを決めましょう。

見やすい配色のブログ作成に必要なツールと使い方

それではさっそく、ブログのテーマカラーを決めていきたいと思います。

ブログのテーマカラーを決める手順

  1. ブログ訪問者さんに与えたいイメージを考える
  2. テーマカラーにしたい色を1色決める
  3. 決めた色に合う色を1~2色選んで、合計2色もしくは3色のテーマカラーを決定する

具体的に紹介します。

ブログのテーマカラーを決める手順①ブログ訪問者さんに与えたいイメージを考える

まずは、ブログ訪問者さんに与えたいイメージを決めましょう。

そのイメージによって使うべき色が変わってくるからです。

あなたのブログのイメージは?

パワフルで元気なイメージ・・・赤

若くエネルギッシュなイメージ・・・オレンジ

楽観的で楽しいイメージ・・・黄色

落ち着いているイメージ・・・青色

シンプルで誠実なイメージ・・・茶色

詳しくは「Canva – ブランディングに役立つ、色が表す意味や象徴」はこちらから

Mochiのアイコン画像Mochi

わたしは男女どちらの訪問者さんにも落ち着いた雰囲気を楽しんでもらえるような色をテーマカラーにしました!

自分のブログのイメージや、どんな人がターゲットなのかを明確にすることが重要です。

ブログのテーマカラーを決める手順②テーマカラーにしたい色を1色決める

色には組み合わせのルールがあり、初心者が感覚で決めるのはおすすめできません。

まずはテーマカラーを1色決めて、その色に合う色を合わせましょう。

もしあなたが「青」をテーマカラーにするとしたら・・・

  1. Googleやピンタレストで「WEBデザイン 青」と検索してみる。
  2. 青をモチーフにしているサイトをたくさん見てみる。
  3. どんな色味の青(濃い青なのか、水色っぽい青なのか)を決める。

そして、もし好きな色を見つけたらそのカラーコードを調べます。

カラーコードとは?

カラーコードとは、WEB上で色を表現するのに使われる制御コードのことです。

WEBページ上の色は全てシャープ記号に続く6桁のコードで表されます。

例:このライナーの色は#a8def0という色です。

カラーコードを調べるのに便利なのが、「Syncer」のイメージカラーピッカーです。

WEB上で見つけた「色」のカラーコードを簡単に調べることが出来ます。

STEP
好きな色を見つける

まずは好きな色を1色見つけましょう。

画像引用:https://www.canva.com/

赤色の丸で囲った部分の青色を使いたいと仮定します。

STEP
スクリーンショットで色を画像として保存する

赤色の丸で囲った部分のカラーコードをを調べるのに、まずはスクリーンショットと撮って画像として保存します。

パソコンで部分スクリーンショットを撮る方法

Windows : Windows + Shift + S

(参照:Windows 10 スクリーンショットを撮る4つの方法

Apple : Command + Shift + 5

(参照:Macでスクリーンショットを撮影する/画面を収録する

STEP
「Syncer」のイメージカラーピッカーでコードを調べる

先ほど保存した画像を「Syncer」のカラーピッカーにアップロードして、カラーコードを調べます。

イメージカラーピッカーのファイル選択
イメージカラーピッカーのファイル選択
イメージカラーピッカーのファイル選択
イメージカラーピッカーのファイル選択

ここの「画像の色一覧」に出てきた6桁のコード「#b8d4dc」が、テーマカラーのカラーコードとなります。

※イメージカラーピッカーでは「画像の色一覧」に多少違う色味のカラーコードがいくつか出てきますので、いちばん理想に近い色のコードを記録しておいてください。

ブログのテーマカラーを決める手順③さらに2~3色のテーマカラーを決める

それでは先ほど選んだ色を基に、残りの1~2色を決めていきます。

ここで役に立つのが無料ツール「配色の見本帳」です。

STEP
「配色の見本帳」で自分のテーマカラーを探す

さきほどイメージカラーピッカーで抽出したカラーコードを使って、自分のテーマカラーとなる色を探します。

 配色の見本帳
画像引用:https://ironodata.info/

右上にある色検索をクリックします。

STEP
カラーコード入力して、色の情報を探す

先ほどイメージカラーピッカーで抽出したカラーコードを入力して、色の情報を探します。

配色の見本帳の使い方
配色の見本帳の使い方

カラーコードを「Step1」に入力し、「Step2」を押すと色の情報が表示されます。

STEP
配色を見て追加のテーマカラーを探す
色検索の結果
色検索の結果

下にスクロールしていくと、この色に合った配色を教えてくれるのでここから1~2色好きな色を選んでください。

「#b8d4dc」に合う配色
「#b8d4dc」に合う配色

例えば以下の3色をテーマカラーにするのであれば、以下のカラーコードをメモしておいてください。

テーマカラーの決定
テーマカラーの決定

ここまでで2~3色のテーマカラーが決まったかと思います。

お疲れさまでした。

テーマカラーのカラーコードはどこで使うの?

ブロガーさんの多くは「Canva」でデザインをしているのではないでしょうか。

「Canva」ですと以下の手順で、文字や図を好きな色に変更できます。

Canvaで文字や図を好きな色に変える方法
Canvaで文字や図を好きな色に変える方法
  1. 文字や図の範囲を選択して、色を変更するボタンを押す。
  2. 虹色のボタンを押す。
  3. カラーコードを入力する。

「Photoshop」などの他のデザインツールでも同様にカラーコードを入力することで、好きな色に変更することが可能です。

これらの色をランディングページのデザイン時に使用したり、アイキャッチに使用することでブログに統一感を出すことが出来ます。

おしゃれなブログ作成のために読んでおきたいおすすめの本

私もブログ作成時におしゃれなブログを作りたいと思ったものの、その方法が全く分かりませんでした。

その時に読んだ本の中から、おすすめを2冊紹介します。

見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色

おしゃれな「配色」について学ぶなら、この本がおすすめです。

私も実際に読んで自分のブログに反映させました。

この本のおすすめポイント

  • デザイン初心者にもとにかく分かりやすい、配色の教科書。
  • 見本が豊富に用意されているので、イメージが湧きやすい。
  • 色選びだけでなく、配色の割合についても学ぶことが出来る。

他にも配色についての本を数冊読みましたが、写真やイラスト例が豊富に使われているこの本が一番分かりやすかったです。

また、そのままコピーするだけでおしゃれな配色が出来上がる3色の組み合わせがたくさん用意されているので

困っている人のアイコン画像困っている人

いやセンスないし、自分でテーマカラーとか決められない・・・。

という人はこの本にある配色&カラーコードをそのままコピーすれば、おしゃれブログに近づくこと間違いなし。

けっきょく、よはく

これはWEBデザイナーの仕事をするお友達に勧めてもらって読んだ本です。

ブログのランディングページや、記事の構成にも役立つ一冊です。

この本のおすすめポイント

  • シンプルなデザインをおしゃれに見せる余白の取り方を学べる。
  • ユーザーさんが見やすいデザインの作り方が分かる。
  • 新米デザイナーさんとベテランデザイナーさんが掛け合うような構成で、かなり読みやすい。

ブログを書く上で基礎的なデザイン知識を得ておくことはすごく大切です。

Mochiのアイコン画像Mochi

一度これらの本を読んでおけば、おしゃれブログ作成に役立つヒントがたくさん見つかります!

ぜひブログに素敵な配色を施して、訪問者さんがまた戻ってきたくなるようなサイトを作ってください!

この記事が気に入ったら
フォローしてね!

よかったらSNSでシェアしてみてね!
目次
閉じる