2020年11月17日(火曜日) (山下 莉穂)
配色に迷ったときの便利ツール「Paletton」
皆さんこんにちは。
AliveCastインターンの山下です。
デザインを考えていると「配色」に悩むことが多いのですが、
最近あるツールを使い出してから、色決めが劇的に速くなりました。
今回は、そのツールと活用方法について紹介したいと思います。
配色がすぐ決まる!「Paletton」とは
配色のためのツールは沢山ありますが、
ここで紹介するのは「Paletton」という無料のカラーパレット作成ツールです。
直感的に配色パターンを作れるのが便利!
Palettonの使い方
Palettonでカラーパレットを作成する方法は
・カラーホイールを使用する
・プリセットを使用する
の2種類あります。
どちらの方法でも直感的にカラーパレットを作成できますが、
私の場合は、とにかくデザインがまとまるための色をすばやく探したい!という時に、
以下の手順でこのツールを重宝しています。
すでに1、2色決まっていて、組み合わせる色を探している
といった場合に使えると思います。
1.Base RGB:にカラーコードを入力
カラーホイールの左下に「Base RGB:」入力欄があります。
たとえば、今デザインしているページのベースカラーやメインカラーが決まっている場合、そのカラーコードを入力します。
2.5種類の中から配色パターンを選択
カラーホイールの上部に5つの配色パターンが設置してあります。
◆Monochromatic(1-color):1色だけの配色
◆Adjacent colors(3-colors):隣接する3色の配色
◆Triad(3-colors):カラーホイール上で、3色を結ぶと三角形の形になる配色
◆Tetrad(4-colors):カラーホイールを四等分した位置にある4色の配色
◆Freestyle- 2-4colors/:自由に選択する2~4色の配色
カラーホイールを操作したりせずに、パっと配色を決めたい時は、
以下のような選び方をすればいいかと思います。
同系色でまとめたい → Monochromatic / Adjacent colors
補色を使ってひきしめたい → Triad / Tetrad
3.サンプル確認
Palettonの便利なところは、自分が作ったカラーパレットを使うと
実際にどんなイメージになるのかを、豊富なサンプルで確認できます。
カラーパレット下の「EXAMPLES」をクリックすると、
Webページのレイアウトやアートワークなどのプレビューを見ることができます。
デザインの完成形もイメージしやすくなる便利な機能です!
おわりに
今回はPalettonの活用方法を紹介しました。
使いこなすともっと便利なツールなので、
まだ使ったことのない方はぜひ試してみてくださいね。
ホームページ・Webサイト制作のお問合せ
ホームページ制作についてもう少し詳しく知る