Sprit view、Slide overで生き残るレスポンシブの最小幅320px

iPhoneSE2(仮)or iPhone9(仮)が2020年3月発売と噂されており、本体サイズはiPhone8と同じ4.7インチになるのではと言われています。
 
スマホのデザインを作成する時は、最近ではiPhone6,7,8のサイズの375px(2xで750px)で作っている人も多いのではないでしょうか。
 
そんな中、320px(2xで640px)はiPhoneSEのみとなり、だいぶ影を潜めていますが、
私は今まで以上に320pxは配慮すべきサイズだと考えています。
 
なぜかというとタイトルの通りiPadの「Sprit view」「Slide  over」の存在です。
 

f:id:hashimotoblog:20200206133843j:plain



f:id:hashimotoblog:20200206133855j:plain



f:id:hashimotoblog:20200206133903j:plain



iPad/mini/airそれぞれが共通して「Sprit view」「Slide  over」が320pxとなっています。
割と見落としがちですが、 ヘッダー内の要素で320pxだと見切れているサイトをよく見かけます。
 
また、320pxではないのですが、PCでも端っこで見る需要があると考えています。

f:id:hashimotoblog:20200206133914j:plain

こんな感じで、作業をしながら調べ物をしたりする場合です。
 
各ブラウザの最小幅は以下のようになっています。
 
Firefox:335px 450px(2020年5月21日現在 バージョン76.0.1では450pxになっていました。 )
Chrome:500px
Safari:504px
 
大きなモニタで見ている人もブラウザは全画面にしないで、
小さいブラウザサイズで見ている数は少なくないと思っています。

f:id:hashimotoblog:20200206133923j:plain


Yahooや、日刊スポーツなどは、幅を狭くすると見切れてします。

 
まとめると、
 
モニタの解像度で、幅を考えがちですが、最小幅という視点も大事なのではないかと思っています。 
その中で特に、320pxはまだまだ需要があるよというお話でした。

 

 お知らせ

YouTubeチャンネル「ちいさなデザインの話」を開設しました。

「WEB制作ドキュメント」「10分デザイン考」などデザイン情報を発信していますのでこちらもぜひよろしくお願いいたします。

f:id:hashimotoblog:20201206184306p:plain

YouTubeチャンネル「ちいさなデザインの話」