Reports レポート

ニフティクリエイティブデザイン部の部員が参加した、「セミナー」や「展示会」のレポートです。

アイコン画像

担当- 西野 香織

日付- 2013年05月09日

レスポンシブウェブデザインのつくり方

こんにちは、西野です。好きなinput typeはinput type="range"です。
前にAdobe Edge(現Adobe Edge Animate)の使い方記事を書きました。(Edgeが出た当時の記事なので情報が古いかも…)

今回は、最近ぼちぼち見かけるようになってきたレスポンシブデザインについてお話したいと思います。
実装の話はさわり程度で、企画、ディレクター、デザイナー向けにまとめています。

1.レスポンシブデザインとは

レスポンシブデザインとは、簡単にいうと同じHTML/CSSでいろいろな画面サイズに対応することです。
「あー、ワンソース マルチユースってやつでしょ」と言うと業界っぽい感じが出せます。(あくまで出せるだけです)

実例としてはTIMEのサイトやBREAKING NEWSなどが完成度が高いサイトとして挙げられると思います。
Bootstrapもレスポンシブに対応しています。

ウインドウサイズを左右に狭めたり広げたりしてみると、画面に合わせて横幅が伸び縮みしたり、
カラムが落ちるようにデザインが切り替わっていく様子が体感できます。

2.よくある勘違い

さて、このレスポンシブデザインですが、以下のような思い込みが起きやすいです。

・今までPCサイトを作っていたのと同じ工数で、スマートフォンサイトまでつくれちゃう?
・デザインはPC版だけあればいいよね?
・トレンドだから、取り入れておけばいいのでは?

本当のところはどうでしょうか。

今までPCサイトを作っていたのと同じ工数で、スマートフォンサイトまでつくれちゃう?

→単純な制作時間に加えて「レスポンシブのサイト設計」の時間が必ず必要になります。

また、HTML/CSSコーディングの時間は、PC・スマートフォン版を全く新規でつくるよりも短縮されるかもしれませんが、スマートフォン用にCSSの調整は多少なりとも必要です。
レスポンシブデザインにすることで工数短縮になるかは、ケースバイケースといえます。
最低でも設計+検証+制作の工数が必要です。

デザインはPC版だけあればいいよね?

→画面サイズが変わったときの表示方法は、分業制の場合デザイナー・コーダーで認識をよく合わせておく必要があります。
横並びのグロナビの見せ方だけでも、表示方法のパターンが数種類考えられます。

トレンドだから、取り入れておけばいいのでは?

→コンテンツによって、レスポンシブデザインにするかどうかは向き不向きがあります。
詳細は5.長所と短所・向き不向きで後述しています。

3.レスポンシブデザインの仕組み

レスポンシブデザインは、同じHTML/CSSでいろいろな画面サイズに対応することが大きなポイントなので、デザイナー、ディレクターもある程度はつくりを理解しておかないと、画面サイズが可変したときのイメージが困難かと思います。

下図はレスポンシブ用のワイヤーフレームです。
一番左の図をPC版として、タブレット版、スマートフォン版のワイヤーフレームになります。

ここで抑えるべきポイントは

画面幅に応じてコンテンツの見せ方が変わる
コンテンツの内容は変わらない

です。

3つのワイヤーフレームを見比べてみてください。
レイアウトは異なっていますが、デバイスが変わってもコンテンツはほぼ同じです。
タブレットからスマートフォンに切り替わるときに、ヘッダーが非表示になっている程度で、デバイスによって新しくコンテンツを追加したり、大幅に削除したりはしていません。

PC版、タブレット版、スマートフォン版で同じHTMLなので、画面サイズが変わってもコンテンツが同一なのです。

4.レスポンシブデザインのつくり方

では、具体的なつくり方を見てみましょう。

HTMLソース的な意味の大枠でくくります。
このあたりはコーダーなどHTMLの書き方がわかる人と相談して区切ってみるとよいです。
上ではヘッダー、メインカラム、サブカラム、フッターという区切りになっています。

今回はスマートフォン用サイトとして、考えてみましょう。大枠の上から順に、見る順番を決めます。


続いて、大枠の中で見る順番を決めていきます


コンテンツの優先順位を考えながら、大枠をまたがないように順序づけをします。

1の枠の中で上から順に1-1、1-2、2の枠の中で上から順に2-1、2-2、2-3…と読む順番を振っていきます。
大枠をまたいで読む順番を変更すると、コーディング上無理が生じます。
この場合、右カラムのナビゲーション(1-1と数字が振ってあるところ)の次に、コンテンツの真ん中にある部分(2-2と数字が振ってあるところ)を読むというようなことは、レスポンシブデザインでは実装上控えたほうがよいです。


最後に、2-2の黄色の枠の中で読む順番を決めます。

「読む順番」に沿って、まとまりで並べかえると、組みやすいデザインになります。

レスポンシブデザインをつくるときのポイントとしては、

読んでほしい順番やまとまりをデザイナー、コーダー、ディレクター(企画)で相談しながらつくる

とスムーズな制作ができると思います。

上記でつくり方のポイントを説明しましたが、画面サイズによるデザインの違いは、実際に組んでみないと
なかなかイメージが難しいところがあると思います。
丁寧なやり方ではありますが、下図のような流れで制作を進めていくことで、関係者間での認識ずれを抑えることが可能です。

5.長所と短所・向き不向き

さて、このつくり方を踏まえて、長所と短所についてまとめてみました。

■長所
PC、スマートフォンサイト両方を更新する手間がなくなる
・設計がうまくいけば、コーディング工数は少なくなる
・ワンソースなので、開発工数が減る

■短所
デバイスごとにUIを最適化することはできない
・PC、スマートフォン版のデザイン切り替えが難しい
 ※画面サイズでデザインを切り替えているため
・新規コンテンツの追加が難しい
 ※PC、スマートフォン両方のデザインを意識して再設計しなくてはいけないため
・PC、スマートフォンで画像サイズが同じなので、大きい画像を使用していると重くなりがち
 ※JS側で画面サイズによって画像を切り替えることも可能

短所のいくつかはJSを併用することで解決することが可能ですが、
更新がしやすくなるという大きな長所がある一方で、ワンソースであるがゆえの短所があることも、理解しておく必要があります。

また、実際にコーディングをしてきた中で、実装的に感じた向き不向きについては下記のとおりです。

■レスポンシブデザイン向き
モバイルファーストのサイト
・利用シーンがデバイスによって全く変わらないもの
 ※商品のランディングページなど
・Twitterなど単機能のウェブアプリ
・画面サイズが可変になっても問題ないデザインのサイト
・記事配信系のサイト
 ※ブログ、ニュース、コラムなど同じURLで多くのデバイスでシェアできる。

■レスポンシブに不向き
・デバイスによって利用シーンや目的が変わるサイト
・ピクセルベースのデザインのサイト
 ※コンテンツの順序やサイズの規定が厳しい、広告の大きさを変えてはいけないなど
・1ページあたりのコンテンツ量が多いサイト
・大規模サイト
 ※設計の工数がかなり大きくなる

6.レスポンシブデザインをする前にチェックすべきポイント

レスポンシブにするか検討をするときに、以下の点に注意することをオススメします。

・画面幅が変わってもコンテンツの内容が同じ
・画面幅によって、コンテンツの順番が入れ変わらないか
・画面サイズが変わると、デザインテイストが変わらないか
・表組み(テーブル)やポジション固定の要素がないか
・IE対応が必須ではないか

7.最後に

長所ばかりが語られがちなレスポンシブデザインですが、その向き不向きもふまえた上で取り組んでいく必要があります。

順番やまとまりがサイト設計の要になること
そのサイトをレスポンシブデザインにすることでメリットデメリットどちらが大きくなるかを考えること、
この2点をまず意識して、レスポンシブデザインを制作に取り入れていくとよいのではないかと思いました。

ではまた~。