公開日: 2010年11月24日(Wed)
今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。
予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。
自社のプロダクト(ここでは特にMobile Safari)のUIデザインが、何を理想として、どう調整されてきたのか、このサイトのデザインから読み取ることができる。
Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に width=1024 が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする、呪文のようなもの。もちろん、iPhoneやiPadのMobile Safariを想定したものだ。
<meta name="viewport" content="width=1024" />
Appleのウェブサイトにアクセスして最初に目に付くのは、もちろん画面いっぱいの大きなイメージだろう。
画面いっぱいの大画像は、1024pxを手のひらに収まるサイズに縮小しても十分なインパクトを与えられる。大胆な思い切ったジャンプ率のレイアウトも、PCスクリーンのためだけのものではない。
他の細かい情報は、画面の下部にカセット状にまとめて配置されており、それぞれに手のひらサイズに縮めても認識できる大きさのサムネイル画像が用意されている。サムネイルがあるおかげで、この時点では細かいテキストが読める大きさでなくてもいいようになっている。
サムネイルを見て気になったユーザは、このカセットをダブルタップする。すると、テキストも含めて、ちょうど手のひらサイズで読みやすい大きさになるようにフォーカスされるのだ。この時点での画面の表示は、まさにiPhoneの画面に最適化されたと言える可読性を備えている。
トップページだけではない。
Appleのサイトでは、各製品別のトップページも、詳細スペックを知らせるような静的なコンテンツも、横におよそ3～4分割したサイズのカセットを基本として構成されている。1024pxを単純に3で割ると 約341px。iPhoneの画面幅 320px でフォーカスして最適なサイズになる(ちなみに、viewportに指定された幅1024pxはiPadの画面幅と一致する)。1行分のテキストがもっとも読みやすい文字数は、17～21文字程度と言われている(『ゲームニクス』より)が、このカセットは、その点から見ても概ね上手く調整されているようだ。
MacBook Air トップページ
MacBook Air 特徴ページ
MacBook Air 特徴ページ
iPhone4 の Retinaディスプレイは、従来の4倍の画素を持っているにもかかわらず、従来のディスプレイと同じ解像度として動作するように設計されている。一見、画素の無駄遣いにも見えるが、実はこの "引いた状態" での可読性を上げようとして導入されたのではないだろうか。
小さな画面でありながらページ上の構成要素の全体を一目で把握して、自分が必要な情報に、直感的なダブルタップの操作でフォーカスできる。興味の順に次々読み進められるし、斜め読みだってできてしまう。
これが、Appleが掲げたモバイルサイトのデザインであり、Mobile Safari のUI設計の本質なのではないだろうか。実際に「スマホサイトがないことに今まで気づかずにいられた」のは、このデザインで特にストレスを感じなかった証拠でもある。
実はAppleは、スマホサイトをしっかり作っていた、というわけだ。
それも、ワンソースで。
この、Appleのウェブデザインは、HTML4の頃から脈々と目指されてきた、 MediaType や MediaQuery によるクロスデバイスの概念とは明らかに異なるアプローチだが、このクロスデバイスの発想は確かに理にかなっている。
しかし、ウェブデザインの一般論に適用するのは難しいかもしれない。プロダクトページなどキーイメージを作りやすいコンテンツならまだしも、テキストベースのコンテンツでは苦しい構成を強いられそうだ。実際に Apple のサイトでも、うまくiPhoneの画面にフィットしないブロックが時々使われていたりする箇所もある。これによって MediaType、MediaQuery がその役割を終える、とはならなそうだ。
別の見方をすると、ウェブ標準がある程度普及している今だからこそ、デバイス設計までトータルにデザインされた、この新しいクロスデバイスウェブの発想が成立できている。
これから先、特に Android OS のようなオープンなプラットフォームが普及するにつれ、こうした新しいウェブブラウジングの試みも盛んになるだろうし、逆に、一般的な普通のウェブデザインもまともにブラウズできないような完成度の低いデバイスも幾つかは市場に出回ることも考えられる。(残念だが)
ウェブをどう利用するかは、端末やブラウザの選択を通じて、エンドユーザが自由に選択できるべきところだ。そのためには、ウェブ上のコンテンツの実装にも一定の約束事が必要だ。
よりいっそう、ウェブメーカーとブラウザ(端末)メーカーの双方が、ウェブ標準についての理解を深める必要性が増してくるだろう。
Ans:apple<br /><br />日中にウゴウゴしててみつけた記事をご紹介。<br />http://www.pxt.jp/ja/diary/article/257/index.html<br /><br />なんというか、目からウロコですよ。ボロンと。<br />無論、どんなサイトにも全て適応可能か、と言われれば苦しい所もそりゃありま...
( ヤツは２時ごろ眠くなる - 記事を開く)
大変良い記事だと思いました。
なお、Appleは、マニュアルやユーザガイドなど索引的なコンテンツには、モバイル最適化されたページも作っていますね。
e.g.
http://help.apple.com/iphone/4/interface/
自分の力で気づけなかった事実です。
良き情報をありがとうございました。
なるほど～と思いました。スマホサイトなんていらないと、たまに思うのですが、グリッドデザインでしっかりPCサイト作っていれば、こんな対応もあるのですね。
（ふつうにアップルがなぜスマホサイト作らないか検索したらコヤナギさんのブログが一番にでてきて感動しましたw）
理由はもう一つ。
「PC用サイトが見れる」ということを店頭でデモをします。
スマートフォンがわかる人には当たり前のことですが、全く分からない人は、これだけでも感動できるのです。
しかし、そこでスマートフォン用サイトが表示されては説明にならないのです。
とても感動しました♪
素晴らしい記事をありがとうございます。
公開日: 2010年11月24日(Wed)
