画像を使わないこと、PC側のデザインをあきらめること

以前、人気のレスポンシブWebデザインの最大の課題、「容量が重い」「表示が遅い」ことについて、その実態を100サイトの調査分析により明らかにしました。さて、今回はそのような課題について、どう対応すべきかを紹介したいと思います。

GoogleのPage Speed Insightsという計測ツールで、対象100サイトを計測してみたところ、計測対応可能な93社の平均が38点という結果となりました。これを弊社の別の調査「ECトップ150サイト」と比較してみました（2014年9月中旬実施）。

レスポンシブWebデザイン トップ100のスピード評価（30位まで）　2014年7月調査実施。無作為に最新RWDをまとめサイトから抽出して計測しました。

Google PageSpeed Insightsで66点の金沢たまごクリニック。今回の調査では最高得点。

「ECトップ150サイト」は、サイトとしても大型で、システムも入り組み、コストをかけた重量級サイトです。単純に比較にするには、ちょっと無理がありましたが、平均結果は下記のようになりました。

レスポンシブWebデザイン VS ECトップ150の比較

DB連携のシステムが入り組んだ「ECトップ150サイト」で見られたスマホサイトの多くは、「動的配信」と言われるサーバーサイドテンプレート調整で行われていたり、専用サイトで構築されているものがほとんどです。レスポンシブWebデザインが採用されたサイトは見受けられませんでした。

理由は、決して表示が速いとはいえないからでしょう。実際に、レスポンシブWebデザインで構築されたサイトは、ECトップ150と比べて、約3.6ポイントも下回ってしまいました。PCのパフォーマンスでは、レスポンシブの方が4.8ポイントも高いにも関わらずです。

また減衰率（モバイルの点数を、PCの点数で割った参考値）は72%でした。これはあくまで参考とすべき値ですが、およそ3割減のパフォーマンスとなってしまいます。「ECトップ150サイト」ではこの減衰率が88%ですから、レスポンシブWebデザインは、かなり低い値となることを意味します。

この原因は、すべてのデバイス幅に合わせて用意した画像を読み込んでしまうレスポンシブWebデザインの欠点にあります。デバイスごとに画像を振り分ける方法もありますが、高度な技術を要するために、実施しているサイトはほとんどありません。

一方でUXに関しては、レスポンシブWebデザインで構築されたサイトは平均して98.2ポイントとなり、意外と高得点であることがうかがえます。

モバイルファースト設計ならば、少し速くなる

また、新しい発見もありました。レスポンシブWebデザインでも、PC側のデザインをあきらめれば、高速化することが可能です。つまりタブレットとスマホだけのデザイン設計のみとし、モバイルファーストの設計で構築するのです。

具体的には、タブレットを軸にデザイン設計して、スマホ側の設計を行います。また逆に、PC側は拡張のみのデザインで終わらせ、あえてPC用のデザインを準備しないというやり方です。

モバイルファーストで設計する

この方法で設計すると、約10ポイントほど向上させることが可能です。限界値を調べてみました。

■PCファーストでの設計の場合：限界値50前後
■モバイルファーストでの設計場合：限界値60前後

しかし、モバイルファーストでの設計でもGoogleの計測ツールPage Speed Insightsでの60ポイントをクリアするのは、そう簡単ではありません。これ以上のスピードを追求するとなると、以下の項目をクリアすることが必須となります。

レスポンシブウェブを高速化させるポイント

■テキスト中心としたサイトにする
■無駄な画像を使わないようにする
■画像を極力小さく扱う
■PC用のUIをやめる（モバイルファーストで設計）
■Webサーバを高速化させる

画像を使い高速化を実現しているサイトの例

アズール ダイビングショップ
このサイトの場合、PCサーバーのパフォーマンスが極めて高い

しかし、これではレスポンシブWebデザインにチャレンジしたいと思っている人の目的を果たせるといえるでしょうか？ 多くのチャレンジャーは、大胆に写真や画像を使い、グリッドがキレイに切り替わって、魔法のように各デバイスで表示してみたいと思っているからです。実際に上記のやり方を徹底すると、小さく細々としたイメージのサイトになってしまいます。

まとめ

まとめとして、レスポンシブWebデザインに適しているサイトは次のようなサイトです。

■UIの変更が少ないサイト
■パフォーマンスが問われないサイト
■会社案内・決算報告・CSR・採用ページなど
■キャンペーンページで比較的画像が少ないサイト

ともかく、課題の多かったレスポンシブWebデザインですが、高速処理する方法が明確になってきました。結論としては、eコマースや資料請求などでパフォーマンスを追求するサイトには適していません。しかし、更新性が少ないサイトで、コストを抑えて運用するには適しているといえます。

まだレスポンシブWebデザインを試していない方は、ぜひトライしてみてください。やってみることで、次にどうすべきかが分かるはずです。

〈文／占部 雅一（ドーモ）〉

【この記事を最後まで読んだ方におすすめの記事】
・変換vsレスポンシブvsスクラッチ、ベストなスマホサイト制作方法は？