1Click飲みRomoCartTempescope色色[:iroiro]Other Projects

2014年2月2日日曜日

言葉をカラーパレットに変換する『色色[:iroiro]』を作った。

Also in English here

20秒で分かる 色色[:iroiro]

色色[:iroiro] というサービスを開発しました。
適当な言葉(例:「夏」「哀愁」「松崎しげる」)を入力すると、その言葉に最も合うカラーパレットが自動的に生成できるというサービスです。

例えば:

夏っぽい。
哀愁
確かに哀愁漂っている。

松崎しげる
確かに松崎しげるカラーだ。
後半で原理を説明しますが、どんな抽象的な言葉でも、具体的な言葉でも、「なんとなくそれっぽい」色を返してきます。

生成したカラーパレットをCSSやパワポの配色設定として出力したり、服をコーディネートしたりできます。

従来、デザイナーではない僕らは、ウェブサイトを立ち上げる時会社の資料を作る時今日着ていく服を選ぶ時
周りのセンスあるイケメン達に「えwダサくね?ww」等と心ない突っ込みを受ける恐怖に怯えながら色選びをしていました。
色々[:iroiro]を使えば、コンセプトを表す「言葉」を用意するだけで、胸を張れる配色を自動的に選べるのです。

原理
そのうち詳細に書きますが、
入力を受けた言葉(eg「海」)をネットで画像検索し、見つけた画像から主要な画像成分を抜き出す、といったことをしてます。
興味ある人はメッセージください。

こんな利用シーンがあるかも。
・抽象的な上司への対応「なんかもっとシズル感出ない?」
・その日の気分でブラウザのデフォルトcssを変えてしまおう「俺今日ガチャピン気分だわ」
・プロトタイピングの高速化に
など。

もっと遊ぶ

そりゃそうだ。

戦争
第二次世界大戦のドキュメンタリーでよく見る配色?

ミッキー
セーフなはずなのに、何故かギリギリ感の漂う配色

他にこんな遊び方ができます:
・ブランド名 Hitachi Panasonic Sharp Twitter Google
・年 2014 2000 1946
・国 日本 中国 イギリス アメリカ
・感情 怒り 悲しみ 喜び 逆ギレ
・人名 →肌色や服が強く出てしまうため、よっぽど特徴のある人でないと面白くないと思います。アニメキャラは意外と行けるみたいです。

出力先も様々
「Export」メニューから色々な出力ができます。
主な出力先:
○Tweet
 →ここから選ぶと、今見ている色への直リンクがTweetできます

○XML
 →なんかマッシュアップしてください

○Powerpoint Color Palette
 →パワポ資料の配色設定も書き出せます


○Firefox用CSS
 →FirefoxのuserContent.cssをこのファイルに置き換えると、ウェブページを全部好きな色合いにできます。

HTML埋め込みコード
 →ページ冒頭のように、あなたのブログに埋め込めます。

○壁紙 
 →使いどころが分かりませんが。。。1920x1080のjpgがダウンロードできます。

服をコーディネート
 →全くもって無駄に、配色に合った服のコーディネートをしてくれます。
今日は魔人ブウ着ていこう♩

他にもこんな遊び方

○色色[:iroiro] × プロジェクションマッピングで、部屋の雰囲気を自由自在に変えよう

色色[:iroiro]で作った配色を壁や家具に投影することで、スマホに言葉を入力するだけで部屋の雰囲気を変えてしまおう、というテストです:



など・・・

なにか面白い使い方考えたら、メールかtwitterに連絡ください。

9 件のコメント:

  1. 入力して、検索しても「colours」のままなのですが…?

    返信削除
    返信
    1. あ、報告ありがとうございます。Internet Explorerですか?
      IEは未対応なこと忘れてました。直します!

      削除
  2. 出力したjpg(壁紙)の二次利用について、制限等はありますか?

    返信削除
    返信
    1. 画像、CSV、XMLなど、Exportから出力したものは制限なく(許可なく)使ってもらって問題ないです。
      気持ち的には「色色ってサービスで作ったんすよ」と一言宣伝してもらえると、尚テンションあがります。

      削除
  3. これはすごくいいサービスです。
    UIのセンスというかデザインもいいですし言うことなしです。
    使わせていただきますね。ぜひ、長く続けてくださいねー。

    返信削除
  4. gigazineの記事で見つけました。
    最高です。 超~オモシロイ

    返信削除
  5. 携帯とかの壁紙には対応する予定とかありませんか?

    返信削除
    返信
    1. 対応しました。
      Wallpaperから好きなサイズ選んで出力してください。
      (必要な解像度がリストに無かったら追加するんで教えてください。)

      削除
  6. 共感覚は関係ないと知りつつ、自分の名前を入れて見たら
    見えている色に限りなく近くてびっくりしました。
    何だか嬉しかったです。とても面白いです。

    返信削除