• HOME
  • 記事
  • Webデザイン
  • 【初心者向け】Webデザイン時に決めるべき3つのカラーとは?おススメ・カラーパレットツール3選

【初心者向け】Webデザイン時に決めるべき3つのカラーとは?おススメ・カラーパレットツール3選

Webデザイン

視覚情報、なかでも印象を決める配色は、Webサイトを作る上でかなり重要ですよね。だからこそ、Webデザイン初心者は「正解がわからず迷ってしまう」ことが多いのではないでしょうか。

そこで今回は、Webデザインの配色の基本と、配色を決める際に使える3つのツールをご紹介します。

美しいWebサイトを作る基本!‘‘3つのカラー’’とは

Webサイトの配色を決める上で、「3つのカラー」について知っておく必要があります。

3つのカラーとは、「ベースカラー」「メインカラー」「アクセントカラー」のこと。色を決める順に詳しくご説明します。

ベースカラー

まず最初に、25%の面積を占めるベースカラーを決めます。こちらはサイトのイメージを大きく左右するので、色の持つ印象を把握してから選びましょう。可読性を高めるために、低明度の色を選ぶ傾向があるようです。

メインカラー

次に、70%の面積を占めるメインカラーを決めます。主に背景色として使われていますね。白や黒などの無彩色はメインカラー・アクセントカラーを邪魔しないので選ばれることが多いようです。

アクセントカラー

最後に、5%の割合で取り入れるアクセントカラーを決めます。サイト内にメリハリをつけるためのものなので、最も目立つ色を選びましょう。目立たせたい言葉やお問い合わせボタンなどに使用します。

直感的に使える!カラーパレットサービス3選

1. スペースキーを押すだけで美しい配色を表示【Coolors】

スペースキーを押すだけで、美しいカラーパレットをランダムに表示してくれるCoolors色を固定してスペースキーを押せば、その色を含んだカラーパレットを生成してくれるのです。

「もう少し薄い色がいいな」と思ったら色相や明度を変更できますし、「この2色は使いたいけど、他の色が決まらない」時には、カラーコードを入力して合う色を探すこともできます。

2. 色イメージが言語化されている【colorate】

色を選ぶ、あるいはカラーコードを入力すると、以下の画像のようにいくつかの配色を表示してくれるcolorate

色のイメージが言語化されていたり、選んだ色を「澄んだ赤」「おとなしい緑」のように分かりやすい言葉で記述されていたりと、デザイン初心者にとって配色の勉強にも使えそうです。

また、選んだ色を使ったグラデーションやCSSコードも載っているので、一見の価値ありますよ!

3. 1クリックでカラーコードをコピー【Flat UI Colors】

フラットデザインは、SHEのWebデザイン講座でも推奨している配色ツールです。1クリックでカラーコードをコピーできるので、忙しいWebデザイナーにはピッタリ。

上に配置された黒いボタンから表示方法を以下4つから選ぶことができますよ。

  • Hex – #AA1923…#付き16進数
  • Hex – AA1923…#なし16進数
  • RGB – (1,2,3)…RBG数値
  • RGBA – (1,2,3,0.4)…RGB数値+透明度

まとめ

配色には迷ってしまいますよね。

でも、基本を押さえてツールを駆使すれば、より効率的に色を選べるようになりますし、誰から見ても美しいサイトに仕上がるのではないでしょうか。今回ご紹介したツールを、ぜひ活用してみてくださいね!

 

関連記事一覧

ライター育成します