狠狠撸

1
レスポンシブウェブデザインの
今後を考える
15分勉強会@カデナデザインヴィレッジ
2014年7月31日
小三ツ星インターフェイス　川満

2
レスポンシブウェブデザインとは
重要な3要素
1. 　幅可変（画面?ウィンドウサイズに追従）
2.　画像サイズ可変
3.　レイアウト切り替え（メディアクエリ）
1ソース?マルチデバイス（特にスマホに対
応）
URLが同じ＝PCでモバイルサイトにつながることがな
い。　SEO上有利、など。
?ユーザー（閲覧者?更新管理者）にとって
「使いやすい」事が大事。

3
「使いやすい」って？
● 具体的に考えてみよう。
閲覧者更新管理者サイト制作者
ここで出てきた答えが、
ウェブデザインの将来あるべき姿。
（レスポンシブデザインに限定されない）

4
「使いやすい」って？
● 検討例。
● 横スクロールがない
● 直感的な操作ができる
（シグニファイア）
● 想定外の挙動をしない
● 分かりやすいアイコン
● WYSIWYGエディタ
● 記事ページに「編集」
ボタンがあって修正し
やすい
● 絞り込まれた機能
● 操作の分かりやすさ
● 使いまわすデータが分
散していないこと
（例：商品価格など）
● 読みやすいコード
● 構造、デザイン、ロ
ジックの分離

5
ウェブデザインの将来像と
レスポンシブデザインの関係は？
● レスポンシブデザインは、少なくとも従来の固定レイアウト、デバイ
ス別マルチソースよりも「使いやすい」
● ウェブの利用形態?デバイスに、今のところより良い選択肢として存
在する。
● 1ソースマルチレイアウトは、「汎用デザイン」。そのため無駄も課
題もある。
　→課題は解決するためにある。
　　では、どんな課題があるのか考えよう。

6
現在のレスポンシブデザインの課題は？
● この課題を解決するのが、今後のRWDの進む道。
● スマホでもPCサイト
を見たい。
● 拡大?縮小したときに
レイアウトが変わって
びっくりする。
● なんか同じデザインの
サイト多くね？（全部
縦並びで写真がでかく
て中身がないとか）
● PCとスマホでユー
ザーの求める情報がま
るで違うんだけ
ど???
● ページのボリュームが
大きい
● デザインチェックが煩
雑になる。
● 幅を変えるとデザイン
のバランスが崩れて美
しくない。
● コードが膨大に???

7
課題の解決方法の例（1）
● スマホでPCレイアウトが見れない
→JavaScriptでCSSを切り替えるスイッチをつける。
● 何かの操作でレイアウトが突然変わる
→JavaScriptでCSS書き換え。ブレイクポイントも可
変にする。
● 1カラムの同じデザインが多い。
→ターゲットによってはOK。（スマホユーザーしか
対象にしないスマホアプリサイトなど）
→CSSフレームワークの活用などでデザインへ投じる
時間を増やす。

8
課題の解決方法の例（２）
● PC?スマホの異なるユーザーニーズへの最適
な情報配分
→2ソース?レスポンシブデザイン。
中身ごと違うなら、SEO上も管理上も1つにまとめる必
要はない。別ソースにして、その中でレスポンシブにす
ればよい。
● ページのボリュームが増大する問題
→同上。

9
課題の解決方法の例（３）
● デザインチェックの煩雑化
→CSSフレームワークなどの活用。
→制作の場数を踏めばあるていど変化を予想できる
● デザインバランスの崩れ
→画面幅により分割比などが壊れるのは不可避。
→リキッドレイアウトにこだわらない。
→多段固定レイアウトという選択肢も。
● コードの増大
→モバイルファーストの採用（IE8絶滅まで待つ）
→CSSフレームワークを使って工数削減

10
まとめ
● デバイスの細分化に対し、ディスプレイサイズでざっくりと分類して対
応したのがレスポンシブデザイン。
– 他にも、Retinaか非Retinaかで分類するって方法もありうる。
● レスポンシブデザインは最終形態ではないし一時のブームでもない。今
後も改良を重ねて発展していく定番デザインの一つになる。
– まだ見ぬアドバンスト?レスポンシブウェブデザインへ
● 基本の「ユーザーファースト」に忠実に、柔軟に考えていこう。

狠狠撸

レスポンシブウェブデザインの今后を考える

More Related Content

レスポンシブウェブデザインの今后を考える