Webデザイナーはチェックしておきたい、最近のUIデザインで注目されているカラーのまとめ（スウォッチ付き）
有名ブランドで採用されているカラーをはじめ、Material DesignやiOS 8で採用されている落ち着いたパステル、同一色相の美しいグラデーションなど。 最近注目されているカラーをまとめたPhotoshopのスウォッチを紹介します。Illustrator用のもいくつかあります。 Color palette -Material Design 2015年、多くのWebデザイナーが注目しているMaterial Designで使用されているPhotoshopとIllsutrator用のスウォッチファイル。フラットなカラーと同一色相のグラデが特徴的です。
あのドレスはなぜ色が変わる？ ついに科学で判明
あのドレスはなぜ色が変わる？ ついに科学で判明2015.03.05 18:0025,284 satomi 白金と青黒で意見が真っ二つだった例の糞忌々しいドレス。実物は青黒とわかってからも、写真では未だに白金に見える派と青黒に見える派で真っ二つで、ついには｢見てる目の前で色が変わる｣症状を訴える人まで出ているようなので、一応、視覚の専門家の所見を補足しておきますね。 フォトショップ解析 Deadspinが行なったフォトショップ解析では、写真のドレスの色は青黒茶（大訂正！）とわかっています。が、面白いことに、色を反転させると…。 This is the dress on the left and inverted on the right #whiteandgoldpic.twitter.com/ZSAIntJotH — Professor Chris (@DesignedByTitan) F
CSSで泥沼にはまらない3つのアプローチ｜『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント
注釈 60分のセミナー用のスライドです 60分間ひたすらしゃべるための資料なので、目次はありません セミナーのフォローアップのために公開しています 文字が大きいのは、会場の後ろの席でも見えるようにするためです Cascading Style Sheets .header { margin: 8px; color: #f00; } マジックナンバーの良くない例 .main { float: left; width: 640px; } .main h1 { width: 640px; } .main p { width: 640px; } .main ul li { width: 620px; margin-left: 20px; } 数値が乱立 .aaa { width: 640px; } .bbb { width: 324px; } .ccc { width: 216px; } .ddd
「あなたに見えたのは白×金のドレス？青×黒のドレス？」世界中を巻き込んだドレス騒動を科学的に検証する｜カラパイア
知っている人は多いと思うが、ある1着のドレス写真をめぐって、世界中が沸きに沸いていた。それは日本にも飛び火しており、様々なサイトで見かけた人も多いだろう。 上に写っているドレスなのだが、「白と金」に見える人、「青と黒」に見える人が二分化したのだ。それではまずみんなの意見から聞いていくことにしよう。 この画像を大きなサイズで見る このドレス、「白と金」に見える？それとも「青と黒」に見える？ SNSや海外サイトでは「白×金」派と、「青×黒」派に分かれていた。 なぜ人によって見え方が違うのだろう？どちらも一歩も譲ることのないこの議論は、実は、純粋な生物学的な問題であり、人間の目と脳が日光に照らされた世界の色を認識するために辿った進化に起因しているのだ。 脳の視覚系のバイアスによるもの 光は水晶体を通して目に入ってくる。このとき、波長の違いが色の違いとなって現れる。光が眼球の後ろにある網膜に当たる
Googleのマテリアルデザインで使える色が並び、クリック一発でカラーコードのコピーも可能な「Material UI Colors」
Googleが提供しているモバイルOS「Android」の最新バージョン「Android - 5.0 Lollipop」にも採用されている、新しいUX体系が「マテリアルデザイン」です。マテリアルデザインの発表後、Googleは自社サービスに続々とマテリアルデザインを採用しており、サードパーティ製のアプリなどでもこれを採用したものが次々と登場しています。そんなマテリアルデザインでは使用可能な色が指定されているのですが、これで使えるカラーを並べたカラーパレットを表示してくれ、使用したいカラーをクリックすればそのカラーコードが一発でコピーできてしまうというウェブサイトが「Material UI Colors」です。 Material UI | Material Design | Material UI Colors http://www.materialui.co/ 「Material UI C
Googleも注目：ビジネスにおける「色」の重要性 | ライフハッカー・ジャパン
ビジネスの世界では、仕事環境からマーケティング、ブランディングにいたるあらゆることに、色が大きな影響を与えています。Googleは、そうした色の威力を研究している米国の主要企業のひとつです。 消費者が見るのは「色」 Googleの企業広報マネージャーを務めるMeghan Casserly氏によれば、研究はまだ初期段階ではあるものの、すでに「労働環境における色と満足度の明確な関連性」が明らかになっていて、それを利用すれば、従業員の創造性と生産性を高めることもできるのだそうです。 ニューオーリンズ大学のマーケティング学助教、Elyria Kemp氏によれば、時間や注目の奪い合いがこれまでになく激しくなっている現代では、色が「もの言わぬセールスパーソン」なのだとか。 「私たちを取り巻く環境には、あまりにも多くの刺激が存在しています。だからこそ、特定の色をはっきりと目立たせることがとても大切なので
画像の色から背景色を決定！jquery.adaptive-backgrounds.js
「jquery.adaptive-backgrounds.js」は、指定した画像のドミナントカラーを抽出し、親要素の背景色として適用するjQueryプラグインです。 ドミナントカラーとは配色全体の印象を支配する色のことで、主調色とも呼ばれます。ドミナントカラーを背景に使う手法で有名なのはiTunesですね。下記の画像を見てわかる通り、CDジャケットのドミナントカラーを背景色に指定することで、アルバムの印象を視覚的により強めることができます。 jquery.adaptive-backgrounds.jsプラグインはCanvas 要素を使うので、Google ChromeなどのモダンブラウザーとInternet Explorer 9以降、スマートフォンではiOS 7.1のSafari、Android 4以降の「ブラウザ」に対応しています。 ライセンスはMITです。ライセンスに従って著作権表示は
ユーザーが何色を求めているかをまとめた -Color of the Year 2010
感情をあらわしたキーワードとカラー、国ごとの色合い、月ごと・曜日ごと・時間ごとの色合いなど、2010年のカラーをまとめたインフォグラフィックを紹介します。 Color of the Year 2010: By The People [ad#ad-2] 「Color of the Year 2010」は、世界137ヵ国1,088人の人々を対象に2010年のカラーについて調査を行ったもので、カラーの流行について具体化したインフォグラフィックとなっています。
おしゃれな配色パターンが見つかるサイト+アプリ10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先日、個人でやっているサイトをリニューアルしていたのですが、想像以上に色の組み合わせについて悩んでしまいました。 デザインの知識が皆無の私にはハードルが高すぎたようで、文字、リンク、バナー、背景などの色をベタベタ触っていたら、数時間後にはヘドロのような色彩美のサイトが誕生しました。絶望です。 そこで今回は、私のような素人でも参考になる配色見本サイトについて、用途別にまとめてみました。 「わからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！ ベースとなるカラーを設定したい 1． 原色大辞典 https://www.colordic.org/ いつも参考に
次々とセンスある配色パターンを提案してくれるサイト「Coolors」 | ライフハッカー・ジャパン
必要なのはノート1冊。時間管理&マインドフルネスが同時にできる「インタースティシャル・ジャーナリング」
美術専門学校講師による「配色・色彩・彩度明度」の基本 - 2014/11/14 [Schoo]
本記事ではデザイン・アートの基本中の基本、「配色・色彩・彩度明度」という色にまつわる基礎知識をスクーの授業を元にご紹介。中学校の美術の時間に少し取り組んだくらいで、美術系の大学や専門学校に通っていないと触れる機会がない色についての知識。情報を正しく伝達するデザインをするために、誰もが知っておきたい理論ありきの配色選びを東洋美術学校の授業、『明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】』から学んでいきます！ ■目次 1.配色ってなに？ 2.色相、色相環ってなに？ 3.明度ってなに？ 4.彩度ってなに？ 1. 配色ってなに？ ”種々の色を取り合わせること。色のとり合わせ。”(wikipedia「配色」より引用） 色相・明度・彩度という色の三属性、モノサシを調整し、然るべきところに置くこと。 デザインや、イラストレーションに取り組むときに専門知識があると拠り所になりそうで
![美術専門学校講師による「配色・色彩・彩度明度」の基本 - 2014/11/14 [Schoo]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f872d92f2d2ec05a85011ccc9d4ac49a293e06e7/height=288;version=1;width=512/http%3A%2F%2Fs3-ap-northeast-1.amazonaws.com%2Fi.schoo%2Fimages%2Farticle%2Fdesign%2Fwdkj11_1.jpg)
配色に悩んだ時に役立つ便利なサイトやカラー関連ツールまとめ - NxWorld
「いつも同じような感じになってしまう」「このキーカラーに対してどんなアクセントカラーが合うのか」といったデザイン（配色）時の悩みを手助けしてくれるものやインスピレーションをもらえるもの、オリジナルのカラーパレットを簡単に作成・出力できるなど、配色・カラーに関連する便利なサイトやツールのまとめです。 似たようなサイトも多いですが、使いやすさ・見やすさ・情報量などの点でそれぞれ違いがあるので、こういったツールをお探しの方はひと通り試して自分に合ったものを見つけてみてください。 December 22, 2014 追記 「Material Design Color Palette Generator - Material Palette」「Material UI | Material UI Colors」「flatuicolorpicker : Best Flat Colors For UI D
[CSS]ウェブページで手軽にアニメーションが楽しめる -CSS Transitions
CSS3でアニメーションを実装するTransitionsをウェブページで効果的に使用するためのチュートリアルをWeb Designer Depotから紹介します。 CSS Transitions 101 TransitionsはSafariやChrome上で動作するCSS3のアニメーション機能で、JavaScriptやFlashを使用せずにウェブページに実装することができます。 ※Firefoxでも将来的にはサポートされる予定です。 チュートリアルでは3つのデモが掲載されています。 ※Safari, Chromeでご覧ください。
きれいに調和した色彩のカラーパレットを誰でもすぐ簡単に自動生成できる「Coolors」
ウェブデザインやアプリのUIを作成する際にどのような色を選んで組み合わせるべきなのかは非常に重要ですが、だからといってプロのデザイナーに頼むほどではない、というときに実践的な組み合わせのカラーパレットをスペースバーを押していくだけで爆速自動生成してくれるのが「Coolors」です。 Coolors - The super fast color palettes generator! http://coolors.co/ 「Coolors」にアクセスすると、すでに自動生成されたカラーパレットが表示されています。 スペースキーを押すだけで次々とカラーパレットが生成されていくという超簡単操作。 表示もサクサクなので、ただ変えていくだけでもすぐに理想の組み合わせが見つかるかも。 また、カラーバーのどこかをクリックすると、バーの下側に「LOCKED」と表示されて固定することができます。 もう一度スペ
脱ダサピンク宣言ーその１ | Short Note
ShortNote は、体験談や思い出などを、 エッセイのような文章にして投稿したり、 みんなのエッセイを読める、サイトです。
すごい講演で有名な「TED」から学ぶ統計的に最高＆最低プレゼンの条件 - GIGAZINE
「広める価値のあるアイディアを」ということで主にテクノロジー・エンターテイメント・デザインの3ジャンルを扱う「TED」は公式サイト上で数々のスピーチ＆プレゼンムービーを日本語字幕付きで公開しています。非常に興味深いものからそうでないものまで、講演する人の実力は多岐にわたっているのですが、数多のプレゼンを統計学のアプローチから解析し、TEDにおける史上最高のプレゼンと史上最低のプレゼンの条件をプレゼンするというすさまじい講演がかなり秀逸です。 Lies, damned lies and statistics (about TEDTalks) | Video on TED.com http://www.ted.com/talks/lang/jpn/lies_damned_lies_and_statistics_about_tedtalks.html もし今TEDのホームページに行くと延べ1週間
やっぱり売れてない!? フォックスコンがiPhone 5cの生産を停止するとの噂が浮上
やっぱり売れてない!? フォックスコンがiPhone 5cの生産を停止するとの噂が浮上2013.11.18 17:30 塚本直樹 iPhone 5c、やっぱり売れ行き良くないのかな… 台湾の情報サイトDigiTimesは18日、フォックスコンが中国鄭州の工場でiPhone 5cの生産を停止する予定だとの情報を掲載しています。情報によると、同社はiPhone 5cに割り当てていた生産能力をiPhone 5sに割り振る予定とのこと。 iPhone 5cの製造にはフォックスコンと台湾ペガトロンの両社が参加しており、その製造請負比率は30%と70%であるとされています。そして、1ヶ月前にアップルはペガトロンに対して生産量の20%、フォックスコンに対しては生産量の3分の1を減少させる様に伝えたと報じられており、iPhone 5cの生産量は日に日に減少しているようです。 なお、フォックスコンはこの件に
[CSS]メール用のちょっとかわいいアニメーションを実装するスタイルシートのデモ
ホバーで封筒を開き、便箋を出し入れし、また封筒を閉じるアニメーションをスタイルシートで実装するデモを紹介します。 画像もスクリプトも一切無しです。 Animated letter ※デモはChrome, Safariがベストです。 封筒や手紙のイラストに画像は一切使用されてなく、封筒は変形やボックスシャドウ、便箋は疑似要素などで描かれています。 他にもいろいろとアレンジが出来そうですね。 HTML <div id="wrapper"> <div class="anvelopebg"></div> <div class="anvelope"></div> <div class="opener"></div> <div class="letter"></div> </div> CSS *{ margin: 0; padding: 0; } body{ background-color: #1a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
任意の2色を指定するとマテリアルデザインのパレットを作ってくれる『Material Palette』 | 100SHIKI
