タブレットの普及で大きな変化？？2020年現在のレスポンシブ対応まとめ

スプリント特化のUI/UXデザイナーなかのです！
最近のスマートフォンやタブレットの普及によって
レスポンシブ対応もそちらに適応しつつありますね！
特に最近増えつつある、左側にメニューがくるものはいままでの上側メニューからだいぶ大きい変化ですね！

左側のメニュー(タブレット寄り)

twitterのレスポンシブ対応。
メニューを左側に寄せているのは、PCよりもタブレット系をメインに考えているからなのだろうなというところと、広い画面の場合は文字の説明(通知など)がでるけど狭い場合はアイコンだけというのがお洒落ですね！ pic.twitter.com/mjfSJiKlb6

— NAKANO (@nakanoDesign) February 2, 2020

youtubeのレスポンシブ対応。
こちらもtwitterと同様メニューが左にありますね。タブレット優先というかんじですね。さらに小さくなると左上のハンバーガーメニューに収納されます！ pic.twitter.com/7JoOkYoicD

— NAKANO (@nakanoDesign) February 2, 2020

スマホ寄り

instagramのレスポンシブ対応。
小さくなってくるとどんどんスマホ向けになっていきますね！ pic.twitter.com/3dST1DKaae

— NAKANO (@nakanoDesign) February 4, 2020

上メニュー

Nintendoさんのレスポンシブ対応。
小さくなってくるとだんだんスマホ向けに！ pic.twitter.com/BWqhsuwipX

— NAKANO (@nakanoDesign) February 4, 2020

メニュータブ

Jetstarさんのレスポンシブ対応。
小さくなってくるとメニューが右上のメニュータブに格納されます！ pic.twitter.com/Lc7A7eyPlx

— NAKANO (@nakanoDesign) February 7, 2020

ハンバーガーメニュー

楽天銀行さんのレスポンシブ対応。
小さくなってくるとだんだんスマホ向けに！ pic.twitter.com/HaI7qzSPmC

— NAKANO (@nakanoDesign) February 4, 2020

さくらインターネットさんのレスポンシブ対応。
小さくなってくると右上にメニューが格納されます！ pic.twitter.com/Bto0nlqYlq

— NAKANO (@nakanoDesign) February 6, 2020

マネックス証券さんのレスポンシブ対応。
小さくなってくると右上にメニューが格納されます！ pic.twitter.com/UypYadfDCs

— NAKANO (@nakanoDesign) February 10, 2020

ロリポップ！さんのレスポンシブ対応。
小さくなってくると左上にメニューが格納されます！ pic.twitter.com/E9s6RKRTiG

— NAKANO (@nakanoDesign) February 12, 2020

まとめ

webに最適化するとメニュー系は上に配置されることが多く
スマホに最適化すると下部に配置されることが多く
タブレットに最適化すると左側に配置されることが多く
結構大きい変化が生まれていますね！

端末を持った時に指が届くのが、スマホは下なので下にメニューが固まっていて、タブレットはたぶんこういう感じで横にして両手で持つから左側にメニューが固まっていって、PCはブラウザのタブを操作するので上部にメニューが固まっている感じですね！ pic.twitter.com/t4LR5d81Af

— NAKANO (@nakanoDesign) February 4, 2020