• 株式会社AliveCastはプライバシーマークを取得してます。
  • 福岡市インキュベート認定マーク福岡県子育て応援宣言登録マーク
  • 株式会社AliveCastは国の認定を受けた異分野連携新事業(新連携事業)に取り組んでいます。
  • FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • JTBビジネスイノベーターズ Travel・Fintechビジネスコンテスト 最優秀賞 受賞
  • AEON Financial Service Innovation 2017 特別賞 受賞
  • 第17回MIT-VFJビジネスプランニングクリニック&コンテスト 正会員特別賞・マイクロソフト賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業
  • 特許第6372856号
  • 特許第6316654号

日々、クリエイト。

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の活用方法を紹介しました。
使いこなすともっと便利なツールなので、
まだ使ったことのない方はぜひ試してみてくださいね。

AliveCastIPのみ表示されます

OK

管理側

残り

javascript css html VIEW側

php matchルーチン