全人口の４％以上の人が色覚異常を持っているということをご存知でしょうか。さまざまな色覚異常やその他の視覚障害は、あなたのWebサイトのリーダビリティ（可読性）とユーザビリティに影響を与える可能性があります。 どのように色が見えるかに関わらず、すべてのユーザーが利用できるようにデザインするのがあなたの責任なのです。 適切なツールを使えば、こういったデザインはあなたが思っているよりも簡単にできます。 アクセシビリティとは何か どのようなユーザーが見ても簡単に理解できるようなWebサイトを作るために、Webサイトのデザインに関しては数多くのアクセシビリティチェックとスタンダードがあります。 アクセシビリティはオーディオや、ナビゲーション、フィードバック、テキストのプロパティ、色など広範囲に関係します。今回は最後に挙げた「色」に注目します。というのも、これはデザインの初期段階で特定でき、問題を起こ

色の組み合わせに悩んだ時、指定されたカラーをベースにその色の明るい色合いと暗い色合いをはじめ、補色、類似色、分裂補色、3色配色、4色配色など、色の組み合わせを簡単に自動で生成できるオンラインツールを紹介します。 カラーのセンスがなくても、デザイン的に合った組み合わせが分かります。

[ { "properties": { "steps": 11, "hue": { "start": 220, "end": 240, "curve": "easeOutQuad" }, "saturation": { "start": 0.08, "end": 1, "rate": 1, "curve": "easeOutQuad" }, "brightness": { "start": 1, "end": 0.2, "curve": "easeInQuart" } }, "options": { "minorSteps": [ 0, 1 ], "name": "Blue", "provideInverted": false, "rotation": "clockwise" } } ]

最近のWebデザインには使用される要素には、さまざまなカラーが使用されています。それらの要素にシャドウを与える際には、シャドウの色はブラックとは限りません。グレーであればグレー系シャドウ、レッドであればレッド系シャドウがぴったりです。 さまざまなカラーにあった適切なシャドウの色が分かるオンラインツールを紹介します。

色の指定値 http://safetycolor.jp/shiteichi/ JIS外16進数は次の２つの資料に基づき追記。（ただし白の文字色は、#FFFFFFだと読めない。また表の中で背景に色をつける方法を知らない。白の文字色値を #DDDDDD #BBBBBBにしている。） 新JIS安全色普及委員会(New safety colour JIS popularization committee) http://safetycolor.jp/shiteichi/ 視認性に配慮した色の識別！JIS安全色彩(iro-color) https://iro-color.com/episode/jis.html 資料によっては、青がPB(purple blue)で、赤紫がP(Purple)であるのは、日本語表記で青の概念は幅広いことと、紫が以前は赤紫だったためと推測している。 実際に製品を作る場合だ

Webデザインでも最近は、同一色相でトーンに変化をつけた色の組み合わせを使用するデザインが増えてきました。単に明るい・暗いの明度だけでなく、彩度や色相を段階的に変化させてカラーパレットを作成できるオンラインツールを紹介します。

こんにちは。 今回は配色パターンの参考サイト・ジェネレーター18選。2色や3色、4色、5色、6色などです。 Webデザインやグラフィックデザインをしていると配色で悩むことはよくありますよね。 配色を変えるだけで、印象もがらりと変わるので、慎重に選びたいですね。 そこで、今回は配色パターンの参考になるサイトやジェネレーターのおすすめをまとめました。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。 配色パターンを生成してくれるサイト！ここからはいよいよ、実際に配色パターンの参考になるサイトやジェネレーターを見ていきましょう。 hello-color http://jxnblk.com/hello-color/ コントラストのある配色を提案してくれるサイトです。 「hello-color」の使い方はこちら

Webサイトやスマホアプリで人気が高い、色相を変化させた美しいグラデーションがCSSのコード・デザイン素材で利用できるオープンソースの無料サイトを紹介します。 制作者（@fmaldonadoy）は15歳のデザイナー兼Webデベロッパーで、この美しいグラデーションは日々更新され、どんどん増えています。

背景の色に悩んだり、なんとなく決めてしまうことはありませんか？ Webサイトやスマホアプリの背景に適した色の選び方、明度と彩度を最適化するデザインのテクニックを紹介します。 Why You Shouldn’t Use Bright, Saturated Colors for Backgrounds 下記はUX Movementの記事を意訳したものです。UX Movementでは他にもUXデザインに関する記事が掲載されています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 背景に明るく彩度の高い色を使用してはいけない理由 1. 明度と彩度 2. 注目と喚起に対する色の効果 3. ボタンのために明るく鮮やかな色を予約しておく 4. 背景に濃くて不鮮明な色を使用する 5. 背景に適した色の選び方 6. 見にくい背景と見やすい背景の例 7. 美しさとユーザビリティ 背景

Webデザインやスマホアプリに使用されるグラデーションも最近では進化しています。一昔前までは、パステル系のグラデーションが人気でしたが、最近では2色を使用した鮮やかなグラデーションや同一色相のグラデーションが注目されています。 UIデザインのコンポーネントや背景にぴったりな美しいグラデーションを作成できる無料ツール・無料素材を紹介します。

去年あたりから、デザイン制作にもAIがさまざまな形で導入されています。 身近なところでは、Adobe Sensei（人工知能）によるPhotoshopの選択範囲作成が1クリックでできるようになったり、他にもフォントの組み合わせをAIで、カラーの組み合わせをAIで、サイトのリデザインをAIで、単純な作業は自動化することができ、よりクリエイティブに時間を割けるようになりました。 先日リリースしたばかりの、ロゴやイラストやレイアウトの配色を適用するカラーのルールに基づいて、自動で行う便利な無料ツールを紹介します。 AI Color Wheel AI Color Wheelでは、ロゴ、イラスト、ワイヤーフレーム、その他のグラフィックアートを自動的にカラーリングすることができます。すべての配色パターンが一覧表示されるので、そこから選択するだけでOKです。

こんにちは。 今回は色を選択するとAIがカラーパレットを作成してくれるサイト「Khroma」です。 50色選ぶと人工知能が解析し、カラーパレットを生成してくれるWebサービスを紹介します。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。 色を選択するとAIがカラーパレットを作成してくれるサイト「Khroma」！ http://khroma.co/ Khromaの使い方 使い方は簡単で、好きな色を50色選んで、右上の「Start Training」のボタンをクリックします。 ちなみに50色以上選んでも大丈夫ですよ。 実際に作成するとこんな感じで、様々なテキストカラーと背景色の組み合わせを提案してくれます。 詳細のアイコンをクリックすると色名やHEX、RGBなどが表示され、クリックするとコピーできますよ。 次に2

指定したカラーを元に、最近のデザインで使われている色の組み合わせやグラデショーンをたくさん生成するオンラインツールを紹介します。 メインカラーに合う色の組み合わせ、ベースカラーにした時のアクセントカラー、組み合わせるのに適したグレーの色合い、ハイライトに適したカラー、シェードで使う時の組み合わせなど、さまざまな組み合わせが生成されて、非常に便利です。

写真や映画、人気が高いアートなどから学び、それらメディアで異なるビジュアルスタイルに合ったカラーの組み合わせを生成するオンラインツールを紹介します。 カラーセオリーに基づいた学習型のAIで、色の組み合わせをゼロから、そして指定色から作成することができます。

最近のWebサイトやスマホアプリのデザインで人気が高い、色相を変化させた美しいグラデーション素材を紹介します。 Photoshop, Sketchのグラデーション素材として、またコードベースで利用することもできます。

配色は、デザイナーが扱うツールキットの中でも強力なアイテムのひとつで、習得するのが難しいコンセプトでもあります。 可能な色の組み合わせは無数にありますが、ウェブサイトやアプリで使用する色を決めるときに悩んでしまうこともしばしば。 デザイン作業を簡単にする、配色カラーパレット作成に適した無料ツールをまとめてご紹介します。制作時間の短縮につながる実践的なツールの使い方を学びましょう。 【2021年版】もう配色デザインには迷わない！すごい無料カラーパレットツール83個まとめ コンテンツ目次 1. インスピレーションの見つけ方 2. 色彩配色の決め方 3. カラー・アクセシビリティ 01. インスピレーションの見つけ方 自然から デザインのアイデアやインスピレーションになるものは、すでに自分のまわりにたくさんあります。ぐるりと周囲を見回してみましょう。プリントデザイン、インテリア、ファッションなど

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

配色の使用例を確認しよう 気になる配色があれば、見本をクリック/タップしてみましょう。その配色の使用イメージを確認することができます。気に入った色の組み合わせはコピペして使って頂いて構いません。 万人受けする配色 まずはシーン問わず使いやすい色の組み合わせを紹介します。青や橙色などは老若男女問わず受け入れやすい色ですね。

Webデザインで大切なカラーはベースカラーやアクセントカラー、そしてブランドのカラーがありますが、テキストやボーダーや背景などのコンポーネントに使うニュートラルなカラーも非常に重要です。 明るいニュートラルなカラー、暗いニュートラルなカラーをWebデザインで使いこなすためのテクニックを紹介します。 Light & Dark Color Systems 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 明るいカラーと暗いカラーを使用する準備 明るいカラーと暗いカラーを理解する 明るいカラーと暗いカラーをカラーパレットで使う時の注意点 明るいカラーと暗いカラーを使用する準備 コンポーネントで使用するニュートラルカラー カラーを選ぶ前に大切なのは、すでに使用しているニュートラルなカラーを調べることです。実際に一部のライブラリでは、すでに