テンプスタッフ by PERSOL

これだけでデザインがキマる!Webサイト&アプリにおける色の組み合わせ4選

Colours for Website

色はプロダクトの印象を大きく左右する、大切な要素です。それぞれの色が与えるイメージだけでなく、色の組み合わせによっても印象は大きく変わります。

この記事ではWebサイトやアプリ制作におすすめの色の組み合わせを、実例を交えながらご紹介します。

1. 統一感を出したいなら:モノクローム

「モノクローム」というと白黒のグレースケールを思い浮かべがちですが、本来モノクロームは「ひとつの色」をさす言葉です。同じカラースペクトルに属していれば、白黒以外もモノクロームに該当します。

モノクロームのデザインは、同じカラースペクトル内に属する異なるトーンを使用するため、シンプルで統一感のある、目に優しいデザインに仕上がるのが特徴です。

Colours for Website

▲同じカラースペクトラム内であれば、濃い黄色と薄い黄色の組み合わせもモノクロームにあたる(出典:moving.com

またモノクロームのデザインでは、色のコントラスト比を変えることで、目立たせたい箇所を簡単に強調できます。

モノクロームのデザイン実例

Colours for Website

▲さまざまなトーンの青が印象的な旅行アプリデザイン(出典:carlos

Colours for Website

▲ピンクで統一された学習アプリのWebデザイン(出典:Infinitus

Colours for Website

▲統一感のある旅行アプリのWebデザイン(出典:WelshBoyo

2. 画面を自然に区切る:補色

モノクロームが同じカラースペクトラム内の組み合わせであるのに対して、補色は「正反対の色の組み合わせ」をさします。

Colours for Website

▲補色をあらわした図(出典:Spring Leaf Studios

補色は色の違いがはっきりしているため、要素を視覚的に区切るのにぴったり。ダイナミックなサイトに仕上がります。

補色のデザイン実例

Colours for Website

▲淡い赤と青を活用して画面を区切ったデザイン(出典:pedro et

Colours for Website

▲鮮やかな青とオレンジを使用したアプリデザイン(出典:Gleb Kuzenetsov

Colours for Website

▲クリスマスカラーを大胆に配色したWebデザイン(出典:Viacheslav Olianishyn

3. カラフルなのにまとまりがある:トライアド配色

カラーホイール上で均等な位置にある3色を組み合わせたものを「トライアド配色」とよびます。カラーホイール上でトライアドの3色を結ぶと、下図のように正三角形になります。

ワクワクするような、それでいてまとまりのあるデザインを実現できます。配色がマンネリ化していると感じたら、ぜひ試してみてください。

Colours for Website

▲トライアド配色(出典:TTT Studios

4. ミニマルでシンプルな組み合わせ:アナロガス配色

アナロガス配色は、カラーホイール上で隣り合った色の組み合わせです。トーンが似ているため、ミニマルでシンプルなデザインに仕上がります。

Colours for Website

▲アナロガス配色(出典:ConvertKit

おわりに

Webサイトやアプリにおける色は、視覚的に美しいだけでは不十分。色が与える印象を考慮したうえで、目的に合わせて組み合わせるのが大切です。

ぜひ今回ご紹介した実例を参考に、さまざまな色の組み合わせにチャレンジしてみてください。

(執筆:Inês Bernardino 翻訳:Nakajima Asuka 編集:イズミ カズキ 提供元:Muzli

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週2日20万円以上のお仕事多数
Workship