文字や背景にピュアブラックを使ってはいけない理由
UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 デザインにピュアブラックを使うと可読性が低くなると知っていましたか？ 統計によると、「アメリカの成人の58％」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100％の明度であり、黒は0％の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を
この秋、デザインやファッションに使いたい10色 -2017年秋のトレンドカラー
そろそろ、そして既に秋の準備が始めている人も多いと思います。 秋をテーマにしたデザインやファッションに取り入れてみたい素敵なカラーをPantoneから紹介します。
ウェブデザイナーが配色に困らない、実践向き無料カラーツール14個まとめ
配色は、デザイナーが扱うツールキットの中でも強力なアイテムのひとつで、習得するのが難しいコンセプトでもあります。 可能な色の組み合わせは無数にありますが、ウェブサイトやアプリで使用する色を決めるときに悩んでしまうこともしばしば。 デザイン作業を簡単にする、配色カラーパレット作成に適した無料ツールをまとめてご紹介します。制作時間の短縮につながる実践的なツールの使い方を学びましょう。 【2021年版】もう配色デザインには迷わない！すごい無料カラーパレットツール83個まとめ コンテンツ目次 1. インスピレーションの見つけ方 2. 色彩配色の決め方 3. カラー・アクセシビリティ 01. インスピレーションの見つけ方 自然から デザインのアイデアやインスピレーションになるものは、すでに自分のまわりにたくさんあります。ぐるりと周囲を見回してみましょう。プリントデザイン、インテリア、ファッションなど
新しい配色トレンド「カラーブレンド」の効果的な使い方と参考サンプル例30個まとめ
ブラジルの国鳥であるオオハシのくちばしは、鮮やかで発色のよいマルチカラーとなっています。今回は、この色の組み合わせについて詳しくみていきましょう。グラデーションではありません。カラーブレンド（英: Color Blends）の世界へようこそ。 カラーブレンドって一体なに？ まずは以下のSlackロゴを見て見ましょう。 このロゴでは何色が使われているでしょう。4色ですか。いいえ違います、もっとよく見てみましょう。 ここでは、4つのベースカラーが重なり合っています。重なっているところには、新しい色「ブレンド（英: Blend）」が作成され、合計8色が使われています。カラーブレンドは、2つの重なり合う色を交差させることによって作成されます。 ある意味では、グラデーションの逆と言えるでしょう。グラデーションは２つのカラーが段階的に変化するのに対し、ブレンドは2つの異なる色の重なり方によって配色が変
プロのデザイナーが実践している、最近のWebデザインで見かけるカラーを効果的に使ったテクニックのまとめ
カラーはあらゆるデザインにおいて、非常に重要な要素の一つです。 プロのデザイナーはWebサイトやアプリで、さまざまなテクニックを用いています。 カラーのコントラスト、類似性、使用比率で、フォーカスポイントを作成したり、階層をつくりだすこともできます。最近のWebデザインで使われているカラーを効果的に用いたテクニックを紹介します。 5 techniques for fine-tuning UX with color 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. カラーの使用比率でフォーカスポイントを作成 02. カラーのコントラストで注意を引きつける 03. カラーを使用してUXのパターンを作成 04. カラーを使用して階層を作成 05. カラーの類似性を使ったテクニック まとめ 01. カラーの使用比率でフォーカスポイ
テキストの読みやすいカラーを決めるにはこれが大切！Webデザインにおける良いコントラストのつくり方
読みやすい本文テキストのカラー、分かりやすいリンクのカラー、目立たせたいボタンのカラーなど、Webデザインのカラーを決める時にもう一歩進めた良いコントラストのつくり方を紹介します。 Webデザインでカラーパレットを作成する時、カラーの組み合わせをコントラストのためにテストしていますか？ テストをしてないのであれば、あなたのデザインはリーダビリティを考慮せず、潜在的なビジターを失っているかもしれません。 私はこれまでに数多くのプロジェクトでカラーコントラストとリーダビリティについて取り組んできました。いくつかの有用なカラーコントラストのアクセシビリティツールのおかげで、私は仕事をすることができ、それを多くの人たちと共有したい思います。 私はアクセシビリティの専門家ではありません。私の目指すところはシンプルで、最適な読みやすさを念頭においてカラーを選ぶことです。完全な説明が必要であれば、W3C
その文字、薄すぎない？ デザインにおける灰色の明度は何%が最適か
UX Movementにおいて記者、編集長を務めます。明快で効果的なデザインに美点を見出し、利用者のために払う労力を惜しみません。 一言で灰色と言っても、明るいものもあれば暗いものもあり、実に様々なバリエーションがあります。Webサイトなどでは、いたるところでお目にかかることのできる色でもあります。濃い灰色は主に見出しや本文に、薄い灰色はメタデータ、分類名、説明文に多く使われます。これらの色合いのうち、最も乱用されるのは薄い灰色です。 薄い灰色の文字の問題点 文字色として薄すぎる灰色は可読性に問題を起こしかねません。灰色の文字を薄くしすぎてしまえば、読者が読むにあたって支障をきたすことになります。文字の明度によっては、薄い色の背景に混ざってしまうのです。この現象は、単語や文字をぼやけさせ、判読を困難にします。無理に判読を試みれば、目を傷めてしまうでしょう。 また、薄い灰色の文字は読者の誘導
デザインやイラストに取り入れたい！2016年のトレンドカラーはやさしい色、春の10色も素敵なカラーが揃ってる！
2016年、Pantoneがセレクションしたカラーは「Rose Quartz（ローズ クォーツ）」と「Serenity（セレニティ）」 2色のブレンドが選ばれたのは初めてです。 今回もダウンロード素材として、ローズ クォーツとセレニティを含む2016年 春のトレンドカラー10色のスウォッチを用意しました。 Pantone Color of the Year 2016 「Rose Quartz（ローズ クォーツ）」は淡い暖色系のバラ色で、思いやりと落ち着いた感じを伝える優しいトーンです。 「Serenity（セレニティ）」は頭上に広がる青空のようなブルーで、不穏な時でさえも休息やリラックスをもたらします。 この2色をブレンドすることで、平和への不安を和らげ、快適さと安らぎを与えます。
色弱のユーザーにもやさしいランディングページのデザイン | POSTD
私がバックエンドでいくつかの新機能を開発している間に、Fannyが我々のホームページの再デザインで非常にいい仕事をしてくれました。それ自体についてはまた別の記事で書くことにするのですが、それまでの合間に、我々のホームページの最初のバージョンに関するひとつの 逸話 をシェアしたいと思います。 Elokenzのホームページ(Ver.1) 私が最初にホームページをデザインしたとき、こういった仕事をどのように行うかという経験が本当に全くありませんでした。私は腕まくりをして、 Bootstrap を使って一からその制作を始めました。そのとき気に留めていたことは、 Oli Gardner が コンバージョンにフォーカスしたデザイン について述べた Unbounceの電子書籍 からのTipsだけでした。 そのため、ホームには気を散らしてしまうような要素を配置しないようにし、コントラストの高い2つのCal
BrandColors
Close Modal About BrandColors BrandColors was created by DesignBombs. The goal was to create a helpful reference for the brand color codes that are needed most often. It's been featured by Smashing Magazine, CSS-Tricks, Web Design Depot, Tuts+, and over 2 million pageviews. There are now over 600 brands with 1600 colors and the collection is always growing.
あのドレスはなぜ色が変わる？ ついに科学で判明
あのドレスはなぜ色が変わる？ ついに科学で判明2015.03.05 18:0024,083 satomi 白金と青黒で意見が真っ二つだった例の糞忌々しいドレス。実物は青黒とわかってからも、写真では未だに白金に見える派と青黒に見える派で真っ二つで、ついには｢見てる目の前で色が変わる｣症状を訴える人まで出ているようなので、一応、視覚の専門家の所見を補足しておきますね。 フォトショップ解析 Deadspinが行なったフォトショップ解析では、写真のドレスの色は青黒茶（大訂正！）とわかっています。が、面白いことに、色を反転させると…。 This is the dress on the left and inverted on the right #whiteandgoldpic.twitter.com/ZSAIntJotH — Professor Chris (@DesignedByTitan) F
Web上で最も強い力を持つ色は？
下の画像は有名なサーチエンジンからポルノサイトまで、あらゆるコンピューター関連の会社のロゴを色別にまとめたものです。 こうして見ると、同じカテゴリーのトップブランドは似た色のロゴを使う傾向にあるような気がします。紫のロゴが少ないのは何かわけがあってのことなのかな？ ランキングの上位2社はロゴにレインボーを採用していますね。 さて、何か傾向を発見できましたか？ [Colourlovers] Jesus Diaz（原文／あんね）
【データ】若者まるわかりクラスター：10人10色のワカモンたち（前編） | ウェブ電通報
「SNSめだちたがり」「自己プロデュースキャラ」、あなたのまわりにこんな若者はいませんか？ 電通ワカモンでは、日々若者たちとコミュニケーションを取りながら、定性的なアプローチで彼らの生活実態を探るとともに、定量的アプローチとして、さまざまなリサーチや分析を実施しています。 情報伝達メディアが急速に発達・多様化し、それに伴うコンテンツ・コミュニケーションのスタイルもまた多様化しています。それらを当たり前のこととして受け入れて成長してきた10～20代の若者の間では、従来の単なる「インフルエンサーからフォロワーへ」という情報伝達構造だけでは捉えきれない情報行動・コミュニケーション行動が起きていると推測されます。 今回、電通総研メディアイノベーションラボと共同で、15～29歳の若者の調査データを元に、メディア接触やインターネット検索などの情報接触・検索行動、クチコミやSNSなどでの情報共有・発信行
プログラマのためのカラーパレットツールを作りました - shoya.io
Paletta - HSV Color palette for every Programmer 背景 フラットデザインの台頭によって、昨今のアプリ/サービス開発において「色選び」が重要視されています。例えば上の写真は次のトイレの時刻を機械学習で予測するRestCastというアプリですが、「いい感じの青」を基調としたタイルを敷くことで、トイレというワードをニオワセないデザインに仕上がるよう心がけてつくりました。 デザイナー/プログラマーの皆さんは普段どうやって色を選んでいるのでしょうか。多くの場合、既存のカラーパレットをぽちぽち選択したり、#123456のようなカラーコードを調整するのではないかと思います。実は、この方法で「いい感じの色」を選ぶのは難しいのです。その理由を色の表現方法を踏まえて説明します。 混色系と顕色系 色を数値で表現する方法を表色系といいます。オストワルト表色系やマンセ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザイン・紙デザイン用のナチュラルなカラーの組み合わせを見つけることができるオンラインツール -Pigment
2色・3色・多色、色の組み合わせ方が分かる配色に便利なオンラインツールのまとめ
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
この秋、デザインやファッションに使いたい10色 -2015年秋のトレンドカラー
新着記事
【配色 - デザイン】 - Adobe Kuler