大人可愛いブログやサイトにぴったりのカラーパレットまとめ

color palette

サイトのデザインを決めるときに、悩むのがカラー(色)選びですよね。

今回は「大人可愛い」サイトを作るためのにぴったりなカラーパレットをいくつかご紹介します。

もちろん、ナチュラル系シンプル系のサイトを作りたい人にもおすすめ!
ぜひ参考にしてみてくださいね。

大人可愛いサイトを作る前に

まずは、「どんなサイトにしたいか」のイメージを固めていきましょう。

ペンペン

イメージと言われてもすぐ思い浮かばない💦

日ごろから気になるサイトをチェックしておくといいですね!

モカ

サイトのイメージを決める

他のサイトを参考にすると、色選びや画像の使い方などの参考になります。

私がよくチェックするのがPinterest(ピンタレスト)

ロゴ画像などの参考にもなるので、おすすめです。

お気に入りの画像を集めたボード(コレクションのこと)を作っておくことができるので、必要なときにすぐ見れて便利✨

他にも、A8.netなどのASPに登録すれば、他のアフィリエイトサイトを見ることができます。

「A8キャンパス」「エーハチレビュー部」などのコーナーで、自分が扱ってみたいジャンルのサイトを研究してみるのもいいですね。

他のサイトで使われている色を調べるには?

素敵なサイトを見つけると、「この色のカラーコードが知りたい」と思うことがよくあります。

カラーコードを使いこなそう!

Webのカラーは、先頭に「#」を付けたカラーコードで指定します。

このあとご紹介するカラーパレットツールで、気に入った色の組み合わせが見つかったら、そのカラーコードをコピーして控えておきましょう。

方法1 Chrome拡張機能を使う

他のサイトで使われている色を調べる方法でいちばん簡単なのは、Chrome拡張機能【ColorPick Eyedropper】を使う方法です。

ColorPick Eyedropper

Chromeに追加するとツールバーにカラフルなアイコンが表示されます。

ColorPick Eyedropper

まずはこのアイコンをクリックして、カラーコードを調べたいロゴなどの上でもう一度クリックします。

ColorPick-Eyedropper

すると、こんな風にカラーコードが表示されますので、コピーして使うだけです。

方法2 画像から色を取得する

他の方法としては、色を調べたい部分を切り取るなどして画像として保存し、そこから色を抽出する方法です。

海外のサイトなどでも便利なものが見つかりますが、今回はpeko stepというサイトのツールを使わせていただきました。

peko-step

画像ファイルを選択したあと、カラーコードを知りたい色の上にマウスを持っていくと、下にカラーコードを表示してくれます。

サイトに使う色を見つけよう

サイトを作る時は、使う色を3~4つ決めておくと統一感が出ます。

慣れないうちは、背景は白をベースにして、ポイントに色を使うと失敗がありません。逆に、色を使いすぎると落ち着かない印象のサイトになってしまいますので注意しましょう。

サイトの色を選ぶときに便利なサイトやツール(カラーパレット)はたくさんあって、どれを使うか迷うほど!

使い方が簡単で、かわいい色味の組み合わせがそろったものを厳選してご紹介しますね。

LOLcolors

LOLcolors

涙の形をした4色の組み合わせが並んでいてすごくかわいい🎵
種類は少ないですが、かわいい色の組み合わせが多いので、女性向けのサイトで使いやすいと思います。涙をクリックするとカラーコードが表示されるので、コピーして使いましょう。

LOLcolors

Color Hunt

Color Hunt

4色の組み合わせがコレクションされたサイトです。パレットの種類が多いのですが、新着順や人気順に並べることができるのと、「🖤」を押すとパレットが右上にストックされていく仕組みのおかげで、とても探しやすいです。

パッとみて「メイン」「サブ」「アクセント」の見分けがつくように表示されているのもわかりやすくて〇。

Color Hunt

ColorDrop

ColorDrop

シンプルで見やすいカラーパレットです。しかも、機能がかなり充実! 検索したり、背景色を変更、ソート、フィルタリング、画像からカラーを抽出など、いろいろなことができます。

気に入ったパレットをクリックすると、4色分のカラーコードとrgba値が表示され、カラーコードをクリックするだけでコピーできます。

ColorDrop

ColorHexa

ColorHexa

今までの3つのサイトと違って、色を1つ指定することでさまざまなパターンの配色を提示してくれるサイトです。「補色」「類似色」などが一度にわかるので便利です。
使いたい色が決まっていて、「この色に合う色は何かな」と探すときなどによく使います。

ColorHexa

coolors

coolors

かなりお気に入りの配色ツール✨
スペースキーを押すと、次から次へとランダムでいい感じのカラーパレットを作ってくれるんです。

変えたくない色があれば「ロック」すればその色はパレットに残るので、さらにスペースキーを押せば、その色に合った色がランダムで生成されます。エクスポートやセーブもできますし、ほかのユーザーが作ったパレットを見ることもできるなど機能も充実。

coolors

おわりに

色を決めるときに大切なのは、全体のバランスです。

いくら好きな色でも、相性の悪い色を組み合わせてしまったり、似た色をバラバラに使うと、魅力が半減してしまうことに。

ペンペン

最初はシンプルな配色から始める方がいいかも。

せっかく書いた記事を落ち着いて読んでもらえるような配色を心がけましょう!

モカ