ネイチャーエンジニアのモノづくり術

プログラミング、フリーランス、コンテンツ制作に関する情報を発信します。

デザイン初心者がWebサイトやアプリの「配色」を決めるのにオススメのツール

Webサイトを作っているけど、色の組み合わせを考えるのに悩んで時間が掛かってしまう…

何か良い方法はない?

こんな悩みにお答えします。


ネイチャーエンジニアの亀田です。


僕はフリーランスのITエンジニアで、スマホアプリの配信、ブログの運営をしています。


それら自分のコンテンツを作る上で、必ず必要になるのが「デザイン」。


特に配色は難しく、なかなか自分の思った通りのイメージになりません


そんな非デザイナーである僕でも、簡単に一定のクオリティーが出せる便利なツールがあります。


そのツールの名前は、COLORION


というわけで今回は、配色に役立つツール「COLORION」について紹介します。




 

色の組み合わせ候補を出してくれるWebサイト「COLORION」

COLORIONは無料で使えるWebサイトです。


COLORIONのサイト

COLORION公式サイト


配色を決定するまでの手順は簡単で、以下の3ステップのみ

1. メインカラー、サブカラーを決める
2. COLORIONで、1. で決めた色を選択してSubmit
3. 表示された配色候補から、イメージに近い物を選ぶ


1. メインカラー、サブカラーを決める

メインは青にして、サブは黄色系にしようかな、とかざっくりで良いです。

2. COLORIONで、1. で決めた色を選択してSubmit

COLORIONの上部メニューの「SEARCH」を押す→遷移後の画面で「Related Palettes for」のセレクトボックスをクリック。


すると、以下のように色候補が出てきます。

COLORION 色選択


ここで、1. でイメージした色に最も近いものを選んで、「Submit」を押しましょう。

3. 表示された配色候補から、イメージに近い物を選ぶ

以下のように、選択した色に近い色が含まれる配色の候補が表示されます。

COLORION 候補表示


この中から、イメージに近い配色を選ぶだけ


ちなみに、色をクリックすると、RGBカラーコードが表示されます。

COLORION RGBカラーコード


配色デザインをさらにブラッシュアップする方法

f:id:kkamedev:20180623164718j:plain

COLORIONで最低限の配色クオリティは担保されます。


しかし、たくさんある候補から「どの色を選ぶか」によっても、サイトやアプリの雰囲気は変わってしまいます。


実は、僕の妻はデザイナー。


COLORIONを使って出てきた候補からお互いに色を2人で選んでみると、非デザイナーの僕と違うんですね。


その結果、やはり妻が選んだ色の方が表現したいイメージに近いことが多いです。


その違いが出る大きな理由は、僕の色のトーン(明度、彩度、色相)の理解が浅いこと。


使う色は同じであっても、割合なども考慮して色の選択をすべきで、僕が感覚で色を選ぶと、トーンがチグハグになったりしてしまうのです。


なのでCOLORIONという便利ツールを使っても、使う人のデザイン力によってクオリティに差が出てしまいます


逆に言えば、これらのデザインの基礎を押さえることで、COLORIONをさらに活用できるということ!


そのために僕も、デザインの基礎について勉強しました(今も勉強中)!

初心者にオススメのデザインの本

そこで、初心者である僕でも読みやすかったオススメの本が以下の2冊。


2冊とも、ただのデザイン理論ではなく、具体例をふんだんに使って解説してくれていて、イメージしやすいです。

サルでもわかる!デザインの本

サルでもわかる!」の通り、初心者でもつまずくことなく読み切れます。


基礎から優しく教えてくれるので、今まであまりデザインに触れたことのない人にオススメ

なるほどデザイン

デザイナーである妻にオススメされた本。


表紙はカジュアルな雰囲気をながらも、中身はかなり濃いです。


「サルでもわかる!」は、1要素ずつ説明しているものが多いですが、こちらはもう少し俯瞰での解説(画面全体、バランスなど)になっています。

まとめ

自分でWebサイトやアプリを作ると、必ず「配色」の問題が出てきます。


単発の政策だったらCOLORIONの候補から選ぶのみでもアリです。


しかし、今後もWebサイトなど自分のコンテンツを制作していくのであれば、デザインの基礎を学んでおくのがオススメです。


そうすれば自分の力だけでも、ある程度デザインのブラッシュアップが可能になりますよ!


この記事があなたのお役に立てば嬉しいです。


合わせて以下の記事もどうぞ↓

フリーランスになるメリットを知りたい!

エンジニアがフリーランスになるメリット・デメリット

セルフブランディングしたい!

個人アプリは稼げるか?合計9本のアプリをリリースした開発者の話


では、また。