デザインWebデザイン

Blog Article

魅せるWebデザインの色のルールと組み合わせ方・役立つツール

こんにちは、Mochiです。

Webデザインにおいて、色は非常に重要です。適切な色を選択することで、Webサイトをより魅力的に見せることができます。

でも、どうやって無数にある中から、適切な色を選べばいいの?どんな色を組み合わせれば、いい感じに見えるの?🤔

そんな方に向けて、色を決めるのに役立つルールや色の組み合わせ方、色選びの参考になるツールとサイトをわかりやすく解説します。この記事を読むことで、魅せるための色のルールと組み合わせ方を理解し、色を決めるための便利なツールと参考サイト集を知ることができます

ではさっそく色を決めるのに重要なルールから学んでいきましょう!

🤓色を決めるためのルール

色を決めるために押さえておくべきルールを解説します。

色数と色の組み合わせ方

色をいくつ使えばいいのか、どんな色の組み合わせがいいのかは、最大の悩みポイントだと思います。

1つの基準として、色数は2色にし、メインカラー、グレイカラーという役割を持たせて組み合わせるのが良いです。選ぶのが簡単でありつつ、デザインが綺麗に見えるためです。(例:貼り箱パッケージの総合メーカー 旭屋)メインカラー、グレイカラー

メインカラー

メインカラーは、Webサイトの中でも重要な部分に注目を集めるために使う色です。テーマカラーとも言えます。例えば、購入時に押してもらうボタンやロゴの色にはメインカラーを設定します。

グレイカラー

グレイカラーは、Webサイトの中で通常の文章やタイトルの文字に使う色です。完全な無彩色である必要はなく、多くの場合少し色を混ぜて使います。テーマカラーの色を少し混ぜるのも良いでしょう。

メインカラーとグレイカラーの2色でデザインできるとシンプルで、魅力的なデザインをしやすいです。ただし、もう少し色を増やして、色の使い勝手を良くしたい場合もあるかと思います。そのような時は、アクセントカラーを1色追加しましょう。

アクセントカラー

アクセントカラーは、その名の通りWebサイトの中でアクセントとなる色です。2番目に重要な色として、また、デザインを引き締める役割があります。なんとなく選ぶのではなく、メインカラーとの関係性を考えて決めましょう。
アクセントカラーは、その名の通りWebサイトの中でアクセントとなる色

3色以上使うのは難易度が高く、色を選ぶのも難しくなるため、なるべく使わないようにしましょう。しかし「3色だけでは表現に困る😑」という方もいると思います。そんな時には、色数を増やすのではなく、同じ色の明るい色と暗い色を作り、使いましょう
色数を増やすのではなく、同じ色の明るい色と暗い色を作り、使いましょう
色の数と組み合わせが分かっても、メインカラーはどの色にすればいいのか迷う方も多いと思います。色を選ぶ手助けをしてくれるルールを引き続き見ていきましょう。

色のイメージ

皆さんが普段目にしている色には、それぞれ思い浮かべやすいイメージがあります。色を決めるためには、なんとなく色を選ぶのではなく、自身の作りたいWebサイトのイメージに合った色を選ぶのが効果的です。また、イメージをもとにすることで、色を決める際の迷いが減ります。
色のそれぞれ思い浮かべやすいイメージ

色の温度

人は一部の色から温度を感じます。Webサイトを温かいイメージにしたいのか、冷たいイメージにしたいのかで、選ぶべき色とその組み合わせが変わります。色を決める際には、色の温度も考慮しましょう。

暖色

暖色からは温かい印象を受けます。気持ちが高まる印象も受けます。
暖色からは温かい印象を受けます

寒色

寒色からは冷たい・涼しい印象を受けます。また、落ち着いた・誠実な印象を受けます。
寒色からは冷たい・涼しい印象を受けます

中性色

中性色は温度の印象を受けません。そのため、暖色または寒色のどちらを使った際にも、合わせやすいという特徴があります。
中性色は温度の印象を受けません

無彩色

無彩色も色の温度を感じません。どの色にも合わせやすく、万能な色と言えるでしょう。
無彩色も色の温度を感じません

色相環

色を円に並べたものを色相環と呼びます。円に並べることで、色の関係性が明確になります。押さえておくと便利な色の関係性として「補色」「類似色(同系色)」「トライアド配色」などがあります。
「補色」「類似色(同系色)」「トライアド配色」
捕色は反対に位置する色で、色同士を目立たせる効果があります。類似色は隣接して並んだ3つの色で、安定感のある色の組み合わせです。トライアド配色は3角形の位置にある色で、活気がありつつも調和した色の組み合わせです。より具体的には、トライアド配色はそれぞれの色が120度ずつ回転した関係にあります。

アクセントカラーを選ぶときは、ぜひこの色相環の色の関係も考えてみてください。色を決める上での手助けとなります。

色のトーン

色を選ぶ際にはトーンを考えることも重要です。青色といっても、暗い青色から鮮やかな青色まで、さまざまなトーンによる違いがあります。このトーンは明度(色の明るさ)と彩度(色の鮮やかさ)によって決まり、目的に合ったトーンの選択が必要です。
さまざまな色のトーンによる違い
ただ、トーンの種類は無数にあるため、結局どうすればいいのか迷う方も多いと思います。そんな時には、ツールを使ってトーンを決めましょう。詳しい説明は「🛠️色を決めるために便利なツール」の章で行いますが、厳選された色を載せているサービスOpen colorFLAT UI COLORS 2を使うことで、絞られた選択肢から適切なトーンを選択できます。

色のコントラスト

Webサイトを見やすくするためには色のコントラストを考える必要があります。コントラストとは、色の差の大きさです。コントラストが強いと色がくっきりし、弱いとぼんやりとします。
色のコントラスト
コントラストが弱い場合は、見にくくなるので他のコントラストが適切な強さになる色を選びましょう。これはユーザの使いやすさに直結します。

色を決めるための重要なルールは以上です。具体的な決め方は記事「🎨色の決め方」の方でお伝えしているので、併せて読んでいただくと記事を読み進めながら、色を決めることができます。 次は色を決めるために便利なツールについて学び、効率化していきましょう。

🛠️色を決めるために便利なツール

3つの目的「色のトーンを決める」「色の組み合わせを決める」「明るい色・暗い色を作る」のために役立つツールを紹介します。

色のトーンを決めるツール

Open color

Open colorは、使いやすいWebサイトや画面のために、厳選された色のリストが並んでいます。つまり、この厳選された中から色のトーンを選ぶと効率的に決められます。
Open color

FLAT UI COLORS 2

FLAT UI COLORS 2もトーンを選ぶために便利なツールです。特に、デザインを始めるタイミングで、色のトーンを選ぶのに人気なサービスです。
FLAT UI COLORS 2
様々なパターンの色のトーンが並べられているので、自力で細かく探す手間を省き、並べられた中から選ぶだけで簡単に色のトーンを決められます。

tailwindcss

tailwindcssはCSSのフレームワークの1つです。あらかじめバランスの良い、使いやすい色が設定されているフレームワークです。そのため設定された色を参考にして使うことで、悩まずに美しい色のトーンを決められます。
tailwindcss
もちろん、色を参考にするだけでなく、フレームワークとしてCSSを書くためにも使えます。

色の組み合わせを決めるツール

palleton.com

palleton.comは色相環に似た画面で色の組み合わせを試せるツールです。先ほど説明した、類似色相やトライアド配色を確認することができます。そのため、メインカラーを決めた後にアクセントカラーを決める場面で役立ちます。
palleton.com

coolors

coolorsは自動的に配色を作ることができるツールです。そのため、自身の選んだメインカラーから配色を作成し、アクセントカラーなどを見つけるのに役立ちます。
coolors
また、2つの色のコントラストを確認できる機能があります。そのため、多くの人が見やすいサイトを作るための色のチェックにも使えます。コントラストの確認にはcolorableも便利です。
colorable

明るい・暗いの色を作るツール

Tint & Shade Generator

Tint & Shade Generatorは、入力した色の明るい色と暗い色を簡単に作ることができるツールです。このツールを使えば、自分で作る手間を省くことができます。
Tint & Shade Generator
繰り返しになってしまいますが、今回学んだツールを使って、実際に色を決めていく方法は記事「🎨色の決め方」の方でお伝えしているので、ぜひ参考にしてみてください。

最後に、色を選ぶために参考になる見本サイトを知りたい方も多いかと思うので、そちらを紹介します。

💻色選びの参考になる見本サイト

SANKOU!

SANKOU!はWebデザインを作る上で参考になる、国内のWebサイトを集めたサイトです。約3000件のサイト掲載しています。
SANKOU!
カテゴリ検索では、 色で表示するサイトを絞ることもできるので、メインカラーを決めるときやメインカラーを決めた後に使うと、ウェブサイトの配色ごとの印象を知ることができます。
カテゴリ検索では、 色で表示するサイトを絞ることもできる

MUUUUU.ORG

MUUUUU.ORGはWEBデザインポータルサイトで、WEBデザイナーが参考にしやすい、縦に長いサイトのデザインを並べています。

こちらのサイトも同じく色でカテゴリ検索できます。アクセントカラーをどうしようか迷っている時などにも、参考になります。
MUUUUU.ORGはWEBデザインポータルサイト

WebDesignClip

WebDesignClipはWebデザインの制作において、参考になるアイデアが含まれたWebサイトをクリップしているサイトです。
WebDesignClip
こちらのサイトは、メインカラーだけでなくサブカラー(アクセントカラー)による絞り込みもできるため、アクセントカラーの印象を確かめたい時などに役立ちます。
メインカラーだけでなくサブカラー(アクセントカラー)による絞り込みもできる

🎉まとめ

ウェブデザインにおいて色を決めるのは難しいですが、Webデザインをより良いものにするために重要なことです。今回は色を決めるのに役立つルールや色の組み合わせ方、色選びの参考になるツールとサイトを解説しました。

皆さんはこの記事を読んだことで、魅せるための色のルールと組み合わせ方を理解し、色を決めるための便利なツールと参考サイト集を知ることができました!素晴らしいスキルアップです!👏

今回学んだことを使って、自身が作成するWebサイトに合った魅力的な色を簡単に、効率的に決めてみてください。

参考になれば幸いです。 読み返したい方は、ぜひブックマークへの登録がオススメです。
読んでいただきありがとうございました!🙌

このページの内容