レスポンシブについて、聞いた内容を忘れないように備忘。

よくあること

「え、スマホ？いい感じに見えるようにしておいて」

それが、どれだけ手間のかかることなのか、今日まで知りませんでした。

そもそも、「レスポンシブWEBデザイン」とは…

PC、タブレット、スマートフォンなど、異なる画面サイズの幅を基準に
Webサイト表示を柔軟に調整し、見やすく最適な表示にすること

とのこと。

これだけ見ると、なるほど！３種類のことを考えればレスポンシブなんだな！と、思うのだが、そんなことはない。

PCって、具体的な画面サイズは？
タブレットって、どの端末のこと？？
スマートフォンって、どの機種？iPhone？？Android？？？

いろいろ、考えることが多い。
媒体が多様化している昨今では、どれをベースに作成すればいいのか、わからないです。

画面サイズによって見え方を切り替えるポイントをブレイクポイントというらしい。
上記の例で行くと、ブレイクポイントは2つあれば問題ないのかと思われるが、そんなことはない。

カードを横並びに表示する一覧画面があった時など、画面設計によっては同じ媒体だとしても、サイズが違うだけでブレイクポイントを置かざるを得なくなることもある。

要は、

１つの媒体でも、ある一定のサイズを超した時のことを考慮する必要がある　->
ブレイクポイントが増える　->
画面設計が増える！

ということになる。

そうなると頭を悩ますのが、見積もり…
そんなことまで考慮せずに受注するケースが往々にしてある。

そこまで気を走らせた上で、見積もることの大事さをひしひしと感じる。

レスポンシブ対応する上で考えること

一言「レスポンシブ対応」という話になった時は、下記のポイント３つを考える必要がある。

1.レスポンシブ
2.リキッドデザイン
3.アダプティブデザイン

1:レスポンシブ
※上記で記載した通り。

2:リキッドデザイン
画面サイズに応じて、要素が横幅100％相対的または可変的に調整するデザイン

要は、スマホという媒体のなかでも画面サイズが違ったとしてもうまいこと表示を調節してくれるデザインのこと。

ふむふむ便利だなと思うのですが、大きな画面のスマホで見た時は余白が気になり、小さな画面のスマホで見た時は窮屈さが気になる。
要は、リキッドすぎるとバランスが取りづらくなる！

なので、
大前提条件として、どの端末どの画面サイズを前提に作成するのか
というのをはっきりさせておくことが非常に大切になる。

3:アダプティブデザイン
要は、固定。

PC媒体だった場合は、ある一定の画面サイズ以上になった場合は固定表示にする。この考え方がアダプティブデザイン。

この３つのバランスが大切。
最も大事なのは、

これから作ろうとしているWEBサイトは、
・どのシーンで
・どの端末で
・どのように見えているべきなのか
ディレクションのタイミングではっきりと要件として固めること

昨今はいろいろなWEBサービスを必ず毎日見ている状態になっているので、こういった一見「当たり前」に見える部分をどうディレクション段階で具体的にするのかが、そのプロジェクトが成功するかどうか明暗を分けることになる。

日本人はどうも、「余白」があると、そこを埋めたくなるらしい。
（毎日「忙しい」とアピールしたくなる心理現象と同じなのか笑）

デザインをする上で大切なのこと下記。

余白（ホワイトスペース）の使い方

余白を「意識的な」余白として使用することが大切。

それをうまくできるようにあると、精錬されたシンプルなデザインを表現することができる。
変に日本語で説明しようと思ってしまうと、文字ばかりぐちゃぐちゃしたデザインになりがちなので、人の目を惹こうとすると、言葉ではなく精錬されたビジュアルを作成することも大切になる。

WEBデザインって、奥が深め！

※書いてあることがズレてることとか補足とかあったら連絡願います！