デザインの配色に迷っているなら自然から拝借しよう!

デザインの配色に迷っているなら自然から拝借しよう!

こんにちは!
しがない雑食系クリエイターのはまやん(@hama_paz)です!

前回、配色からデザインを考える記事を公開しました。

関連記事

こんにちは! しがない雑食系クリエイターのはまやん(@hama_paz)です! 皆さんはデザインする時にカラーを決める(以降、配色と表記します)のって大変じゃないですか? せっかくレイアウトバッチリに決まったのに配色が[…]

カラーからデザインを考えてみよう!配色のコツを画像で解説

おかげさまで、まだまだ全体のPV数は少ないですが1番見てもらってる記事になります!

カラーイメージは大体わかったけど、それでも配色に困るケースも出てくるがな!って思う方もいるはずですよね?

じゃあそんな時の為に力を貸してくれる偉大なデザイナーがいたら?

そのデザイナーはそう、私達が住んでいる地球です!

地球には様々な広大で綺麗な見た人の人生観を変えるほどの絶景や大自然がありますよね!

そこまで人の心を動かすほどの力を配色のアイデアとしてお借りしちゃいましょう!

今回はカラーサンプリングのアプリを使って自然から配色を拝借してデザインに落とし込んじゃおうって記事です!
(オッサンみたいなダジャレを多用してますが、気にしないでください)

この記事を読む事でカラーサンプリングのアプリの使い方と、そこからカラーを適用させる方法がわかります!

はまやん
地球パイセンカッケーッス!
スポンサーリンク

元となる画像を探す

まず、配色の元となる画像が必要ですのでオススメの画像サイトをご紹介します。

有料の画像素材

  • Shutterstock
  • Adobe Stock

無料の画像素材

  • ODAN
  • 自分が撮影した写真

今回は配色を参考にするだけなのですが、画像には著作権が発生しますので有料サイトの画像を勝手に使うのはNo Goodです!

もちろん購入された画像であれば使用はOKですよ!

無料の画像であればODANがかなり使いやすいです!
日本語検索も可能なので、今回の配色の参考だけでなくデザインにも使えますよ!

ちなみに当ブログではODANから探して画像を使用しています!

また、あなたのスマホやカメラの中にある自分で撮影した画像ももちろん使用OKです!

旅行に行った時やインスピレーションを感じて撮影した画像を使うとデザインにあなたが感じた感情が入って素晴らしいデザインになりやすいですね!

カラーサンプリングアプリを使う

さて!配色の参考になる画像が見つかりましたか?

今回はこちらのアンテロープ・キャニオンの画像を参考にしたいと思います。
(いつかは行ってみたい)

デザインの配色に迷っているなら自然から拝借しよう!1

ここから画像をトレースしたり色を目で合わせてカラーを使うってわけではございません!

この画像からアプリを使ってカラーをサンプリングするのです!

サンプリングって何?って事なんですが、簡単に言うと画像から使用しているカラーをほじくりだして保存するって事です!

しかもアプリを使えば自動でやってくれるのです!

ビバ!現代社会!

カラーをサンプリングするアプリですが、世の中には様々なカラーのアプリがここでは紹介しきれない程たくさんあります。

ただ今回は後述のデザインに配色する事も考えてAdobeが提供している「Adobe Capture」を使用します!

Adobe Captureの使い方

インストールはこちら

Get it on Google Play

インストールが出来たらログインします。
Adobeアカウントをお持ちの方はAdobeアカウントでOKです。

お持ちでない方はFacebookかGoogleのアカウントでもログイン出来ます!

ログイン出来たらスワイプして「カラー」のとこに合わせます。

おそらくカメラが立ち上がっているはずなので、右下の画像のボタンを押して今回サンプリングする画像を選択します。
※画像参照

デザインの配色に迷っているなら自然から拝借しよう!21

するとある程度自動でアプリがカラーをサンプリングしてくれます!

思ったカラーになっていない時は、画像の上に乗っかってる丸を動かしてお好みのカラーを合わせます。

OKであれば下のチェックボタンを押します!
※画像参照

デザインの配色に迷っているなら自然から拝借しよう!3

 

編集の画面が出てくるので、ここでも細かく調整は出来ます。

右上の青い矢印を押すとCCライブラリに保存する画面に切り替わります。

なんとこのアプリからカラーテーマをCCライブラリに保存できるので、そのままPhotoshopやIllustratorなどでカラーを使用する事が出来ちゃうんです!

デザインの配色に迷っているなら自然から拝借しよう!4

Adobeアカウントをお持ちでない方はもちろん保存は出来ますが、あくまでこのアプリの中で保存と編集が出来る状態なのでAdobe以外のソフトにカラーテーマをアプリから直接連携する事は出来ません。

その他にもAdobe Captureはブラシやパターンを作成する機能などありますが、今回は割愛します。

Adobe Captureのご紹介記事も作成予定ですのでお楽しみに!

デザインに配色する

これで自然の風景から配色をサンプリング出来たところで、デザインに落とし込んでいきましょう!

今回も配色の記事で使用したこちらの画像を使います!

カラーからデザインを考えてみよう!配色のコツを画像で解説13

サンプリングした画像を元に配色した画像がこちら

デザインの配色に迷っているなら自然から拝借しよう!5

さすが地球パイセン!グッとくるデザインに仕上がりました!

その他にも自然の風景からカラー情報をサンプリングして作ってみました。

富士山

デザインの配色に迷っているなら自然から拝借しよう!6

ハワイ

デザインの配色に迷っているなら自然から拝借しよう!7

アルプス

デザインの配色に迷っているなら自然から拝借しよう!8

ワイが作ったトマトチキンカレー

デザインの配色に迷っているなら自然から拝借しよう!9

はまやん
良い!ただ良い!

配色の注意点

こちらの方法は確かに自然の絶景からカラーテーマをサンプリングして配色していますが、
これと同時に配色の難しさや大切さを常に頭に置いていてください。

配色なんて適当に画像からピックしてきたら楽勝っしょ!」と言うように脳死した思考ではあなたの配色センスは磨かれません!

「なるほどこういう色使いが良いのか」とか
「このバランスでメインカラーとサブカラーをすれば良いのか」など自然から学ぶべき事はデザインにおいても十分あります。

この思考は配色だけでなく、文字や表現方法などデザインにおける全てに通じます。

脳死した思考ではワンパターンなデザインしか出来ませんし、逆で言えばデザインの幅が広がりますよ!

はまやん
常に貪欲で謙虚でアーレよ!

自然から配色する方法まとめ

いかがでしたか?
今回の自然から配色する方法のまとめです。

  • 真や画像からカラーテーマをサンプリングしよう
  • Adobe Caotureのアプリを使えばサンプリングが便利
  • 配色はアプリ任せにしすぎない、常に自然から学ぼう

デザインの配色に迷ったアナタ!ぜひお試しあれ!

はまやん
それでは良いCreativeライフを!
デザインの配色に迷っているなら自然から拝借しよう!
Twitterやってるのでフォローしておくんなまし!