スマートフォン:ショーケースの観察

スマートフォンではショーケースにjQueryが利用されることが多いので
私も練習してみようと思います。ですが、その前にリサーチをしておきましょう。
 
画像を単純表示するだけのショーケースだと、横レイアウトにしたときに幅が広くなった分
画像を拡大するレイアウトが多いのですが、jQueryのショーケースでは拡大はせず左右の
マージンを延ばして対応するものが結構ありました。
 
たぶん画像を切り替え、1枚の画像を長々と表示できないので一覧性を高めるために
小さく表示しているのだと思います。実際に例を確認していきましょう。
 
 
 

・横レイアウトで拡大する例

キャプチャを確認して分かるようにショーケースが拡大され、一覧性が下がります。
また多くのショーケース上では、通常のスクロールがキャンセルされるため
縦スクロールが非常にしにくい状態になります。
※たぶん多くの人が縦レイアウトで見ると思うので、それほど問題視されないのでしょう。

 
http://www.junmen.com/sp/

 
http://www.beautyandyouth.jp/sp/index.html

 
http://m.brancottestate.com/
※PCで見るとPCサイトに飛ばされます

 
 
 

・横レイアウトで拡大しない例

横レイアウトでも一覧性を下げないようにするため、ショーケースを拡大しないサイトもあります。
キャプチャで確認できるように横レイアウトでもショーケースが画面内に納まっています。
 
http://www.lushjapan.com/sp/

 
http://s.fashionwalker.com/

 
サイバーエージェント(リクルート:役員紹介)
※PCで見るとPCサイトに飛ばされます

 
 
 

・納まる範囲で拡大する例

以下のサイトでは横レイアウトにしても納まるように計算されていました。ステキです。
 
http://www.shiseido.co.jp/uno/sp/

 
 
 

・番外

ショーケースではないのですが、仕組みが面白かったのでメモ。
てっきりjQueryでのスクロールかと思ったのですが、PCで確認するとスクロールが表示され
単純にスクロールをコントロールしていることが確認できます。
http://www.hrm-eshop.com/s/

 

 
おしまい
 
 
 

jQueryは未使用だけどjavaScriptを駆使したサイト(2)

jQueryを使っているのかな?とソースを除くとjQueryは使われて無く
オリジナルのJavaScriptで作成されているものが幾つかあったので、
そんなサイトの紹介
 
 

・内山建設


コンテンツのスクロールや画像の切り替えなど、
javaScriptでエレガントに仕上がっていてステキです。

 
 

・IBM


ショーケース右下部分のメニューで画像が切り替わります
(文字と画像が分離した多重スクロール)。
 
 
 

jQueryは未使用だけどjavaScriptを駆使したサイト(1)

jQueryを使っているのかな?とソースを見るとjQueryは使われて無く
オリジナルのJavaScriptで作成されているものが幾つかあったので、
そんなサイトの紹介
 
 

・日産


ショーケース下部のタブでページの内容を切り替えます。また左の「カーラインアップ」
メニューの各項目上にマウスオーバー(クリックしない)するとサブメニューが開きます
(クルマが右からスライドインする演出付き)。
 
 

・ユニクロ


ショーケース左右にある矢印で画像切り替え。またコンテンツボタンに
マウスオーバーすることで説明の出るものがあったり、一定時間で
コンテンツボタン内の画像を切り替えています。
 
  
 

部分的なjQueryの利用(2)

これまでFlashで作成されていたような小さなインタラクティブパーツが
どんどんjQueryに置き換わってきています。その2
 
 

・トヨタ


ショーケースの切り替え、ボタンクリックでサブメニューがポップアップや
PickUpのスクロール
 
 

・ボルボ


上部メニューのプルダウンメニュー表示。
 
 

・ウェッジウッド


左のアコーディオンメニューとショーケースの画像切り替え。
 
 

・なめこぱらだいす


左のメニューをクリックするとサブメニューが展開。
 
 
 

部分的なjQueryの利用(1)

これまでFlashで作成されていたような小さなインタラクティブパーツが
どんどんjQueryに置き換わってきています。
 

・野村證券


ショーケースの切り替えや、タブでのコンテンツ切り替え。
 
 

・三菱電機


ショーケースの切り替えや、ボタンにロールオーバーしたさいの説明表示。
 
 

・パナソニック


ショーケースボタンの画像切り替えとマウスオーバーした際のメニュー表示。