エンジニアが知っておきたい色についてのお話 - Qiita
「俺にデザインなんて無理だ。」 そう思う人もいるかもしれません。 確かにデザインはセンスによる部分も多大にあると思います。 でもちょっと待ってください。 デザインにも色々あるんです。 人生色々、男も色々、女だって色々・・・そう色の話です。 ＃私自身はデザイナーではないので、あくまでエンジニアがこれを知ってると便利なんじゃないというレベルのお話です はじめに 今回、本当に共有したかったのは後半部分のChromeの機能についてです。 個人的には超便利！ 使う色合いを決める 赤系なのか、青系なのか、緑系なのか・・・作るものによってはコーポレートカラーが決まってることもありますし、全く何も決まってないことがあるかもしれません。 アクセントカラー決めて、その補色をサブカラーにして・・・とかありますが、今なら Adobe Capture というスマホアプリを使えば適当に色をピックアップしてくれます。
デザインの基本日記 「配色編」｜Design Beginner
配色がうまくいかない場合の多くはたくさんの色をついつい使ってしまった結果招いていることが多い。まずは2色で配色をしてその上で少しずつ色の調整をすることによって、まとまりのあるデザインが作りやすくなる。 一般的に言われている配色は、ベースカラー7割、メインカラー2割、アクセントカラー1割。一番表現したいことをアクセントカラーにすることで表現したいことが何かはっきりわかりやすくなる。 なんとなく落ち着いていて物足りない場合、色相環で反対の色をアクセントカラーに持ってくるとインパクトがでる。この色相環の反対の色を反対色や補色といったりもする。 逆にガチャガチャして色がうるさい場合は、色相環の隣り合った色数色を選び配色することで全体的にまとまった印象になる。この色相環の近くにいる色のことを近似色と呼ぶ。 配色を決める場合、いくつかの軸があるが、何を表現しなければいけないかというテーマによって配色を
引き出しを増やそう。初心者が配色のインスピレーションを得られるツール9つ｜Goodpatch Blog グッドパッチブログ
デザインを勉強中の人は、配色について、以下のような悩みをお持ちではないでしょうか。 配色の原則を理解したい 効率的に作業を進めたい 発想の引き出しを増やしたい 以前にGoodpatch Blogでは、初心者の人にオススメしたい、デザインリソースの活用についてご紹介しました。 配色のバランス・原則が不安な人へ 1. Adobe Colors CC Adobe Colors CC 全部で5色あるパレットから、類似色や補色、トライアドといったカラールールを選択でき、指定したベースカラーを元に、自動的にカラースキームを生成してくれます。 Adobe Colorsは、今回ご紹介するツールの中で最も「配色の基本を踏まえたツール」と言えます。デザインを学び始めたばかりの人が、色の基本的な知識を感覚的に身に付けたいときに役立つと思います。 2. Material Design Color Palette
プロに学ぶ、一生役立つ配色の基本ルール8個まとめ【保存版】
なにかデザインをはじめるとき、無数にある色から配色を決定するのに頭を悩ませることもあるでしょう。この記事では、適切な配色カラーパレットを決めるのに役立つ８つの基本ルールを詳しく紹介します。 コンテンツ目次 1. 色数を制限しよう。 2. 自然からインスピレーションをもらおう。 3. 60−30−10ルールを試してみよう。 4. まずはグレースケールでデザインしよう。 5. 黒色を利用するのは避けよう。 6. 重要性を色のコントラストで表現しよう 7. 色を使ってユーザーの感情を引き出そう。 8. デザインを理解しやすくしよう。 9. ボーナス: デザイナー向け配色ツールまとめ 配色基本ルール１ 色数を制限しよう。 デザインプロジェクトに配色を適用するには、バランスが重要になります。色数が増えるほどバランスを取るのは難しくなります。配色は最高でも3色までに制限することで、よりよい結果となるで
フォント選びや配色に関して友人と話したらわりと目からウロコだった話 - Yukihy Life
だいぶブログもカスタマイズして、ほぼもういじるところが無いような感じになってきてしまったのですが、数日前にフォントを変更してみたんです。 そしたら美大に通っている友人から軽いバッシングを受けて、フォントについていろいろと教えてもらったので共有したいと思います。 フォント 自分がここまでしてきたカスタマイズって、デザインと言うよりかは機能を追加するような感じなんですよね。 例えばフォトショとかイラレとか触ったこともないですし、ヘッダーの背景は青いまんまですし。 そこで気分を変えるために、ブログタイトルの「Yukihy Life」のフォントを「Google Fonts」で変えてみたんですよ。 とにかく特徴のあるタイトルにしたかったんです！ デフォルトはこんな感じなのを Googleフォントでこんな風にしてみました。 どうです？ フォントのイメージも、どことなくアドベンチャー感が出て、男らしさと
エンジニアのための配色まとめ - Qiita
無彩色 白と黒との混合で得られる色（白と黒自体も含む）の総称。 白・黒・さまざまな濃度の灰色が含まれる。 彩度が0であることを表す。 無彩色でない色は、有彩色である。 via 写真技術 色と陰影（手代木さんblogより） - 写真技術と光への道でフォトディレクション-Jimdo撮影編 有彩色 白、黒、灰色以外の色味を持った色のこと。 有彩色にはさらに、純色、清色、中間色に分類される。 以下のような図を、 等色相面 と言う。 via 純色、清色、中間色｜株式会社ノイエデザイン 純色 各色相において、最も彩度が高い色。 ただし、色空間によっては純色以外にも彩度が最大になる色がある。 清色 清色はさらに、明清色、暗清色に分類される。 清色にはくすんだ印象がなく、濁りがない色という特徴がある。 明清色 純色に白だけを加えた色。 ピンクや水色など 暗清色 純色に黒だけを加えた色。 紺色や茶色など 中
デザインで色の組み合わせを決めるのに役立つ便利なオンラインツールのまとめ
一つのカラーを元にそれにあったカラーパレットやグラデーションを作成したり、トレンドカラーを使った配色サンプル、アクセシビリティガイドラインに沿ったカラーパレットなど、配色設計に役立つオンラインツールを紹介します。 Coolors オススメの組み合わせを次々に表示してくれるオンラインサービス。 スペースキーor右のアイコンでランダムカラー、ロックでカラー固定、さまざまなファイル形式にエクスポートもできます。
おしゃれな配色パターンが見つかるサイト+アプリ10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先日、個人でやっているサイトをリニューアルしていたのですが、想像以上に色の組み合わせについて悩んでしまいました。 デザインの知識が皆無の私にはハードルが高すぎたようで、文字、リンク、バナー、背景などの色をベタベタ触っていたら、数時間後にはヘドロのような色彩美のサイトが誕生しました。絶望です。 そこで今回は、私のような素人でも参考になる配色見本サイトについて、用途別にまとめてみました。 「わからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！ ベースとなるカラーを設定したい 1． 原色大辞典 https://www.colordic.org/ いつも参考に
次々とセンスある配色パターンを提案してくれるサイト「Coolors」 | ライフハッカー・ジャパン
PayPayカードのメリット・デメリット|怖いと言われる理由と評判レビュー。ゴールドと一般どっちがおすすめ?
きれいに調和した色彩のカラーパレットを誰でもすぐ簡単に自動生成できる「Coolors」
ウェブデザインやアプリのUIを作成する際にどのような色を選んで組み合わせるべきなのかは非常に重要ですが、だからといってプロのデザイナーに頼むほどではない、というときに実践的な組み合わせのカラーパレットをスペースバーを押していくだけで爆速自動生成してくれるのが「Coolors」です。 Coolors - The super fast color palettes generator! http://coolors.co/ 「Coolors」にアクセスすると、すでに自動生成されたカラーパレットが表示されています。 スペースキーを押すだけで次々とカラーパレットが生成されていくという超簡単操作。 表示もサクサクなので、ただ変えていくだけでもすぐに理想の組み合わせが見つかるかも。 また、カラーバーのどこかをクリックすると、バーの下側に「LOCKED」と表示されて固定することができます。 もう一度スペ
最近のUIデザインで使われている同一色相のグラデーションなど、人気のあるカラーのまとめ | コリス
落ち着いたパステル系のカラー、同一色相の繊細で美しいグラデーションなど、Material Design, iOS 8, Modern UIなどやフラットなスタイルで使われている最近人気のあるカラーを紹介します。 PhotoshopやIllustrator用のスウォッチもダウンロードできますよ。
色彩理論の基礎に学ぶ、相性抜群な「色の組み合わせ」 | ライフハッカー・ジャパン
身につける服でも仕事のプレゼンテーションでも、何かの見た目を良くしたいのなら、色は大切な要素です。ですが、オレンジと青が完璧な組み合わせだなんて、誰もが直感的に知っているわけではありません。自分の直感を信じられないなら、色彩理論の基本を理解して、それをもとに正しい色を選んでみてはどうでしょうか。 色相環を知る 上の図は基本的な色相環で、色を選ぶ際の指針になるものです。学校で見たことがあるかもしれませんが、忘れている方のために、簡単におさらいしておきましょう。 赤、青、黄色の3色が原色です。赤と黄色を混ぜると橙になります。青と黄色を混ぜると緑になります。赤と青を混ぜると紫になります。そのため、橙、緑、紫は二次色と呼ばれています。赤紫や青紫などの三次色は、原色と二次色を混ぜたものです。 すべての色には明色（明度の高い色）と暗色（明度の低い色）があります。明色は元の色に白を混ぜてできる色、暗色は
プレゼン資料の「色」に悩んだ時に使いたい！便利なカラー配色ツール10選 | クラウド資料作成代行サービスのSKET（スケット）
今回は、プレゼン資料の作成において重要な「配色」について取り上げました。 以前の記事「心理学から読み解く！資料作成で知っておくべき”色”の使い分け」（https://sket.asia/magazine/kotsu/color/）でも記載した通り、資料において色が与える効果というのは非常に大きいものがあります。 一方で、多くの人が資料作成の際に配色について悩んでいるのも事実。 「コーポレートカラーに合う色ってどんな色だろう？」 「今回の提案に沿ったカラーパターンを試したい」 そんな疑問を解決する優れたサイトをご紹介します！上手く活用し、資料のビジュアルを向上させてみてください！
【過去記事】あなたは色がどれだけ見えていますか？ グラデーションで色の正確さを計測できる｢Online Color Challenge｣
【過去記事】あなたは色がどれだけ見えていますか？ グラデーションで色の正確さを計測できる｢Online Color Challenge｣2014.07.29 17:00 ｢How well do you see color?｣あなたは色がどれだけ見えていますか？ という問いかけで始まるこのサイト｢Online Color Challenge｣では、グラデーションを順番に並べ替えるカラーテストが試せます。利用方法は簡単、■のブロックを自然にグラデーションするように並べ替えるだけでOKです。並べ替え終わったら｢Score Test｣をクリックすると結果が表示されますよ。スコアが小さいほど正確に並べ替えられたということ。 なお、このサイトによると…。 程度こそ違えど女性では255人に1人。男性では12人に1人の割合で何かしらの色覚異常を持っているとのこと。Wikipedia｢色覚異常｣での記載で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
Material Palette - Material Design Color Palette Generator
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
