TECHNOLOGY 2013.04.04

レスポンシブな考え方について

  • HTML5/CSS3
  • javascript
  • Markup

こんにちわ、チーフマークアップの岩村です。
最近レスポンシブデザインが目立つようになってきましたね。
レスポンシブ専用のサイト集まで出てきたり、今後弊社でもレスポンシブ案件が増えてきそうです。
▼ちなみにレスポンシブ専用サイト集
【Responsive Web Design JP】
http://responsive-jp.com/

先日セミナーでもお話させていただいたんですが、
改めてレスポンシブの考え方について触れてみたいと思います。
まず、一般的にレスポンシブとは
スマホやタブレットPCなどあらゆるデバイスに対応する手法のことをさします。
このような傾向になってきたのはやはりスマートフォンが普及してきたからです。
じゃあ、今まで作ってきたスマホサイトは何なの?
って思われますよね?

スマートフォンサイトを別で作るか、レスポンシブで1ソースでマルチデバイスに対応するか。

ここのお話をしたいと思います。

ではまず、メリット、デメリットについて説明します。
まずメリットとしては、

● あまり更新性のないページなどスマホPCサイトと1ソースで作れるので工数が減る。
● 時間をかけてじっくりつくれば、ECサイトなど一括で管理できるので便利。
● スマホ、PCと同じサイトに訪れたことになるので、比較的SEOに強い。
● レイアウトにとってはipad向けのサイトがすぐ作れる。(これはレスポンシブというよりリキッドデザインの考え方に近い)

なかなか便利そうですね。
ではデメリットとして、

● 重くなる。
● 適当に作ると管理が逆に厄介になる。
● jsの処理がやっかい。
● IE8以下もっと結構やっかい。(対応させない方が良い)

どちらも一長一短ですね。
正直レスポンシブはCSS3のメディアクエリだけで対応させる(jsとか一切使わない)シンプルなサイトであれば、工数は半分になります。
実際スマホ用のCSSを数行書き換えれば、スマホとipadのレイアウトが出来るので、効率化に繋がります。
(width:980px→width:100%など)
でも、今ではretinaに対応してほしい、FULL FLASHなどにしてほしいなど、
このような環境も含めてレスポンシブを対応させると実際にスマホに持って行くと画像が重すぎて、通信が遅くなり、えらいことになります。

上記もレスポンシブデザインを取り入れる上で重要になってきますが、
もっと重要な項目について。(ようやく本題)
結局、コンテンツストラテジーが一番重要になってきます。
コンテンツストラテジーとは

ターゲットが誰で、達成したいことは何か、競合はどのように表現していて、自社は現状どうであるか、といったコンテンツに関する情報を共有すると、コンテンツの評価や、運用フェーズにおける次の打ち手を計画できるようになります。

http://www.concentinc.jp/labs/2011/08/contents-strategy-brief/

※別会社さんのですけど、こういうことなので。。。
つまり、レスポンシブデザインで考えられるストラテジーとは、

● PC、モバイルユーザーの行動様式を踏まえて設計すること
● ユーザーがモバイル端末をどう使用するか、なぜ使用するかを考慮し設計すること。
● ナビゲーションよりもコンテンツを重視すること
● 明瞭で焦点をはっきりさせること

これらを図で対比させていくよく分かると思います。
スマホはどこでも使えるけど、PCは固定の場所でよく使う。
=いつでも画面を閉じることが出来るので、あまりに長いコンテンツは読まない。
=PCは座ってみるので比較的滞在時間が長い。

スマホは通信がPCに比べて遅い
=スマホは画像よりも文字を多く使う。
=PCは別にビジュアルメインでも構わない。

スマホが画面が小さいがPCはデカイ
=スマホではコンテンツを絞ってみせよう。
(※バナーなどは格納型に、ビジュアル化されたメニューをデバイスフォント+アイコンに)
=PCは色々な導線を設けよう。

スマホでは基本HTML5が使えるけど、PCではまだブラウザがね。。。
(マークアップ的に重要なだけです、すいません。)
※でも、位置情報の取得などもあるので、スマホ独自の技術機能は考慮すべきです。

などなどです。

これらをずらーと並べてみると、
スマホサイトを作ったほうが良いか、
レスポンシブデザインにして1ソースで管理したほうが良いか見えてくると思います。

結局、ユーザーが使い易いサイトを作るべきだと思うんです。
それがUI設計で重要なポイントになってくると思います。

レスポンシブが流行っているからとかではなく、
上記を踏まえた上で是非作業してみてください。

きっといいものが出来ると信じています。
以上岩村からでした。