こんにちは、三輪です。
新年あけましておめでとうございます。
本年も、株式会社アウラをよろしくお願い申し上げます。
年末年始は、クリスマスやお正月など、イベントが盛りだくさん。街中のポスターやWebの特集サイトでは、たくさんの色が使われていて、とても華やかですね。
今回は、そんな「色」を考える時に便利なツールをご紹介します。
話題的に、ページ全体が相当カラフルな仕上がりとなっておりますが、新年ということで大目に見てやってくださいませ。
一口に「色」「配色」と言っても、もちろん何でも良いわけではありません。イメージに合った色の選択、配色のバランス、使用する比率etc.を考える必要があります。
表現したい内容と全然合わない色を選んでしまうと、ユーザーにマイナスな印象を与え、せっかくのコンテンツを見てもらえない可能性も出てきます。
この配色のバランスを考えるのが、正直一番難しいと思っています。
これらを考えて全体を整えるデザイナーって、本当に凄いです。あれだけの色の中から、よくこんな絶妙な組み合わせを考えつくものだと、いつも思います。
イチから自分で全てを考えなくても、配色のサンプルやカラーパレットを作成してくれるジェネレータ―が、数多く存在します。
そんな中で、私が一番利用しているのが「Coolors」。
このツール、自動的にバランスの良いカラーの組み合わせを作成してくれるのです。使い方が比較的シンプルなこともポイント高いです。
まずはCoolorsのサイトにアクセスします。
にこやかなお兄さんの写真が出迎えてくれたり、新機能の解説が出てきたりしますが、とりあえず全部閉じてOKです。
Start the generator!をクリックします。
「Hello!」とメッセージが表示されたら、Let’s go!または「×」をクリックして閉じてください。
配色済みの画面が開きました。
配色パレットは、スペースキーを押すたびに変わっていきます。回数制限などはありませんので、心ゆくまで好みの組み合わせを試すことができます。
使いたい色のカラーコードが欲しいという場合、既に画面に表示されているのですが、転記ミスを防ぐためにも、コピーした方が確実です。
好きな色をマウスオーバーすると、アイコンが表示されます。その中のCopy HEXアイコンをクリックすると、カラーコードがコピーされるので、必要な場所にペーストしてください。
既に使いたいカラーコードがある場合は、手動で設定することもできます。
カラーコードをクリックすると、入力欄が表示されるので、使用したいカラーコードを入力するとパレットの色が指定した色に変更されます。
スペースキーを押すとどんどん色が入れ替わっていきますが、「この色に合う色を探したい」という場合もあると思います。
そんな時は、一番下の鍵のアイコンをクリックすると、その色がロックされて、他のパレットの色が入れ替わっていきます。
既に使いたい色が決まっている場合、1つ前にご紹介した方法で色を手動で設定し、その色をロックしておいて合う色を探す、というような使い方が可能です。
色同士の順番を入れ替えてバランスを見たい場合は、矢印アイコンをクリックしてドラッグすると、色同士の配置を変更することができます。
隣り合う色が変わるだけで印象が変わりますので、いろいろ試してみてください。
デフォルトのパレットは5色ですが、追加することもできます。
色同士の境目をマウスオーバーすると＋（Add colors）アイコンが表示されるので、クリックすると現在のパレットの配色に合うカラーが追加されます。最大で10個まで増やすことが可能です。
逆に色数を減らしたい場合は、×（Remove colors）をクリックしてください。
「さっきの配色が良かった！」というように、前後に表示された内容に戻りたい場合は、画面上部のUndoまたはRedoアイコンをクリックしてください。
なお、この操作はキーボードでも行えます。
元に戻す（Undo）場合はCtrl＋Z、やり直し（Redo）はCtrl＋Alt＋Zを押してください。
作成したパレットを、他の人と共有することができます。
配色が完了したら、Exportをクリックしてください。
画像やURLなど、様々な形での共有が可能です。コードも書き出せるので便利ですね。
URLを送れば、パレットのページがそのまま開くので、他の人が引き続き色を変えて試すこともできます。
自分でオリジナルのパレットを作ることはもちろん、他の人が作成した配色パターンを参照することもできます。
画面上部のExplore、または、画面右端のハンバーガーアイコン→Exploreをクリックします。
他の人が保存したパレットが表示されます。たくさんの種類があるので参考になりますし、眺めているだけでも楽しいです。
配色を考える場合、配置する写真や画像から色を取るというのはよくやる手かと思います。
Coolorsでは、写真や画像を参照してパレットを作成する機能があります。
例として、下記の写真からパレットを作ってみたいと思います。
我ながら、季節感ゼロの写真を選んだ自覚はあるのですが、それはさておき。
カメラのアイコン（Create palette from photo）をクリックします。
使用したい画像を、ブラウザ上にドラッグ＆ドロップします。
現在のパレットが表示されているので、それぞれの欄をクリックして切り替えながら、画像内の色を抽出したい箇所をクリックします。
色の抽出が完了したら、Next→Open in the generatorをクリックします。
抽出した色で新しいパレットが作成されました。
キーひとつで様々な配色を見ることができるなんて、私のように色の扱いに手間取るタイプの人には、本当にありがたいサイトです。
思いがけない組み合わせに出会えたりして楽しいので、たまに配色を探す目的を忘れて、スペースキーを延々と押し続けてしまうこともあります(笑)
とても手軽に利用できますし、新機能もいろいろ追加されているので、今後更に便利になっていくと期待が膨らみます。ぜひ利用してみてください。
なお、ユーザー登録をすることで、配色パレットを保存したり、好きな色をお気に入り登録できたりします。
もっと多くの機能を利用したい方は、ユーザー登録をオススメいたします！
