デザイン

デザイン

色選びにかかる時間を短縮!カラースキーム作成アプリ12選

Designmodo

Designmodo publishes web design articles, tutorials and has a great shop with the best WordPress and Bootstrap themes, plugins, UI Kits and more.

本記事は、12 Best Color Scheme Generator Web Apps for Designers
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

1,154 views

読了時間 : 約4分24秒

デザイナーにとって、既にあるカラーホイールを再び作り上げる作業は、本当に時間の無駄です。インターネット上にはツールが沢山あり、その無駄な時間を省くことができるのです。

 

色選びでも、これ!というものを選び出すのに、大変な労力を費やしますよね。これから紹介するカラーアプリを使えば、その全て時間を節約できます。しかも100%タダ!これから始めるあなたのために、ウェブ上から最高のものを選びました。

 

Paletton

 

Paletton は、ウェブデザイナーであれば誰でも知っているクラシックなもので、数年前から、今でも筆者のお勧めツールです。

 

基本となる色を選択するだけで、後はアプリがやってくれます。様々な色を選択し、ウェブデザイン上でどういう風に見えるのか試してみたり、コントラストを変えてみたりもできます。

パレットは見やすく、デザインについて何も知らない初心者には最適です。

 

Color Safe

 

デザインするにあたり、WCAGが気になるなら、このColor Safeが最良ツールです。 このアプリは、調和したカラースケールを生成し、WCAGのガイドラインに沿った様々な色を見せてくれます。

 

読みやすくなる配色をW3ルールブックから直接取り出すので、このウェブアプリColor Safe Webを使えば、あなたのサイトはWCAGガイドラインに準拠しているだけでなく、読みやすいサイトになり、アクセスしやすくなること間違いなしです。

 

Adobe Color CC

以前はAdobe Kulerという名前でしたが、現在はAdobe Color CC.という名前です。

 

これはAdobeのフリーツールのひとつで、誰でもカラースキームが作成できるようにと作られたものです。これは本当に良くできたウェブアプリで、必要な色を様々なカラーパターンから選ぶことが可能です。

 

インターフェースは慣れが必要ですが、いったん慣れてしまえば、美しい色の選ぶのに問題はないでしょう。

 

Ambiance

Ambianceは無料のウェブアプリで、ウェブ上の他のカラーサイトの既製のカラーパレットを使用しています。昔からあるウェブアプリのように、好きな色を自分で選んで保存し、自分のカラースキームを作成するものです。

 

これらのカラーパレットはすべてColorloversのものなので、コミュニティで事前に作成され、投票されています。 Ambianceのインターフェースは見やすく、UIデザインに焦点を当てたものです。

 

0to255

 

これはフルカラースキームジェネレータではありませんが、既存のカラースキームを微調整するのに役立ちます。

 

0to255では、さまざまな色合いが全て表示されるので、その場で色を組み合わせることが可能です。ホームページ上では、太陽光の下での色の選択に大きな違いがでます。

 

色をクリックすると、フルグラデーションページに移動するので、ここから、さまざまな不透明度を選択することで、最適な色を見つけることが可能です。

 

Flat UI Colors

最近はフラットデザインが人気で、その人気が続いています。フラットデザインを取り入れたいのであれば、Flat UI Colorsはブックマークすべきサイトです。

 

ここでは既存のフラットカラースキームが提供されています。クリックしてコピーする機能がありますので、HEXコードをPhotoshopまたはCSSスタイルシートにコピー/貼り付けできます。

 

これは非常に簡単なアプリなのでできることに制限がありますが、フラットなUIをデザインする作業には最適なツールです。

 

Pictaculous

デザイナーの中には、写真で使われるカラースキームを掘り出すことによって写真にインスピレーションを得る人もいます。

 

このPictaculousは写真の色分析に最適なツールです。

 

この無料のウェブアプリはコンピュータから写真を撮り、関連する配色を出力します。 このアプリは、バックエンドの各写真を処理し、最も効果的で最適な色を見つけ出してくれます。

 

過去作成したカラーパレットからも写真と完全に調和する色提案もしてくれ、カラースキームは、フリーのAdobeスウォッチファイルに収納されます。

 

Color Supply

Color Supplyは多面的な色選択をするので、非常にユニークなアプリです。 カラーホイールで1つの色を選択し、スタイル(補色、正三角形の配色、四角の配色など)を選択します。

 

そこから、さまざまな色味/色合いを選択し、どの色が最適かを見ることができ、自動更新でSVGアイコンでの色をプレビューできるので、安心です。

 

アイコンをデザインする時に、色の選択のインスピレーションが欲しいなら、このアプリは絶対お勧めです。

 

Coolors

 

Coolorsは無料のウェブアプリで、最も充実したカラーミキシングオンラインツールの1つです。 ウェブアプリでのここまで細かいインターフェースには、本当に驚きです。

 

様々な色を選択し、ブラウザ上でミックス、ワンクリックでHEXコードをコピーすることができます。 無料のChrome拡張機能もあり、無料のアカウントに登録してお気に入りの配色をブックマークすることができます。

 

インスピレーションのみを探しているのであれば、素晴らしいカラーアイデアが満載のページもあります。

 

Material Colors

 

グーグルは、先日マテリアルデザインページを最新のカラーツールで刷新しました。

 

この無料ウェブアプリは、Googleが提供するこのリストの中でもよくできたアプリです。 モバイルアプリのUIデザインに重点を置いていますが、ウェブ上でも使える何百ものカラースキームから選択可能です。

 

マテリアルUIデザインに焦点を当てた他のアプリもありますが、これはGoogleから認可されているので、ブックマークする価値はあります。

 

Palette Generator

Palette Generator は、オンラインウェブアプリで、前述のPictaculousとほとんど同じように機能します。このウェブアプリでは、違いを比較/対比するために複数の写真をアップロードできます。

 

既存のウェブサイトやスクリーンショットから色の選択を見たいなら、このアプリは使えます。使用したい色の数を選択すると、アプリがどの色を他の色よりも優位にすべきかを教えてくれるのです。

 

インターフェイスを勉強している人、色のインスピレーションを得たい人には最適です。

 

Color Picker

最後は、Dixon&MoeColor Pickerです。この無料ツールでは、フルHEX、HSL、およびRGB情報を使って色を選択し、既存の配色を更新できます。

 

色を選ぶと、後はアプリがやってくれます。
すべての配色をCSSまたはSassコードとしてエクスポートできるため、特にウェブでの使用に適しています。 すべてのウェブデザイナーにとって素晴らしいツールです。

 

カラースキーム作成に苦労しているのなら、これらのアプリのいくつかを試してみてください。 今回紹介したアプリの中に、デザインプロセスを根本的に変えるものがいくつか見つかるはずです。

 

【セレキュトのおすすめpickup】
 
■クリエイターの実績、知識はあるけどいい仕事が見つからない方におすすめ!
 【レバテックフリーランス】
 ・案件数業界最大級、エージェントの理解が深い、発注額高、圧倒的低マージン、単価アップ交渉◎
 ・エンジニア勉強会の開催有り、就業後もサポート有り
 ・年収が上がったクリエイター多数
 ・案件)【Deep Learning】AIプロダクト開発の求人・案件/~900,000円/月 など
 ⇒レバテックフリーランスを見てみる
 
■今のクリエイター技術をもっと向上したい方におすすめ!
 【デジタルハリウッドSTUDIO by LIG】
 ・あのWeb制作のプロ集団「LIG」が運営の上野・池袋のWebクリエイター育成スクール
 ・6ヶ月で未経験からwebクリエイターへ、転職サポート◎
 ・映像教材はいつでもどこからでも受講可能
 ・LIG監修のオリジナル映像講座や特別LIVE授業など特典盛りだくさん!
 ・無料相談会受付中!
 ⇒デジタルハリウッドSTUDIO by LIGを見てみる

おすすめ新着記事

おすすめタグ