色や柄の心理効果を身に着けて、ビジネスに生かす５つの活用術 | ライフハッカー・ジャパン
街で見かけるカフェや家電量販店、病院にも色彩戦略があった 晴香さん：まず、人は色によってどのような影響を受けているのか、基本を抑えるために、3つの作用と活用事例をご紹介します。 1. 記憶や認知を高める心理的作用 たとえば、赤信号や消防車はもとより、家電量販店や企業のロゴマークに、赤色が多く用いられているのをご存知ですか。これは「赤」の特性である、インパクトが強く、記憶に残りやすい心理的作用を上手に活用しているからです。 街中で量販店がどこにあるか、どの会社のCMだったのか、簡単に理解して覚えてもらえる効果があるわけです。 2. 交感神経などに影響を与える生理的作用 私たちは、部屋の色によって交感神経系に刺激を与え、心拍数や血圧、感じる時間の速さ、気分も変わります。たとえば、赤やオレンジなど暖色系の部屋にいると血圧や心拍数が上がり、汗もかくので、実際の時間より長く滞在している感覚になります
色のコントラストチェッカー | 文字色と背景色の組み合わせを確認
通常文字(22px未満)は、4.5 以上でAA、 7 以上でAAAです。 巨大文字(22px以上)は、3 以上でAA、 4.5 以上でAAAです。 太文字(14px以上)は、3 以上でAA、 4.5 以上でAAAです。 Web Content Accessibility Guidelines (WCAG) 2.0Web Content Accessibility Guidelines (WCAG) 2.0とは、ウェブコンテンツをよりアクセシブルにするための一定の基準を設けたガイドラインで、従うことで人々にとって利用しやすいウェブサイトとなります。達成レベルとして、AA(達成)、AAA(高いレベルで達成)があります。その中で、色のコントラスト比は次のように定められています。 文字の種類AAAAA通常文字 (22px未満)
box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company
CSSだけでドット絵（Pixel Art）を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。 ちなみに下図のようなドット絵がつくれる。 マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJavaScriptは使っていない。 box-shadowプロパティについて ドット絵を描くためには、CSSのbox-shadowプロパティを使う。 そもそもbox-shadowプロパティは、要素にドロップシャドウ効果（影をつける）を与えるのが本来の使い方なので、まずは基本的な使い方からまとめる。 いくつかの構文がある。 box-shadow: offset-x offset-y color box-shadow: offset-x offset-y blur-rad
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デザインでも最近は、同一色相でトーンに変化をつけた色の組み合わせを使用するデザインが増えてきました。単に明るい・暗いの明度だけでなく、彩度や色相を段階的に変化させてカラーパレットを作成できるオンラインツールを紹介します。
Pigment by ShapeFactory | Simple Color Palette Generator
A unique way to generate fresh and vibrant colors based on lighting and pigment, instead of math. Find a beautiful, free color palette in seconds to kick off your next project.
テキストの読みやすいカラーを決めるにはこれが大切！Webデザインにおける良いコントラストのつくり方
読みやすい本文テキストのカラー、分かりやすいリンクのカラー、目立たせたいボタンのカラーなど、Webデザインのカラーを決める時にもう一歩進めた良いコントラストのつくり方を紹介します。 Webデザインでカラーパレットを作成する時、カラーの組み合わせをコントラストのためにテストしていますか？ テストをしてないのであれば、あなたのデザインはリーダビリティを考慮せず、潜在的なビジターを失っているかもしれません。 私はこれまでに数多くのプロジェクトでカラーコントラストとリーダビリティについて取り組んできました。いくつかの有用なカラーコントラストのアクセシビリティツールのおかげで、私は仕事をすることができ、それを多くの人たちと共有したい思います。 私はアクセシビリティの専門家ではありません。私の目指すところはシンプルで、最適な読みやすさを念頭においてカラーを選ぶことです。完全な説明が必要であれば、W3C
【配色 - デザイン ★★★★★】 - Color Scheme Designer 3
Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades. Various preview sty
Webデザインの配色に役立つ！色彩について学べるサービス・ツール12選まとめ｜SUKIMANO
Webデザインをしているときに、配色に詰まって作業がはかどらないということは多々あるのではないでしょうか。 そんなときは、自動で配色パターンを生成してくれるサービスやツールに頼ってみましょう。 そこで今回は、Webデザインの配色に役立つ12個のツールをピックアップして紹介します。 1. Adobe Color CC https://color.adobe.com/ja/ 「 Adobe Color CC 」はAdobeが無料で提供している配色ツールで、元々は「Kuler」という名称で提供されていました。 「類似色」「モノクロマティック」「トライアド」など6種類のカラールールが用意されており、色彩と明度を好みで調整可能となっています。 さらに、画像をアップロードすると色を抽出して配色パターンを作成するという機能も備わっています。 納得いく配色パターンができないときは、「探索」のメニューからパ
配色が苦手な人に！写真やイラストに使用されているカラーから画像を引き立たせる美しいグラデーションをつくりだすスクリプト -Grade.js | コリス
<script src="path/to/grade.js"></script> <script type="text/javascript"> window.addEventListener('load', function(){ /* A NodeList of all your image containers (Or a single Node). The library will locate an <img /> within each container to create the gradient from. */ Grade(document.querySelectorAll('.gradient-wrap')) }) </script>
Color in Design Systems
I’m no color expert. Far from, actually. Throughout my career, I’ve depended on visual designers better than myself to produce an engaging palette and apply it harmoniously across a UI. Yet, as a systems designer, I’m often in the position to provoke and validate color decisions as a system takes shape. Here’s a 16 lessons I’ve learned while stabilizing a primary palette, tint and shade choices, s
How to Create Perfect Color Combinations - Designmodo
With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before. Free Email BuilderFree Email Templates Primary colors: Red, Yellow, blue Secondary colors: Green, purple, orange (mix of two primary colors) Tertiary colors: Azure, violet, rose, red-orange, char
カラーのセンスが磨ける！色彩感覚や色覚異常のチェックができるオンラインサイトのまとめ
ゲーム感覚で気楽に、色彩感覚や色覚異常のチェックができる無料オンラインサイトを紹介します。カラーのセンスが磨け、カラーを見極めるスキルがきっとアップします！
アプリのUIデザインと配色パターンまとめ（非デザイナー向け） - Qiita
はじめに 私は主にiOSアプリのプログラマーなのですが、デザインまで一緒に頼まれる事があります。 デザイナーじゃないので１からデザインをしていくなんて到底無理です。 そんな時にノンデザイナーの方でも良い物を作るために UIデザインのギャラリーサイトと配色パターンを決める便利なサイトをご紹介致します。 基本他のアプリを真似参考にするといい感じにできちゃうかもしれません。 Web系開発の方も配色パターン等は参考になると思います。 デザインをする前に デザインをする前に呼んでおいたほうがいい物 - ITエンジニアに易しいUI/UXデザイン - デザイナーに言われた「非デザイナーが気をつけるべきデザインの4原則」 - ノンデザイナーのための配色理論 アプリデザイン CAPPTIVATE.co 動きのあるカッコいいUIばっかり載っています。 種類別で見ることもできるので便利ですね。 Mobile D
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Picular - guitar
CodePen - How Many Steps Does It Take To Get From Me To You?
Web Colors
Accessible color palette builder
GitHub - viktorstrate/color-picker-plus: An Improved Color Picker for macOS
http://opencolor.tools/