ブログ

技術

レスポンシブって結局のところどうなの?

マークアップ担当の鈴木です。よろしくお願いします。

Web制作の現場では、すっかり定着した感のある単語「レスポンシブ」。
よっぽどのことがなければ、「レスポンシブWebデザイン」のことを指していると思われます。

レスポンシブWebデザインとはなんぞや

ブラウザのウィンドウサイズに合わせて、それぞれのデバイス用の表示に切り替える技術のことです。
ものすごくかいつまんで言うと大きくなったり、小さくなったりします。
ウルト◯マンで言うところのセブンです。

成田空港第3ターミナルWebサイト
や当サイトでもレスポンシブWebデザインを採用しています。

いま、PCでこのサイトを見ている場合は、
ブラウザのウィンドウズサイズ(横幅)を広くしたり、狭くしたりしてみてください。

f905796879ecb71a016386f8b5c804c5966f84a8.png

なんだかサイトの見た目がぐぐっと変わったかと思います。

そうです。これがレスポンシブWebデザインなのです。

レスポンシブWebデザインのメリット

従来のようにPCサイト、スマートフォンサイトと別々に用意するのではなく、
ひとつのサイトをPCやスマートフォンなど、ユーザーが閲覧するデバイスによって表示を切り替えるので
導入したときのメリットは多いです。

まず、1つのHTMLファイルで複数のデバイスに対応するようになるため、
ページ制作後の更新や改修の作業工数が軽減されます。

掲載する情報も統一されるため、各デバイスによって情報に差異が出るなんていうこともありません。

また、ページのURLも統一されるため、facebookやtwitterなどの
SNSでの共有やシェアもカンタンになりますし、
これによる被リンク率の向上から来るSEO効果も期待できます、
なんてことも巷では言われてたりします。

あのGoogle先生もレスポンシブWebデザインを推奨していますし、
こりゃ正直導入しない理由がありませんよね。

レスポンシブWebデザインのデメリット

便利な便利なレスポンシブWebデザインですが、もちろんデメリットもあります。
これを知っているか知らないかで、導入による効果は大きく変わってきますのでご注意ください。

重要なのは、多くのデバイスに対応させるためには、
サイトの設計やデザインを慎重に行う必要があるということです。

従来のPCサイトやスマートフォンサイトのように
別のサイト、別のデザインと考えて制作に入ってしまうと困ったことになります。

つまりPC、スマートフォン共にレイアウトを行う上でのある種の「縛り」が生まれるということです。

例えば、PCとスマートフォンで全く違う要素を使ってレイアウトした場合、
画面上には表示されていない要素もHTMLソース上には存在しています。

ひとつのHTMLソースを無理やりに別のデザインで表示させるとなると、
画像など含め、すべてのファイルが読み込まれてしまうため、
あまり非表示の要素が多いとページ全体の読み込みが重くなってしまう可能性があります。

PCで見ている分にはそれほど影響はないかもしれませんが、
スマートフォンなどのモバイル環境だとページ表示が遅くなってしまい
不満を持つユーザーも出るかもしれません。

「こんなことなら別々のサイトにしたほうがよかった!」となってしまっては、本末転倒ですよね。

また、デバイス間での表示に違いが多くあると、
その調整で作業工数が逆に増えてしまうということも考えられます。

レスポンシブWebデザインをどうするか

以上を踏まえると、デバイス間でのレイアウトやパーツ構成は、
ある程度共通化したほうがいい等、設計・デザインの注力すべき方向も定まってくるかと思います。

レスポンシブWebデザインの制作においては、それぞれのデバイスを別物として考えるのではなく、
ユーザーの通信環境や操作感、見え方なども考慮しながら設計・デザインを行う必要があります。

なんだか難しく聞こえるレスポンシブWebデザインですが、
つまるところは実際に使う人の便利さを考えた設計やデザインをしましょうね、
ということなんだと思います。

しかしながら、言うは易く行うは難し。
日々精進でございますね。

Pagetop