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.