Yuya Furusato
9,712 views

UI デザイナーがカラーパレットで悩んだときに参考になるサービス5選

root UIデザイナーの古里です。
UIデザインをやっていると、度々カラーパレットで悩む場面に遭遇します。特に情報が多くなってきたときは大変ですよね。
そんなとき参考にしている便利なサービス5つ紹介します

1.Coolors(https://coolors.co/)

スペースバーを押すとカラーパレットを自動生成してくれるサービス。
ログインすると自分のカラーパレットを保存できるだけではなく、他のユーザーが保存したカラーパレットを参照することができます。
そして、撮影した写真から色をスポイトしたり、一部のカラーのみロックして他の色だけ変えたり、RBA, CMYK, HSBなど様々なカラーコードでチューニングすることが可能です。iOS/Androidアプリもリリースしており、Photoshopやイラストレーターで使えるプラグインもリリースしています。いつでもどこでも簡単にさくっとカラーパレットが作れるので重宝しているサービスです。
スクリーンショット 2015-11-30 16.10.44スクリーンショット 2015-11-30 16.11.08
スクリーンショット 2015-11-30 16.11.23

2.Adobe Color CC(https://color.adobe.com/ja/create/color-wheel/)

kulerというサービス名で運用されていた純正のadobeのサービスです。
coolorsを使うかAdobe Colorを使うかで意見がわかれるところではないでしょうか?Coolorsと同じように他のユーザーが保存したカラーパレットの参照が可能で、撮影した写真からカラーパレットを生成できるiOS/Androidアプリもリリースしています。浮かんできたインスピレーションをすぐにアイデアとして形に残すことができます。
スクリーンショット 2015-11-30 16.13.46

3.HUE 360(http://hue360.herokuapp.com/)

HUE360はまず明度を選択し、メインカラーを選ぶと自動的にバランスの良い色を残して表示してくれます。直感的に色を選ぶことができますし、UIがシンプルでイケてるイチオシのサービスです。
スクリーンショット 2015-11-30 11.11.19

4.Brand Colors(http://brandcolors.net/)

Brand ColorsはAmazonやebayからコカ・コーラやIKEAまで、様々なブランドカラーを集めたサービスです。ブランドロゴではなくブランドカラーを軸にキュレーションされたものはあまり見たことがないので面白いなと思いました。選択したブランドカラーをASE(adobe専用のスウォッチファイル)、css、scss、less、stylusにデータを書き出せるので参考にしたいときに便利ですね。
スクリーンショット 2015-11-30 10.41.55

5.Material Palette(http://www.materialpalette.com)

Material Paletteは選べる色は少ないですが、2色選べばマテリアルレイアウトのモックアップへ吐き出してくれるので、イメージが湧かないときに触ってみてはいかがでしょうか?
スクリーンショット 2015-11-30 11.19.10

まとめ

いかがでしたか?
UIデザインで使う配色はバランスが大切ですが、サービス内でその色が持つ意味も重要になってきます。ユーザーが直感的に使うことができるサービスは、一貫した色の使い方と、厳選されたカラーパレットを徹底しているように感じます。ぜひ参考にしてみてください!]]>

 新規事業・UXデザインのことなら私たちにご相談ください。

私たちは事業戦略に応じたプロダクトデザイン戦略策定からUXデザイン、人間中心設計に基づいたデザイン手法を実行することで事業の立ち上がりから成長までの過程を支援します。サービス開発、UXデザインのことでお困りの方は、rootまで気軽にご相談ください。

Yuya Furusato

Yuya Furusato

UIデザイナー。ロンドンでファッション・写真を学ぶ。帰国後BASE, Inc. でアシスタントデザイナーを経た後、2015年秋から入社。

SNSをフォローする

人気の記事

問い合わせ

プロジェクトに関するご相談やお見積依頼はこちらからご連絡ください。社内で検討されたい方のために事業紹介をまとめた資料をお送りすることも可能です。

採用情報

rootのカルチャーに興味があり一緒に働きたいとお考えの方はこちらをご覧ください。正社員、パートナー、インターン等雇用形態に限らず受け付けております。