以前「タブレット対応ECサイトのポイント〜インテリアショップMOMU〜」でもご紹介したインテリアショップMOMUのレスポンシブECサイト。

今回は技術的な面でどのようにレスポンシブWebデザインで構築されているのか、見てみたいと思います。

サイト名	モームオリジナルインテリア
URL	http://www.momu-shop.jp/
QRコード

このインテリア通販サイトはPC、タブレット、スマートフォンに対応したレスポンシブウェブデザインで制作されています。

文章でお伝えするのが難しいのですが、実はこのサイト、トップページをブラウザの横幅を変更しながら閲覧すると各コンテンツが生きているかのように動いてブラウザ幅にあったレイアウトへ整列するようになっています。

実際にサイトへアクセスをしてブラウザ幅を狭めたり広げたりしてみて下さい。

MOMU Original Interior

jQuery Masonry という jQuery のアドオンを使ってこのような効果を出しているようです。CSS3 のプロパティに transition-duration というのがあり、これを使ってレスポンシブに変化する時に徐々に変化するような効果を演出しています。

記述方法については下記のサイトが詳しく解説されているので、ご参考下さい。

[jQuery]自動整列プラグインjQuery masonryの設定方法・オプションまとめ

サイト全体をリッチにしようとすると大変手間がかかります。このインテリア通販サイトではトップページだけ jQuery Masonry を導入しています。これだけでもとても印象的なサイトになります。

また、この jQuery Masonry も従来のレスポンシブウェブデザインとまったく別な仕組みではなく、普通にレスポンシブウェブデザインでサイトを制作した上に jQuery Masonry を使ってリッチにすることができるので、制作に余計な工数をかけることもないはずです。

みなさんも是非試してみてはいかがでしょうか？

河野