少数色覚者にとって黄緑とオレンジは見分けづらい組み合わせの一つです。この記事のタイトル画像とかなかなか最悪です。 WEB、アプリや印刷物などのメディアではだいぶカラーユニバーサルデザインの考え方が浸透してきており、デザイナーも多様な色覚でも読み違えないように配慮してデザインすることが当たり前になってきていると思います。 Photoshopなどのグラフィックツールには簡単に少数色覚の見え方を確認できるプレビューモードがありますし、AdobeColorを使えば無料で少数色覚の人が混同しやすい色かどうかをすぐに確かめられます。https://color.adobe.com/ja/create/color-accessibility 少数色覚が見分けづらい色の組み合わせだと「-」が表示されるしかし、工業製品の世界では少数色覚にとって見分けづらい緑とオレンジの組み合わせのLEDインジケータ（表示）を

アクリル樹脂などに代表されるポリマーに規則的に亀裂を入れることで発色させる新たな印刷技術を開発したと、京都大物質－細胞統合システム拠点（iCeMS、アイセムス）のシバニア・イーサン教授（化学工学）らの研究グループが、20日付の英科学誌「ネイチャー」電子版に発表した。亀裂自体が模倣されにくく、高精密な印刷が可能で、紙幣や身分証明書の偽造防止印刷などへの応用が期待できるという。 アクリル樹脂などに代表されるポリマーに規則的に亀裂を入れることで発色させる新たな印刷技術を開発したと、京都大物質－細胞統合システム拠点（iCeMS、アイセムス）のシバニア・イーサン教授（化学工学）らの研究グループが、20日付の英科学誌「ネイチャー」電子版に発表した。亀裂自体が模倣されにくく、高精密な印刷が可能で、紙幣や身分証明書の偽造防止印刷などへの応用が期待できるという。 コガネムシの体表などにみられる鮮やかな色は「

指定したカラー、画像、Webページなどをベースに、カラーパレットを生成し、カスタマイズできる無料のオンラインツールを紹介します。 カラーパレットは、Webサイトやスマホアプリに特化されており、コンテンツに使用されるさまざまな要素への適用、アクセシブルなカラーの組み合わせなどが生成されます。 Color Color -GitHub Colorでは、さまざまなリソースを元にカラーパレットを生成し、カスタマイズできます。 既存のWebページをベースに 指定したカラーをベースに カラーボックスをベースに 画像をベースに JSONをベースに 生成したカラーパレットは、CSS, Sass, JSONなどに書き出すことができ、色の名前なども分かります。 まずは、2019年のトレンドカラー「Living Coral」をベースに作成してみました。

どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ

色盲や色弱の人がどのように見えているかシミュレートできるオンラインサービスはいつかありますが、テストサーバーやローカルで利用できないのが残念なところです。 色盲・色弱の人の見え方をシミュレートできるChromeの機能拡張を紹介します。

TOP  >  Design , WebDesign , WebService  >  トレンドの配色をカラーコード付きで参照できる「Trendy Palettes」 デザインの印象を決定付ける、重要な要素の一つに配色があります。色の組み合わせは思っている以上に難しく、いつも同じような配色になってしまう、または配色自体が思いつかないと色で悩んでいる方も多いと思います。今回紹介するのはトレンドの配色をカラーコード付きで参照できるWEBサイト「Trendy Palettes」です。 基本的には三色の組み合わせパターンが登録されており、色の組み合わせとそれぞれのカラーのカラーコードを参照することが可能です。 詳しくは以下 「Trendy Palettes」では、Trendy、popular、Randomと様々な形でカラーパレットを参照することができ、個別ページではカラーコードを参照できる他、PN

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

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

Webページやアプリに外部スクリプトと数行のコードだけで、使いやすいカラーピッカーを簡単に実装できる超軽量のスクリプトを紹介します。 レスポンシブに完全対応しており、デスクトップのマウス操作でもスマホのタッチ操作にも対応しています。 他のスクリプトやスタイルシートに依存はなく、React、Vue、Angular、jQueryなどと一緒に利用することもできます。また、Bootstrap、MaterializeなどのCSSフレームワークへの互換性もあり、幅広く利用できます。 カラーピッカーの使い方は、簡単 HEX, RGBa, CMYK, HSLa, HSVaをサポート jQueryなどの他スクリプトへの依存は無し Bootstrap, MaterializeなどのCSSフレームワークへの互換性 複数の色表現 色の比較 不透明度のコントロール タッチデバイスをサポート Nodejsのサポート

UIのデザインやデータのビジュアライズに使用するカラーを決めるのに適したオンラインツールを紹介します。ベースカラーを決めるだけで、そのカラーに調和したフルスペクトルのカラーパレットが簡単に作成できます。 例えばグレーはよく使用されるカラーですが、選ぶのが難しいカラーです。ブルーに合ったグレー、グリーンに合ったグレー、さらにその中から可読性が充分な明るいグレーや暗いグレーなども自動的に生成されます。

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

指定したWebページから、使用されているカラーを抽出し、カラーパレットを生成するChromeの機能拡張を紹介します。 Photoshop, Illustrator, Sketch用のスウォッチも作成できるので、かなり便利です。

色にはたくさんの美しい色があり、そして美しい色名があり、そのひとつひとつが宝石のように輝いています。 日常的に見かける色たち、慣用的に使用されている色たち、古から伝える日本や欧米諸国の伝統色など、367色の由来や成り立ちや色見本がフルカラーのイラストとともにまとめられた、手のひらサイズのかわいい豆本を紹介します。 画像では分からないと思いますが、本書は「色鉛筆の箱」を模して作られており、非常にかわいい仕上がりです。色鉛筆が見えている箇所は、クラフト紙の窓になっています。 背表紙にもこだわりが感じられ、表紙だけでも飾っておきたくなる一冊です。大きさは私の手のひらと同じくらい。

ここ最近、いろんな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

デザインで色を決めるという行為は非常に重要なもの。選択や組み合わせをミスしてしまうと、思ったようなデザインに仕上げることができません。今回はそんなカラー選定の際にぜひ役立てたい「Pigment」を紹介したいと思います。 2色の相性を簡単にチェックできるカラーツールです。 詳しくは以下 非常に豊富なカラーサンプルが準備されており、気になったカラーをクリックするとカラーを拡大して見ることができます。DIC、PANTONE、RGBのカラーナンバーも明記されており、そのまま色を再現したり指示するのに便利。また、2色がグラデーションになった際のサンプルや、流行のデュオトーンを取り入れた際のイメージをチェックできたりと、カラー選定＋αの要素が準備されているのも嬉しいポイントです。他、スウォッチ共有用.ase形式などのダウンロードも可能。 オンラインで手軽に色をチェックでき、さらにクリエイティブな想像を

カラーの組み合わせを数学的に見つけるのではなく、顔料と光量に基づいてナチュラルなカラーの組み合わせを見つけることができるオンラインツールを紹介します。 色をベースにしたり、写真をベースにして、簡単なクリック操作でWebデザイン・紙デザイン用のカラーの組み合わせを作り出すことができます。 Pigment Pigmentは登録などの面倒なことは一切不要で、すべての機能を利用できます。 まずは、左側からPigment（顔料）とLightning（光量）を調整します。

Flat UI Colorsがバージョンアップし、世界各国の有名デザイナーと協力して作成されたフラットなUIデザインに合うカラーパレットを紹介します。 Flat UI Colors 2 カラーパレットはFlat UI Color本家のを含めて、全部で14種類、トータルで280色のカラーがまとめられています。カラーはコピペで簡単に取得することができ、すぐにデザインやプロジェクト、プレゼンに利用できます。 まずは、本家のカラーパレットから。

私は先天性の色覚異常である（wiki先生によると色覚多様性という言い方もあるらしい）。 もっとも、「最後の赤と緑、赤い方を切れ！そうすれば爆発を回避できる！」……みたいな経験もないので、仕事や日常生活にはさほど困ってはいない。 ただ、興味本位と日常の些細な問題（靴下の色を取り違える、焼けてない肉を食べそうになる etc.）から、先日、色覚補正用レンズを購入した。 色覚異常を持つ人は男性で約5%の割合でいるそうだ。強弱はともあれ、佐藤・鈴木・高橋姓を足した人数くらい、先天的にその特性を持っているはずである。 まぁ、日常生活で気付くことはまず無理だし、赤の他人から指摘するのも（たぶん）躊躇われるし、で同様に困ってる人にはまだリアルで遭遇していない。 自身の場合は母方祖父がそうだったため、家族からの指摘で比較的早い段階で気付くことが出来た。 早い段階で気付けたことと、見分けのつきにくい色もバンバ