やってほしくない緑とオレンジの使い方(カラーUDの話)｜ほうじ | 少数色覚デザイナー
少数色覚者にとって黄緑とオレンジは見分けづらい組み合わせの一つです。この記事のタイトル画像とかなかなか最悪です。 WEB、アプリや印刷物などのメディアではだいぶカラーユニバーサルデザインの考え方が浸透してきており、デザイナーも多様な色覚でも読み違えないように配慮してデザインすることが当たり前になってきていると思います。 Photoshopなどのグラフィックツールには簡単に少数色覚の見え方を確認できるプレビューモードがありますし、AdobeColorを使えば無料で少数色覚の人が混同しやすい色かどうかをすぐに確かめられます。https://color.adobe.com/ja/create/color-accessibility 少数色覚が見分けづらい色の組み合わせだと「-」が表示されるしかし、工業製品の世界では少数色覚にとって見分けづらい緑とオレンジの組み合わせのLEDインジケータ（表示）を
「物質を破壊して色を表現」 京都大iCeMS、新印刷技術を開発 - ITmedia NEWS
アクリル樹脂などに代表されるポリマーに規則的に亀裂を入れることで発色させる新たな印刷技術を開発したと、京都大物質－細胞統合システム拠点（iCeMS、アイセムス）のシバニア・イーサン教授（化学工学）らの研究グループが、20日付の英科学誌「ネイチャー」電子版に発表した。亀裂自体が模倣されにくく、高精密な印刷が可能で、紙幣や身分証明書の偽造防止印刷などへの応用が期待できるという。 アクリル樹脂などに代表されるポリマーに規則的に亀裂を入れることで発色させる新たな印刷技術を開発したと、京都大物質－細胞統合システム拠点（iCeMS、アイセムス）のシバニア・イーサン教授（化学工学）らの研究グループが、20日付の英科学誌「ネイチャー」電子版に発表した。亀裂自体が模倣されにくく、高精密な印刷が可能で、紙幣や身分証明書の偽造防止印刷などへの応用が期待できるという。 コガネムシの体表などにみられる鮮やかな色は「
色の組み合わせ方の参考にいい！Webサイトやスマホアプリに適したカラーパレットを生成する無料ツール -Color
指定したカラー、画像、Webページなどをベースに、カラーパレットを生成し、カスタマイズできる無料のオンラインツールを紹介します。 カラーパレットは、Webサイトやスマホアプリに特化されており、コンテンツに使用されるさまざまな要素への適用、アクセシブルなカラーの組み合わせなどが生成されます。 Color Color -GitHub Colorでは、さまざまなリソースを元にカラーパレットを生成し、カスタマイズできます。 既存のWebページをベースに 指定したカラーをベースに カラーボックスをベースに 画像をベースに JSONをベースに 生成したカラーパレットは、CSS, Sass, JSONなどに書き出すことができ、色の名前なども分かります。 まずは、2019年のトレンドカラー「Living Coral」をベースに作成してみました。
配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド｜Taiki Ikeda｜note
どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ
色盲・色弱の人にWebページがどのように見えているかシミュレートできるChromeの機能拡張 -Colorblindly | コリス
色盲や色弱の人がどのように見えているかシミュレートできるオンラインサービスはいつかありますが、テストサーバーやローカルで利用できないのが残念なところです。 色盲・色弱の人の見え方をシミュレートできるChromeの機能拡張を紹介します。
モダンで美しいデザインのカラーピッカー「Pickr」:phpspot開発日誌
背景を物理エンジンベースでアニメーションさせる「Physics-Based Backgroun... 次の記事 ≫：WEB上で動くプレゼンテーション作成「Presentr」
トレンドの配色をカラーコード付きで参照できる「Trendy Palettes」
TOP > Design , WebDesign , WebService > トレンドの配色をカラーコード付きで参照できる「Trendy Palettes」 デザインの印象を決定付ける、重要な要素の一つに配色があります。色の組み合わせは思っている以上に難しく、いつも同じような配色になってしまう、または配色自体が思いつかないと色で悩んでいる方も多いと思います。今回紹介するのはトレンドの配色をカラーコード付きで参照できるWEBサイト「Trendy Palettes」です。 基本的には三色の組み合わせパターンが登録されており、色の組み合わせとそれぞれのカラーのカラーコードを参照することが可能です。 詳しくは以下 「Trendy Palettes」では、Trendy、popular、Randomと様々な形でカラーパレットを参照することができ、個別ページではカラーコードを参照できる他、PN
色のセンスがない人でも大丈夫、色を段階的に変化させるカラーパレットを簡単に作成できる便利ツール
Webデザインでも最近は、同一色相でトーンに変化をつけた色の組み合わせを使用するデザインが増えてきました。単に明るい・暗いの明度だけでなく、彩度や色相を段階的に変化させてカラーパレットを作成できるオンラインツールを紹介します。
シャドウの色はブラックとは限らない、さまざまなカラーにあった適切なシャドウの色が分かるオンラインツール
最近のWebデザインには使用される要素には、さまざまなカラーが使用されています。それらの要素にシャドウを与える際には、シャドウの色はブラックとは限りません。グレーであればグレー系シャドウ、レッドであればレッド系シャドウがぴったりです。 さまざまなカラーにあった適切なシャドウの色が分かるオンラインツールを紹介します。
[JS]レスポンシブ対応のカラーピッカーを簡単に実装できる超軽量のスクリプト -Pickr
Webページやアプリに外部スクリプトと数行のコードだけで、使いやすいカラーピッカーを簡単に実装できる超軽量のスクリプトを紹介します。 レスポンシブに完全対応しており、デスクトップのマウス操作でもスマホのタッチ操作にも対応しています。 他のスクリプトやスタイルシートに依存はなく、React、Vue、Angular、jQueryなどと一緒に利用することもできます。また、Bootstrap、MaterializeなどのCSSフレームワークへの互換性もあり、幅広く利用できます。 カラーピッカーの使い方は、簡単 HEX, RGBa, CMYK, HSLa, HSVaをサポート jQueryなどの他スクリプトへの依存は無し Bootstrap, MaterializeなどのCSSフレームワークへの互換性 複数の色表現 色の比較 不透明度のコントロール タッチデバイスをサポート Nodejsのサポート
![[JS]レスポンシブ対応のカラーピッカーを簡単に実装できる超軽量のスクリプト -Pickr](https://cdn-ak-scissors.b.st-hatena.com/image/square/12b3cee3e07a63a7a087487c66c0ccc4563e8ea0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018072702.png)
配色のセンスがなくても、ベースカラーにぴったりなカラーパレットを1クリックで自動生成する無料ツール -Plax
UIのデザインやデータのビジュアライズに使用するカラーを決めるのに適したオンラインツールを紹介します。ベースカラーを決めるだけで、そのカラーに調和したフルスペクトルのカラーパレットが簡単に作成できます。 例えばグレーはよく使用されるカラーですが、選ぶのが難しいカラーです。ブルーに合ったグレー、グリーンに合ったグレー、さらにその中から可読性が充分な明るいグレーや暗いグレーなども自動的に生成されます。
UIのデザインはちょっとしたことで印象が大きく変わる、背景に適した色の選び方
背景の色に悩んだり、なんとなく決めてしまうことはありませんか？ Webサイトやスマホアプリの背景に適した色の選び方、明度と彩度を最適化するデザインのテクニックを紹介します。 Why You Shouldn’t Use Bright, Saturated Colors for Backgrounds 下記はUX Movementの記事を意訳したものです。UX Movementでは他にもUXデザインに関する記事が掲載されています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 背景に明るく彩度の高い色を使用してはいけない理由 1. 明度と彩度 2. 注目と喚起に対する色の効果 3. ボタンのために明るく鮮やかな色を予約しておく 4. 背景に濃くて不鮮明な色を使用する 5. 背景に適した色の選び方 6. 見にくい背景と見やすい背景の例 7. 美しさとユーザビリティ 背景
【小ネタ】theme-colorタグでAndroidのChromeのタブ色を変える
ここ最近、いろんなWebサイトを見ています。いつにも増して見ています。手元にiPhoneとNexus6を置いているので、それらも駆使して見ています。 そんな中、AndroidのChromeで閲覧していると、アドレスバーが通常と異なる色になるサイトがいくつかありました。どうしても試してみたくなったので、実際にやってみたのが以下の画像です。 タブ選択する時はアイコン周りにも色とアイコンが付きます。 今回は、小ネタとして、この設定方法を紹介します。 Google Developpersに設定方法が記載されており、これを参考にさせていただきました。 参考サイト: Support for theme-color in Chrome 39 for Android 対応環境Android用 Chromeのバージョン 39以降Android バージョン5(Lolipop)以降※iOSのsafariとChr
2色の相性を簡単にチェックできるカラーツール「Pigment」
デザインで色を決めるという行為は非常に重要なもの。選択や組み合わせをミスしてしまうと、思ったようなデザインに仕上げることができません。今回はそんなカラー選定の際にぜひ役立てたい「Pigment」を紹介したいと思います。 2色の相性を簡単にチェックできるカラーツールです。 詳しくは以下 非常に豊富なカラーサンプルが準備されており、気になったカラーをクリックするとカラーを拡大して見ることができます。DIC、PANTONE、RGBのカラーナンバーも明記されており、そのまま色を再現したり指示するのに便利。また、2色がグラデーションになった際のサンプルや、流行のデュオトーンを取り入れた際のイメージをチェックできたりと、カラー選定＋αの要素が準備されているのも嬉しいポイントです。他、スウォッチ共有用.ase形式などのダウンロードも可能。 オンラインで手軽に色をチェックでき、さらにクリエイティブな想像を
色覚異常補正レンズを買った
私は先天性の色覚異常である（wiki先生によると色覚多様性という言い方もあるらしい）。 もっとも、「最後の赤と緑、赤い方を切れ！そうすれば爆発を回避できる！」……みたいな経験もないので、仕事や日常生活にはさほど困ってはいない。 ただ、興味本位と日常の些細な問題（靴下の色を取り違える、焼けてない肉を食べそうになる etc.）から、先日、色覚補正用レンズを購入した。 色覚異常を持つ人は男性で約5%の割合でいるそうだ。強弱はともあれ、佐藤・鈴木・高橋姓を足した人数くらい、先天的にその特性を持っているはずである。 まぁ、日常生活で気付くことはまず無理だし、赤の他人から指摘するのも（たぶん）躊躇われるし、で同様に困ってる人にはまだリアルで遭遇していない。 自身の場合は母方祖父がそうだったため、家族からの指摘で比較的早い段階で気付くことが出来た。 早い段階で気付けたことと、見分けのつきにくい色もバンバ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
8.24. 色交換...
指定したWebページから、PhotoshopやSketchのカラーパレットを生成できるChromeの機能拡張 -Site Palette
最近見つけた素敵なデザイン書、色への造詣が深まるデザイナーやイラストレーター向けのかわいい豆本 -色の辞典
Webデザイン・紙デザイン用のナチュラルなカラーの組み合わせを見つけることができるオンラインツール -Pigment
フラットなUIデザイン用に作成された、世界各国の有名デザイナーが使用しているカラーパレットのまとめ
