色の組み合わせに迷わないWeb配色の基本

webサービスを作る時に「どんな色のサイトにしようかな」と迷うことがあると思います。

今回は、ノンデザイナーでも簡単におしゃれなサイトに見える配色について説明します。

配色の基本を知る

Webサービスの色を考える時には、3つの色を決めます！

たった3つだけでいいんです。

たくさん色を使いたくなると思いますが、3つくらいに収めておくのが無難です。

3つとは、「メインカラー」「アクセントカラー」「ベースカラー」の3色です！

メインカラーとは、ヘッダーなど至るところに使われる色です。

アクセントカラーは、例えば「登録」ボタンなどここぞという時に目立たせたい色に使います。

ベースカラーは、背景色とかですね。

より詳細な3色の説明については、下記のサイトが詳しく説明していましたのでリンクを貼ります！

デザインは3つのテーマカラーを使うべし！配色の基本テクニック | イロドリック！

http://blog.iro-dori.net/useful/color/12635/

印刷通販サイト「イロドリ」が発信する情報サイト「IRODOLIC!　イロドリック！」。印刷の知識やデザインデータの作り方などにお役立ちの情報を発信しています。

色を選ぶ

配色の基本がわかったところで、実際に色を選んでいきましょう。

色は無数にあるので、あたりをつけたいですね。

色を選んでもらう！

こちらのサイトは、好きな言葉を入れると自動で言葉に見合う色を選んでくれます。

色色[:iroiro]

http://synthsky.com/iroiro/

色色とは、「言葉」からカラーパレットを生成するサービスです。 iroiro generates colour palettes from abstract words or phrases.

自分でメインカラーを選ぶ

自分で決めたいという方

そんなときに役立つサイトがこちらです。

Flat UI Colors 2 – 14 Color Palettes, 280 colors 🎨

https://flatuicolors.com/palette/gb

280 handpicked colors ready for COPY & PASTE

カラーパレットといって簡単にそれっぽい色を見つけられるようになっています。

直感でいいの一つ選びましょう。

ここで、選んだ色は「メインカラー」にしましょう！

「ベースカラー」と「アクセントカラー」も選びたいところなんですが、かなり目立つ色が多いので反発してしまいます。

色は、サイトの見栄えを大きく左右するものになります。

ツールでおしゃれなサイトを目指しましょう！