最近のWebデザインのキーワードの一つにアダプティブデザインというのがあります。アダプティブとは適応性を意味する言葉で、単純に言うとデバイスではなく周囲の環境やそのターゲットに向けて最適化された情報を配信しましょうと言ったような概念になるようです。 確かにデスクトップとスマートフォンでは求めている情報が違ったり、その利用シーンによって求める情報が変わってもおかしくはありません。そんなアダプティブの一例としてjquery.adaptive-backgrounds.jsを紹介します。 デモ。緑系の写真の背景は同じくグリーン系に。 黄色系の場合は黄色に。 同じく赤系。 jquery.adaptive-backgrounds.jsの使いどころとしてはCGM系があるかと思います。予め決められた写真を出すのであればあえて背景をダイナミックに変更する意味はありませんので、ユーザをはじめ任意にアップロードされた写真を表示する際にそれに合わせた背景色、背景パターンに展開するというのはありではないかと思います。 jquery.adaptive-backgrounds.jsでは画像を解析し、それに合わせた色調の背景色を設定します。画像から意図を読み取るという点においてはアダプティブと言えるのかもしれません。 jquery.adaptive-backgrounds.jsはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。 jquery.adaptive-backgrounds.js • A jQuery plugin for extracting dominant colors from images and applying it to its parent briangonzalez/jquery.adaptive-backgrounds.js