時間帯に応じてデザインが変わる！？面白いWEBサイト3選と実装方法

WEBデザインについて書こうと思うのですが、キャンペーンページなどを企画・作成する際にちょっとした遊び心をWEBサイトに取り入れたいときってないですか！？

訪問してくれるユーザーに対して驚きや感動を与えられるようなギミックをWEB上で表現したい、そんなことを日々考えているのですが、今回は時間帯に応じてデザインが変化するサイトを紹介したいと思います。

時間によって見せ方を変えるという点ではデザインに限らず様々な応用が効くと思います。

時間帯で背景のデザインが変化するサイト
天気予報
実装方法
最後に

時間帯で背景のデザインが変化するサイト

下記に掲載しているサイトは朝・夜の時間帯でメインビジュアルのエリアの背景画像が変わります。

自分が訪問している時間帯とマッチしたデザインになるので、安心感のような感情がでてきます。

ページに興味を持ってもらう一つの方法としてはありかも。

株式会社吉田石油店

CHITAZEN（知多善）

阿蘇くまもと空港

背景の変化の他にも車が動くアニメーションであったり、フェード効果を活用したデザインが興味を引く要素になっています。

天気予報

iPhone等に標準実装されている天気アプリも背景デザインが変化します。

雨の時は雨のアニメーションが出ますし、朝・昼・夜でデザインも変化しますよね。

より、ユーザーの環境にマッチしたデザインが表示されることはとてもユーザーフレンドリーな設計ですよね。

実装方法

簡単ですが、時間帯に応じて背景の色を変化させるjavascriptを載せときます。

$(function(){
var now_hour = new Date().getHours();
if ( 0 <= now_hour && now_hour <= 6 ){
$(‘body’).css(‘background’,’red’);
} else if ( 7 <= now_hour && now_hour <= 12 ) {
$(‘body’).css(‘background’,’blue’);
} else if ( 13 <= now_hour && now_hour <= 17) {
$(‘body’).css(‘background’,’green’);
} else if ( 18 <= now_hour && now_hour <= 23) {
$(‘body’).css(‘background’,’yellow’);
}
});

Dateオブジェクトを使用して、現在時間を取得します。

その後、if文を使用して時間に応じた変化について記述していけば良いです。上記の記述はbody内の背景色を変える指定ですが、

見せたい内容によって書き換えればOKです。取得できる時間帯は0~23までの整数です。

時間の設定を細かくしたい時は別の記述を書きますが、それは追ってプログラミングの記事で紹介しようかなと思います。