インターネットといえばブラウザでヤフーを立ち上げる事だと信じて疑わない田舎の母からホームページについてのレスポンシブ思考を考えさせられました。
そもそもは、「同じページをパソコンで見るのとスマートフォンで見るのとでは何故見え方が違うのか？」という質問に、それは「レスポンシブサイトだよ」と答えても、レスポンシブデザインの意味がわからない。
そらそうですよね。母親の持っている携帯電話はガラケー。僕のスマホを見てヤフーの表示がいつもと違う事で戸惑ったらしい。
便利だと思ってレスポンシブにしているUI/UXだが、ITリテラシの低い人にとったは混乱するという事が理解できた。
ただ、「それはソレ」として、レスポンシブについて、wordpressのテーマデザインや、bootstrapに任せっきりにしているというエンジニアも少なくないはず。
きちんとレスポンシブデザインのコンセプトを考えておいて、自分の仕事に活かす事にしようと考え、今回はレスポンシブデザイン仕様を構築してみたいと思う。
数多あるブラウザ考案
Bootstrapでは、パソコン、スマートフォン、PADタブレットの３種類がサイズ違いとして標準的に考慮されているが、ビジネスの現場では、タブレットはPCと同じ表示にするというケースが多い。
そうなると、スマホの小さい画面と、それ以外の画面（パソコンとタブレット）の２種類でいいという考え方にもなる。
しかし、スマホやタブレットは、"横画面"というモードが存在する。
※縦画面は"vertical(portrait)"で横画面は"horizontal(landscape)"と覚えましょう。
縦長か横長なのだが、そこそこサイズが変わるため、考えておく必要がある。
そしてそれよりももっともやっかいなのがPCブラウザなのである。
奴らは自由にサイズを変更する事ができ、やろうと思えば、スマートフォンよりも小さい画面にすることもできる。
これらを考慮してレスポンシブに関しては以下の分類が可能になる事になる。
1. UserAgentなどに応じて端末（ブラウザ）に応じたサイトデザインにする。
2. 画面横幅サイズに応じたサイトデザインにする。
3. touchイベントが存在するかどうかでの端末判別をして、スマホ判定をする。
他にも色々な事ができそうだが、大きくはこの３つ（多くは１番と２番）でしょう。
そして、Bootstrapなどでの採用されている２番が極めて論理的にUI/UXに合っていると考えられます。
ブラウザ画面サイズ考案
実際にブラウザの画面サイズを見てみると以下のような感じである。
| # | 端末 | portrait | landscape |
|---|
| 1 | iPhone8plus | 412 x 622 | 736 x 414 |
|---|
| 2 | iPhoneX | 375 x 635 | 725 x 375 |
|---|
| 3 | iPad | 812 x 365 | 1024 x 768 |
|---|
主要な端末として上記を挙げてみました。
※他の端末が必要な場合は各自で数値確認してみてください。
PCはサイズ可変すぎるため、掲載対象外です。
iphone*plusのように、通常のスマートフォンとタブレットの中間サイズのような大画面スマホも登場して、レスポンシブ判別は非常にシビアになってきているように感じます。
レスポンシブ構造考案
個人的には、500pxを基準にそれよりも小さいか大きいかの２パターン判別がシンプルでいいレスポンシブに考えられます。
そして、WEBページのカラム構造と相談しながら値を決めるのがいいかと思います。
※僕は２カラム構成が多いので、500PX基準が都合がいいですね。
１カラム構成
2カラム構成
3カラム構成
カラム構成はこの３つ以外にも複雑なものがたくさん存在しますが、この３つを基準に考えるのが制作しやすいポイントでしょう。
そして、サイズが小さくなるとカラムを減らしていく構造が望ましいです。
CSSの書き方考案
最後にcssに記述するレスポンシブはmediaクエリを使って以下のように書く事を前提に、最初に全てのcssに下記をコピペしておくと、効率アップできますよ。
２カラム->１カラム構成
/* << smartphone */
@media (max-width: 499px) {
}
/* smartphone >> */
/* << PC */
@media (min-width: 500px) {
}
/* PC >> */
3カラム->２カラム->１カラム構成
/* << smartphone */
@media (max-width: 499px) {
}
/* smartphone >> */
/* << pad */
@media (min-width: 500px) and (max-width: 767px){
}
/* pad >> */
/* << PC */
@media (min-width: 768px) {
}
/* PC >> */
