MJ-WAVE.COM

  1. MJ-WAVE.COM
  2. Web開発
  3. 【BLOGレスポンシブ化計画Vol.02】目的と理由 – レスポンシブWebデザインを採用するワケ

【BLOGレスポンシブ化計画Vol.02】目的と理由 – レスポンシブWebデザインを採用するワケ

ツイート
このエントリーをはてなブックマークに追加

連載するとか抜かしてから4ヶ月以上もほったらかしてすみません。生まれて初めての書籍執筆に追われてブログに全然時間を割けずにいました(という言い訳をさせてください)。気を取り直しまして・・
【BLOGレスポンシブ化計画】連載第2回は第1回目のワークフローの項目01、「目的と理由 – レスポンシブWebデザインを採用するワケ」をテーマに書きたいと思います。

なぜレスポンシブWebデザインを採用するのでしょう?

僕みたいに個人のブログでRWDを採用するのであれば、「流行ってるし、やってみよう」くらいのノリでいいかもしれません。あと、グーグル先生も推奨してるしなーぐらいのノリもありです。実際に僕もそんなノリで始めましたから。
しかし、実際の案件の場合はそんなノリで始めてしまったら大怪我をしてしまうこと間違いなしです。しっかりとレスポンシブWebデザインのメリット・デメリットを知って、本当にレスポンシブWebデザインを採用すべきなのかを考慮して決断をすることが大切です。
ミーハーなノリで実装してみた僕ですが、やってみて得られたことは大きかったです。実装してみて気づいたレスポンシブWebデザインのメリット・デメリットを僕なりに書いてみようと思います。

現時点ではレスポンシブWebデザインはグーグル先生が推奨しているものの、日本にはあまり出回っていません。現在はPC用サイトとスマホ用サイトを分けて運営する体制が主流だと思います。そこに潜む大きな問題とは何でしょう?
その違いを理解すると、レスポンシブWebデザインのメリットとデメリットが明白になるはずです。

レスポンシブWebデザインにするメリット

PCもスマホもタブレットもワンソースでOK!!

まず大きく違うのは、レスポンシブWebデザインでは全てのデバイスに最適化されたウェブサイトをワンソースで実現できるというところでしょう。これにより、PCサイトを更新したので、スマホサイトも〜といった無駄な労力が削減されます。CMSを組み込んでる場合はPC用テンプレート、スマホ用テンプレートを分けなくていいので、カスタマイズがものすごく楽です。実際に組んでみたらあれあ?こんなに楽なの?って感じでびっくりしました。しかし、組み始める前に設計をしっかりしておかないと、マークアップのし直しという悲劇もあり得ますので、計画的なマークアップを心がけましょう。

CSSも管理しやすい!!

CSSもPCサイトとスマホサイトを分けて運営していると、スタイルを記述する際に単純に1スタイル✕2サイト分という2倍の公式が成り立ってしまいます。その点、レスポンシブWebデザインではベースとなるCSS(スマホのCSSをベースとしたら)にデバイス毎のプラスアルファの記述のみで対応できます。

デバイスの壁を越えたコンテンツの統一

PC用サイトとスマホ用サイトを分けることでスマホ用サイトは端末のディスプレイサイズ等に最適化されて作られているので、アプリケーションを操作するかのようにWebページを閲覧することができます。そしてコンテンツもスリムアップや削ぎ落として表示されます。ユーザーにはストレスなく閲覧できるので、いい結果かもしれません。しかし、一部のユーザーにとって必要な情報も削ぎ落としてしまい、「使いづらいサイト」というレッテルを貼られてしまうかもしれません。(2chでボロクソに言われていたサイトさんもありました・・)
しかし、レスポンシブWebデザインは違います。レスポンシブWebデザインは上記で挙げたようにワンソースでPC、タブレット、スマホ、全てのデバイスに同じ情報を発信することができるので、デバイス間の差異を無くし、どのデバイスでアクセスした時も必要な情報をユーザーは得ることが出来ます。
ただし、ワンソースであるが故に画像の問題や、JavaScriptなど回線や描画などに関わる問題が大きくなるので、リスクも伴うということを覚えておかなければいけません。

運営がものすごいラク!!

上記のメリットから、各作業のコストがものすごく減るので運営がものすごくラクになります。特にCMSを入れている場合はテンプレートを修正、更新、カスタマイズする際、仮にPC用・タブレット用・スマホ用の3サイト運営しているとしたら、テンプレートを3種類いじらなくてはいけませんが、レスポンシブWebデザインなら1種類で良いわけで、単純に運営コストが3分の1になるわけです。

さて、ここまでレスポンシブWebデザインのメリットのみを書いてきましたが、もちろんデメリットもあります。僕が考えるデメリットは以下の点です。

デメリット

イニシャルコストがかかる

ワンソースでの管理、フレキシブルなレイアウト対応がレスポンシブWebデザインの魅力ですが、それを実現するには設計とデザインを入念に考えなくてはなりません。今回ブログをレスポンシブWebデザイン化してみて、なかなか実装に入ることが出来なくて大変でした。「ここをこうしたらここで問題が出てくるから・・」「この場合はこういう動き、それ以外はこう」みたいに、考え出したらキリがないです。
設計、デザインを決める段階で実際にその機能を実装できるのか等の動作検証作業もあったので大変でした。

ガイドラインが少ない

レスポンシブWebデザインはまだ「こうすべきだ!」という確固たる手法がありません。まだ検証中な部分がかなりあります。こもりまさあきさんが執筆された「レスポンシブ・ウェブデザイン標準ガイド」や@rriverさんが運営するブログ「Rriver」など参考になる情報元がもっと増えていけばいいのですが、まだまだ少ないですしレスポンシブWebデザインはこれからも進化していく分野ですので、情報収集は欠かせません。

向き不向きがある

PCサイト、スマホサイトを抱えていれば全ての場合でレスポンシブWebデザインが向いているとは限りません。意図的にPCとスマホで表示内容を分けたいのであればレスポンシブWebデザインの意味がありません。また、PCサイトがあるのでそれをレスポンシブWebデザインを採用してスマホサイトを作っちゃおうっていうのも危険です。「設計したけど今のPCサイトのソースじゃ実現できなかったので、結果PCサイトもリニューアルする羽目になってしまった」なんてこともあり得ます。コンテンツの内容を踏まえて、本当にレスポンシブWebデザインを採用すべきなのか、考えないといけません。

画像の取り扱いの問題

レスポンシブWebデザインについての話題を取り上げる際、絶対についてまわるのがこの「画像の取り扱い」についてです。各デバイスに最適化された画像の表示方法は今後も議論されていくでしょう。PHPを使ったりJavaScriptを使ったりいろいろな手法があると思いますが、どちらにせよモバイルファーストで考えてマークアップをしていくことが大事だと思います。
このブログでは、HTMLには基本的にスマホ用の画像を表示するように記述し、PC、タブレットの場合はjQueryで対応する画像に切り替わるように記述しています。

ここまでメリット・デメリットについて考えてきましたが、この他にもまだまだメリット、デメリットがあると思います。まだガイドラインの少ないレスポンシブWebデザインだからこそ、これからどう進化していくの実に興味深いです。

もし、この記事が役に立ったらシェアしてくださいね!

ツイート
このエントリーをはてなブックマークに追加

RECOMMEND BOOKS 筆者オススメ!! この記事に関連する書籍一覧

レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法

レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法

こもりまさあき

現段階でレスポンシブWebデザインの唯一の指標となる書籍といっても過言ではありません。モバイルファーストやFluid ImageなどレスポンシブWebデザインには欠かせない情報がほぼ網羅されています。

¥2,625(税込)

HTML5基礎

HTML5基礎

WINGSプロジェクト 片渕彼富

サンプルが豊富で、実践しつつHTML5の凄さを知ることができる本。触りながら覚えていくタイプの本なので、HTML5初心者の方におすすめしたい一冊です。

¥2,980(税込)

徹底解説 HTML5マークアップガイドブック 最終草案対応版―全要素・全属性完全収録

徹底解説 HTML5マークアップガイドブック 最終草案対応版―全要素・全属性完全収録

羽田野 太巳

HTML5での全要素、全属性のセマンティックなマークアップ方法がメインの書籍です。HTML5でサイトを制作する上で知っておかなければいけない情報が満載です。

¥3,150(税込)

HTML5入門

HTML5入門

Mark Pilgrim

オライリーのHTML5入門本。入門と言ってもHTML5触ってる人も読んで損はない本。サイト制作というよりもアプリ開発向け。

¥2,415(税込)

HTML5 開発ポケットリファレンス

HTML5 開発ポケットリファレンス

WINGSプロジェクト

HTML5でWebアプリを開発する上でとても役に立つポケットサイズの本。逆引きなので「これがやりたいけど、どうしたら?」って時に超便利。そして情報量が超豊富。

¥2,709(税込)

CSS3 スタンダード・デザインガイド

CSS3 スタンダード・デザインガイド

エ・ビスコム・テック・ラボ

タイトル通りCSS3についての本の中で「スタンダード」となりそうな本。定番から草案のプロパティ、ブラウザ独自プロパティ等、かなりの情報が網羅されてます。CSS3について知りたければこの本さえあれば正直いいかも。

¥2,940(税込)

CSS3デザインブック 仕事で絶対に使うプロのテクニック

CSS3デザインブック 仕事で絶対に使うプロのテクニック

MdN編集部

実践的な内容がメインです。「こうしたい時はこう」みたいな応用方法が載ってます。実践ノウハウが盛り込まれているので「なるほど!」と思える部分がいっぱいです。

¥2,940(税込)

現場のプロが教える スマートフォンサイト 制作ガイドブック [HTML5&CSS3&JavaScript]

現場のプロが教える スマートフォンサイト 制作ガイドブック [HTML5&CSS3&JavaScript]

松田 直樹、宮山 純

当ブログ管理人の宮山が初めて執筆に参加した書籍。実際の制作の現場で培ったノウハウや、スマートフォンサイトの設計・デザインのポイント、サイトの軽量化など、充実した内容になったかなと思います。レビューを頂ける場合は甘口でお願いします。

¥2,625(税込)

HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応

HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応

谷拓樹

iOSに特化したスマホサイト制作ガイド。実際の内容はAndroidでも使える内容も豊富なので、スマホサイトを制作する上で読んでおいて損はなし。

¥2,310(税込)

iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)

iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)

たにぐちまこと

スマートフォンサイト制作における入門本。スマホサイト制作において大事な設計から基本的なマークアップ、応用まで盛り込まれているので入門本として最適な本。

¥2,499(税込)