画像を指定するだけ!非デザイナーでも簡単にそれっぽい配色ができるツールを作ってみた

Pocket

TECHSCORE Advent Calendar 2015 の 3日目の記事です。

こんにちは。UIデザイナーのタカムラです。
いきなりですが、みなさんは自分の配色センスに自信がありますか?

特に、普段あまりデザインをしないという人はドキュメントやスライド作成などの際、どうやって色を決めたらいいか困ってしまうことが多いのではないでしょうか。
なんか使う色が多すぎてまとまらなかったり、逆にほぼモノクロになってしまったり・・・

というわけで、今回はHTML5周辺技術の個人的なおさらいを兼ね、デザイナーじゃない人でも簡単にイケてる配色を作れるツールを作ってみました。

できたものがこちらになります

早速ですが、百聞は一見に如かず、ということで完成品を見てみましょう。

デモ画像

デモページ

(※モダンなブラウザでご覧ください)

 

使い方はとても簡単。お好みの画像をドラッグ&ドロップで放り込むだけ!
たったそれだけで、画像で使われている色を元に、いい感じのカラーパレットが(たぶん)できあがります。

ちなみに、こうした綺麗な配色の写真を元にカラーパレットを作って利用する方法は、完成系がイメージしやすいのでノンデザイナーの方にもお勧めです。

例えば自社プロダクトの関連資料で使う色を決めたいなら、自社や製品ロゴの画像を元にしたり、コーポレートサイトのキャプチャを元に作ると良いでしょう。
特にそういった縛りがないのであれば、単純に「キレイだなぁ」と思った画像を指定すればOKです!

色の値を拾うにはカラーチップをクリックしてください。クリップボードにコピーされます。
もちろんフォーマットは HEX、RGB、RGBA から選択可能です。(右上のセレクトボックス)

また、各色の使用割合に応じて Main, Sub, Accent のカテゴリに分けています。
色を適用する面積が広い場合は Main を、狭い場合は Accent を使うなどすると元の画像の印象を再現しやすいでしょう。

 

どうやって作ったか

全部解説すると長くなりそうなので、大きな流れとポイントだけまとめます。

  1. Drag & Drop API と File API でローカルの画像を取得
  2. その画像のピクセル情報を Canvas 経由で取得
  3. 解析は処理が重いので Web Workers で別スレッド処理
  4. 近似色は適当に丸めて、使用率が高い色を抽出
  5. Worker から返ってきた結果を画面に出力

 

1. Drag & Drop API と File API でローカルの画像ファイルを取得

ブラウザ外から画像ファイルをドラッグ&ドロップ(以下 D&D)で読み込みたかったので、HTML5 の Drag & Drop API を使いました。
モダンブラウザであれば、jQuery UI を使わずにD&Dを実装できるようになったので便利ですね!

D&Dの機能を入れるだけならば、それほどハマりどころはありません。
ただ、UIで適切なフィードバックを表示してあげないと、ドロップ可能な領域がわかりにくいので、そこはしっかりケアする必要があります。

また、ローカル画像ファイルの取得は window.URL.createObjectURL() が便利でした。
D&D APIから取得した file オブジェクトを渡すだけでURLが取得できるので、お手軽です。

 

2. その画像のピクセル情報を Canvas 経由で取得

画像ファイルの色を解析するうえでポイントになるところです。
ピクセル単位での情報を画像ファイルから取得するためには、いったん Canvas に描画する必要があります。

Canvas から得たピクセルの情報は画像左上から順に

のように一つの配列に入っているので、このデータを元にカラーパレットを作ります。

 

3. 解析は処理が重いので Web Workers で別スレッド処理

工程2で取得したピクセルのデータですが、サイズが

になるので大きな画像の場合、解析処理に数秒〜数十秒要します。

ですので、Web Workers で別スレッド処理してあげるといい感じです。
こういった画像解析は worker での処理にうってつけですね。

 

4. 近似色は適当に丸めて、使用率が高い色を抽出

RGBの値が1違うだけで別の色扱いすると、カラーパレットが同じような色で溢れかねないので、近い色はまとめてやります。
そのうえで色毎に出現回数をカウントしていき、よく使われている色とその割合を算出します。

あまり色数が多すぎても選ぶ際に迷ってしまうので、Main, Sub, Accent それぞれ最大で5色までピックアップするようにしています。

 

5. Worker から返ってきた結果を画面に出力

最後は worker から返してもらったカラーパレット情報を画面に出力するだけです。

 

おわりに

いかがでしたでしょうか?
「画像を用意するのすら面倒くさい!」という人のために、URL指定すると自動でWebページのキャプチャをとってくるようにするのもアリかもしれませんね。

また、「なんか思ってる色が抽出されなかった...」
というケースも残念ながら多少あったかと思います。
そのあたりは近似色の丸め方が洗練されれば改善されそうな感じがしています。今後の課題です。

クリスマスカードや年賀状等、ちょっとしたデザインで配色に迷った場合にぜひお使いください!

 

参考サイト・使用素材

 

Pocket

Advent Calendar 2015の連載記事

  1. TECHSCORE Advent Calendar 2015
  2. Redshift と PostgreSQL に同時に JDBC 接続する
  3. Lombok で Spice up your Java!
  4. 画像を指定するだけ!非デザイナーでも簡単にそれっぽい配色ができるツールを作ってみた
  5. 新卒文系エンジニアの記録:配属半年間の失敗を振り返ってみた
  6. 非同期処理のすすめ
  7. ioDrive2の導入で支える、そのIOPS - 導入検討編.
  8. GoでパイプラインからSlackに通知する
  9. fuse でオレオレファイルシステムを作ってみた (Haskell で)
  10. Erlang はじめました
  11. ちょっと地味なビルドとリリースの話 (レガシーシステム改革、はじめの一歩)
  12. Java8 最速 boolean[] to Stream 選手権
  13. Google Apps の Directory API にてWebブラウザを介さずに認証する
  14. 風データをビジュアルに表現する
  15. マイクロフレームワーク「Ninja」を使ってみる
  16. 赤ちゃんvimmerからよちよちvimmerにクラスチェンジを果たすためのTips
  17. PostgreSQL FDW を作ってSQLでログ検索してみた
  18. Goで偽名ジェネレータを作りました
  19. 書き込み中に削除されたファイルを救出する
  20. 運用情報更新のススメ
  21. ちゃんと読んでくれましたか?
  22. Presto コネクターを実装する 第三回
  23. Ruby2.3を触ってみる
  24. Git 困ったときのtips集
  25. 5分で読む入門編:Java 8 ラムダ式 コレクション編(2)リストの検索
  26. CloudFront (+ S3) + JWPLAYER で様々なデバイスのブラウザから動画をストリーミング再生する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です