Kentaroikeda kentaroのデザイン関係の情報サイト

MENU

  • 新着記事
  • About
  • プライバシーポリシー
  • 広告掲載

Just a line of text to demonstrate the overlay effect.

  • HOME
  • >
  • デザイン
  • >
  • 【配色が下手くそな3流デザイナーが多すぎ】カラーを楽しむ位に勉強しろ!

【配色が下手くそな3流デザイナーが多すぎ】カラーを楽しむ位に勉強しろ!

デザイン

マーケティング

2017.10.18

kentaro

  • Twitter
  • facebook
  • はてブ

私がデザインをしているとき、仕組みをデザインしているときとは別にビジュアルをデザインしているときに何が楽しいかというと色を選んでいるときだと思います。
造形を作りそして最後に着色していくとき、生気が感じられなかったものが
急に生き物のように動きが出てきて、とても興奮します。

アプリやWEBなどのUIでも配色は、楽しいですし、一番気を使います。
なぜかというと人間は、形よりも色でどんなものかまず認識することが多く
ある研究だと「90%以上のユーザーが配色によって購入を決めている」とまで言われています。

でも思い返して見れば、確かに普段から色で様々なものを判断したりしていますよね。例えば、黄色いワンピースを着ている女性を見れば明るそうとか、
真っ黒なお店を見れば高そうなお店とか無意識の内に判断しています。
言葉がなくても、相手に訴えることが出来ることはすごいですよね。

ただ、難しいのは色は一つだけで完結していることは少なく、だいたい2から3色は使っていて無彩色と組み合わせたりしながらその組み合わせは無数にあるので考えるのは大変です。

ここでやり方としてマテリアルデザインでカラーを定義する方法をお教えします。
マテリアルデザインのカラーは、プライマリーカラーとセカンダリーカラーがベースで考えられていて、そこにサブカラーが入ってきたりします。
プライマリーカラー別名メインカラーとも言われていてサービスのカラーとなるものでブランドカラーと同じことが多いです。

セカンダリーカラーはアクセントカラーとも言われメインとはアクションと区別するために利用される色です。

サブカラーは、プライマリーカラーと似たカラーで、トーンを落としたカラーと上げたカラーを使います。サブカラーは1つではなく2つ構いません。
サブカラー同色相で作るので、トーンオントーンという色の配色方法を使えば
作れます。

プライマリーカラーは、アプリだとアプリバーやリンク、登録や確定などポジティブ要素に多いです。フローティングボタンにもアクセントカラーを使う事もありますが目立ちすぎるのでプライマリーカラーにすることが多いです。
セカンダリーカラーは、たとえば、リンクや警告、通知、削除などのネガティブ要素に多くメインの補色(反対の色の事、Complementary color)で目立つような配色にすることが多いです。
サブカラーは、トーンが低いカラーはステータスバーで、トーンの高いカラーはテキストで他と差別化したい箇所などに使います。
サブカラーは以下のGoogleが提供しているツールで簡単で作ることが出来ます。

マテリアルデザインのカラーツール
https://material.io/tools/color/#!/?view.left=0&view.right=0

Related posts:

  1. 【計画がなければ何も成し遂げられない】① ユーザビリティ評価 – 計画
  2. ② ユーザービリティ評価 – 評価設計
  3. カスタマージャーニーマップ
  4. 【マーケティング】基本だがやらない(出来ない)ところがほとんど!カスタマージャーニーを作成
アバター

ライタープロフィール

kentaro

デザイナーであり このブログの制作者、管理者です。
  • シェアする
  • シェアする

カテゴリー

ニュース
デザイン
MOVIE
マーケティング
アニメーション
WEB
政治
インベストメント

タグ

  • GUI
  • UI
  • UX
  • アプリ
  • デザイン
  • マーケティング
  • ユーザビリティ評価
  • ユーザーインタビュー
  • ユーザーインターフェース
  • ユーザーテスト
  • About
  • プライバシーポリシー
  • 広告掲載
  • お問い合わせ
Copyright © kentaroikeda All rights reserved.
kentaroikeda