Engineering

Nov 15, 2017

サイトやfaviconを作成するときに使える配色自動生成ツール coolors.co

 

こんばんは!

突然ですが、webサイトなどデザインを行うときに 配色についてなかなかアイディアが出て来ず手が止まってしまう はたまた、 どのような配色にすれば良いかわからない というような悩みありませんでしょうか。

私は、 ついこないだブログ開設当初から放置していた faviconを作成しているときにこの問題にぶち当たりました。

※faviconとは、下の画像のようなタイトルの横にある画像の ことです。 Screen-Shot-2017-11-14-at-23.52.18.png

 

 

「サイトの配色にあったfaviconが欲しいけど、 自己流でやったら絶対ガチャガチャの色遣いになる・・・」

 

そういう悩みを解決してくれるサイトが あり、これを使ったらそれなりのfaviconができたので、 以下でサイトを紹介していきます。

 

 

 

配色自動生成サイト Coolers.co

 

coolers.coというサイトを使うと 良い感じの色を自動で生成してくれるので、 その配色をそのまま使って 自身の作品の配色を決めることができてしまいます!!

ガチャガチャな色づかいを防ぐには、 配色の理論だったりを知らないといけないので、 これはかなり助かります。

さらに、 メールアドレスで登録を行ってしまえば、 一度決めた配色を保存して取っておくことができます。 使いかたはチュートリアルも ついてあったりと 簡単でシンプルなツールになっています。

シンプルで簡単とは言いましたが、 サイトが英語で抵抗感がある方もいらっしゃるかと思うので、 後で解説していきます。

 

 

 

Coolers.coの使い方

 

 

まず、 トップページはこのような形になります。

Screen-Shot-2017-11-15-at-0.04.49-e1510673350509.png

配色を保存して置きたいなどの要望があれば、 アカウントを作成して置きましょう。 今回は使い方の説明になるので、 登録方法は割愛します。

 

 

まず最初に色を自動生成するページには、 メニューのGenerateというリンクをクリックします。

色の自動生成を行う画面は以下のようになっています。

 

coolors-explanation-1024x926.png

 

 

画像にはつらつらと説明を書きましたが、 メニュー真ん中あたりの「?」のアイコンをクリックをして チュートリアルを行うのが、 使い方を知る上では一番良いと思います。

画像には書きませんでしたが、 一番基本的な部分は スペースボタンで、新たな配色を生成するということです。 表示された配色が気に入らなければ、 スペースボタンを押してガンガン切り替えましょう。

また、 もし自分で使いたい色が決まっているのであれば、 それらを入力して、ロックをかけてしまいましょう。

ロックをかけてしまえば、 次にスペースボタンを押した時でもそこの色は シャッフルされず、それに合わせた色が表示されます。

そして、 何度かシャッフルを繰り返したり、 微調整を行ったらあとは、 それを画像に吐き出したり、保存しておくとことができます。

画像のエクスポートは、 メニュー右上からできます。

また、 それより右にあるアイコンを押せば、 配色を保存したり、 保存した配色を確認することができます。

以上、 一応解説はしましたが、 チュートリアルを行うと一通りの使い方は、 動きを見ながらなれることができるので、 それが一番良いと思います。

説明はここまでで、 ぜひみなさん、配色に困った場合はcoolers.coを お使いになると良いと思います。

では!

関連記事

記事検索

気になるサイト内の記事を検索する

プロフィール

バンクーバー在住のフルスタックエンジニアです。React, Ruby on Rails, Go などでお仕事しています。職場がトロントなので日本、トロント、バンクーバーの三つの時天空を操って生活しています。

プロモーション