画像は見せ方がとても大事です。ただ並べただけでは目を引くことができません。例えばPinterestがあれだけ流行ったのは、それまでになかった段違いな組み合わせのグリッドによるところが大きかったでしょう。画像を主体としているサイトでは特に見せ方に注意すべきです。 今回紹介するGrade.jsは画像に枠をつけてくれるJavaScriptです。画像に合わせた最適な色合いを選定してくれます。

Grade.jsの使い方

デモです。1色ではなく、左上と右下で2色使われているのが分かるでしょうか。そして間はグラデーションとなっています。

つまり特徴的、かつ元画像の雰囲気を壊さないような2色が選択されています。

この手のライブラリは幾つかありますが、Grade.jsはグラデーションを展開しているところが特徴になります。どの色を選ぶかのアルゴリズムがそれぞれ違いますので、自分の感性に合ったものを選ぶのが良いでしょう。なお、Grade.jsでは画像をCanvasに描画して解析している関係上、同一サーバまたは画像配信側でのCORS設定が必要になるので注意してください。

Grade.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Grade.js benhowdle89/grade: This JavaScript library produces complementary gradients generated from the top 2 dominant colours in supplied images.