ウェブサイトやアプリケーションにおいて配色の持つ役割は大きく、その設計は使いやすさに強く影響を及ぼします。今回は基本的ではあるけれど覚えておくと役立つ、配色にまつわる9つのトピックについて解説します。 なお、本記事では、配色が与える情緒的な印象の話は出てきません。印象論的な配色理論は、数多く存在する他の書籍や記事に譲るとして、主にユーザビリティやアクセシビリティ、ビジネス上の課題解決に繋がる、基本的なポイントに絞って解説していきます。 1. メインカラーに赤を安易に採用しない 色を知覚する視細胞の中で、赤錐体（赤に反応する視細胞）は緑や青のものより数が多いという研究結果があります。 人間の目は赤に対して敏感であるという現象は、いくつかの学術的な裏付けにより証明されている事実と言えるでしょう。 色覚のしくみ – 多様な色覚に対応したデザインと社会の改善 特定非営利活動法人カラーユニバーサルデ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 「俺にデザインなんて無理だ。」 そう思う人もいるかもしれません。 確かにデザインはセンスによる部分も多大にあると思います。 でもちょっと待ってください。 デザインにも色々あるんです。 人生色々、男も色々、女だって色々・・・そう色の話です。 ＃私自身はデザイナーではないので、あくまでエンジニアがこれを知ってると便利なんじゃないというレベルのお話です はじめに 今回、本当に共有したかったのは後半部分のChromeの機能についてです。 個人的には超便利！ 使う色合いを決める 赤系なのか、青系なのか、緑系なのか・・・作るものによってはコーポレー
Search, discover, test and create beautiful color palettes for your projects
今回は知っておくと何かと役立つ『配色の基礎知識』と『色の心理学』についてまとめます。 1. 色を決める3つのパラメーターをおさえよう まず、基本的なところを簡単に説明します。色を決めるのは、①色相 ②明度 ③彩度の3つのパラメーターです。 色相 赤、青、黄などの色みの違いを表します。これは分かりやすいですね。 彩度 色みの強さの度合いを表します。いわゆる「あざやかさ」ですね。 明度 色の明るさの度合いを表します。限界まで明度を高くすると白になります。逆に限界まで低くすると黒になります。 この3つは「色の三属性」なんて呼ばれたりします。この3つは配色の話で何かと出てくるのでおさえておきましょう。 2. 補色について知っておこう 色相の並びをぐるっと1周つなげたものを色相環と呼んだりします。この色相環において、向かい合う2色ペアーの関係を補色と言います。この補色関係にある2色は、お互いを引き立
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 「配色」はデザイナーの持てる手法の中で最も強力な手法の一つで、様々な感情を引き起こせたり、ユーザーの注意を引いたりできます。 ですが、新しいプロジェクトを立ち上げる経験をしたことがある方ならわかるかもしれませんが、プロダクトやサービスの配色を決めるのは非常に難しいものです。 今回は基本の色彩の理論とそれがどのようにUXデザインと関係するのかについてご紹介します。これはあくまでUIやUXのデザインの範囲での色彩の理論で、包括的なデザイン論ではありませんのでご了承下さい。 色彩の理論 色彩の理論には様々な要素がありますが、基本の基本では、補色性、コントラスト、鮮やかさを考慮した色の相互作用において成り立ちます。 補色性は他の色との関係性という点から色を見る方法です。
色はデザインにおいて重要な役割をもち、色の組み合わせひとつでユーザーに与える印象は大きく変わります。しかし、配色を決めるのはなかなか難しく、悩んでしまいがちです。 今回はそのようなときに役立つ、配色を提案してくれるサイトや、配色がコレクションされているサイトを紹介します。配色のアイデアを与えてくれるサービスばかりなので、ぜひ活用してみてください。 HELLO COLOR http://jxnblk.com/hello-color/ クリックすることで２色の色の組み合わせを提案してくれるサイトです。また、スペースキーを押すことで、提案された２色に合う色を表示してくれます。配色のデザイン知識がなくても使うことができる便利なサービスです。 PALETTABLE http://www.palettable.io/ 提案された色が「好き」か「嫌い」かを選択していくだけで、カラーパレットが完成します。
Webデザインをしているときに、配色に詰まって作業がはかどらないということは多々あるのではないでしょうか。 そんなときは、自動で配色パターンを生成してくれるサービスやツールに頼ってみましょう。 そこで今回は、Webデザインの配色に役立つ12個のツールをピックアップして紹介します。 1. Adobe Color CC https://color.adobe.com/ja/ 「 Adobe Color CC 」はAdobeが無料で提供している配色ツールで、元々は「Kuler」という名称で提供されていました。 「類似色」「モノクロマティック」「トライアド」など6種類のカラールールが用意されており、色彩と明度を好みで調整可能となっています。 さらに、画像をアップロードすると色を抽出して配色パターンを作成するという機能も備わっています。 納得いく配色パターンができないときは、「探索」のメニューからパ
色の組み合わせがカンタンにできる！おすすめ配色パターン こんにちは。Keinaです。 デザインの基本といえば、配色デザイン。 学生の頃に色彩論を勉強したことがあるんですが、 色について知れば知るほど、デザインするのが楽しくなりました。 本日は、なんとなく色を選んでしまっている初心者さん、ついつい好きな色にかたよりがちの方のために、 迷ったときにすぐに役立つ！配色デザインアイデア3つをご紹介します。 01. 写真の配色から色を探してみよう 日常や旅で撮る写真には、必ずいい色が隠れていることが多いです。 撮った写真をPhotoshopで開き、ドキュメント内から好きな色を探して「スポイトツール」で直接クリックするだけで色が抽出できます。自分のパレットに思い出の色をプラスするのも楽しいものです。 春色を選びたいとき 春に咲く「花」の写真を使って色を選んでみましょう。 （ 権現堂桜堤の桜 #f0d7
2016 - 04 - 29 【図解で分かる】色彩センスのいらない配色入門 Webデザイン シェアする Bookmark! Facebook Twitter Google+ Pocket Feedly Web制作を生業としていると、ブログを書いている知り合いからこんな声を聞く。あなたもこんな経験ないだろうか。 背景色や文字色をいじるのだけれど、 どうもパッとしない 。 これだ！と思う色を選択して使っているはずなのに、 なかなか思ったようなイメージにならない 。 そもそも センスがない 。 本題に入る前に、最初にひとつ、 伝えておきたいこと がある。「自分にはセンスがないからブログのデザインを考えるなんておこがましい」なんて思っているひとには、特に聞いてほしい。 実はここだけの話だが、Web制作で飯を食っているぼくでさえ、ほんの少し前まではデザインのキホンの「キ」さえ知らなかった。おかげさま
自分で何かWebアプリを作るときにデザインも自分である程度満足いくレベルのものをできるようになりたくて、今年に入ってからいくつかデザインの本を買いました。 感想と勉強になったことをまとめてみます。 ノンデザイナーズ・デザインブック ノンデザイナーズ・デザインブック [フルカラー新装増補版] 作者: Robin Williams,吉川典秀出版社/メーカー: 毎日コミュニケーションズ発売日: 2008/11/19メディア: 単行本（ソフトカバー）購入: 58人 クリック: 1,019回この商品を含むブログ (107件) を見る 定番・・・なんですかね。どこかでデザイン初学者向けにオススメされていたのをみて買ってみました。 とても教科書っぽいです。ただ文章は程よく砕けていて読みやすく、理論をベースに実際の例をたくさん挙げて説明されているのでとっつきやすいです。 特に参考になった章：7章 Usin
前回、WEB上で画像やテキストなどのカラーを識別できるGoogle Chromeの機能を紹介しましたが、今回は色を識別してから、 色彩センスがないけど、きれいな配色が作りたい！！ この色には何色と合うんだろう？ とお困りではないですか。 【色を識別する記事】これ何色？画像やテキストなどWEB上の色を簡単に識別するGoogleChromeの機能 今回は、どんな色か特定できてもその色がどんなものなのか、相性の良い色はどの色なのか、配色を検討する参考にできる無料のオンラインツールを紹介します。 紹介する記事の中でこのサイトのロゴなどのテーマカラー「#d86e3a」をもとに紹介します。 簡単にきれいな配色デザインが作れるColorHexaって？ 前述していますが、「どんな色か特定できてもその色がどんなものなのか」、「相性の良い色はどの色なのか」、配色を検討する際に参考にできる無料のツールで、色彩セ
#はじめに 私は主にiOSアプリのプログラマーなのですが、デザインまで一緒に頼まれる事があります。 デザイナーじゃないので１からデザインをしていくなんて到底無理です。 そんな時にノンデザイナーの方でも良い物を作るために UIデザインのギャラリーサイトと配色パターンを決める便利なサイトをご紹介致します。 基本他のアプリを真似参考にするといい感じにできちゃうかもしれません。 Web系開発の方も配色パターン等は参考になると思います。 #デザインをする前に デザインをする前に呼んでおいたほうがいい物 ITエンジニアに易しいUI/UXデザイン デザイナーに言われた「非デザイナーが気をつけるべきデザインの4原則」 ノンデザイナーのための配色理論 #アプリデザイン ##CAPPTIVATE.co 動きのあるカッコいいUIばっかり載っています。 種類別で見ることもできるので便利ですね。 ##Mobile
「Material Design Colors」はマテリアルデザインにぴったりの色やアイコンが手に入るサイトです。有名なウェブサービスに使われている色一覧や、フラットデザインに合う配色一覧もありますよ。 以下に使ってみた様子を載せておきます。まずMaterial Design Colorsへアクセスしましょう。 マテリアルデザインに合う色一覧です。クリックするとカラーコードをコピーすることができますよ。右上のメニューからコピーする色の形式をRGBやHEXなど切り替えることができます。 有名なウェブサービスの代表色です。ここから色を参考にしてもよいですし、差別化をはかりたいのなら競合しないためのチェックにも使えますね。 マテリアルデザインに使えるアイコン一覧です。サイズやファイル形式を指定してダウンロードすることができますよ。ぜひマテリアルデザインでウェブサイトをデザインする際にご活用くださ
「PLTTS」は人気のある配色パターンが探せるサービスです。配色パターンが270パターン登録されています。それぞれランク付けされており、人気のある配色を見つけることができますよ。 以下に使ってみた様子を載せておきます。まずPLTTSへアクセスしましょう。配色パターンがずらりと並んでいます。それぞれのパターンは名前がつけられていますね。 このように詳細ページには、それぞれの色のカラーコードが載っています。サインアップすると気に入った配色パターンをお気に入りに追加することができますよ。ウェブサイトのデザインを考える際に配色で悩んだら、一度覗いてみるとよいかと思います。ぜひご活用ください。 PLTTS （カメきち）
高機能なCMSが続々とリリースされている今、特別な技術がなくてもホームページやランディングページを作成できる環境が整ってきました。 Web制作会社やデザイナー等の専門職の方に頼らずにWebページを制作される方も増えてきていると思いますが、制作時につまづきやすいのが「配色」の選定です。 配色はページ全体の印象を決めますが、作成者のセンスに左右されるため、デザイナーのように配色の知識が無い方は何かと時間をとられてしまいます。 今回は、配色に自信の無い方でも最新のホームページのような配色ができる無料のカラーパレットをご紹介します。 あらかじめ配色が決まっているもの、自分で配色を調整できるものなど様々なパレットがあるので、目的に沿って使い分けてみましょう。 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
