カラー系アプリを作った理由とColor Converterの簡単な機能説明

ブログ

きっかけ

まず、これらのカラーアプリは全て自分のために作りました。

デザイン業務の中で、アパレル系のグラフィックなどはプリントの色決めなどで、PANTONEのサンプル帳とデータをにらめっこするのが常だと思います。

もちろんアドビのイラストレーターにはPANTONE公式のプラグインアプリがございます。私も使っていますが、何にしろ、使い勝手が良いとは言えないなと、個人的感想ですが。正直言えば、使い勝手が悪い(そしてサブスクの金額が高い……)。そこで、自分の業務に使い勝手のよいものを作ろうというのがきっかけです。

最初からPANTONEカラーで決め打ちしてグラフィックなどを作る場合を除いて、基本的にその場で気に入った色を使いながら、後でPANTONEに差し替えるといのは、大多数のデザイナーさんはやってますよね? やってない? やってるでしょう?

そこで、ブラウザでPANTONE近似色へのカラー変換をパパッとやってしまおうと。それがColor Converterアプリです。

最終的に自分だけで使うのはもったいないと思ったので公開しました。

基本的にPCでの利用を想定しているので、PCブラウザ向けに設計しています。スマートフォンでは画面サイズや操作(ドラッグ&ドロップ/キーボード操作等)の都合で、一部機能が正しく動作しない・表示しきれない場合があります。正確にお使いいただくため、PCの最新ブラウザ(Chrome/Edge/Firefox/Safari)でのご利用を推奨します。

Color Collector(カラー抽出)、Color Converter(相互カラー変換)、Color Palette Maker(PANTONEカラーのパレット作成機能)の3つを作りましたが、その中でも、今回は最初に作ったColor Converterを紹介しますね。

Color Converterアプリ

何ができる?

  • 相互近似変換:HEX / RGB / CMYK ⇄ PANTONE を双方向で。
    例)HEXを貼ると、PANTONE近似候補を一瞬で5つ提案。逆方向(PANTONE→CMYKなど)もOK。

  • 軽快に回せるUI:リロード不要。コピペ→即結果でストレスなし。

  • カラーアシスト:色相・彩度などから関連色を提示。

  • WCAGコントラストチェッカー:背景色×文字色の可読性を簡易チェック。Noto Sans JPで日本語表示にも対応。

  • カラーDJ(配色パターン生成):基準色から配色を自動生成。各色はクリックでHEXコピー。

  • メモ機能:右下の鉛筆アイコンから簡易ノート。ブラウザのローカル保存なので、リロードしても残ります。

  • テーマ切替:左下の天気アイコンでダーク/ライトをワンタップ。暗色UIでの見え方確認にも便利。

 

箇条書きで示したように、RGB、HEXコード、CMYKとPANTONEカラーを相互近似色変換してしまおうというものです。イラストレーターでHEXコードを拾って、Color Converterにコピペする。一瞬でPANTONEカラーの近似色が5つ提案されるというものです。

また、決め打ちしているPANTONEカラーをCMYKで近似色出すならどれかなーってのも相互変換なので一発で出ます。

わざわざ変換時にリロードしないので、動作も軽く、快適に使用できると思います。

ついでに、色相、彩度などから関連色が出る(カラーアシスト機能)ようにしたり、WCAG コントラストチェッカーという色の対比でコントラストチェックができたり、カラーDJという現在選択されている色を基準にした配色パターンジェネレーター機能などを遊び心として導入しました。

メモ機能

メインはRGB、HEXコード、CMYKとPANTONEカラーを相互近似色変換なので、その他は補助機能ですが、コピペで素早く近似色変換。

右下の鉛筆アイコンをクリックすれば、簡易ノートでメモできるので、パパッとコピペしてメモ、コピペしてメモ……最後にイラストレーターにテキストを持ち込んで、色を差し替えていったり、指定色のテキストを編集したりと現場に役立つ(と思われる、私が欲しかった)機能を入れています。

ブラウザのローカル領域にデータが保存されるので、リロードしてもメモは残っています。なので、作業中にうっかりブラウザを閉じてしまっても大丈夫ですよ。

ちなみに左下のお天気アイコンはライトモードとダークモードのテーマ変換機能です。ポチッと押せば、UIが全てダークモードへ切り替わったりしますので、地の色がダークトーンの時の指定色の見え方などもパパッと確認できます。

WCAGコントラストチェッカー

次にWCAGコントラストチェッカーですが、これはウェブ系のデザイン業務でも使えるかなと思い立って導入。CTAブロックなどの背景色と文字色の簡易チェックみたいなことができるような機能です。

フォント選択でNoto Sans JPを選べば日本語も出せます。テキスト編集でタイトル、本文に日本語を入れれば日本語での見た目、コントラストをチェックできます。

あとはカラーDJ機能ですが、これはまぁ、ちょっとした遊び機能です。

カラーDJ(配色パターンジェネレーター)

上段で指定している色に合わせたら配色パターンを自動で生成します。全色クリックでHEXコードをコピーできるので、気に入った配色があったら、まとめてコピーしておけば、イラストレーターに持ち込んでも、すぐに再現可能です。

このような機能を導入していますが、基本的に自分が一番欲しかった機能はRGB、HEXコード、CMYKとPANTONEカラーを相互近似色変換機能です。このような色変換系のサイトはいくつもありますが、自分が使いやすいものを自分のために作ったので、合わない人もいるかもしれませんが、ぜひ、試してみてくださいね!

Color Converterはこちらから利用可能です。

 

※ PANTONE® は Pantone LLC の登録商標です。本アプリで表示される近似値は目安であり、最終指定は実物のカラーチップでご確認ください。弊サービスは Pantone LLC とは提携していません。

タイトルとURLをコピーしました