wordpress-color-scheme

デザイン

 

【配色】初心者におすすめ!WEBサイトの色選びに迷ったら便利なカラーツールを利用しよう!

 

現在は、無料&有料のテンプレートが数多くリリースされているので、WEBサイトの運営を始めるにもかなり便利になっています。

それらテンプレートは、必要最低限のデザインのものもあれば、ユーザーの導線やページの配色まで細かく計算されたものもあって、初心者からベテランまであらゆるニーズに対応していると思います。

ただ、デザインは気に入ったんだけど配色は自分好みにしたい!ってこと、よくありますよね。

そんなときは、色のバランスや相性について、理屈よりも感覚でイメージできる便利なカラーツールを使ってみましょう。

ということで、今回は、WEBカラーの基本から配色(選定)まで、サクッと網羅できる初心者向けのカラーツールをご紹介します!




おすすめのカラーツール

今回は、あくまで初心者向けということで、次の3サイトを紹介します。

原色大辞典

色の名前とカラーコードが一目でわかる、WEBカラーの基本ツールです。

Paletta(パレッタ)

顕色系(色相・明度・彩度)をベースに、調和のとれた色だけを集めたカラーパレットです。

ウェブ配色ツール Ver2.0

プレビューを見ながら直感的に配色がイメージできるツールです。

それでは、一つずつ順に見ていきましょう!

原色大辞典

原色大辞典とは?

原色大辞典とは、一言で言うと「ネットの色見本サイト」になります。

WEBカラーの基本情報(色名&カラーコードなど)はもちろんのこと、文字列と背景色の組み合わせを試せる「配色大辞典」、 規則性のある組み合わせから色を選べる「配色パターン」など、WEBデザインの初心者からベテランまで、幅広いニーズに対応しているのが特徴です。

原色大辞典の使い方は?

色を検索する

原色大辞典では、次の方法で色を検索することができます。
(1)色見本から色を探す(9種類の色見本から選択)
(2)色検索から色を探す(色名やカラーコードから選択)
(3)カラーピッカーで色を探す(直感的に色を選択)
(4)色調合で色を探す(色をお好みに調合)

配色を確認する

そして、配色においては、次の方法で配色を確認することができます。
(1)配色大辞典(文字列と背景色の組み合わせをプレビューで確認)
(2)配色パターン(規則性のある組み合わせから色を選択)

原色大辞典

Paletta(パレッタ)

via:Paletta

Palettaとは?

Palettaは、顕色系(色相・明度・彩度)をベースに、調和のとれた色だけを集めたカラーパレットになります。

彩度の低い色がベースなので、人間の知覚に近い穏やかな色合いが揃っています。

色を選択すると、周囲の色が瞬時に同系統の色に変わるので、色のバランスや組み合わせを一目瞭然に確認することができます。

Palettaの使い方は?

Color Palettaを使う

「Color Paletta」では、表示されている色をクリックすると同系統の色が表示され、選択した色と調和のとれた色が表示されます。

Color Codeを使う

「Color Code」では、検索窓にカラーコードを入力すると同系統の色が表示され、入力した色と調和のとれた色が表示されます。

Paletta(パレッタ)

ウェブ配色ツール Ver2.0

ウェブ配色ツールVer2.0とは?

ウェブ配色ツールは、テーマにする色を一色選ぶと、その色をベースにした配色をWebサイトのプレビューで表示してくれるツールです。

Webサイトのプレビュー表示を取り入れているツールは他にもありますが、ウェブ配色ツールはプレビュー画面も日本語の表記になっているので、配色がよりイメージしやすと思います。

ウェブ配色ツールVer2.0の使い方は?

カラーピッカーで色を選択する

右サイドにあるカラーピッカーで色を選択すると、その色をベースにした配色(背景・文字・ロゴ)が自動的に出来上がり、画面左のプレビューでWEBサイトのイメージを確認することができます。

その他カスタマイズ

基本的に同系色で配色されるようになっているので、色に幅を持たせたい場合は「色相差」で色味幅を調整することができます。

ウェブ配色ツール Ver2.0

カラーツールのまとめ

今回は、たくさんあるカラーツールの中でも、難しい知識や操作が必要のないカラーツールを紹介しました。

色の種類や配色の理論はとても奥が深く、突き詰めていくとすごく面白い世界です。

そして、みんなが何気なく見ているWEBサイトや広告は、見る者の意識に働きかける計算された配色になっています。

今回紹介したカラーツールは、好きな色を選択するとそれに合った配色パターンを提案してくれるので、これら便利なツールを有効に活用してみましょう!

スポンサーリンク

関連記事

  1. html5-css3-design-book

    デザイン

    【デザイン】サイトカスタマイズに役立つ本『HTML5&CSS3 デザインレシピ集』

    ブログやサイトを運営していると、デザインやレイアウトをカスタマイズする…

  2. wordpress-free-photo

    デザイン

    【素材】無料で使える!フリー写真素材サイト おすすめ7選!

    WEBデザインでは、大きな役割を担う写真素材。ということで、今…

  3. wordpress-free-icon

    デザイン

    【素材】無料で使える!フリーアイコン素材サイト おすすめ7選

    WEBデザインでは、見た目やユーザビリティの点で、とても重要な役割をす…

  4. shutterstock_570628189-copyright-watermark

    便利ツール

    【ツール】画像にコピーライトや透かしを簡単キレイに挿入しよう

    画像やデザインの著作者を明示し、それらを保護するために表記する「著作権…

  5. wordpress-free-illust

    デザイン

    【素材】無料で使える!フリーイラスト素材サイト7選

    WEBデザインでは、とても重宝するイラスト素材。これから紹介す…

  6. google_analytics

    集客&SEO

    【Googleアナリティクス】5つの基本機能と4つのチェック項目(初心者向け)

    サイト運営者にとって、自分のサイトに「どんな人」が「どれだけ」来ていて…

最近の記事

  1. shutterstock_573396265-bousai
  2. shutterstock_713835478-ticket-resale-law
  3. shutterstock_1115483624-Relationship
  4. shutterstock_580655965-shutterstock-use
  5. shutterstock_126336395-stock-photo-service
  6. shutterstock_570628189-copyright-watermark
  7. shutterstock_373050517-sitemap
  8. shutterstock_413924539--search-console-analytics-cooperation
  9. google-analytics-introduction
  10. google-search-console
PAGE TOP