web shocker : css3の3D Transforms


制作会社のiPhone向けサイト。画面の切り替え演出に力が入っています。
worksのページ切り替えでは左右へのスライドアニメーション。そして各事例に
移動するときはcss3の3D Transformsを利用したフリップの演出。
※pcでもsafariやchromeで閲覧可能です。
 
参考サイト:くるくるフリップを CSS 3 で作る実験
 
 
 

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

スマートフォンではショーケースに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/

 

 
おしまい
 
 
 

スマートフォン用サイトのインターフェイス

勝手な思い込みで、スマートフォン用サイトのボタンは横長のデザインと思い込んでいましたが
以下の様に、ホーム画面のアイコンを意識したようなデザインでも良いのですね。
でも高解像度ディスプレイ向けかもしれません。
 

ハウス食品

 

 

docomo

 

 

名古屋グランパス

 

クルマメーカーのスマートフォンサイト

私が仕事で作成していくタイプのサイトはニュース系サイトではなくて、メーカー系の
サイトになると思うので、メーカー系のサイトを巡って勉強しようとしたのですが、
意外とスマートフォン対応したサイトが見つかりません…。
 
ソニーなどPCメーカはたくさんあると思ったのですが、見つからず
パナソニックでは「ページが見つかりません」に飛ばされてしまいました…。
※用意していたのに何かの手違いでリンクが切れたのでしょうか
 
サポートがしっかりしているので、PCの周辺機器はIOデータの製品を良く買うのですが
ここもスマートフォン用サイトはありませんでした。結構対応していないメーカーは多いようです。
以前紹介したsafariでUAを偽装してスマートフォンサイトを確認するテクニックですが、一部のサイトで正常に機能せずスマートフォンサイトに移動できないケースがありました。あのテクニックは確実とは限らないようです。
そんな中、車メーカーの日産とホンダでスマートフォン用サイトを発見。
2社とも結構広範囲にわたってスマートフォン用のページがありました。
 

ホンダ


 

日産