文系おじさんのWeb用語案内 vol.9【レスポンシブwebデザイン】

ウェブ全般

ミスターアンドミスィズ文系おじさんだよ。

ブラピとアンジェリーナジョリーみたいなカップルになりたいものだよね。

今日説明する用語は【レスポンシブwebデザイン】だよ。

レスポンシブwebデザインとは

レスポンシブwebデザインとは、ウェブページを見ている画面の幅に応じてデザインを切り替える方法のことだよ。
なんのこっちゃだね。

文系おじさん

例えばいまだと、パソコン、タブレット、スマートフォンの3種類の端末が主流だよね。
ふつうにウェブページを作ると、このどれで見ても、同じデザインが表示される。
スマートフォンだと小さくて見にくかったりするよね。

文系おじさん

けど、レスポンシブwebデザインにすると、パソコンはパソコン用の、スマートフォンにはスマートフォン用の、デザインを切り替えて表示できるよ。
まあ、見やすくなるわけだよね。

※長ったらしいのでまんなかの「web」をとって「レスポンシブデザイン」と書くよ。

レスポンシブwebデザインのイメージ

レスポンシブデザインのイメージ

レスポンシブデザインは、スマートフォンとかタブレットが広く使われるようになったのに合わせて、2年前くらいから急速に普及した技術だよ。
今ではいろんなサイトがレスポンシブデザインを採用しているよ。

マルチデバイス対応のために

マルチデバイス対応・・・PC、スマートフォン、タブレットなど様々なデバイスに合わせた表示をすること

今はいろんなデバイスが登場していて、いろんな人がいろんなものでインターネットを使っているから、このマルチデバイス対応は、大切な考え方だよ。

レスポンシブデザインは、マルチデバイス対応の一番手といっていいやり方だね。

レスポンシブデザインは、デバイスの幅に合わせてデザインを切り替える方法だけど、もちろん他のやり方もあるよ。

その代表的なのが、PCサイトとスマートフォンサイトを別立てでつくるという方法だよ。

レスポンシブデザインと別立ての違い

レスポンシブデザインと、デバイス専用のサイトを別でつくる方法、それぞれの違いをまとめてみるよ。

レスポンシブデザイン デバイスごとに別で制作
主な切り分けの基準 画面幅 ユーザーエージェント
HTML ひとつ(ワンソース) それぞれに存在
コスト 最初つくるのたいへん 更新がたいへん(システム化したほうがいい)
メリット SEO的にいい
将来のデバイス対応が見越せる
より最適化した表現ができる

もうちょっと細かく見てみるよ。

文系おじさん

主な切り分けの基準

なにをもって表示デザインを切り替えるか、ということだよ。
PCやスマートフォンでウェブページを表示する「ブラウザ」には、それぞれ固有の名前があって、これを「ユーザーエージェント」と呼ぶよ。
で、これを読み取って、表示を切り分けるやり方があるよ。
例えばユーザーエージェントに「iOS」とか「Android」っていう文字が入ってる時だけスマートフォンサイトを表示せよ、というふうにね。

文系おじさん

HTML

レスポンシブデザインは、ひとつのHTMLでデバイスごとに表示を切り替えるよ。
パソコンでもスマートフォンでも書いてあるものは全く同じということだね。
これをワンソースと呼んだりします。
じゃあ同じものなのに、どうやって表示を切り替えてるのかというと、だいたいCSSで切り替えてるんだよ。
パソコンの時はこのCSS、スマホの時はこっち、みたいにしてね。

それに対して、レスポンシブじゃない場合は、パソコン専用、スマホ専用として、それぞれHTMLをつくるんだよ。

文系おじさん

コスト

レスポンシブデザインの場合、いろいろなデバイスでの見え方を考えながらだから、最初つくるのがけっこうたいへんだよ。
それぞれ専用のHTMLで作る場合は、見え方のパターンを想定しなくていいから、考え方としてはシンプルかもしれないね。

その代わり、更新とかするときに、それぞれのサイトに対して更新をかけるから、手間も倍だし、ミスの可能性も高くなるよ。
なので、こういうときは、同じ内容のものが、パソコン用、スマホ用に自動的に出力されるように裏でシステム化することが多いよ。

文系おじさん

メリット

最後にメリットだけど、まずレスポンシブデザインはGoogleに推奨されている作り方なので、検索順位なんかで優位になりやすいよ。
それから、画面の幅で表示を決めるから、将来、いろんな大きさのデバイスが出てきた時に、対応がしやすいと思うよ。

反面、レスポンシブデザインは、ワンソース(ひとつのHTML)だから、表現に限界があるよ。
パソコンサイトとスマートフォンサイトの構造をガラッと変えるのは難しい、ということだね。

その点、別々に作る場合は、それぞれ全く別のページを表示するわけだから、自由自在に表現できるよ。


以上、レスポンシブデザインの説明終わりだよ。

いろんなWeb用語を解説してるから、興味あったら読んでみてね。

文系おじさんのWeb用語案内

じゃあまたね。

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。