タップできるもくじ(見たい場所までジャンプ)
・何ができるツールなの？
ものすごく簡単に結論から言いますと、「コンピュータが自動的に、まとまりのある適切な色の組み合わせ（パターン）を生成してくれるジェネレーター」です！
新しくWebページのデザインや広告のデザインを始めたい時など、まとまりのある配色パターンを色々見てみたい！という場面で活用できます。
「デザインが苦手・・・！」という人でも簡単に着想を得られるのでおすすめです！（私がデザイン苦手なのでよく利用します！笑）
今回紹介する分は、無料かつ登録なども一切不要で、ブラウザ上で簡単に使えます！
・Colormindの具体的な使い方
使い方が、いくつかありますので順に紹介していきます！
１．トップページ部分の使い方
まずは、Colormindのトップページから見ていきましょう。
トップページには、このような画面が出てくると思います。
Colormindでは、表示されているような5色をバランスの取れた色合いでランダム提示してくれます。
はじめに、左下の「Generate」（生成）ボタンを押してみましょう。
すると、5色の色がランダムで切り替わっていきます。ランダムではありますが、5色の関係は調和のとれたもので表示されるので、気に入った配色があれば、そのまま自分のデザインに応用することが可能です。
各色の左下に表示されている英数字はそのカラーを16進数で表したカラーコードとなっています。
もしも、「好きな色を指定してそれをもとにした他の色の配色が見たい！」といった場合は、下の画像に赤〇で示している部分のボタンをクリックしてみてください。すると、カラーパレットから自由に色を選択できるほか、直接カラーコードを指定することもできます。
そしてカラーパレット表示ボタンの隣にあるカギのマークをクリックするとその色をロックすることができ、ロックしたものは再度「Generate」ボタンを押してもその色だけは切り替わらなくなります。ロックは何個でも可能です。
また、ロックした色の並びも重要になってきます。
2色3色と固定していった場合、ロックした色を補完するような形で他の色が生成されていくので、カラーパレット右隣にある左右の矢印ボタンで色を移動させて「Generate」することで、また一味違った配色パターンを生み出すこともできます！
２．「Website Colors」部分の使い方
Colormindの一番上部分、ヘッダーメニューにある「Website Colors」の使い方を説明します！
「Website Colors」をクリックします。
一見、トップページとあまり変わらないような感じがしますが、少し異なる部分があります。
「Generate」の右隣にある英文を日本語に翻訳してみました。（Google翻訳）
内容は以下の通りです。
デモランディングページに適用されているカラーパレットを参照してください。このパレットでは、明るい色合いが左側に表示されます。
最良の結果を得るには、メイン（中央）色を選択してパレットの残りの部分を生成してみてください。
http://colormind.io/bootstrap/より引用（Google翻訳）
との事。
実際に見てみると体感できると思いますが、Website Colorsでは、左側に白系の明るい色、そして右に行くにつれて暗い色になっていくように生成されます。
「Website Colors」というページなぐらいなので、特にWebページの配色デザインにより適した色が作れるということです！
下にスクロールしてみてみると、ページ上部で生成された5色をもとにしたWebページの制作例が、下にリアルタイムで表示されます！
「Generate」を押すことでどんどん変わっていくので、「シックなデザインにしたい」や「明るいかわいいデザインにしたい」など色々な視点の色合いを直感的に作れます。
参考
さらにページ中央付近には、デザインが初めての人でも分かりやすいように、色の組み合わせについて解説された動画も貼ってありましたので是非見てみてください。ナレーションは英語ですが、YouTubeの字幕設定を「オン」にすると意訳されたものが表示されるので安心です。
３．「Image Upload」部分の使い方
Colormindの一番上部分、ヘッダーメニューにある「Image Upload」の使い方を説明します！
「Image Upload」では、写真やイラストなどの画像データをアップロードすると、自動的にそのデータの中の主要な色、5色を抽出して表示することができます！
お試しで、写真をアップロードしてどのように抽出されるかやってみました。
使うのはこちらの写真
生成してみると・・・
このような配色で抽出されました。
「画像から読み取っているからワンパターンしかないの？」と思うかもしれませんが、ここでも再生成が可能です！
「Generate」を押すと、セミランダム（画像の中の色からランダム）で生成してくれます！
こんな感じになったり・・・
こんな感じになったり！
何度でも再生成が可能です！
・まとめ（それぞれどんな人・どういう時におすすめか）
機能のおさらいです！
ポイント
- トップページ部分
完全ランダムで生成。（色の着想をゼロから得たい人におすすめ）
- 「Website Colors」部分
左側から右側に向かって明度の高い順に生成。（ベースとなる色とアクセントとなる色がバランスよく表示されるため、Webページや広告など整った配色を見つけたい人におすすめ）
- 「Image Upload」部分
写真やイラストなどの画像データをアップロード。そのデータをもとに生成。（ある媒体で、同じような色合いのデータを扱いたい時のような、統一感を持たせたいデザインをしたい人におすすめ）
デザインに限らず、洋服などの画像データをアップロードして色を抽出し、ファッションコーディネート等の色合いの統一感の参考にもおすすめできると感じました！
いかがでしたでしょうか？
ぜひ、配色の着想をより広い視野で見つけられる、Colormindをお試しください！
