one web world one web ワールド

 
レスポンシブone web ワールド学び

高速表示化できないレスポンシブウェブデザインの課題

レスポンシブWebデザイン

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

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

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

 

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

 

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

 

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

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

レスポンシブ ECトップ150
サイトの平均 38.4ポイント 42ポイント
PCサイトの平均 53.8ポイント 49ポイント
モバイルのUX 98.2ポイント 97ポイント
平均の減衰率 72% 88%

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サーバを高速化させる

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

アズール ダイビングショップ http://www.azu-l.com/ PCサーバーのパフォーマンスが極めて高い
アズール ダイビングショップ
このサイトの場合、PCサーバーのパフォーマンスが極めて高い

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

まとめ

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

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

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

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

この記事を書いた人
C1-5 占部雅一
株式会社ドーモ 代表取締役
雑誌の編集者を経て1995年にWeb制作会社を設立。女性コミュニティサイトの立ち上げ・運営、メディアサイトのコンテンツや広告開発に従事。近年は「マルチスクリーン対応」を意識した企業サイトのモバイル対応を推進。ユーザーベネフィットを生み出すモバイルWebの在り方を提唱している。
タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事