カテゴリー: マルチデバイス

以前はGalaxy Noteのブラウザ解像度に付いて書いて好評だったが、今度は昨日発売されたばかりのGALAXY S3を店頭でチェックしてきた。

どうやら

GALAXY S3 ブラウザ解像度　幅360px

Galaxy Noteもそうだったようにブラウザ解像度は実際の本体解像度の丁度半分に設定されている。これで大体半分になるだろうことは目星が付いたので今後はいちいち店頭でチェックする必要もないことだろう。

CSS3のメディアクエリーは本体解像度ではなく、当然ブラウザ解像度を返す仕組みになっているからしっかり縦持ちでの横幅ブラウザ解像度は把握しておきたい。

• iPhone　320px
• Galaxy S2　320px
• Galaxy S3　360px
• Galaxy Note　400px

標準ブラウザがどうやらChromeになっているようだ。ブラウザ解像度の扱い方の違いは確認できなかったが、同じWebKitなのでメディアクエリーも同じになっていることでしょう。パッと見の違いは上部のアドレスバーがスクロールしてもChromeはずっと残っているってところ。ツールバーを隠すための1px下に移動するJavaScriptもChromeだと意味がなくなる。Androidを設計しているGoogleがなぜに？ブラウザとChromeに分けてChromeを標準にする必要があるのかと少し思うがブランド構築のためだろう。

iPhoneが320pxでスマホも320pxの横幅だけで想定しているスマホサイトがまだまだ多いが、640px以下をスマホサイトとしてレスポンシブに捉えてWeb制作をする必要があると感じた。640pxを超えてくるとPCサイト扱いで今のところいいのではないかと感じている。

ディスプレイはめちゃくちゃキレイになっているので、容量を軽くしたいのはわかるが、作り手としては綺麗に見える２倍の解像度の画像を使いたいところだ。写真は問題ないが、ロゴやテキスト系画像はそのままの解像度だと荒れて見えちゃってしょうがない。SVGとかが威力を発揮してくるのかも知れない。

GALAXY Note SC-05DのWeb解像度を店頭で見てきた。

結論：どうやら640×400ピクセル
（WEBブラウザ解像度）

スマホデザインは幅320ピクセルで作ればいいといった常識は通用しない。
GALAXY Noteは縦で持って幅400ピクセルである。

機種の画面解像度は1280×800ピクセルなのでWEB解像度は丁度半分になる。この仕様として公開されている解像度とブラウザ解像度は別なので、調べる必要が出てくるところが厄介です。これで思い悩んでいるデザイナーは多いのではと思います。

レスポンシブルWEBデザインとかマルチデバイスデザインが求められるようになって、タブレットやらスマホの解像度がどんどん多様になってきて、WEBデザイナーはどのような対応策をとっていけばいいのかのご提案です。

1. ユーザーエージェントでPCサイトと振り分ける
2. CSS3のデバイス幅でCSSを振り分ける

携帯サイトも結構やっていたので、その歴史を語ると最初は

• IPアドレスで振り分ける（徐々に機種が増えすぎて対応しきれず）
• ユーザーエージェントUAで振り分ける（スマホになってマルチデバイス化が必要で）
• 横に傾けた時にWEB解像度が広がる（縦横両方に対応せねば…）
• タブレットも相当増えてきて（デバイス幅で指定が求められるGALAXY Noteのような中途半端なデバイスへの対応）

といった流れではないでしょうか。iPhoneやiPadなどのアップル製品はそんなに製品ラインを変えたりしないが、Androidや各種キャリアのスマホは今後どうなっていくか進化はバラバラだろう。だからiPhoneやAndroid Mobileといったユーザーエージェントだけではそのデザインの対応が難しくなってくることは容易に想像がつく。

ということで今後求められるのはデバイス幅とPCサイトとの両方の対応をどれだけ的確に出来るかが腕の見せ所となっている。 縦と横で解像度が異なることにも頭を悩ませて、そのまま320ピクセルのスマホ解像度でやろうとしてもいいがGALAXY Noteだとかなり大きくなり過ぎてしまう。

でもCSS3のデバイス幅の機能（max-width/min-width）はよくこの未来を考えられていると思った。これからはデバイス幅でCSS3を駆使してマルチデバイスデザインとレスポンシブルデザインをしていくことが主流になることは間違いないだろう！