色色[:iroiro]を使って資料の雰囲気を自由自在に変えてみよう

言葉からカラーパレットを生成できる色色[:iroiro]ですが、パワーポイントの配色設定を出力する機能もあります。

例えば・・・・
こんなダサダサの資料があるとします：

ダサい！でもあなたの会社でもこんな配色よく見ませんか？

「もっとこ〜、秋っぽさ出ないかなあ？」　いつもの上司の無茶ぶりです。

そんな時は、色色[:iroiro]で「秋」と検索してみましょう。

Export＞Powerpoint Color Paletteを選択し、

「here」からxmlファイルをダウンロードします。

そして、このファイルをPower Pointの「Theme Colors」フォルダに置くと、
デザイン＞配色から「秋」が配色として選べるようになります。
これを適用すると、さっきのダサかった資料も：

確かに秋だ！

一発で秋っぽくなります。

雰囲気でどんな色調の資料も作れてしまいます。

例えば・・・

「昼」

昼っぽい！多分！

「サバンナ」

なんかライオンキングだ！

 「草原」

草食！

「魔人ブウ」

これで新年度の提案もバッチリ

ダサく無くなったかどうかはよく分かりませんが、
少なくとも「雰囲気で資料の色調が決められる」ようになることで、これまでよりも迅速に、効果的なプレゼンが行えるようになると思うわけです。

開発者のための色色[:iroiro]

言葉からカラーパレットを自動生成するサービス色色[:iroiro]は、

開発者の方々に使ってもらうためのAPIを様々用意しています。

Webサイト/ブログに貼る

こんな感じで：

（「深海」の色色[:iroiro]）

ブログに貼ることもできます。

方法：
1. 色色[:iroiro]に行く
2. なんか検索する
3. Export > Embedで、表示されるHTMLをコピー
こんな感じのHTMLが表示されます：
<iframe src="http://synthsky.com/iroiro/embed?req=%E6%B7%B1%E6%B5%B7" style="width:800px;height:600px" frameborder="0" style="border:0"></iframe>

4. 好きなところに貼る

embedに渡すパラメータ：
req： 検索文字列
maxs： 最大スピード（デフォルト：0.9 有効範囲：100〜0）
mins：最小スピード（デフォルト：0.3 有効範囲：100〜0）
maxc：最大表示色数（デフォルト：20）

例えば：

req=海, maxs=0.3, mins=0, maxc=1

 
→maxCが1なので、色が一つしか表示されない。


req=正月, maxs=2, mins=1, maxc=3

<iframe src="http://synthsky.com/iroiro/embed?req=正月&maxs=2&mins=1&maxc=3" style="width:800px;height:600px" frameborder="0" style="border:0"></iframe>

 →めっちゃ早い

その他API
JSONやXMLで取得できます：
http://synthsky.com/iroiro/q?format={xml,json}&req="リクエスト"

注意事項

• 僕のサーバに負担かけすぎそうなことは常識的に判断して止めてください。
• 新しい言葉を検索する時に一番負担かかります。例えば大量の新規の言葉を何個も短い間隔で立て続けに検索する、とかは止めてください。どうしてもという場合は、僕に一報ください。
• 一旦、直接的な商用利用はやめてください。（元データの著作権がどう影響するか、など調べきれてないので）。
• アフィリエイトとかブログに貼るだけ、などは特に問題ないと思います。

色色[:iroiro]に服コーディネート機能追加！

言葉からカラーパレットを自動生成してくれるサービス色色[:iroiro]に、もの凄く要らない機能を追加してみました。
このボタンです：

謎のボタン

色色[:iroiro]でキーワードを入力してパレットを作成し、

「魔人ブウ」と書いてある

上記「Coordinate Clothes」ボタンを押すと、

もの凄く魔人ブウ

魔人ブウな服を提案してくれます。

原理
元データにYahoo!JapanさんのFasionNaviを使っています。
これは、「色」と「服のカテゴリ」を選択すると、それにマッチする服を返してくれるというサービスです。

色色[:iroiro]で作った色で、事前に決めうちした服のカテゴリ（現在は「ワンピース」「ブーツ」「バッグ」「帽子」の４種類だけ）をFasionNaviで検索し、画面上に表示しています。

バレンタインにはバレンタインコーディネート、
失恋したら失恋服、
ニートになったらニートコーデなど、
その時々に合わせたコーディネートを楽しんでみてはいかがでしょうか？

＊Yahoo様：FasionNaviの利用規約が見つかりませんでした。この機能、問題あったらすぐ消すので連絡ください。

[:iroiro] lets you generate colour palettes from any word or phrase

What is it

[:iroiro] is a service that automatically generates colour palettes based on any given word or phrase:


(eg: colour palette for "childish")

I built this service after a year of launching various services, realizing that I totally suck at picking colours, and thinking:
"Wouldn't it be great if engineers could just describe the design instead of having to build one for themselves?"
iroiro does just that; you enter any words/phrases that describe your concept, and it generates an appropriate colour scheme, which you can use in your design.

How to use:
(1) Go to: [:iroiro] (http://synthsky.com/iroiro/)
(2) Enter any keyword (e.g.: "fish","iPhone","green")
(3) Export colour palette as XML, CSS, PNG, or even clothes

some examples:

"childish"

Abstract concepts work pretty well

"turtle"

Common nouns give good results too

"sea" and "deep sea"

[:iroiro] can capture the subtle differences in the phrase

"British"

Names of countries work well too.

"Japanese"

"Valentine's Day"

When your client asks you to build a Valentine's day website in 5 hours...

"Dragon Ball"

or whatever.

By automating the process between "deciding on a concept" and "choosing colors to match the concept", [:iroiro] allows you to speed up your design prototyping. 

It is especially suitable for engineers who have no design skills (like me :) )

Export features
[:iroiro] lets you export the generated colour palettes into a wide variety of different formats:

○HTML

○CSS
○XML
○Powerpoint color palette
○JSON
○Embed HTML


○ You can even buy clothes to match the colours!

How it works
[:iroiro] works by performing an image search of the given phrase, and extracting representative colors from the found images.

In the media
Gigazine
ITmedia

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

Also in English here

２０秒で分かる 色色[:iroiro]

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

例えば：
「夏」

夏っぽい。

「哀愁」

確かに哀愁漂っている。

後半で原理を説明しますが、どんな抽象的な言葉でも、具体的な言葉でも、「なんとなくそれっぽい」色を返してきます。

生成したカラーパレットを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に連絡ください。