ITツール Webディレクターの仕事

デザインセンスが壊滅的な私が良い感じの配色を実現させている方法

資料の出来栄えを大きく左右する「色」。資料を作り込むほどのめり込み、抜け出せなくなってしまう。何が正解か分からず、全く抜け出せない泥沼。

「もうちょっと青みを…」「いや、赤みが強すぎるから、彩度を落として…」「この色の組み合わせはないなぁ。何色を差し色にしよう…」

色は無限大。限りある知識と経験だけでは、なかなか正解の配色を手に入れられないことでしょう。

そんな時に私が役立てている、配色に関するお話しを致します。

カラーパレットの作り方

カラーパレットは自作しない

そもそも私は美術的なセンスがありません。美術の成績も、彫刻などの造形ものはそこそこでしたが、絵画的な課題はてんでダメでした。

そんな私が自分で配色を作ろうと思ったら、時間がいくらあっても足りません。そしてクオリティは、かけた時間に反比例していくでしょう。

ですので私は、自分で作りません。他の色んな物を利用します。

それは時に写真や画像であったり、人が作ったカラーパレットだったり、ネット上のキレイなデザインだったり…。

好みの写真からカラーパレットを作る

お気に入りの写真はありますか?もしあれば、その写真のカラーパレットを作ってみてはいかがでしょう。たぶん、それがあなたの琴線に触れる配色なのですから。

写真などの画像ファイルからカラーパレットを作る際は、以下のサイトを利用します。画像ファイルを読み込むことで、使われているカラーパレットを作成してくれるウェブサービス。非常に重宝します。

▼カラーパレットを抽出したい画像を選びます。URLでもOKです。
カラーパレットの作り方

▼読み込みが完了すると、その画像で使われている色のカラーパレットを自動生成してくれます。
カラーパレットの作り方 3

人の作ったカラーパレットを利用する

「この人センスあるなぁ」と思うことは、割りと頻繁にあります。そういう配色は、恐れながら参考にさせて頂いています。

特に「kuler」というサイトでは、多くの方が自分好みのカラーパレットを作成していますので重宝しています。

▼誰かが作ったカラーパレット。お気に入りがあれば、その色コードを簡単に取得できます。
カラーパレットの作り方 2

基準だけ決めて、配色を作ってもらう

「この色トレードカラーだから、必ず使いたい!」そういう色がある方は、その色を基準にカラーパレットを作成してもらいましょう。

先ほどと同じ「kuler」の別ツールを使います。1つの基準色を選び、配色パターンを選ぶだけで、カラーパレットを生成してくれます。

▼基準色を決めるだけで、様々な配色パターンを見せてくれます。手軽に弄って遊べるのでとても楽しい。
カラーパレットの作り方 4

画面上からカラーパレットを取得する

パソコンを操作する中で「あー、この色好みだなぁ」と思った時に役立つのが、アプリ「DigitalColor Meter」です。これはMacにデフォルトでインストールされています。

colors

このアプリを使用すれば、Macの画面上の好きな場所から色を抽出し、色コードを取得することができます。

バナーでもウェブサイトでもアプリアイコンでも。Macの画面上に表示されているものであれば、その色コードを取得できます。これで、自分が「いいなぁ」と思った配色をそのまま再現することができます。

使い方にちょっとコツが必要なので、詳しい説明は以下の記事を参考にしてみてください。

▼画面上にある色なら何でも取得可能。
カラーパレットの作り方 5

あとがき:センスがない人の強い味方

私がクライアントへの提案書やプレゼンの資料を作成する時、非常に重宝している方法をご紹介しました。いかがだったでしょうか。私自身はホント、デザインや美術のセンスがないので、こういうサービスは非常に助かっています。

色ってホント不思議ですよね。ひとつ違うだけで、全体の印象が全く変わってしまう。だから神経質になるのですが、過敏になってもダメなんですよね。バランスが難しい。

ぜひ今日からの資料作成にお役立て下さい。それでは、今日はこのあたりで。

\ この情報をシェアしよう! /

  • この記事を書いた人

ばんか

Webディレクターとしてサラリーマンをやりつつ、個人でブログや執筆活動をするパラレルキャリアを実施中。 ITツールを日常で活かす方法を広く伝え歩くことをミッションとした「ITツールエバンジェリスト」です。AllAboutやYahooクリエイターズプログラムでも活動中。

-ITツール, Webディレクターの仕事
-, , , , , ,