こんにちは！デザイナーのヒロです。
レスポンシブWebデザインを考える時に、
レイアウトを変更する基点になる「ブレークポイント」をどこに設定するのかが大切になります。
いろいろな解像度のデバイスが出てきているので、今までなんとなく決めていたのが不安になったりしますよね。
今回は、レスポンシブWebデザインのブレークポイントについて、
そもそも解像度って何？というところから、わかりやすく説明します！
そもそも解像度って何？
ディスプレイを構成する、1番小さい要素をピクセル（pixel, px）と言います。
日本語では、画素とも言いますね！
ピクセルは正方形や長方形の形をしていて、色や明るさなどの情報を持っています。
これらがたくさん集まって、画像や文字をきれいに表示します。
これらピクセルが、1インチの1辺あたりにいくつ集まっているか表すのを解像度と呼びます。
解像度を表す単位は、ppi（pixels per inch）です。
（※解像度を表す単位は他にもありますが、今回は割愛します）
難しくなってきましたね。
例えば、2020年に発表された新しいiPhoneSEで説明しますね。
- 解像度： 326ppi
- 縦幅： 1334px
- 横幅： 750px
326ppiとは、1インチの1辺あたりに326個のピクセルがある、ということです。
また、縦と横のピクセル数が分かっているので、iPhoneSEのディスプレイの実寸サイズも計算できます。
- ディスプレイの実寸（縦）： 1334px ÷ 326ppi = 約4.1inch（約104.14mm）
- ディスプレイの実寸（横）： 750px ÷ 326ppi = 約2.3inch（約58.42mm）
「デバイスピクセル」と「CSSピクセル」
ここが1番わかりづらいポイントになります。
2010年に発売されたiPhone4から、
なんと、前のモデルのiPhone3Gのディスプレイのサイズは変わらないのに、
4倍のピクセルが詰まった高画素密度ディスプレイが採用されました。
そのディスプレイのことを、「Retinaディスプレイ」と呼びます。
解像度で表すと、
iPhone3Gは、1インチの1辺あたりに163個のピクセルが並んでいましたが、
IPhone4は、1インチの1辺あたり326個のピクセルが詰まっていることになります。
- iPhone3G： 320×480（163ppi） ※合計 15万3600ピクセル
- iPhone4： 640×960（326ppi） ※合計 61万4400ピクセル ← 4倍！
これによって、画像や文字がよりきれいに表示できるようになりました。
しかし、Retinaディスプレイは、ピクセルの密度が多すぎるため、
そのまま画像や文字を表示すると、極端に小さくなってしまいます。
そこで、Retinaディスプレイでは、
iPhone3Gなど従来のディスプレイの、1ピクセルのスペースの中に、4つピクセルを入れて1ピクセルとすることにしました。
例えば、
iPhone3Gでは、画像1pxあたり、1ピクセル分を使って表示しますが、
iPhone4では、画像1pxあたり、4ピクセル分を使って表示します。
このように、
実際のディスプレイのピクセル数をデバイスピクセルと呼び、
画像1pxあたり、4ピクセルなど、擬似的なピクセル数をCSSピクセルと呼びます。
また、デバイスピクセルとCSSピクセルの比率をデバイスピクセル比と呼びます。
iPhone4のRetinaディスプレイの場合、デバイスピクセル比は2倍になります。
（※Androidのデバイスにはまた違った独自の単位がありますが、今回は割愛します）
わかりづらくなってきましたね。
レスポンシブWebデザインで覚えておくべきなのは、CSSピクセル
iPhone4で初めて採用されたRetinaディスプレイから時が流れ、
様々な解像度のディスプレイを持ったデバイスが登場しました。
これによって、レスポンシブWebデザインのブレークポイントに悩んでいる人も少なくないと思います。
大切なのは、デバイスごとのCSSピクセルを知ることです。
デバイスピクセルや、ディスプレイの実寸サイズは、気にしなくても大丈夫です。
Appleのデバイスで比較しましょう。
iPhone6から、2020年までで発売されたものを、CSSピクセルの順番に並べました。
- スマートフォン（縦向き）： 横幅 375〜414px
- スマートフォン（横向き）： 横幅 667〜896px
- タブレット（縦向き）： 横幅 768〜1024px
- タブレット（横向き）： 横幅 1024〜1366px
- PC： 横幅 1024px以上
これを見ると、ブレークポイントは、
768pxを基点として、スマートフォンとタブレット・PCを分けるのが良さそうですね。
もし、タブレットとPCもブレークポイントを分けたい場合は、1024pxを基点にすると良いでしょう。
レスポンシブWebデザインのコツは、アダプティブに考えすぎないこと
最後に、レスポンシブWebデザインのコツは、Webサイトをすべてのデバイスに最適化しようと、アダプティブに考えすぎるのをやめることです。
スマートフォンやタブレット・PCの他にも、テレビやゲーム機など、本当に様々なデバイスでWebサイトが見られるようになっています。
そのため、どのデバイスでも見ることができるように、Webサイトはシンプルなレイアウトにするのが良いでしょう。
また、Webサイトに訪れるユーザーによって、特に力を入れるデバイスを決めてしまうのも1つの方法です。
例えば、商品の販促用のランディングページなら、
スマートフォンからのアクセスが非常に多くなる可能性が高いため、スマートフォン向けに力を入れてデザインをするのが良いでしょう。
また、モバイルアプリもある、SaSS（サース）系のWebサイトでは、
スマートフォンやタブレットのユーザーは、アプリを利用している人が多いので、WebサイトはPC向けに力を入れるのが良いです。
すべてのデバイスに最適化しようとすると、
HTMLやCSSの構造が複雑になるため、
メンテナンスがしにくく、修正した時にバグが発生したり、
ページの読み込み速度が遅くなったりする恐れがあるので、注意してください。
いかがだったでしょうか？
この記事でレスポンシブWebデザインのブレークポイントについて、
理解ができた！という人がいれば嬉しいです。
コメント