ブログをやってるとサイトの配色を改善したくなることはありませんか？

企業のコーポレートサイトを見たり、他の人のブログを見てるとカッコいいサイトに出会うことありますよね。
それで自分のサイトも手を加えようと思うけど、下記のような問題にぶつかることがあると思います。

 

• どうやって決めたらいいかわからない…
• 参考にしたい色をどうやって調べたらいいかわからない…
• 色の組合せがいまいち決められない…

 

いかがでしょうか？
自分の場合、一回修正作業に入ったら、行ったり来たりで時間だけが過ぎてしまうこともありました。

なので、そんなあなたの悩みを解決するために今回は無料で使える配色ツールサービス「Adobe Color」と色の取得に使えるフリーソフト「Just Color Picker」を紹介します。

 

配色の悩みを一発で解決してくれる「Adobe Color」

一文で説明するなら「Adobeが提供する、無料で使える超役に立つ配色ツールサービス」です。

「Adobe Color」
https://color.adobe.com/ja/create/color-wheel/

ポイントは下記の通り。

• ブラウザで利用できる
• 無料で使うことができる
• 無数のカラーパターンから選べる

使い方も単純明快。

 

カラーホイールで配色をオススメ

メインカラーのカラーコードを中央に記入。
あとはカラーハーモニールールを選択すれば、色彩理論に基づいたカラーパレットを作成してくれます。
パレットが決まれば、カラーコードをコピーするだけ。

これが何より、直感的。

このパレットに沿った色を使えば、バランス感の取れた配色でサイトを構築することができます。
自分は「補色」「シェード」をよく利用します。

 

画像から色を抽出

画像のドラッグアンドドロップからカラーの抽出をしてくれる機能もあります。

参考にしたい画像がある際に活用できます。

 

色を探す段階なら「探索」機能を活用

ヘッダー部分にある「探索」を活用すれば、イメージを広げることも可能。
キーワードで検索もできるし、画像をアップロードすることもできます。

無数にあるデザインから選ぶことができるので、デザインをどうしていいのかわからない人は参考にしてみるのがオススメ。

右側にある［すべてのソース］を変更すれば、［カラーパレット］［クリエイティブ作品］［Stock Photos］から選択すればカラーパレットや画像の一覧で表示することもできます。

 

補足：Adobeアカウントを持っていれば、ライブラリに保存することも

Adobeアカウントを持っている人はパレットを保存・活用もできる。

カラーパレットが決まったら、右側の保存をクリックするだけ。
それだけで保存したパレットから色を選択できるようになります。

こういうちょっとした工夫が作業効率を上げるポイントに。

画面上の色を取得できる「Just Color Picker」

色を参考にするという意味では、他サイトや画像をみてピンポイントで「この色を使いたい！」と思うこともあると思います。
そんな時に活用できるのは「Just Color Picker」。

一文で説明するなら「画面上の色を簡単に取得できる無料のカラーピッカーソフト」。

「Just Color Picker」
ダウンロード
Just Color Picker

ポイントは下記の通り。

• すぐに立ち上がる
• 直感的操作で画面上の色を教えてくれる
• カラーコードの履歴が残るのが良い

調べてみると、毎日カラーピッカーを使うデザイナー目線で作られているとのことですが、納得の使いやすさです。

 

とにかく使い勝手が良い

使い方はいたってシンプル。
カラーコードを知りたい箇所にマウスを動かして「Alt ＋ X」を押すだけ。

 

抽出したカラーコードは異なるカラーコード形式に変換ができる

 

 

履歴が残るから繰り返し作業が減り、作業が捗る

 

配色を自動生成してくれる

 

 

色を変えるだけで、改修よりも簡単にサイトの印象を変えれる

サイトの改修は大変ですが、色を変えるだけでも印象は大きく変わります。

しかもこんなに便利なものがフリーなのがありがたいですね。

是非、これらのツールを使い倒して、サイトの魅力を向上してみてください。