株式会社マイティーエース- MightyAce Inc.

資料請求

お問い合わせ

運用型広告

Google・Yahoo!のリスティング広告はもちろん、Facebook・Instagram・LINE・XなどのSNS広告も運用が可能です。

マンガ制作

WEBマンガを中心に、LP・バナー・SNSなど、お客様の商品(サービス)の魅力を伝える完全オリジナルのマンガを制作いたします。

Webページ制作

ページに訪れるユーザーの目的と興味を引く、お客様一人一人のニーズに合わせた完全オリジナルのWebコンテンツを制作いたします。

アクセス解析

精度を高めつつ分析⇒改善のサイクルを回し続け、意思決定に繋がるレポーティングで売上最大化のお手伝いをいたします。

Web制作

色の組み合わせでもう迷わない!配色手助けツールを紹介!

こんにちは。

以前のブログで「色のイメージと見ている人に与える印象」を取り上げましたが、今回は色の組みあわせについて発表したいと思います。

 

配色の大事さ

↓をご覧ください。

 

同じデザインで配色を変えたものです。

 

配色の違いで与える印象が結構変わってきますね。

左のデザインは統一感のある色合いですが、右のデザインは統一感がなく落ち着かない感じがします。

 

ユーザーが見やすいデザインにするには、ある程度統一感のあり、自然な色合いにすることが大切です。

 

統一感の出る色の選び方

統一感の出る色の選び方は、まずメインカラーとアクセントカラー2色を、伝えたい雰囲気にあわせて選びます。

色を選ぶ基準は以前のブログで書かれている情報を参考にすると良いです。

 

メインカラーに合わせた薄い色と濃い色を選ぶと統一感のあるカラーチャートができます。

さらに色を増やしたい場合は色相だけ変えると統一感を保ったままアクセントカラーを増やせます。

 

色の組み合わせの手助けツール

綺麗な色の組み合わせ決めは、私にはまだ難しくよく迷うことがあります。

作業中迷ったときによく私が使う、配色を手助けしてくれるツールを紹介します。

 

Color Hunt

綺麗な色の組み合わせをたくさん提案してくれます。

使いたい色や雰囲気で検索する機能もあるので使いやすいです。

https://colorhunt.co/

 

Accessible Brand Colors

組み合わせた色の視認性や色合いなどを点数で評価してくれるサイトです。

実際に組み合わさった状態で見られるので、確認するときに使います。

https://abc.useallfive.com/

 

Adobe Color

adobeが無料でやってるツールです。

カラーホイールで色を選ぶと自動で合う色を見つけてくれるので、直感的に色を決めることができます。画像からカラーチャートを作ることもできるのでかなり便利です。

https://color.adobe.com/ja/create

 

また、上記サイト以外にもPinterestLPまとめサイトなども配色の参考に使っています。

 

まとめ

今回は見やすい色の組み合わせを紹介しましたが、統一感がなく、たくさん色を使っているサイトでも、綺麗に纏まっていたり、ユーザーの目を引く可能性もあります。

正解のデザインを作るのは難しいですが、少しでも正解に近いデザインをすばやく作れるように、様々なツールを駆使してこれからの作業に活かしていきたいですね。

Request Materials資料請求

資料請求

Webマーケティングにおけるパフォーマンス改善のための資料がダウンロードできます。

  • web広告の改善事例が知りたい方
  • 現在お願いしている代理店との比較をしたい方
  • サービスの全体像・料金を知りたい方