UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方
ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを解説します。 Darkmode by Dan Holick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダークモードのグレースケールを作成するのが難しいのは、なぜだと思いますか？ それは、人がカラーとコントラストを知覚する感じ方に関係があります 👇
プロダクトの「色」と向き合う「デザインとエンジニアリング」 | CyberAgent Developers Blog
UXエンジニアの谷です。 「クリエイターHangout」はデザイナー数名のグループで構成される社内のコミュニティです。（Hangoutについては過去の井上の記事をご覧ください。）定期的ににテーマを設けての勉強会や活動をおこなっているのですが、その機会に今回講師として参加させてもらいました。 ▼今期のHangoutのグループ Webフロントエンドエンジニアでもある私が講師を勤めたのは「デザインとエンジニアリング」です。今回はデザイナーとエンジニアのコミュニケーションにおいて、課題となる「色」を主題に「デザインシステム」のトピックを交えておこないました。 1. デザインシステムの定義とは 2. 第1回 色の棚卸し 3. 第2回 & 第3回 色の整理 4. 第4回 コントラストチェック 5. 色と名前を決めることの難しさ 6. デザインシステムはどこまで作り込むか デザインシステムの定義とは 「
UIデザイナーから学ぶ！今までのカラーシステムと一貫性を保ちつつ、ダークモードに対応する方法を解説
デザイナーに、構造化が求められる要件がここ数年で急増しています。また、スマホやデスクトップの両方のOSにダークモードが導入されたことで、新たなデザインの領域を増やす必要もあります。 今までのカラーシステムと一貫性を保ちつつ、ダークモードの新しい配色を簡単に適用できるようにするカラーシステムを作成する方法を紹介します。 Dark Mode — Working with Color Systems by Søren Clausen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 色に役割を割り当てる カテゴリ 1: 色合い カテゴリ 2: 背景 カテゴリ 3: 前景要素 その他の場合 色の割り当て ダークモードへの対応 Sketch用のカラーシステム 色に役割を割り当てる すべてのシステムがそうであるように、最も重要なことは根拠です
Webで使えるカラーネームと、そのカラーコード・RGB値一覧
2019年3月13日 CSS, 色彩 Webサイトを作るとき、通常色の指定にはカラーコードを記述しますが、決められた色名称を使うこともできます。色を自分で一から探すより、リストの中から選ぶ方がイメージにあう色が探しやすいよなぁ…という場面があったり、単純に色の名前からカラーコードやRGB値を知りたいということが時々あったので、一覧にまとめました。新たに加わった「rebeccapurple」も一覧に入れていますよ。 追記：カラーコードをRGB値に変換するツール作りました→「Quick HEX to RGB」 覚えやすい・使いやすい色 Webサイトの制作途中やテスト段階では、手軽に「とりあえず」色をつける…ということもあります。そんな時は短くてスペルの簡単な色名称を覚えておくと便利です。よくある「red」や「blue」だと彩度が高すぎて使いにくい、ということも。まずは私がよく使う、覚えやすく
カラー配色で迷わない！シーン別配色見本32パターン | Web制作会社スタイル
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
奈良時代の和風デザイン 日本伝統の和柄と和風配色 ｜ 枚方のホームページ制作｜和風デザイン専門店ひだちデザイン
奈良時代 デザインの特徴シルクロードの終着地点とも言われる奈良。 シルクロードは、ローマと中国の長安を結ぶ交易の道でしたが日本から大陸に渡った主に遣唐使などの留学生により文化、品物、知識がもたらされました。 このような影響もありシルクロードの影響を大いに受けたデザインが多いのがこの時代のデザインの特徴です。 今回は、このような奈良時代のデザインを『文様』『色』の観点から見ていきます。 奈良時代の配色奈良時代には多彩な品物・技術・知識が大陸よりもたらせれました。 色も例外ではなく、染め物などが入ると同時に様々な色も日本に入ってきました。 奈良時代の色を使った配色例（赤系）黄丹 #F47A55 胡粉色 #FFFFFC 緋色 #BA2636 纁 #E0815E 緋色 #BA2636 露草色 #71A4D9 茜色 #B7282E 白緑 #DAEAD0 胡粉色 #FFFFFC 奈良時代の色を使った配
配色が苦手な人でもプレビューを見ながら直感的に使える配色ツール5つ
2017年6月17日 Webデザイン, 便利ツール, 色彩 配色って奥が深いです。「この色いいな！」と思っても、実際にデザインに適用してみるとなんだかイメージと違ったり。このブログでも過去に「カテゴリー別配色アイデア100」という記事で配色例を紹介しましたが、その配色を見たときと使ってみたときとではまた異なる印象になるかもしれません。そこで今回はプレビュー画面で確認しながら配色を作成できるツールを集めてみました！ ↑私が10年以上利用している会計ソフト！ Color Tool – Material Design Color ToolはGoogleのマテリアルデザインの公式配色ツール。右側のパレットからPrimary（メインカラー）とSecondary（サブカラー）を選択すると、左側でプレビューできます。文字色も選べますよ。プレビュー画面は全部で6つ。 このWebサイトの面白いところは、作成
色に関するとりとめの無いメモ - 水底の血
はじめは、今月の21日（水）に開かれる第二回 W3C CSS Module 仕様書もくもく会@東京 - connpassでcss-color-3がテーマにされると言うことで、これに関してネットからの援護射撃（？）っぽいことをしようと思っていたのですが、ものの見事に仕様の範囲外な方向に達してしまいました。当初の目的という意味においては、たぶん何の役にも立ちませんが、色に関して少し調べたものについてごく簡単にメモをしておくことにします。 光、物体、感覚の3つの要素があって「色を見る」というものが成り立つといえる。 ヒトの感覚（視覚）は可視光線を知覚できる。紫外線や赤外線を知覚することはない。 ヒトの網膜には、錐体と呼ばれる視細胞が存在し、赤錐体・緑錐体・青錐体の3つが存在する。 3つの錐体は赤、緑、青の波長によく反応し、これが光の三原色に対応する。 光の三原色の加法混色により、さまざまな色を知
Free Fonts, Icon Sets and Inspiration for Cute Designs
Free Fonts, Icon Sets and Inspiration for Cute Designs 2014年9月24日 Font, Web Design I think female designers grew up with the sense to design cute and adorable style. However, it would be a bit difficult for male designers to design these style. No problem, you’ll create girlish designs using below fonts, illustrations and colour schemes! All of them below are free to use both personal and commerci
和風デザインWebサイトの制作ポイントや素材を実例とともにまとめました
2017年7月14日 Webデザイン, ダウンロード, 色彩 今月はじめに初めて箱根旅行で洗練された美しい温泉宿に宿泊して以来、「和」な雰囲気やデザインの素晴らしさに魅了されたManaです。伝統的な配色や配置、書体等、見ていて飽きの来ない魅力がありますよね！和風デザインには大きく分けて4つの特徴があります。それぞれの特徴を理解し、うまくデザインに反映していきましょう！ ↑私が10年以上利用している会計ソフト！ 1. 配色 「和風デザイン」と聞いて思いつくのはどんな色でしょうか？おそらくビビッドなピンクや透き通るような水色ではなく、わさびやからし、えんじのような、少しくすんだ色合いを思いつく人が多いかと思います。日本には伝統的な色や配色というものが存在し、それらを上手に使うことでグッと和の雰囲気漂うデザインに近づきます。 伝統色 日本の伝統色 和色大辞典では日本の伝統色をカラーコードとともに
次々とセンスある配色パターンを提案してくれるサイト「Coolors」 | ライフハッカー・ジャパン
PayPayカードのメリット・デメリット|怖いと言われる理由と評判レビュー。ゴールドと一般どっちがおすすめ?
最近のUIデザインで使われている同一色相のグラデーションなど、人気のあるカラーのまとめ | コリス
落ち着いたパステル系のカラー、同一色相の繊細で美しいグラデーションなど、Material Design, iOS 8, Modern UIなどやフラットなスタイルで使われている最近人気のあるカラーを紹介します。 PhotoshopやIllustrator用のスウォッチもダウンロードできますよ。
一つのカラーから配色セオリーに基づいてカラースキームを作りだす配色設計に役立つツールのまとめ
コーポレートカラーなど、一つのカラーをベースに配色セオリーからカラースキームを設計したり、同系色やグラデーションを作りだしたりできるオンラインツールを紹介します。 またカラーのストックを増やしたり、カラーをベースにしたムードボード作りに役立つツールもいくつか。 最初は、国産のツールから。 配色の見本帳 | キーカラーで選ぶ配色パターン 一つのカラーをベースに、さまざまな色の法則から配色パターンを表示します。 上は緑みの青（#0099CE）をベースにしたもの。キャプチャの他に、彩度や明度による配色、色相環による配色など、さまざまな配色を表示します。説明付きなのも嬉しいポイントです。
Web制作者、エンジニアに見てほしい！カラーコード・ソースコードまとめ15選 | nanapi [ナナピ]
はじめに (image by 写真AC) ただでさえ時間のかかるコーディングを少しでも楽にしたいと思ったことはありませんか？1語でも間違うと、全てがダメになってしまうので、コーディングやチェック自体は怠ることができませんが、それ以外の部分で楽できる部分は楽してしまいましょう。イメージに見合う色のコードや、よく使う基本的なソースコードはコピぺが便利です。今日は、プロアマ問わず、全てのエンジニア、Web制作者に見てもらいたいカラーコードとソースコードサイトをまとめてご紹介します。 カラーコード 200を超す色のコードを全て覚えるのは不可能ですが、本を手繰るのも時間がかかりますよね。というわけで、一目でわかるカラーコードのサイトをまとめてみました。それぞれ少しずつ性格が違うので、その時々、レベルに応じて使い分けてみてください。 シンプルに最低限のカラーコードが知りたい時 色の種類が多くなく、余分
![Web制作者、エンジニアに見てほしい！カラーコード・ソースコードまとめ15選 | nanapi [ナナピ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/54ab40140017c7a63e27a7f2c0696c417ef1ef98/height=288;version=1;width=512/http%3A%2F%2Fp.cdnanapi.com%2Fe%2Fc632769.r69.cf2.rackcdn.com%2Fythcc.jpg%3Fsize%3D195)
フラットなデザインの配色に悩んだときに使えるツールや参考になるサイト
フラットデザインは配色が重要といわれています。カラフルなものやレトロなものなどありますが、どれも独特の色使いです。 で、今回はそのサイトがどのような色を使っているのか確認する方法を紹介します。この方法で色んなサイトの配色を見ていくと非常に勉強になると思います。 CSS Prism by Ryan Berg 使い方は簡単。CSSのアドレスを入力するだけです。 CSSから色を抜き出すので画像に使われている色は出てきません。最近はWebフォントを使うなどして画像の数を抑えようとする傾向にありますので、CSSで使われている色を見ればサイトのイメージをつかむことができると思います。 わざわざCSSのアドレスを確認するのは面倒だという方のためにブックマークレットもあります。下の画像のように「CSS PRISM」と書かれた部分をドラッグして、ブックマーク（お気に入り）に保存します。 で、確認したいページ
Webサービスのイメージカラーを無作為に調べてみた｜インターネット界隈の事を調べるお
昨日、LINEのカンファレンスに行ってきたのですが、ぼんやりと「緑色を見るとLINEって感じだよなぁ」と思いました。これまで緑といえばあの渋谷の会社を連想してたのですが・・・。 他にも、色の組み合わせだけで特定のWebサービスを連想することができるものはあります。クリムゾンレッドだったら楽天とか。そんなわけで、Webサービスのイメージカラー（使用されている色）を調べてみました。なんだかオーラソーマ・カラーみたいです。 サービスはジャンル別に思いついたものを次々と取り上げた感じですので、脈絡がない箇所もあるかもしれません。色はスクリーンショットからのスポイトという地味な作業により調べております。 1、2行目はEC関連ですが、比較的暖色系も使われており、女性を意識したものも多いのかなって。逆に3行目はお堅いサービスなので青系が多い。以外なのがSNSも青系が多いんですね。3行目と4行目は配色が似
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Material Design
in the looop | Looops communications
http://handywebdesign.net/2013/12/slide-share-about-color/
http://handywebdesign.net/2013/09/how-do-you-find-better-color-without-a-tool/
