レスポンシブWebデザインな仕事をしたときの話

セミ兄貴おっすおっすな時期になりました。あっついね。

では本文。Web開発ド素人の私(今まで仕事はVB.NETやCな業務アプリケーションばかり)が、レスポンシブWebデザインなサイト開発をした上で感じたことをとことこと書いていこうと思います。

レスポンシブWebデザイン、というのはデバイス毎にHTMLやらのソースを用意するのではなく、1つのソースで全デバイスにUIを提供する、みたいなことです。はてなのトップページとかがそんな感じです。PCのブラウザで開いて、画面幅を小さくしたり大きくしたりしてみましょう。小さくするとスマホで見る時のデザインに、大きくするとPCで見る時のデザインに、動的に変化している様子が見れると思います。有名なところだと、AppleとかAdobeとかAWSとか、割といろんなWebサイトが気付かないうちにレスポンシブWebデザインになっています。

そんなお話。

まず先に結論を。

レスポンシブWebデザインで嬉しい思いをするのはGoogle先生とエンジニアだけ(ぉ

順を追って説明していきましょう。

Googleによるモバイルサイト実装方法は、レスポンシブWebデザイン動的な配信別々のURL、という3つに分類されているようです。ちなみに、既存プロジェクトでは2番目の「動的な配信」がメインでした。UA判定してデバイス毎にテンプレートを切り出す、というよくある実装です。

ここで明らかにしておきたいことは、この3つの内、どれがSEO的に効果があるのか、ですよね。正解は、どれも一緒らしいです。Googleの中の人、ジョン・ミューラー氏曰く、

「レスポンシブデザイン」「動的配信」「別々のURL」は、サイト管理者の判断で選んで問題ない。それらが混在していても問題ない

www.youtube.com

とのこと。モバイルフレンドリーであるならそこは開発者に任せるよ、検索結果でも差別しないよ、ということです。ではなぜGoogleはレスポンシブWebデザインを推奨するのか。それは、クロールするリソースを最小限に抑えられるから、みたいです。結局Googleの都合なのかー(ぇ

つまり、「動的な配信」で既に構築されているサイトであれば、無理してレスポンシブWebデザインにする必要もない、という話になります。SEO的にもユーザビリティ的にも今までと変わらないのであれば、「乗るしかない、このビッグウェーブに」などと言わなくてもいいみたいです。

となると、開発側が楽できるか否か、だけが判断材料になるのかなぁと思います。PCのテンプレートを修正して、同じようにスマホのテンプレートを修正して、といった流れは修正漏れしてくださいと言わんばかりのものです。純粋なレスポンシブWebデザインではソースが1つだけになるので、そういったミスを防げるようになります。

ただやはりデメリットは付き物。それをいくつか列挙してみましょう。

  1. 慣れていないと工数が若干増える
  2. カッチリとレイアウト調整しようとするとハマる
  3. 画面表示速度が低下する可能性がある(後述します)

レスポンシブWebデザインでいこう、という話が上がってきた時は1度足を止めて、本当に必要かどうかをしっかり話し合ったほうがいいと思われます。(会社では言えないけど、今回のプロジェクトはどうみても失敗だったかと)

以下は開発における単なる愚痴です。

完成したソースには重複している箇所が所々あります。たとえば、PCサイズで閲覧しているときはAのヘッダーで、スマホサイズのときはBのヘッダーで、という感じに物理的に切り替えてたりしています。自分で書いておいてなんですが、酷すぎて笑えないです…。上に述べた「PCのテンプレートを修正して、同じようにスマホのテンプレートを修正して」というのと同じですね。レスポンシブのメリットを消しちゃっています。まあ既存デザインを踏襲して、というのがあったために強引にやるしかなかったという…。

また、画像をPCとスマホで出し分けしているところが結構あります。そうなってくると、スマホでアクセスしているのに、バックグラウンドではPCの画像もロードしている、なんてことになっているので多いに無駄な処理が発生しています。

これらが積み重なって、ページ表示速度は大きく下がってしまっています。Googleの推奨は1秒以内、全く達していないというのが現状です。これでリリースしちゃっていいのか、いやダメだろ。まあ解決策はいろいろある(RESSだったり、Virtual DOMで構築したり)とは思いますが。あとあと、PCデザインしか渡されなくて、「スマホデザインは良い感じにそっちでやって」というのがキツかった。出戻りだらけで工数膨らみまくり、という。

終わってから言うのもアレですが、兎にも角にもなんだかなぁな仕事でした。おわり。