Webデザインの基本、「配色」について考える。~後編~Note04
『Webデザインの基本~きちんと入門~』を読んで
学んだことをアウトプットしていきたいと思います。
今回は「配色」について、後編です!
(よかったら前編も読んでみてくださいね。)
デザインにあった色の組み合わせ方について。
補色には、物理補色があります。
マンセル色相環の正反対に位置する色のことで
互いの色を引き立てる性質があります。
※ちなみに、補色同士を混ぜ合わせると無彩色になります。
また、色相環で指定した色から近い色を類似色と呼びます。
色の調和が自然界でよく見られる組み合わせであり、
色相の自然調和といいます。
色の与える印象をコントロールする。
色が人の心理に働きかける作用のことを色彩感情といい、
抽象的な事物や物体を結びつけることを色彩象徴と呼びます。
色には様々な印象を与える効果があります。
■温度・・・暖色系/寒色系/中性色
■下重心型・・・暗い色が下に位置するので、安定感を与えられる。
■上重心型・・・暗い色が上に位置するので、動きのある印象を
与えられる。
他にも、進出色(後退色)や膨張色(収縮色)などがあります。
色によってイメージを思い浮かべることを色の連想といいます。
このイメージがシンボルとして定着することを
色の象徴性とよびます。(信号機の色や国旗など。)
カラーモードについて理解する。
デジタルデータとして扱うときは、RGBモード(加法混色)
紙などの印刷物はCMYKモード(減法混色)が使われます。
画像編集アプリでよく使われるのは、
HSB、HSL、LCHのモードです。
色相(H)、彩度(S/C)、明度(B/L)で表します。
・RGBモードは0~255までの数値を調整して色を表現します。
・HSBモードは色相・彩度・明度のそれぞれをチャンネルとよび
単位は角度で表します。色相環なので指定した色に180°足すと
補色を簡単に出すことができます。
・CMYKモードは0~100までの値を%で表示します。
インクの総量が300%を超えないようにしましょう。
(印刷時にウラ写りなどのトラブルが起きやすくなります。)
ディスプレイの特性やクセを考慮して正常な色を使えるように
キャリブレーションを行うことが大切です。
利用者の視点に立った配色とは?
webサイトの色は誰にでも同じように見えている訳ではありません。
様々な環境と見え方があることを理解して、
利用者の視点に立って配色を選んでいく必要があります。
色だけによる情報伝達は望ましくないので、
アンダーラインを引くなどの色以外の視覚情報で伝える手段も
用意しておきましょう。
Webサイトの目的にあった配色にする。
色はWebサイトのコンセプトを引き出します。
配色を変えるだけでイメージを大きく変えることもできます。
メインカラーを決めたら、それを基準にしてベースカラーや
アクセントカラーを決めていきましょう。
★配色の比率は70:25:5を目安にしてみましょう!
70% ベースカラー
25% メインカラー
5% アクセントカラー
※比率はあくまでも目安です。
ページの構成によって変更してください。
リンクの配色は何色がいいの?
リンクはWebページを結びつける要素です。
訪問済みリンクと未訪問リンクで色を分けられます。
A/Bテストの結果、青色がリンクとして認識されやすい色です。
サイト全体でユーザーの操作に合わせた色の反応ルールを
決めておくといいでしょう。
最後に・・・。
ひとことで色といっても、実に様々な配色方法がありました。
見た目の印象や使いやすさに大きく影響する要素だと感じました。
配色を学ぶことでより多くのユーザーに
イメージを届けやすくなりますね!
カラーモードはイラレやCanvaなどのアプリを使いながら
学んでいこう思います。
次回は「写真と図版について」学びます。
Yuka.
この記事が気に入ったらサポートをしてみませんか?