【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

jQuery masonryで流れるようにコンテンツが動くレスポンシブWebデザインを構築

jQuery masonryで流れるようにコンテンツが動くレスポンシブWebデザインを構築

jQuery masonry

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

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

サイト名 モームオリジナルインテリア
URL http://www.momu-shop.jp/
QRコード MOMUQRコード
リッチなレスポンシブウェブデザインで好印象を

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

■PC

momu-shop1

■タブレット

momu-shop2

■スマートフォン

momu-shop3

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

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

MOMU Original Interior

jQuery Masonry を使う

momu

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

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

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

トップはリッチに、下層ページは通常のレスポンシブウェブデザインで

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

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

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

河野

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+