これまでに見たことのない、レスポンシブデザインの斬新な使い方!

これまでに見たことのない、レスポンシブデザインの斬新な使い方!

ファッションブランドのディーゼルが、大ヒット商品「Jogg Jeans(ジョグジーンズ)」の特設サイトを開設しています。

ジョグジーンズは、デニムのように見えるけど、実はスウェットでできているというパンツです。

スウェットなのでストレッチが効いており、履き心地も抜群。

レザージャケットやイタリアンテイストのカジュアルが人気のディーゼルで、新しい人気商品になっています。

この特設サイトでは、今では当たり前となったでレスポンシブデザインの仕組みを、これまでにあまり見たことがない方法で使って、そんなジョグジーンズのストレッチ性能をPRしています。

Joggjeans Responsive Denim

 

サイトの「CLICK TO START」をクリックします。

2016-07-12_14h22_51

 

すると、ジョグジーンズを履いた男性が登場。

これまでに見たことのない、レスポンシブデザインの斬新な使い方!

 

画面サイズを縦方向に縮めていくと、画面の縮小に合わせて男性が足の開脚をはじめました。

2016-07-12_13h54_52

 

さらに画面を縮めていくと足が180度に開き、

2016-07-12_13h55_01

 

最後はそのまま前屈の姿勢に。

2016-07-12_13h55_07

 

 

他にも様々なポーズの男性が登場します。

2016-07-12_13h57_39

2016-07-12_13h57_52

2016-07-12_13h58_05

 

ソースを見てみると、画面サイズに合わせて何枚も用意された写真をパラパラ漫画のように切り替えています。

今では当たり前となったレスポンシブデザインの技術ですが、アイディアひとつでこんな使い方もできるんですね。

レスポンシブデザインの仕組みを活用した、斬新なキャンペーンサイトでした。