Aware.jsは時間によってデザインやテキストを変えるJavaScriptです。

昔、JavaScriptと言えばWebサイトの表示をちょこっと変えるアクセントのような位置づけでした。訪問した時間によって「おはようございます!」といったメッセージを出すのに使われたりしていました。同様のことを、さらに今風にしたのがAware.jsです。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-17 12.25.58_thumb.1358426412.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-17 12.25.58.1358426412.png)
デフォルトは表示した時間によります。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-17 12.26.02_thumb.1358426417.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-17 12.26.02.1358426417.png)
朝8時に訪れるとこんな感じ。ちょっと朝焼け風。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-17 12.26.06_thumb.1358426420.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-17 12.26.06.1358426420.png)
朝6時。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-17 12.26.13_thumb.1358426424.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-17 12.26.13.1358426424.png)
夜9時。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-17 12.26.17_thumb.1358426427.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-17 12.26.17.1358426427.png)
夜11時。

Aware.jsが行っているのは訪問した時間によってテキストの色や背景色、メッセージを変えるという操作です。まさにresponds to timeなデザインとなっています。使いどころは難しいですが参考にどうぞ。

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

MOONGIFTはこう見る

Aware.jsの例は極端ですが、訪問者の閲覧時間によってコンテンツの表示(特に背景色)を変更するというのは十分ありだと思います。テレビの場合、タイムスケジュールがある分、流すCMを変更できます。時間によってターゲットを推定し、それに合わせた広告やテレビ番組の内容を決定します。

Webの場合は24時間いつでもアクセスができるため、時間という要素に対して鈍感であったように感じます。ECサイトなどでは季節によってコンテンツを変えることはあるでしょうが、時間まで限った形式はそれほどありません。しかし訪問者の時間を使って午前午後でコンテンツの見せ方を変えてみると言ったやり方は面白いかと思います。

Aware.js - XOXCO - Web and Community Development

Reader Aware Design Demo

xoxco/awarejs · GitHub