
誰でもプロ並みの色調が作れる無料のカラーパレットサービス厳選8選
高機能なCMSが続々とリリースされている今、特別な技術がなくてもホームページやランディングページを作成できる環境が整ってきました。
Web制作会社やデザイナー等の専門職の方に頼らずにWebページを制作される方も増えてきていると思いますが、制作時につまづきやすいのが「配色」の選定です。
配色はページ全体の印象を決めますが、作成者のセンスに左右されるため、デザイナーのように配色の知識が無い方は何かと時間をとられてしまいます。
今回は、配色に自信の無い方でも最新のホームページのような配色ができる無料のカラーパレットをご紹介します。
あらかじめ配色が決まっているもの、自分で配色を調整できるものなど様々なパレットがあるので、目的に沿って使い分けてみましょう。
カラーパレットを利用するまえにカラーコードの基本を知っておこう
基本的に、Web上で使われる全ての色には番号が振られており、色ごとに振られた番号をカラーコードと呼びます。
カラーコードは6桁の英数字で構成され、全部で256色あります。
一度使った色を再び使いたい場合は、カラーコード単位で記録しておくと感覚頼りになることもありません。
特に、複数色の微妙な組み合わせが肝となる配色パターンを形成する場合は、確実にカラーコードを把握しておいた方が良いでしょう。
カラーパレットを利用する前に、カラーコードの基本的な仕組みを理解しておきましょう。
参考:
16進数のカラーコードより色を推測するメソッド(カラーコードの仕組みについて)
こちらのブログでカラーコードの構成について非常にわかりやすく解説されています。
イマドキな配色パターンが豊富なカラーパレットまとめ
既に流通している配色パターンを利用すれば、自分で考える手間が省けるうえ、配色のメソッドから大きく外れることもありません。
こちらでは、フラットデザインやマテリアルデザインに最適な配色パターンを掲載しているサービスを集めました。
1.Coolors
Coolors.co - The super fast color schemes generator
CoolorsもCOLOURloversと同じく、ユーザーが作成した配色パターンを共有することができます。
配色パターンの上にカーソルを置き、「EXPORT」をクリックするとカラーコード付きの配色パターン画像をPNGやPDFなどの形式でダウンロードできます。
2.Oto255
0to255 – A simple tool that helps web designers find variations of any color
TOPページ下部にある色一覧で、好きな色を選ぶとその色のグラデーションが表示されます。自分の好みの色が選びやすくなっているのが特徴です。
3.NIPPON COLORS
日本独特の伝統食を再現できるカラーパレットです。Webサイトで和を表現したいときに重宝したいサービスです。
4.COLOURlovers
Browse Palettes :: COLOURlovers
COLOURloversのユーザーが作成した配色パターンを自由に閲覧、利用することができます。
こちらも、配色パターンをクリックすると各色のカラーコードが確認できます。
5.Material Design Color Palette Generator - Material Palette
Material Design Color Palette Generator - Material Palette
マテリアルデザインに最適化された色を揃えており、この中から2色選択すると自動的に配色パターンを提示してくれます。
2色をクリックしたら右側にサイトイメージが表示されます。
6.[ HUE / 360 ] The Color Scheme Application
[ HUE / 360 ] The Color Scheme Application
先に明度を選択し、好きな色を1色クリックすると、その色と組み合わせてもおかしくない色のみが表示されます。
まず「Bright(明るさ)」を選択します。
次に好きな色をクリックすると、その色と相性の良い色だけが表示されます。
各色をクリックすると画面下側に選択した色が配置されていきます。
7.colourcode - find your colour scheme
colourcode - find your colour scheme
こちらは、直感的なマウス操作で配色を決めることができます。
画面左端に表示されているマークをクリックし、好みの配色パターンを選びます。
配色パターンを選択後、マウスを上に動かすと色が暗くなり、下に動かすと明度が上がります。左右に動かすと色が変更され、マウスのホイールなどでスクロールすると彩度を変更できます。
配色が決まったらクリックしましょう。色が固定されたことを表すロックマークと、各色のカラーコードも表示されます。
8.Adobe Color CC
Adobe Color CC
Adobe社が提供する配色ツールです。
こちらも簡単な操作で複数色の配色を決めることができます。
先に「カラールール」を選択します。
画面中央の円の中にある「◯」をクリックし、そのままドラッグすると、様々な配色パターンが表示されます。
各色をクリックすると、1色を基準に微調整ができる仕様になっています。
(1色を変更すると、それに合わせて他の色も変化します。)
下部にカラーコードが表示されています。
- CMS
- ホームページを作成するための様々な作業を、一元的に管理できるシステムのことをCMS(コンテンツ マネージメント システム)と言います。ホームページを作成するには文章や画像などのコンテンツの作成からHTML、CSSを使った構成・装飾の記述、リンクの設定などが必要ですが、CMSを使用すればこれらの作業を自動的に行なうことができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- ユーザー
- ユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- ユーザー
- ユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
ツール紹介記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング
- フォーム作成
- CRM(顧客管理)
その他のカテゴリ
