ブログ

パフォーマンス​大幅アップ!​ほぼCSS3を​ベースにした​レスポンシブ​Webデザインで​サービス画面を​作ってみたよ

レスポンシブWebデザインで制作したサービス画面って制作するのは大変ではないですか?レスポンシブWebデザインで制作し、JavaScriptをほぼ利用せず、 CSS3だけでサービス画面を作った案件があるので忘れないうちに備忘録で書いてみます。

なぜ、CSS3をベースにしてレスポンシブWebデザインで制作したサービス画面を作ったのか

それでは、なぜJavaScriptをほぼ利用せず、CSS3をベースにしてレスポンシブWebデザインで制作したサービス画面を作ったのでしょう。クライアントのプログラマーがReactを利用していました。

Reactを利用するので、UIデザインを作るときにできるだけJavaScriptをできるだけ利用しないでほしいと言われたので、CSS3をベースにしてレスポンシブWebデザインで制作したサービス画面を作った次第です。

サービス画面の場合は、プログラマー側がReactやAngularなどのフレームワークを利用することが多くなりました。UIデザインを作るときやHTMLのコーディングをするときに、それらのフレームワークと衝突しないように気をつけなければいけません。

CSS3をベースにしたレスポンシブWebデザインで制作したサービス画面を作れば、フレームワークと衝突してレイアウトなどが崩れてもCSSで上書きしてしまえば問題ありません。しかしJavaScriptを沢山利用してサービス画面を作った場合、フレームワークと衝突する場合の調整は難しいです。

レスポンシブWebデザインなサービス画面とパフォーマンス

次は、パフォーマンスについてです。
当たり前の話ですが、同じコンテンツやデザインのサイトを作るならJavaScriptを沢山使うサイトより、使わないサイトの方が当然早いです。また、パフォーマンスに優れたサイトの方がユーザーが離脱する可能性が低くなります。

レスポンシブWebデザインなサービス画面では、特にパフォーマンスに気を使わないといけません。最近ではサービス画面でもレスポンシブWebデザインで制作することが多くなってきています。CSS3をベースにしてレスポンシブWebデザインで制作したサービス画面を作った次第です。

レイアウトではflexboxとCSS Calc・vh/vwを利用

基本、Bootstrapなどのフレームワークは使いません。全部自分で書いています。
レイアウトではflexboxとCSS Calc・vh/vwを多用しております。これらの技術を利用しているフレームワークはそれほどありません。また、自分で書いてしまった方が調整が自由にできます。

最近ではflexboxとCSS Calc・vh/vwを使えないブラウザはほとんどありません。
もう商用で使っていっても問題ないでしょう。ただし、flexboxはIEやEdgeでバグが多いのには気をつけましょう。

flexboxとCSS Calc・vh/vwと行った最新の技術を上手に利用することで、無駄なコードが減ります。つまり、パフォーマンスがアップします。無駄なコードが減ることでページ読み込み速度がアップします。
flexbox自体は万能ではありません。CSS Gridが全てのブラウザでサポートされるようになれば、レイアウトはCSS Grid、細かいパーツの調整はflexboxを利用されることになるでしょう。

flexboxとCSS Calc・vh/vwと行った技術を利用したことのあるデザイナーやコーダーは多くありません。新しい技術は利用していくことで、ノウハウがたまっていきます。ノウハウがないと、教えたりすることすらできません。

CSS Transionの動きには意外と気を使いましょう

サービス画面とはいえ、ユーザーがフィードバックなどがわかるように動きをつけなければいけません。意外と気を使ったのは、CSS Transionでの演出です。

一例をあげるとユーザーがクリックしてモーダルを出すとき・しまうときで、CSS Transionの設定を変更することでユーザーがはっきりとわかるようにします。フェードインやフェードアウトだけでなくスライドアップやスライドダウンの時などもわかりやすく作るのは、CSS Transionだけでは意外と難しいです。はっきり言うと、コピペでは絶対にできません。何回も試行錯誤が必要です。

CSS Transionをうまく利用し、トリガーにcheckboxやradio・もしくはJavaScriptを利用すれば、レスポンシブウェブデザインでもそれほど重さを感じさせずにリッチなサービス画面の動きを演出することが可能です。

JavaScriptを使った部分

ただ、完全にCSS3だけでサービス画面を作っていくのは不可能です。

JavaScriptを使った部分はいくつかあります。主にブラウザのサポート状況の差異を吸収したりする部分をメインとしています。

  • タッチデバイスと非タッチデバイスの違いを判定。
  • ブラウザのサポート状況をチェックするJavaScript。オリジナルなコードもいくつか作成しています
  • ユーザー操作のトリガーになった部分。全てをJavaScriptで作成しません。ドロップダウンを利用したナビゲーションメニューなど、CSSで構築すると動きが複雑になる部分だけ利用します
  • タッチデバイスと非タッチデバイスで使い勝手の差異が大きいカレンダー

システムのデータ操作に関する部分をプログラマーに任せて静的なコードだけで制作することが可能です。サービス画面でも、ほぼCSS3だけで制作でき、パフォーマンスが落ちる要因が減ります。

jQueryやbootstrapのファイルサイズは大きいのでモバイルには不向きです

それでは、jQueryやbootstrapを利用しない場合、どれくらいファイルサイズが軽くなるのでしょうか?

ちなみに、jQueryはminifyファイルでも87KBの容量があります(2017年現在)。昔よりもファイルサイズは減りましたがそれでもまだファイルサイズが大きいです。正直、IEの古いバージョンの対応がなくてこのサイズだと厳しいです。

これにBootstrapを利用する場合、minifyファイルでも37KBの容量があります(2017年現在)。jQueryやBootstrapを利用すると、120KB近くのファイルがダウンロードされます。本来jQueryやBootstrapを利用しなくてもいいデザインならば、それだけパフォーマンスが悪くなります。特にモバイルだと厳しいです。

海外対応ECサイトをレスポンシブWebデザインで制作すると想定すると?

余談ですが、海外対応ECサイトをレスポンシブWebデザインで制作すると想定すると、80KBの容量差は大きいです。なぜならば、全ての国に4G(LTE)のようなスピードを出せるネットワーク環境が整っていないからです。

国によってはようやく3Gレベルの通信環境が整ってきた、というところもあります。そのような国もターゲットにしてjQueryやbootstrapを利用してパフォーマンスの落ちるサイトを制作するとどうなるのでしょうか?ユーザーを逃す原因になりかねません。

まとめ

IEの古いバージョンをサポートする必要がなくなった現在、今まで使ってこなかった技術を使っていくチャンスです。 特にIE8はもう考慮する必要は全くありませんので、現在の最新ブラウザでサポートされている新しい技術は沢山あります。

JavaScriptをガリガリに使わなくても、リッチなサイトを制作することが可能になりました。当たり前ですがこれらの手法は、サービス画面だけでなく、普通のWebサイトでも応用可能です。そろそろ、コードが全くわからない、デザインしか作れないWebデザイナーは淘汰されていくのではないでしょうか?