タグ: デザイン

CSS transition対応ブラウザ

CSS3 transitionは御察しの様に、対応しているブラウザには限りがある。現時点での対応ブラウザに関しては下記を参考にしてください。

https://developer.mozilla.org/ja/docs/Web/CSS/transition

徐々に対応ブラウザも増加してく事でしょうし、oldブラウザでバグがでるわけでもありませんので、ぜひ積極的に取り入れていきたい技術です。

CSS3 trasitionが注目される理由

ソースが軽い

CSSのみでアニメーション効果をつけることは、java等でつけるそれと比べて、ページ読み込み速度が速いというメリットがある。

デザインの幅が広がる

レスポンシブデザイン等で、マルチデバイスにワンソースで対応するといった設計が主流になりつつある中、スマホ向けのデザインはどうしてもシンプルなものになりがちです。そんな中で、CSS transionはデザインにワンポイントアクセントを加えるの要素となります。

CSS transitionを簡単に生成できるサービス

こうしたサービスは本当にありがたいです。作業効率が格段にあがります。

Ceaser

イージングの調整をオンラインで簡単に行うことができる。調整後はソースをコピーするだけ。

Ceaser

animatable

こんなにあるんですね・・・・。アニメーションの一覧を見れるサイトです。どんな効果が最適か、まずはこのサイトを見てから考えると良いかもしれません。

animatable

liffect effect for lists

リスト化された画像にアニメーションをつけてくれるサービスです。

liffect effect for lists

Animate.css

ボタンの動きを確認しながらアニメーションを選ぶことができる。

Animate.css

他にも便利なツールがあるのでぜひトライしてみてください。

一般的なホームページの幅を調査する

日本国内で実際に使われているモニターサイズの割合を見てみましょう。下のサイトはカウンターを使って様々なデータを取得、グラフで表示してくれるサービス。
※下のリンクは2011年８月〜2013年8月の値

http://gs.statcounter.com/#resolution-JP-monthly-201108-201308-bar

 

横幅が768pxが1.59%となってるので、この幅まで対応する必要があるか？検討の余地がある。

実際にアクセスされているモニターの解像度を調べる

[Googlead]

Google Analiticsが導入されているサイトであれば、ユーザー > ユーザーの環境 > ブラウザとOS　からユーザーの使用しているモニター解像度の一覧を見ることもできるだろう。

※セカンダリディメンションでブラウザを選択すれば、720や320といったモニターサイズがスマートフォンからのアクセスだという事も知ることができる。

大手サイトが採用している幅を参考にする

大手企業のサイトがどの幅に設定しているかも参考になる。ULTRAZONEは主要WEBサイトの横幅をまとめているサイト。

主要WEBサイトの横幅まとめ一覧

レスポンシブデザインを検討する

モニターの横幅毎に可変するレスポンシブデザイン。可変するタイミングとなる横幅のポイントのことをブレイクポイントと呼ぶが、このブレイクポイントに関しても設計段階である程度検討しておく必要がある。

[Googlead]