配色の基本

webデザインwebサイト制作

webサイトはおおまかに別けるとテキスト・画像・色の3つの情報から成り立っています。
3つの中でも色はユーザーに最初に伝わる情報なので、配色次第でサイトの第一印象が決まってしまいます。
初心者にとって配色は難しい部分ですが、まずは既存のサイトやサービスを良く調べ、一般的にその色が持つ印象やイメージをしっかりと理解し、上手く使いましょう。

配色的にダメな例

f:id:yachin29:20190529140130p:plain

ノンデザイナーのための配色理論 from tsukasa obarawww.slideshare.net

色彩センスのいらない配色講座 from Mariko Yamaguchiwww.slideshare.net

補色

f:id:yachin29:20160303140453j:plain

この中で1つだけ特に人気が出たカラーバリエーションがあります。それはどれでしょう?またどのような理由からでしょう。

f:id:yachin29:20160303135303j:plain

配色ツール
nipponcolors.com

[ HUE / 360 ] The Color Scheme Application

Colours

colormind.io

色数はできるだけ少ない方がいい

色が難しくなるのは、たくさんの色を同時に使おうとするからです。例えば、白と黒、白と赤だけの配色を見て、バランスが悪い、まとまりがないと思うことはほとんどありません。しかし、そこに青や黄などが混ざってくることで、配色は一気に難しくなります。裏返せば、色をできるだけ使わないようにすれば、誰でもそこそこまとまりのある配色にすることができるということです。

f:id:yachin29:20180726135439p:plain

メインカラー

その名の通りサイトの印象を決定づける主役の色です。


ベースカラー

最も大きな面積を占める基本となる色で、余白や背景などに用いることが多い色です。メインとアクセントのカラーを引き立てる脇役的な立ち位置。


アクセントカラー

全体の5%と少ない使用量ながら一番目立つ色で、全体を引き締める、ユーザーの目を引く役割があります。




カラースキーム

カラースキーム【color scheme】 色彩計画。 色のもつ心理的・生理的・物理的な性質を利用して、まとまりのある雰囲気を作るなど、目的に合った配色を行うための設計。


デザインガイドライン

デザインガイドラインとは、全体を通して一貫性のあるデザインを作成するために、様々なデザイン要素の指針などを定めたものです。 WEBサイト制作におけるデザインガイドラインは、静的なビジュアル面はもちろん、アニメーションやUIといった動作の指示も含まれる事が多いです。

note.com

Human Interface Guidelines | Apple Developer Documentation
The HIG contains guidance and best practices that can help you design a great experience for any Apple platform.

qiita.com

参考サイト
satohmsys.info

www.find-job.net

WEBデザインで押さえるべき配色(ベース、メイン、アクセント)の基本「3つのカラー」|テクニカルブログ|株式会社エムハンド

photoshopvip.net

baigie.me

photoshopvip.net

コメント

タイトルとURLをコピーしました