「配色アイデア手帖」が控えめに言って神過ぎた
昨日、某蔦屋書店に行き出会って４秒で購入した本をご紹介します。 配色アイデア手帖 本のタイトルの通り「よくある配色アイデアがいっぱい載っている本」だと思って頂いても構わないのですが、とりあえず私が実際に購入までに至ったお気に入りの点を聞いてください。 127セット×25パターン=色見本3175選 本書は「Recipe（レシピ）」という名目で1レシピで9色ずつ使った配色アイデアが紹介されています。 CMYK、RGB、カラーコード レシピに使われる9色はそれぞれ名前と簡単な色のイメージ解説つき。 さらにDTPデザイナーにもWEBデザイナーにも嬉しいCMYK、RGB、カラーコードもしっかりと掲載されています。 豊富な配色例 1レシピには9つの色とその9色を使った配色例が25パターン載っています。 2色配色 2色配色が9パターン。 ちょっとした背景素材のパターンをつくる時なんかに良さそうですね。
色の組み合わせチェック - 読みやすい前景色と背景色
誰にも読みやすいコンテンツとするためには、文字色と背景色のコントラストをしっかり確保しなければなりません。これを客観的にチェックするため、色の明るさの差などを計算する仕組みを用意してみました。 色の組み合わせ検証 テストの手法 コントラストの計算 色覚偏位のシミュレーション 当サイトが独自に加えたコントラストの段階評価 コントラストと読みやすさの相関関係 色の組み合わせ検証 検証してみたい文字色と背景色の組み合わせを入力してみてください。色の指定には3桁もしくは6桁の16進数カラーコード、あるいは色名（CSS2の色名＋SVGの色名、計147色）およびrgb()の表現が使えます（初期値は、読みにくい例が入っています）。また、入力欄左ボックスから216色のパレットを呼び出して入力することもできます。文字色2、3は、複数の文字色の組み合わせを表示するためのオプションで、コントラストなどの計算は行
Colorable
ContrastContrast is the difference in luminance or color that makes an object (or its representation in an image or display) distinguishable. In visual perception of the real world, contrast is determined by the difference in the color and brightness of the object and other objects within the same field of view. Because the human visual system is more sensitive to contrast than absolute luminance,
メインカラーとアクセントカラーを、 簡単にセンス良くまとめる方法
パワーポイントデザインで失敗しないために、これだけはおさえておきたい「色の知識」では、簡単な色の知識や、配色するときのポイントなどについて説明させていただきました。この記事では、PowerPointで使う色を実際に選んでみたいと思います。前の記事を読んでいない方は、まずそちらをご覧いただいたほうが、より効果的にこの記事の内容を理解、実践できると思います。 ノンデザイナーの人たちが、いきなり色を選んで組み合わせまで考えるなんて、難しいのは当たり前ですよね。この記事を書いている僕も別にデザイナーじゃないので、色選びはあまり得意とは言えません。しかし、世の中にはたくさんの便利なWebサイトやツールであふれています。なので、まずは全面的にそれらに頼ってみましょう。
Webサービスの配色をどう決めるか
ご無沙汰しております、大堀です。 いつかきっと役に立つと信じて先週末はウイスキー検定を受験してきました。 第一回目ということなので、これで受かれば国内初の【公認】ウイスキーに詳しいUIデザイナー です。 ウイスキー関連のお仕事お待ちしております。 さてタイトルにも書いた通り、今回はWebサービスの配色の決め方について書いてみたいと思います。 仕事柄、新規サービスの配色を決める場によく立ち会います。 すぐに決まることは稀で、デザインラフを制作して実際に見てみないと…なんてこともよくあります。 それでも最後に決める瞬間はやってきます。今回は「なんでその色にするのか」をきちんと理解し、皆が納得できる決定をするために考えなければいけないことは何でしょうか。 ただ先に結論を言えば、配色に唯一の正解なんてありません。笑 ＊＊＊ まず漠然と”配色”と言っていますが、色について語る前に、 ・色は単独では存
pltts.me - pltts リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
GoogleのUI Color Palette を色覚障がいの視点から見てみた｜くろひつじのメモ帳
Google I/O 2014で発表された Google Design のガイドライン。 UI Color Palette も提案されていていいなーと思って見ていたら、ブコメで「（トップのメニューが）ピンクと青緑の縦並びは、色弱の人には判別困難かも。」とあって、ちょっとその視点で見てみよう、と試してみました。 色覚障がいとカラーユニバーサルデザインについて 「色覚障害」「色覚異常」「色盲」「色弱」など色んな言われ方がありますが、一般的な人と色の見え方が異なる障がいです。 赤色が黒っぽく見えたり、緑が黄色っぽく見えたり。 この障がいにも種類があって、３タイプあり、赤が分かりづらいP型、緑が分かりづらいD型、青が分かりづらいT型があります。 色覚障がいでもっとも割合が多いのがD型だそうです。 こういった色覚障がいの人達でも判別がしやすい色を使いましょう、というガイドラインが、カラーユニバーサル
PhotoshopのCMYK変換設定のキモ、プロファイル、マッチング方法、ほかを「10分で」簡単に説明してみた（154回バンフーセミナーフォローアップ）
PhotoshopのCMYK変換設定のキモ、プロファイル、マッチング方法、ほかを「10分で」簡単に説明してみた（154回バンフーセミナーフォローアップ） 3/18のバンフーセミナーで10分だけお話してきましたよ。 【株式会社 帆風】第154回バンフーセミナー 第154回バンフーセミナー（InDesign）が3月18日に開催 – DTP Transit（InDesign, セミナー, イベント, 展示会, バンフーセミナー） 4分押したけどな！（すまぬ…すまぬ…講師の鷹野さんより、CMYK変換について何か〜ということで振られたのですが久しぶりで心臓破れるかと思ったわｗ） で、内容はCMYK変換設定のキモ、 プロファイルって何やってんの？ マッチング方法って何なのよ？ あんど、あまり触れたくないアレ CMYKプロファイル埋め込みてどうなのよ？ 以上をできるだけ簡単に、Photoshoperでな
JavaScriptで画像から色を取り出す | 12px.com
前回の記事の ドロネー三角形分割 のスクリプトが気に入ったのでブログのヘッダに使ってみました。 単に画面上に置くだけでも良かったのですが、記事に合う色合いになったら良いなーと思ったので、ページ毎に使っている画像から色を取得して描画するようにしてみました。 Wordpressは簡単な設定でアイキャッチ画像を設定できるので、それを使用して画像を投稿しています。テンプレートにはwp_get_attachment_image_srcとget_post_thumbnail_idを使用してパスだけを読み込むように設定しておいて、それをjsに渡し、js内で画像をロードし、非表示のまま画像から色だけを取り出して、それをcanvasに描画する時に使っています。 で、画像から色をとるのがASみたいに簡単にできなくて、ちょっと回りくどい方法になってしまったのでメモ。 まずは見えないcanvasを作成して、 画像
マーケティングにおける色彩心理学の本当の使い方
by Tiger Pixel マーケティングにおいて色彩心理学を利用することは重要とされますが、色彩の持つ効果は個人の経験に依存し、学術的に裏付けされたデータが少ないため、議論も多いところです。そこでHelp Scoutがブログで研究によって明らかにされた色彩の持つマーケティングでの効果をまとめたのが「The Psychology of Color in Marketing and Branding」で、実際に商品を売り出したり、ウェブサイトをデザインする際にも非常に役立つ内容となっています。 The Psychology of Color in Marketing and Branding | Help Scout https://www.helpscout.net/blog/psychology-of-color/ ◆色彩心理学に関する誤解 どうして色彩心理学は多くの誤解を含み、そして
リアル・グラデーションの作法 | Nitram+Nunca
色のグラデーションの話。現代的な GUI にはグラデーションがよく使われる。 Mac OS X のツールバー、 Windows Vista ならタスクバーやボタンアイコン、Webサイトだって最近流行の CSS based デザインの背景やタイトルなんかには、よく見られるよね。このようなグラデーションの役割とは何だろう？ それは、肌理（きめ）を作るということだ。平坦なディスプレイの中に、ものの質感や奥行きを与えるんだ。このようなグラデーションは、２つの優れた効果をもたらしてくれる。 ひとつは、ユーザが操作を予測するとっかかりを生み出す、ということ。出っ張っていたり、凹んでいたりすると、何だか動かせそうに見える。異なる色のグラデーションが繋げることで、押すと凹みそうなガラスのボタンに見せることもできる。「押せそう」「引っ張れそう」。ユーザは GUI を見た瞬間、何が出来るのかを無意識的に予測し
ガーリー好きがお届けするガーリーデザインのポイント5つ ｜ Kana-Lier カナリエ
ブログがとってもガーリーだね、と嬉しいお言葉を頂くことが多いKanaです。 とっても可愛いガーリーなデザインは、作っていても見ていても幸せな気分になるので大好きです。 そんな私がガーリーデザインをする際、気をつけているポイントをご紹介します。 1.配色は甘く、優しく。スイーツのような彩りを。2.テクスチャを利用して、やわらかさや、素材感を加えてみる！3.パターンを使うだけでガーリーに！ストライプとドットが素敵！4.安定感よりも、繊細なイメージを意識する。5.かわいい小物をコラージュしたり、装飾を加えて、可愛らしさをアップ！ 1.配色は甘く、優しく。スイーツのような彩りを。 ガーリーデザインの配色を考えるときは、甘く優しい色使いを意識しています。 今ひとつピンと来ない時は、googleの画像検索でスイーツ、ケーキ、マカロン、アイスクリーム、ジェラート等を検索しイメージを沸かせます。 私が好き
有名Webサイトで乱立する「レインボーカラー」の正体。または「多様性」を表現するデザインモチーフについて | ミヤショウBLOG
レインボーカラー増えてるよね？ 先に言っておくと、この記事は「レイボーカラー」「レインボーカラーを採用しているWebサイト」をdisっているのではない。むしろ好きだし、いま自分が制作しているWebサイトでも採用しているくらいだ。 ただ最近、「レインボカラー」のを用いたデザインのWebサイトがすごく増えているような気がする。まずは下記を見て欲しい。 ※この記事での「レインボーカラー」は「赤・橙・黄・緑・青・藍・紫からなる7色」という意味ではなく、バラバラの色が4,5色以上並んでいる「レインボーっぽいカラフルな色の組み合わせ」という意味でとって頂けたら嬉しい。 ▼ nanapiのヘッダー ▼ vimeoのヘッダー ▼ vimeoのフッター ▼ vimeoのモーダルで動画を表示した際の見出し ▼ NHN Japanディレクターブログ（旧ライブドアブログ）の本文中の見出し ▼ pixiv
画面をチカチカさせる活動の振り返りとノウハウの共有 - hitode909の日記
ぼくはライフワークとして画面をチカチカさせる活動をしてるのだけど，周りの人にあまり理解してもらえなくて，まぶしいとか，そんな低俗なことをやって，みたいな反応をされる． けど，画面をチカチカさせるだけでも，いろいろと工夫できることとかある．今日はこれまでの活動の振り返りと，それで得たノウハウを共有しようと思います． 過去の活動 これまでに，いろいろ画面をチカチカさせるやつ作っているので，順に紹介します． コード残ってるのは2010年からだけど，一番古いのは中学生のときにRPGツクールで作った画面がチカチカするゲームで，途中まではRPGとして遊べるけどストーリーが進むと画面が高速で点滅し始めてそれ以降何もできなくなるというゲームでした． 古くはポケモンショックというイベントもあったけど，ぼくは関西に住んでて見れなかった． ウェブページをチカチカさせる このbookmarkletを起動するとウェ
クリスマス・ハロウィン・バレンタイン・母の日・父の日など、イベントごとのカラースキーム素材
クリスマス・ハロウィン・バレンタイン・母の日・父の日など、イベント用のページ制作に役立つカラースキーム素材を紹介します。 40 Color Swatches - SET 2 カラースキームは全部で、40種類です。 まずは、クリスマスやハロウィン、イースター用のセットはこんな感じです。 クリスマスはサンタやツリーをイメージするものから、雪景色をイメージするものがあります。 バレンタイン・母の日・父の日・セント・パトリックのセット 素材は、Photoshop用の「.aco」、Illustrator, inDesignでも利用できるAdobe Swatch Exchangeの「.ase」が揃っています。 ダウンロードは、Elemental DesignのFreebiesページからです Freebies -Elemental Design カラーパレットの利用は個人でも商用でも無料、とのことです。
私がWebサイトの配色を決める時の流れ
ここで得た言葉を元に配色を組み立てていくことになるので重要な部分です。 伝えたいイメージは多くの場合、「明るい」「可愛い」「落ち着いた」などの形容詞で表現されることが多いです。 ただ、言葉から連想されるものは人により誤差がありますので、 参考となるサイトや、商品など具体的にイメージしてるものも挙げてもらうと良いです。 下記はGoogleの画像検索「高級」の結果です。人によって抱くイメージは様々です。 「○○のような高級感」と具体的に伝えてもらうと良いです。 2.調査 競合となる他社サイトの配色を調査し、それらと同じような配色になることは避けます。 ただし同業の全てのサイトと被らないようにするのは無理があるので、 商圏内で競合となる他社のみを比較対象とします。 また、既にクライアントが名刺やパンフレット、フライヤー、ノベルティやなどを制作していたら見せてもらったり、 店舗であれば外観・内装の
Photoshopで理論的に配色はできないものか検証してみた
最近は配色を作れるジェネレータや配色をシェアするサイトが多数あり、簡単に配色を作ることができます。ただ、そういうのに頼らずにもっとPhotoshopだけで理論的にできないものかと思い検証してみました。 動機 配色を作れるツールっていまいち使いこなせてないし、自分がイメージしてる配色をPhotoshopで理論的に作れたら楽だなと思って。 結論 最初に結論を述べます。 Photoshopで色相を使った配色は基本的には難しいです。（できなくはないが非常に手間がかかる） 彩度・明度を使った配色は簡単にできる。 また、トーンを使った配色ならそれなりにであればできる。という結論になりました。 Photoshopの表色系の落とし穴 色相を順序立てて円環にして並べたものを色相環と言い、色相環の反対の位置が補色となります。 つまり基準となる色に180°足した色が補色になります。 ところが下記のようにPhot
絶対に覚えておきたいwebデザインの配色・カラー3つの基本と基礎
webデザインを考える時にカラーは切っても切りはなせません。しかし、配色は苦手だけど、まぁカラーの勉強は後でいいや…センス無いしその前にやることあるし…となんとなく後回しにされがちなんじゃないかなーと思います。基本を知っておくと、デザインに役立つのはもちろん、クライアントさんに提案出来たり、私生活や料理etc…様々な場面でとっても強い味方になってくれるます。ちょっとしたスキルアップをしたいと考えてるなら、まずは配色から初めてみるのが良いかもしれませんXD 色って？ カラーモードRGBとCMYKとは？ 色の三属性について 「色相」 「明度」 「彩度」 具体的な例と配色方法 面積比率 可読性 最後に 1.色って？ まず一口に色といっても色々(シャレじゃないですw)あるのですが大きく分けて果物や印刷物など物についてる色とテレビやパソコンのモニターなど光を放っている色の2種類があります。 物体色
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Color Picker — A handy design tool from Color Supply
ノンデザイナーのための配色理論
