目次
Webサイトのデザインを制作するとき、レイアウトや素材、コーディング方法など、様々なことで悩むと思います。
しかし、中でも必ず悩むのが色、サイトカラーの選択ではないでしょうか。
レイアウトまで作業がスムーズに進んでも、色の選択で悩み時間がかかってしまうことはよくあります。
そこで色の配色を決める際に便利なツールをご紹介します。
これらのツールを使えば、悩む時間を短縮できるだけでなく、今まで気づかなかった配色の重要性を感じ、一歩上のWebデザインを作ることができます。
インスピレーション
自然の風景
何気ない風景一つ一つに意識することで、多くのひらめきが見つかることがあります。
インスピレーションを受ける為に、周りを見回してみてください。
電車の吊り広告、お店の看板、インテリア、ファッションからも魅力的なインスピレーションを受けることはありますが、その中でも、最高の色の組み合わせは自然にあります。
自然からカラースキームを作成してみはどうでしょうか。
Behance
様々な分野のクリエイターが作ったオンラインポートフォリオから作品を閲覧できます。
新しいインスピレーションを得られることは間違いありません。
その他のフィルターから、カラーを選択していただくと様々な分野の作品が一覧で閲覧できます。
Dribbble Colors
Dribbbleは、UIのインスピレーションを受けることができます。
カラーコードを入力して、画像検索することもできます。カラーパレットから色を選択することも可能です。
検索結果には、近似色も同時に表示されますので、他のクリエイターがどのようなUIで色を配色しているかとても勉強になります。
選択した色が画像に用いられている色の割合を指定することもできます。上記では、緑を30％以上の画像を検索しています。
Designspiration
https://www.designspiration.net/
Designspirationは、色は決まっていて、組み合わせの例を探したい時に役立ちます。
フリーワード検索の右側にある、筆のアイコンをクリックすると上記のカラーパレットが表示されます。
最大5色までの色を選択することができ、検索条件に一致する画像を見つけることができます。
上記は、5色を選択した後に表示される画像です。
カラースキームの作成
Coolors
Coolorsは、複数の色でカラースキームを作成する便利なツールです。ログインしなくても利用できることも大きな特徴です。
「Start the Generator, it’s free!」から進んでいただくと、上記のカラーパレットが表示されます。
スペースキーを押すだけで、様々なパレットが表示されます。
それぞれの色に対し、細かな調整ができることはもちろん、南京錠のマークをクリックして色を固定することができます。色を固定し再度スペースキーを押すと、固定した色以外が変わり別のカラースキームを用意してくれます。
決まった色がすでにある場合は、カラーコードを入力してスペースキーを押してください。
画像をアップロードしてカラーパレットを作成することもできます。
上記は、風景写真からカラーパレットを作成した例です。
Adobe Color CC
以前はAdobe Kulerという名前で知られていました。
類似色、モノクロマティック、トライアド、補色、コンパウンド、シェード、カスタムなどカラースキームを用意してくれます。
Web版とデスクトップ版が提供されており、Web版を使用すると、カラーホイールでカラースキームを作ることができます。
画像をアップロードすることでカラースキームを作成することができます。
または「探索」を利用すると、Kulerのコミュニティが選択した何千もの色の組み合わせを見ることができます。
デスクトップ版を使用している場合は、配色をPhotoshopやIllustrator、InDesignに書き出すことができるため、Webデザインの現場では非常によく使われるツールです。
Paletton
PalettonはAdobe Color CCに似ています。
２つの違いは、５つの色だけに制限されておらず、色を増やすことができます。
色のアクセシビリティ
視覚の不自由は、私たちが思っている以上にの多くの方が視覚障害を持っています。
また、視覚障害が軽度または中程度の人は、さらに多くいらっしゃいます。
白人男性の約8%、日本人男性男性の約5%(日本人女性は0.2%ほど)が先天赤緑色覚異常といわれており、赤と緑の区別がうまくつきません。ボタンデザインなどでは保存を「緑」、削除を「赤」といったデザインをすることがありますが、色だけで意味を伝える場合、この方法は不適切かもしれません。
視覚障害のあるユーザーが、選択したカラースキームを理解できるか確認することが必要です。
Coolors
前項でも紹介したCoolorsで、色覚障がい者から見えるカラースキームを確認することができます。
モードを「Normal」からテストしたいモードに変更します。
- Protanopia – 1型2色覚、第1色盲
- Deuteranopia – 2型2色覚、第2色盲
- Tritanopia – 3型2色覚、第3色盲
- Achromatopsia – 大脳性1色覚、大脳性全色盲
- Protanomaly – 1型3色覚、第1色弱
- Deuteranomaly – 2型3色覚、第2色弱
- Tritanomaly – 3型3色覚、第3色弱
- Achromatomaly – 色素沈着症
色覚障がい者からカラースキームがどのように見えるかを確認しましょう。
NoCoffee Vision Simulator for Chrome
NoCoffee Vision Simulator for Chrome
NoCoffee Vision Simulatorを使用すると、Chromeで表示できるすべてのページで色覚障害や低視力状態の見え方を確認することができます。
たとえば、Color deficiencyで「Protanopia」にすると、Webページの色が変わります。
- Protanopia – 1型2色覚、第1色盲
- Protanomaly – 1型3色覚、第1色弱
- Deuteranopia – 2型2色覚、第2色盲
- Deuteranomaly – 2型3色覚、第2色弱
- Tritanopia – 3型2色覚、第3色盲
- Tritanomaly – 3型3色覚、第3色弱
- Achromatopsia – 大脳性1色覚、大脳性全色盲
- Achromatomaly – 色素沈着症
まとめ
今回は、Webデザインで避けては通れない色の選択について、ご紹介しました。
上記のツールを利用すると、適切な色の組み合わせが見つかりやすくなります。
実践を繰り返して、よりよいWebデザインを作ることはもちろん、カラースキームを選択する楽しさを感じていただけると嬉しいです。
