タブレット・スマホのデザインに768pxが多い理由とは

久しぶりの投稿ですね…

わりと沖縄へ行ったり熱海へ行ったりと最近は忙しめでした(笑)

さて、今回はデザインファイルを触るときによく見かける「768px」という数値についてお話しようと思います。

正直「半端やな…770pxでもええやんけ…」とずっと思っていたのですが最近お話を聞いて納得したので備忘録的に残しておこうと思います。

なぜ768pxがデザインの幅として多いのか？

この理由は意外と単純明快なものでした。

結論から言うと「768px」がタブレットの最小幅だからです。

「え、それより幅が狭いタブレットあるくない？」と思いますが、実は基準としているのは「iOS製品」なんです。

こちらはSafariで「レスポンシブデザインモード」にしたときの画面ですが、たしかに一番タブレットで小さいのは「iPad mini」でその画面幅は「768px」となっています。

そして、逆に一番大きいサイズは「iPad Pro」で「1024px」ですね。

「なるほど」とここで合点がいったのですが、わりとCSSでブレイクポイントを指定する際に「1024px」までをタブレットデザインとする表記が多いのはこういうことかと…

つまり1024px以上のタブレットが現在提供されていないので、それ以上は「PCデザインでいいっしょ！」ということですね。

少し話がそれましたが、タブレット・スマホデザインとして768pxが多いのはこのような単純な理由からのようです。

でもたまに「828px」のタブレット・スマホデザインも見かけますよね。

これはどういうことなのでしょうか？

デザイン幅が828pxはの理由は？

デザイン幅が828pxである場合も、やはりiOS製品に関係があるよう。

そしてこちらの数値はタブレットデザインというより、スマホデザインに比較的見られる数値かもしれませんね。

先ほどのレスポンシブデザインモードをまた見てみてください。

スマホで一番大きい画面幅の機種はどれですか？

そう、「iPhone 8 Plus」ですよね。

そしてこの幅は「414px」となっています。

ここで忘れてはいけないのが「Retina ディスプレイ」でしょう。

～Retinaディスプレイって？～

Retinaディスプレイは「高精細」なディスプレイです。

このRetinaディスプレイがなぜ高精細なのかと言うと、「ppi（pixel per inch）」というディスプレイの解像度を示す単位が大きいためです。

このppiは1インチにどれだけピクセルが入るか、という単位。

つまりこの数値が大きいほど1インチ当たりのピクセル数が多くなるので高精細になる、というわけですね。

Retinaディスプレイが搭載されたのはiPhone4からですが、このiPhone4が発売されるより前のApple製品のppiは「100～200ppi」ほどでした。

しかし、Retinaディスプレイを搭載したiPhone4のppiは「326ppi」。

そして先ほどのiPhone8Plusでは「401ppi」となっています。

つまり従来の解像度の二倍の解像度になっているんですね。

これがRetinaディスプレイが高精細なディスプレイたる理由です。

さて、Retinaディスプレイに関する話をしてみましたが従来の製品より解像度が二倍になっていることが分かりました。

つまり？

そうなんです、デザインを作る際には「Retinaディスプレイに対応するために二倍のデザイン幅でデザインを作らないとRetinaディスプレイに対応する解像度にならない」んです。

そして、現在提供されているiPhoneで一番大きい画面幅なのが「iPhone8 Plus」の「414px」、そしてその二倍の数値が「828px」なのでスマホデザインにおいては「828px」のデザインが多くなっているのでしょう。

スマホ・タブレットデザインのデザイン幅に関してはこれくらいですかね…

PCのデザイン幅は基準とするものが結構難しいようですが、一般的には「1280px」が多いようです。

しかし、画面幅いっぱいのコンテンツがデザインにあった場合、どのあたりで画面幅いっぱいのコンテンツをやめるか、対処するかを決めておかないととんでもないことになってしまうので気を付ける必要がありますね。

最近デザインを作ったりもしているので、今回聞いたお話はかなり貴重でした…

もしかしたら知っている方が多い話だったかもしれませんが、私にとってはインパクトが強かったので書いてみました。

今度はデザインの話ができればいいな…頑張ります～～