トミーがレスポンシブデザインを斬る!前編

昨今のスマートフォンの普及率については、
ウェブサイトを作成する上ではスマートフォン対応はほぼ必須となってきました。

そこで数年前より注目されている、
レスポンシブデザインについて改めて説明したいと思います。

▼レスポンシブデザインとは 〜まずは基礎から〜

レスポンシブデザインとは端的に言えば、
1つのHTMLでPC、スマフォなど複数のデバイスに対応できるデザインのことです。

一昔前のサイトであれば、アクセスしてきた端末の情報から、プログラムで「OS」「ブラウザの種類」などを取得して判定し、プログラムで出力するデザインを切り替えるようなものが主流でした。

レスポンシブデザインの画期的なところは、
一切のプログラムを使わずに、CSSだけでこれが実現できるところです。

具体的には「メディアクエリー」という仕組みを用いて、
■「画面の幅が○○ピクセル以下になったら、このスタイルを適用する」
■「画面の幅が○○ピクセル以内だったら、このCSSを読み込む」

といった、画面の幅や高さを条件に適用するスタイルシートを変えることで、スマートフォンや、そのほかのデバイスに対応するといったものです。

▼レスポンシブデザインのメリット 〜トミーが感じるメリット〜

レスポンシブデザインのメリットは、ワンソースマルチデバイスを実現できることです。

読み込むCSSを変えていろいろなデバイスに対応するため、1つのHTMLだけで実現ができるということです。

これはGogoleからも推奨されている方法で、Googleがインデックスを作成しやすくなったり、クロールの効率が上昇するため、SEO上も効果があると言われています。

さらに、複雑なプログラムを利用する必要がなく、CSSだけの知識で対応することができるので、今までプログラムを利用したことのない制作者でも対応できます。

静的なHTMLのサイトにも後付けで導入することができ、上記のようにプログラムの設置もいらないため、非常に導入がしやすいというのもメリットです。

▼レスポンシブデザインのデメリット 〜トミーが斬る〜

プログラムがいらないことやHTMLレベルでワンソースマルチデバイスに対応できることから、非常に注目を集めているレスポンシブデザインですが、メリットばかりではありません。

まず1つは、どのデバイスでアクセスした場合も、すべてのソースコードを読み込んでしまうという点です。

たとえば画像などが良い例で、PC向けに高解像度で作った写真をサイトに配置していた場合、レスポンシブデザインではCSSを用いて画像の見た目の大きさを変更したり、非表示にするといったことしかできないため、実際にはすべてのデータを読み込む必要がでてきます。

端的に言えば、必要のない画像やHTMLソース、CSSなどをすべて読み込むため、3G回線などの転送速度が遅い回線を使っている場合、ネックとなる可能性があります。

もう一つは、デザインが非常に面倒ということです。
レスポンシブデザインにするということは、PC向けの画面もスマフォ向けの画面も、ある程度構成やデザインなどは同一にしなくてはなりません。

特性上、HTMLのソースコードは1つなので、それを如何にCSSで制御するかと言うことになるのですが、PCはPC向けの構造を用意して、スマフォで見たときはそれを非表示にする。

スマフォはその逆、といったように完全に別々の構造を複数用意してしまうと、上記の理由から転送速度の低い端末ではアクセスしづらいサイトとなってしまいますし、かといって同一にしすぎてしまうと、各デバイスへの最適化という部分が実現できなくなってしまいます。

そのため、デザインの設計段階でどこまでを共通化するか、どこをデバイスごとの差別化とするかを詳細に検討し、その上でデザインを行う必要があります。

各デバイス向けにコンテンツの出し分けがしにくいというのもあります。

PCはPC向けのコンテンツ、スマフォはスマフォ向けのコンテンツを1つのHTMLに入れ、CSSで表示・非表示を制御すると言ったことでは、結局のところ「ワンソースマルチデバイス」である必要性がありません。

同じコンテンツを複数のデバイスで
共通して利用できるところに価値があるのであって、そこを誤解してしまっては、そもそもの価値がなくなってしまいます。

ユーザービリティでも一部問題が発生します。

CSSで実現するレスポンシブデザインは、画面の横幅を絶対的な条件としてデザインを切り替えるため、スマートフォンの画面からでは、絶対にPC向けのデザインを確認することができません。
(画面の解像度を変えることができるならば別ですが・・)

スマフォからでもPC向けのデザインを利用したい!
というユーザーがいたとしても、強制的にスマフォ向けの画面が表示されてしまうため、利用する手段を提供することができません。

〜トミーがレスポンシブデザインを斬る!後編に続く〜

次回は「WordPress上でのレスポンシブデザインについて」
記事を書きますね。