デザインの配色に迷ったら

最近、SEOから始まってUIの相談になり、さらにデザインの話になり…なんだかんだで、なんとなくデザイン提案をするケースもあったりしていまして…。なんちゃってフラットデザインもダサいですし、こんなのどうですか?と雑談ベースで提案すると、それが意外にも喜ばれたりします。そこで、そんなデザインの配色に困った時に使えるツールをご紹介したいと思います。

色味

ふわふわ

フラットデザインの流行に伴って

私が個人的に愛用しているツールなのですが、フラットデザインに伴って、色味もソフトな感じが増えてきています。パキッとした色合いではなく、彩度が抑え気味で、明度も低めのカラーリングです。しかしそれもカラフルに活用することで全体をポップな印象にしてくれます。

しかしこれが難しくて…絶妙なバランスで配色しないと、途端にダサくなってしまうわけです。「あぁ、頑張ってるなぁ」感が出ちゃうんですよね(笑)。

というわけで、そんな「頑張ってる感」が出ないで済むヒントをくれる無料ツールをご紹介します。2016年秋頃にあちこちで特集されていましたが、私もご紹介してみたいと思います(参考:「UX MILK」)。

ふわふわ

PALETTABLE

https://www.palettable.io/
まずはこのPALETTABLE。URLを叩くと任意の色が出ます。その任意の色が気に入ればそのままですし、自分で最初の色を出したければ16進数のカラーコードを入力します。そして、その後色味を調整したければ調整しつつ、「Like」「Dislike」の表示に合わせて進みます。「Dislike」をクリックすると別の色を推薦してくれますが、「Like」をクリックすると、その色はそのままにマッチする次の色を推薦してくれます。

palettable1

palettable2

このような形で最大5色まで紹介してくれますので、統一感のあるカラーリングを抽出できるようになるわけです。

ふわふわ

Coolors.co

https://coolors.co/
これは、結構ビビッドな色が出現します。「Start the Generator」に進むと、いきなり任意の5色を出してくれます。スペースキーを押すごとに新規の5色を推薦してくれます。気になった色は調整したり、組み合わせをいじったりできますし、5色全体の明度を調整することもできます。

coolors1

coolors2

1色でも決定すれば、その色を「Lock」しつつ、同時に色々なカラーリングを推薦してくれますので、ブランドカラーに合わせたサイトデザインの配色を考える際には便利です。

ふわふわ

センスは大事

さて、今回は私が個人的に活用している無料ツールを2つご紹介しましたが、もっともっと同様のツールはあると思います。それぞれ微妙に使い勝手が異なるので、是非探してみてください。

また、私の場合はパワーポイントの提案資料にもこのツール配色を反映したりしています。ただ、パワーポイントではRGB形式で色を作成するので、そういう時は「PEKO STEP」を活用して相互変換すると良いでしょう。ちなみに、せっかくパワーポイントで絶妙な色味の企画書を作成したところで、プリントアウト時にしっかり再現できなければダサくなるのでお気を付けください(笑)。


関連記事

有益情報を発信するツイート紹介

最近、色々なサービス展開上、Webページデザインの勉強をしている私です。とはいえ技術的なコーディングやプログラミングではなく、市場参入視点やユーザーへのコンバージョンやエンゲージメント視点での勉強です。これに関しても終わりがなく、且つ伝えたい内容によってUIデザインは変化するので、常にインプットが必 ...(続きを読む)

PDRがしっくりくる

先日、SEOや新規ビジネスを考えている中、「やっぱりPDCAだとうまくいかないなぁ」と思いまして...PDRにしてみたところうまく回りだしたので、そんなPDRをご紹介してみたいと思います。 PDRとは PDRとは2011年頃にハーバードビジネススクール(HBS)のLinda Annette Hill ...(続きを読む)

訴求方法における他社参考のしかた

自分のWebサイトページにおける訴求方法を考える時、無作為に他社のWebサイトやランディングページを見て、見た後にそこから何かを得ようとする人がいます。でも、無作為に他人のWebサイトページを見ているだけでは、あまり気付きも参考要素も得られません。そこでここでは他社のWebサイトページを見る時の心構 ...(続きを読む)

NAVERまとめが終了

2014年に一世を風靡した(...私の中で)あのNAVERまとめがついに終了するそうです。残念とか悲しいとかではなく、なんとなく感傷的な気分になりましたのでご紹介しておきます。あの1件以来まるで目立たなくなってしまいましたが...それでも私はユーザーとして普通に見ていたんですけどね...。 終了の通 ...(続きを読む)

コメントを書く

コメントは承認から反映までしばらく時間がかかる場合がございます。メールアドレスが公開されることはございません。