WEBページのレスポンシブ考案

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

インターネットといえばブラウザでヤフーを立ち上げる事だと信じて疑わない田舎の母からホームページについてのレスポンシブ思考を考えさせられました。
 

そもそもは、「同じページをパソコンで見るのとスマートフォンで見るのとでは何故見え方が違うのか?」という質問に、それは「レスポンシブサイトだよ」と答えても、レスポンシブデザインの意味がわからない。
 

そらそうですよね。母親の持っている携帯電話はガラケー。僕のスマホを見てヤフーの表示がいつもと違う事で戸惑ったらしい。
 

便利だと思ってレスポンシブにしているUI/UXだが、ITリテラシの低い人にとったは混乱するという事が理解できた。
 

ただ、「それはソレ」として、レスポンシブについて、wordpressのテーマデザインや、bootstrapに任せっきりにしているというエンジニアも少なくないはず。
 

きちんとレスポンシブデザインのコンセプトを考えておいて、自分の仕事に活かす事にしようと考え、今回はレスポンシブデザイン仕様を構築してみたいと思う。

数多あるブラウザ考案

Bootstrapでは、パソコン、スマートフォン、PADタブレットの3種類がサイズ違いとして標準的に考慮されているが、ビジネスの現場では、タブレットはPCと同じ表示にするというケースが多い。
 

そうなると、スマホの小さい画面と、それ以外の画面(パソコンとタブレット)の2種類でいいという考え方にもなる。
 

しかし、スマホやタブレットは、”横画面”というモードが存在する。
※縦画面は”vertical(portrait)”で横画面は”horizontal(landscape)”と覚えましょう。
 

縦長か横長なのだが、そこそこサイズが変わるため、考えておく必要がある。
 

そしてそれよりももっともやっかいなのがPCブラウザなのである。
奴らは自由にサイズを変更する事ができ、やろうと思えば、スマートフォンよりも小さい画面にすることもできる。
 

これらを考慮してレスポンシブに関しては以下の分類が可能になる事になる。
 

1. UserAgentなどに応じて端末(ブラウザ)に応じたサイトデザインにする。
2. 画面横幅サイズに応じたサイトデザインにする。
3. touchイベントが存在するかどうかでの端末判別をして、スマホ判定をする。

 

他にも色々な事ができそうだが、大きくはこの3つ(多くは1番と2番)でしょう。
 

そして、Bootstrapなどでの採用されている2番が極めて論理的に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を基準にそれよりも小さいか大きいかの2パターン判別がシンプルでいいレスポンシブに考えられます。
 

そして、WEBページのカラム構造と相談しながら値を決めるのがいいかと思います。
※僕は2カラム構成が多いので、500PX基準が都合がいいですね。
 

1カラム構成


 

2カラム構成


 

3カラム構成


 

カラム構成はこの3つ以外にも複雑なものがたくさん存在しますが、この3つを基準に考えるのが制作しやすいポイントでしょう。
 

そして、サイズが小さくなるとカラムを減らしていく構造が望ましいです。
 

CSSの書き方考案

最後にcssに記述するレスポンシブはmediaクエリを使って以下のように書く事を前提に、最初に全てのcssに下記をコピペしておくと、効率アップできますよ。
 

2カラム->1カラム構成

 

3カラム->2カラム->1カラム構成

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です