Amazonタイムセールはこちら
ブログ運用

プロ並みのおしゃれな配色ができるサイト6選 カラーコードの使い方

プロ並みのおしゃれな配色ができるサイト6選 カラーコードの使い方

ブログをカスタマイズするときや、アイキャッチをデザインするとき、どんな配色にしようか迷いますよね⋯。

ねずみん
ねずみん
私デザインなんてド素人だし、色の組み合わせが分からない。センスがあったらなぁー
ねずきち
ねずきち
ド素人でも、センスが皆無でも大丈夫!配色に役立つサイトはたくさんあるよ!

今回は配色に悩むあなたに、簡単におしゃれな配色が出来るサイト6つ紹介しながら、カラーコードの使い方デザインについても少し触れていきます。

ご紹介するサイトは実際に私も活用していて、とても役立っているサイトなので、ぜひ参考にしてみてほしいです!

カラーコードを一覧できる「原色大辞典」

カラーコード一覧「原色大辞典」

この世のあらゆるの色には、カラーコードというものがあります。カラーコードとはWeb上において色を表すコードのことです。

例えばカラーコードはブログの文字を変えるときに役立ちます。

赤色でしたらコードは#ff0000

なので、下記の黄色部分に#ff0000を入れます。

フォントの色を指定するHTMLコード▼

<Font Color=”#ff0000“>色を変えたい文字</Font>

すると下記のように文字色が赤色になります。

色を変えたい文字

原色大辞典は、色の名前とカラーコードが一目で分かるサイトです!

和色、洋色、パステルカラー、ビビットカラーなどジャンルに分けて表示することが出来ます。

ねずろぐのキャラクターのねずみたちも、ここからカラーコードを探して作成しました。

ねずみん
ねずみん
私の主要カラーは#f4b2bcだよ!
ねずきち
ねずきち
僕の主要カラーは#87c5edだよ!

見ているだけでも楽しいし、勉強になりますよ♪

 

Color Huntのカラーパレット!カラーコードの組み合わせが抜群

カラーパレットのColor Hunt

Color Huntは、相性の良い色を4つ組み合わせたパレットが一覧になっていて、色をクリックすると、カラーコードを確認することができます。

アイキャッチ画像の配色に悩んだとき、私が一番使用しているサイトです!

例えば、Color Huntのこちらのパレットの配色を使います。

ColorHuntアイキャッチに使用した配色

作成したのが、下記のアイキャッチ画像です。

TwitterカードをWordpressで超簡単に設定する方法

Twitterのイメージだったので水色をベースに、柔らかい印象で作成したかったので、パステルカラーを選びました。

使う色が決まっていると、アイキャッチ作成もスムーズに進みます。

Color Huntがあれば、配色にセンスは必要ありません!

 

iromiruでカラーコードを抽出

iromiruは、あの画像の中の色が知りたい!という時に、カラーコードを抽出することができます。

やり方は簡単!画像ファイルをドラッグ&ドロップするだけです。

知りたい色の部分をクリックすることで、カラーコードが抽出されます。

iromiruでカラーコードを抽出

抽出したカラーコードはIllustratorやCanvaのカラーコードを入力する場面で活用できます!下記画像はCanvaです▼

Canvaでカラーコードを入力する方法
あわせて読みたい
【PC版】Canvaの使い方 アイキャッチをプロっぽくデザイン!
【PC版】Canvaの使い方 アイキャッチをプロっぽくデザイン!デザイン作成ツールの「Canva」 無料で使用できる手軽さから、ブログのアイキャッチや、YouTubeのサムネなどに使用している方...

ココナラでブログのキャラクター作成を依頼し、完成したキャラクターからiromiruでカラーコードを抽出することで、ブログの主要カラーを決めることもできます。


 

Photoshopにはスポイトツールがあるので、簡単に同じ色を使うことができますが、IllustratorやCanvaにはカラーを抽出する機能がないので、かなり重宝するツールです。

「この色を知りたい」という時は、ぜひiromiruを活用してみて下さい!

 

PALETTABLEは好きな色で5色のパレットが完成

5色のパレットが簡単に完成「PALETTABLE」

PALETTABLEは好き(Like)か嫌い(Dislike)を選ぶだけで、簡単に5色のパレットが完成します。

「なんとなく」の感覚だけで、おしゃれなプロ並みの配色ができちゃう優れたサイトです。

配色が完成したら、そのまま保存することが可能。

どのカラーコードを使ったか覚えておきたいときにも便利です!

ColorHuntと同じように、アイキャッチ画像の配色決めにも活用できますよ♪

 

FLAT UI COLORS 2ならフラットデザインにピッタリのカラーが見つかる

フラットデザインとは、平面的なデザインのことです。立体感や奥行きがなく平らで、スッキリとシンプルな印象を与えます。

FLAT UI COLORS 2はフラットデザインに向いている

FLAT UI COLORS 2は、フラットデザインにピッタリな色が見つかります!

平面的なシンプルなアイコンにも合うので、FLAT ICON DESIGN のアイコンと一緒に使うと相性抜群です▼

あわせて読みたい
無料・商用利用OK・登録なし!フリーイラスト素材のサイト厳選紹介
無料・商用利用OK・登録なし!フリーイラスト素材のサイト厳選紹介ブログのアイキャッチ画像や、記事の合間にちょっとしたイラストを入れたい場合に、イラスト探しって結構大変ですよね。 素材サイトも、素...

フラットデザインには明るすぎず、暗すぎない中間色が向いています。同じ色相のカラー(同系色)を使うことも多いです。

FLAT UI COLORS 2を使えば、フラットデザインに向いている色を簡単に探せるので便利です!

 

COLOR TOOLはGoogleが提唱するマテリアルデザイン向き

マテリアルデザインとは、現実世界の物理的なルールをもとに作られたデザインです。重なりや、奥行き、影が表現されます。

Google社が提唱したデザインシステムの一種でもあります。

COLOR TOOLはマテリアルデザイン向き

COLOR TOOLはカラーパレットから好きな色を選ぶと、それよりも明るい色、暗い色を出してくれます。

ページのレイアウトが6種類あり、画面左上部のマーク「<>」でレイアウトパターンを確認してみることができます。

様々なパターンの配色例が見れるので、ブログがどのようになるのかイメージできて、ブロガーには有難いツールです。

 

簡単におしゃれな配色が出来るサイト6つ紹介してきました。

どれもデザインに役に立つサイトばかりです。ぜひフル活用して下さい♪

ねずみん
ねずみん
この記事はブックマーク必須だよ~!

私が現在報酬を得ている登録必須のASP紹介🔽

あわせて読みたい
【登録必須】ASPまとめ!アフィリエイトで稼ぎたい人におすすめ
【登録必須】ASPまとめ!アフィリエイトで稼ぎたい人におすすめ自分のメディア(サイトやブログ)を持っている方がアフィリエイトを始めるには、ASPに登録する必要があります。 ASPとは成果報...
アイキャッチにお困りの方はこちらの記事も参考にしてみて下さい♪

あわせて読みたい
アイキャッチ画像のテンプレート化はやめた方が良い!統一感は不要
アイキャッチ画像のテンプレート化はやめた方が良い!統一感は不要初心者ブロガーの悩み。 私も、初めの頃は悩んでいました。 しかしある日、その悩みを解決した出来事がありました。 ...

おしゃれな配色の画像を作ったら、ウィジェットに追加してみよう!

あわせて読みたい
【ワードプレス】ウィジェットに自作した画像リンクを配置する方法
【ワードプレス】ウィジェットに自作した画像リンクを配置する方法ワードプレスにある「ウィジェット」 聞き慣れない言葉なので、初めは何のことか分からないですよね。 ウィジェットは、コンテンツ...
ブログで稼ぎたい人向けの書籍