カテゴリー: タブレット

iPad miniを店頭で見てきたWEBデザイン視点の感想をいくつか。

• 文字はiPhoneのようなpxサイズの考慮は無く大きいiPadと同じ
• デバイスの幅もiPadと同じ扱いだろうViewport, @media
• 16pxなら読めるが14pxだとキツイ感じ

結果、本当にiPadを小さくしただけ。

といった印象である。iPad2を小さくしただけとよく云われるiPad miniだが、それはディスプレイがレティーナじゃないことも指していると思う。その理由は、思った以上に解像度が汚いように感じる。

そんな解像度何て大したことないだろうと思っていても、iPhone5やiPad３世代以降を日々見ている状況の人であれば、かなり粗さがブツブツと目立つようなディスプレイであることは間違いないといった印象で、こんなに違うのかと思うほどでした。

比較になるNexus7の方がよっぽどディスプレイ解像度は綺麗に見えます。

大まかにデバイスとしての印象は、

• 確かに軽いが、それはiPadとの比較に於いて
• GALAXY Noteのような小ささは感じず、まだPad感がある大きさ
• 裏面が冬だと冷たく感じる（ケースを付ければ別だが）

残念ながら個人的には見送りたい機種である感じだった。この端末が電子書籍の道筋を立てるとも言いがたい感じでもあった。本ならもっと小さいのが好ましいと感じるし、多いさがパッド感の名残のような気がしてならないサイズだった。

WEB的には、iPadを意識しているデザインであれば、CSS3やViewportはiPadそのものなので、iPadでちょっと大きく見えるかな程度の文字の大きさやニュアンスが良いと思います。フォントサイズは、本文であれば16pxで問題ないのかなと思います。18pxにまでしてしまうとPCでかなりデカ文字になるし、14pxだとタブレットやiPad miniだと小さすぎで読めない印象です。

年配の人があまり7インチタブレットを頻繁に使わないだろうということを考えれば、このミニパッドと呼ばれるWEBデザインは現状、iPadや10インチ系タブレットに大きめ対応して、Nexus7系Androidには@mediaやViewportで対応すればいいと言った感じで、7インチ特有の何か新しいレスポンシブデザインを導入する必要は特にないと思いました。

前回書いたNexus7の続きのような感じで、再度店頭で見たまとめ。
小型タブレットにWEBデザイン振り回されることになります2013年…。

Nexus7（仕様1,280×800px）

Chrome（標準ブラウザのアプリが見当たらなかった）
横：ピッタリ（device-width 効いてる感じ、もしくは1280×0.75＝960pxってことかも）
縦：CSS3分岐が有効だった（多分800×0.75＝600pxくらい）分岐がなければ多分ピッタリに
ブラウザ解像度率→0.75か

Firefox
横：右側が切れてた（device-width不能？800pxくらいでってことは、1280×0.75＝960pxではなく、1280×0.66＝844.8pxくらい）
縦：CSS3分岐が有効だった（多分800px×0.75＝600pxくらい）分岐がなければ多分ピッタリに
ブラウザ解像度率→0.75かo.66か

エイサーA700、フルHD タブレット（仕様1,920×1,200px）

Chrome＆ブラウザ（同じ見え方だった）
横：横幅があまり過ぎてたが、1920pxとまではいっていない（device-width 無視ってこと？）でも多分1920×0.66＝1280pxくらいだった
縦：CSS3分岐不能（何故だ何故なんだこれが理解できない）、右側が切れてた（1,200px×0.66＝796pxくらいか）
ブラウザ解像度率→0.66か

ちなみに iPad3（仕様2,048 × 1,536px）

Safari
横：ピッタリ（device-width 有効）
縦：ピッタリ（device-width 有効）

まとめ

とまぁ、こんな感じで細かいところは憶測ばかりのような記事になってしまったが、ChromeとFirefoxの根本的なブラウザ解像度はAndroidタブレットでは同じ扱いになっているかもFirefox横を考えると微妙。機種としてのブラウザ解像度率がありそうだが、アプリ毎の可能性も。

エイサーA700はCSS3の分岐が効いていないようでAndroidタブレットは、さらに変な端末が出てくる恐れがある。iPad miniはおそらく発売されるので、iPad miniにはしっかりと文字サイズとか考えて対応していこうと思う。

デザインするとなるともはや端末がいろいろになるのは厳しい感じでもあります。このブラウザの幅問題状況を打破してくれるようなプラットフォームが登場するような予感はこの「Web Platform Docs」プロジェクトに期待したいところでもあり、もう覚えたくないと思ったり。PC、タブレット、スマホ以外の概念が出てくることもあるだろうし。

HTML5も通過点に過ぎませんし、また規格を覚えるのもしんどい感じも否めません。どうなるのか取り敢えずHTML5はだいたい理解してますがパス、XHTMLで十分ですし。

ビックカメラでNexus7を見てきた。仕様としての解像度は、1280×800と調度Galaxy Noteと同じである。だが、当方が独自に解釈しているWEBブラウザ解像度はGalaxy Noteとは違って感じた。

Galaxy Noteは1280×800の調度半分の640×400がCSS3の判定などの具合で判明したのだが、Nexus7は640×400のブラウザ解像度なのかどうかが不明瞭であった。縦持ちだと横幅400pxよりもどうやらもうすこし幅があるようにも感じたし、横にするとどうやら640pxよりも幅広になることが判明。

機種ごとのブラウザ解像度はまちまちであると思った次第です。このブラウザ解像度という概念をしっかりと機種ごとに提示してもらわないとなかなかWEB制作には役立てられないのです。レスポンシブＷｅｂの特徴はやはりCSS3のデバイス幅での振り分けな訳です。

仕様としての解像度とブラウザ解像度は別であることはiPhoneのそれを見れば明らかですし、幅は320px扱いで640pxの半分です。画像も倍の解像度で作っておかないとRetinaディスプレイとしては、少しぼやけて汚く見えてしまう訳で。

じっくり調べたわけではないので曖昧ですが、単純に本体解像度の半分がWEBブラウザ解像度というのはNexus7に関しては当てはまらないのかもです。扱いとしてはタブレットとしてPCよりにしてあることで、少し多めに（広め）に設定されていると思います。Androidタブレットはいろいろな範疇のブラウザ解像度が存在しそうです。

ブラウザ解像度率（算出後は、縦持ちの短い値）

• Galaxy Note 1280×800　ブラウザ解像度率0.5＝400px
• Galaxy S3 1280×720　ブラウザ解像度率0.5＝360px
• Galaxy S2 800×480　ブラウザ解像度率0.666＝320px
• iPhone 4S 960×640　ブラウザ解像度率0.5＝320px
• iPhone 5 1136 x 640　ブラウザ解像度率0.5＝320px
• Nexus 7 1280×800　ブラウザ解像度率0.75くらいかも＝600px？

SONYタブレットとか横持ちが主だったAndroidタブレットに７インチとしての縦持ちベースの物が新たに加わったって感じですかね。iPad miniも同じような縦持ちが主なデバイスになると予想できます。SONYタブレットは1024のPC解像度としてのXGAの幅で扱い易かったのですが7インチの登場でちょっと複雑になってきました。

あ、後ついでにNexus7のUAで言うとAndroid Mobileではなく、MobileがないAndroidになっていると思われます。Androidタブレットですので当たり前といえば当たり前ですが。