色のアクセシビリティを改善するための10のツール
全人口の４％以上の人が色覚異常を持っているということをご存知でしょうか。さまざまな色覚異常やその他の視覚障害は、あなたのWebサイトのリーダビリティ（可読性）とユーザビリティに影響を与える可能性があります。 どのように色が見えるかに関わらず、すべてのユーザーが利用できるようにデザインするのがあなたの責任なのです。 適切なツールを使えば、こういったデザインはあなたが思っているよりも簡単にできます。 アクセシビリティとは何か どのようなユーザーが見ても簡単に理解できるようなWebサイトを作るために、Webサイトのデザインに関しては数多くのアクセシビリティチェックとスタンダードがあります。 アクセシビリティはオーディオや、ナビゲーション、フィードバック、テキストのプロパティ、色など広範囲に関係します。今回は最後に挙げた「色」に注目します。というのも、これはデザインの初期段階で特定でき、問題を起こ
デザイン的に合う色の組み合わせを指定されたカラーをベースに生成する無料ツール -Color Designer
色の組み合わせに悩んだ時、指定されたカラーをベースにその色の明るい色合いと暗い色合いをはじめ、補色、類似色、分裂補色、3色配色、4色配色など、色の組み合わせを簡単に自動で生成できるオンラインツールを紹介します。 カラーのセンスがなくても、デザイン的に合った組み合わせが分かります。
ColorBox by Lyft Design
[ { "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デザインには使用される要素には、さまざまなカラーが使用されています。それらの要素にシャドウを与える際には、シャドウの色はブラックとは限りません。グレーであればグレー系シャドウ、レッドであればレッド系シャドウがぴったりです。 さまざまなカラーにあった適切なシャドウの色が分かるオンラインツールを紹介します。
プログラマが知っているとよい色(1)使い(JIS安全色) - Qiita
色の指定値 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色など
こんにちは。 今回は配色パターンの参考サイト・ジェネレーター18選。2色や3色、4色、5色、6色などです。 Webデザインやグラフィックデザインをしていると配色で悩むことはよくありますよね。 配色を変えるだけで、印象もがらりと変わるので、慎重に選びたいですね。 そこで、今回は配色パターンの参考になるサイトやジェネレーターのおすすめをまとめました。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。 配色パターンを生成してくれるサイト！ここからはいよいよ、実際に配色パターンの参考になるサイトやジェネレーターを見ていきましょう。 hello-color http://jxnblk.com/hello-color/ コントラストのある配色を提案してくれるサイトです。 「hello-color」の使い方はこちら
制作者はなんと15歳のイケメン！今風の美しいCSSグラデーションがコピペで簡単に利用できる -Gradient Hunt
Webサイトやスマホアプリで人気が高い、色相を変化させた美しいグラデーションがCSSのコード・デザイン素材で利用できるオープンソースの無料サイトを紹介します。 制作者（@fmaldonadoy）は15歳のデザイナー兼Webデベロッパーで、この美しいグラデーションは日々更新され、どんどん増えています。
UIのデザインはちょっとしたことで印象が大きく変わる、背景に適した色の選び方
背景の色に悩んだり、なんとなく決めてしまうことはありませんか？ Webサイトやスマホアプリの背景に適した色の選び方、明度と彩度を最適化するデザインのテクニックを紹介します。 Why You Shouldn’t Use Bright, Saturated Colors for Backgrounds 下記はUX Movementの記事を意訳したものです。UX Movementでは他にもUXデザインに関する記事が掲載されています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 背景に明るく彩度の高い色を使用してはいけない理由 1. 明度と彩度 2. 注目と喚起に対する色の効果 3. ボタンのために明るく鮮やかな色を予約しておく 4. 背景に濃くて不鮮明な色を使用する 5. 背景に適した色の選び方 6. 見にくい背景と見やすい背景の例 7. 美しさとユーザビリティ 背景
人工知能がますます便利に！ロゴやイラストやレイアウトの配色を自動で行う便利な無料ツール -AI Color Wheel
去年あたりから、デザイン制作にもAIがさまざまな形で導入されています。 身近なところでは、Adobe Sensei（人工知能）によるPhotoshopの選択範囲作成が1クリックでできるようになったり、他にもフォントの組み合わせをAIで、カラーの組み合わせをAIで、サイトのリデザインをAIで、単純な作業は自動化することができ、よりクリエイティブに時間を割けるようになりました。 先日リリースしたばかりの、ロゴやイラストやレイアウトの配色を適用するカラーのルールに基づいて、自動で行う便利な無料ツールを紹介します。 AI Color Wheel AI Color Wheelでは、ロゴ、イラスト、ワイヤーフレーム、その他のグラフィックアートを自動的にカラーリングすることができます。すべての配色パターンが一覧表示されるので、そこから選択するだけでOKです。
色を選択するとAIがカラーパレットを作成してくれるサイト「Khroma」
こんにちは。 今回は色を選択するとAIがカラーパレットを作成してくれるサイト「Khroma」です。 50色選ぶと人工知能が解析し、カラーパレットを生成してくれるWebサービスを紹介します。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。 色を選択するとAIがカラーパレットを作成してくれるサイト「Khroma」！ http://khroma.co/ Khromaの使い方 使い方は簡単で、好きな色を50色選んで、右上の「Start Training」のボタンをクリックします。 ちなみに50色以上選んでも大丈夫ですよ。 実際に作成するとこんな感じで、様々なテキストカラーと背景色の組み合わせを提案してくれます。 詳細のアイコンをクリックすると色名やHEX、RGBなどが表示され、クリックするとコピーできますよ。 次に2
指定したカラーを元に、最近のデザインで使われている色の組み合わせやグラデショーンを生成 -ColorSpace
指定したカラーを元に、最近のデザインで使われている色の組み合わせやグラデショーンをたくさん生成するオンラインツールを紹介します。 メインカラーに合う色の組み合わせ、ベースカラーにした時のアクセントカラー、組み合わせるのに適したグレーの色合い、ハイライトに適したカラー、シェードで使う時の組み合わせなど、さまざまな組み合わせが生成されて、非常に便利です。
最近のデザインでよく見かける色相を変化させた美しいグラデーションがまとめられた無料素材 -coolHue | コリス
最近のWebサイトやスマホアプリのデザインで人気が高い、色相を変化させた美しいグラデーション素材を紹介します。 Photoshop, Sketchのグラデーション素材として、またコードベースで利用することもできます。
ウェブデザイナーが配色に困らない、実践向き無料カラーツール14個まとめ
配色は、デザイナーが扱うツールキットの中でも強力なアイテムのひとつで、習得するのが難しいコンセプトでもあります。 可能な色の組み合わせは無数にありますが、ウェブサイトやアプリで使用する色を決めるときに悩んでしまうこともしばしば。 デザイン作業を簡単にする、配色カラーパレット作成に適した無料ツールをまとめてご紹介します。制作時間の短縮につながる実践的なツールの使い方を学びましょう。 【2021年版】もう配色デザインには迷わない！すごい無料カラーパレットツール83個まとめ コンテンツ目次 1. インスピレーションの見つけ方 2. 色彩配色の決め方 3. カラー・アクセシビリティ 01. インスピレーションの見つけ方 自然から デザインのアイデアやインスピレーションになるものは、すでに自分のまわりにたくさんあります。ぐるりと周囲を見回してみましょう。プリントデザイン、インテリア、ファッションなど
テキストやボーダーや背景に使うグレーを効果的に、ニュートラルなカラーを使いこなすためのテクニック
Webデザインで大切なカラーはベースカラーやアクセントカラー、そしてブランドのカラーがありますが、テキストやボーダーや背景などのコンポーネントに使うニュートラルなカラーも非常に重要です。 明るいニュートラルなカラー、暗いニュートラルなカラーをWebデザインで使いこなすためのテクニックを紹介します。 Light & Dark Color Systems 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 明るいカラーと暗いカラーを使用する準備 明るいカラーと暗いカラーを理解する 明るいカラーと暗いカラーをカラーパレットで使う時の注意点 明るいカラーと暗いカラーを使用する準備 コンポーネントで使用するニュートラルカラー カラーを選ぶ前に大切なのは、すでに使用しているニュートラルなカラーを調べることです。実際に一部のライブラリでは、すでに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザインに適した美しいグラデーションを簡単に作成できる無料ツール・無料素材のまとめ
カラーの組み合わせもついに人工知能で！指定色から最適な色の組み合わせを導きだすツール -Colormind | コリス
マテリアルカラー
Colormind - the AI powered color palette generator
配色パターン見本40選：ベストな色の組み合わせ確認ツール
