考察:Appleはスマホサイトを作らない。

Windows版 Safari でアクセスしたAppleのトップページのキャプチャ画像

今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。

予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。

Mobile Safari のUIデザインの本質を垣間見るウェブデザイン

自社のプロダクト(ここでは特にMobile Safari)のUIデザインが、何を理想として、どう調整されてきたのか、このサイトのデザインから読み取ることができる。

Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に width=1024 が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする、呪文のようなもの。もちろん、iPhoneやiPadのMobile Safariを想定したものだ。

<meta name="viewport" content="width=1024" />

Appleのウェブサイトにアクセスして最初に目に付くのは、もちろん画面いっぱいの大きなイメージだろう。

画面いっぱいの大画像は、1024pxを手のひらに収まるサイズに縮小しても十分なインパクトを与えられる。大胆な思い切ったジャンプ率のレイアウトも、PCスクリーンのためだけのものではない。

Mobile Safari でアクセスしたAppleのトップページのキャプチャ画像

他の細かい情報は、画面の下部にカセット状にまとめて配置されており、それぞれに手のひらサイズに縮めても認識できる大きさのサムネイル画像が用意されている。サムネイルがあるおかげで、この時点では細かいテキストが読める大きさでなくてもいいようになっている。

サムネイルを見て気になったユーザは、このカセットをダブルタップする。すると、テキストも含めて、ちょうど手のひらサイズで読みやすい大きさになるようにフォーカスされるのだ。この時点での画面の表示は、まさに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が掲げたモバイルウェブデザイン

小さな画面でありながらページ上の構成要素の全体を一目で把握して、自分が必要な情報に、直感的なダブルタップの操作でフォーカスできる。興味の順に次々読み進められるし、斜め読みだってできてしまう。

これが、Appleが掲げたモバイルサイトのデザインであり、Mobile Safari のUI設計の本質なのではないだろうか。実際に「スマホサイトがないことに今まで気づかずにいられた」のは、このデザインで特にストレスを感じなかった証拠でもある。

実はAppleは、スマホサイトをしっかり作っていた、というわけだ。

それも、ワンソースで。

W3C の MediaType や MediaQuery とは異なるアプローチ

この、Appleのウェブデザインは、HTML4の頃から脈々と目指されてきた、 MediaType や MediaQuery によるクロスデバイスの概念とは明らかに異なるアプローチだが、このクロスデバイスの発想は確かに理にかなっている。

しかし、ウェブデザインの一般論に適用するのは難しいかもしれない。プロダクトページなどキーイメージを作りやすいコンテンツならまだしも、テキストベースのコンテンツでは苦しい構成を強いられそうだ。実際に Apple のサイトでも、うまくiPhoneの画面にフィットしないブロックが時々使われていたりする箇所もある。これによって MediaType、MediaQuery がその役割を終える、とはならなそうだ。

別の見方をすると、ウェブ標準がある程度普及している今だからこそ、デバイス設計までトータルにデザインされた、この新しいクロスデバイスウェブの発想が成立できている。

これから先、特に Android OS のようなオープンなプラットフォームが普及するにつれ、こうした新しいウェブブラウジングの試みも盛んになるだろうし、逆に、一般的な普通のウェブデザインもまともにブラウズできないような完成度の低いデバイスも幾つかは市場に出回ることも考えられる。(残念だが)

ウェブをどう利用するかは、端末やブラウザの選択を通じて、エンドユーザが自由に選択できるべきところだ。そのためには、ウェブ上のコンテンツの実装にも一定の約束事が必要だ。

よりいっそう、ウェブメーカーとブラウザ(端末)メーカーの双方が、ウェブ標準についての理解を深める必要性が増してくるだろう。

関連記事

トラックバック (1件)

2012年9月18日(Tue) 14時44分36秒 スマホ作ってるけどスマホ用サイトを持ってない会社はどーこだ

Ans:apple<br /><br />日中にウゴウゴしててみつけた記事をご紹介。<br />http://www.pxt.jp/ja/diary/article/257/index.html<br /><br />なんというか、目からウロコですよ。ボロンと。<br />無論、どんなサイトにも全て適応可能か、と言われれば苦しい所もそりゃありま...

( ヤツは2時ごろ眠くなる - 記事を開く)


コメント (5件)

2011年6月23日(Thu) 14時19分56秒 yosuke

大変良い記事だと思いました。

なお、Appleは、マニュアルやユーザガイドなど索引的なコンテンツには、モバイル最適化されたページも作っていますね。

e.g.
http://help.apple.com/iphone/4/interface/


2011年7月20日(Wed) 15時47分57秒 Bluespeaker

自分の力で気づけなかった事実です。
良き情報をありがとうございました。


2011年11月17日(Thu) 18時22分53秒 yuki

なるほど~と思いました。スマホサイトなんていらないと、たまに思うのですが、グリッドデザインでしっかりPCサイト作っていれば、こんな対応もあるのですね。

(ふつうにアップルがなぜスマホサイト作らないか検索したらコヤナギさんのブログが一番にでてきて感動しましたw)


2012年9月1日(Sat) 15時15分56秒 nullpon

理由はもう一つ。
「PC用サイトが見れる」ということを店頭でデモをします。
スマートフォンがわかる人には当たり前のことですが、全く分からない人は、これだけでも感動できるのです。
しかし、そこでスマートフォン用サイトが表示されては説明にならないのです。


2012年12月23日(Sun) 17時35分44秒 elnath

とても感動しました♪
素晴らしい記事をありがとうございます。



プロフィール

コヤナギ トモヤ

まったりウェブ系コーダーしてます。PHP製静的CMS Pickles 2 を開発しています。

RSSフィード

  • このサイトは、 コヤナギ トモヤ の個人サイトです。
  • 個人的な主張や、活動の記録などを掲載しています。 所属する企業、団体、その他の意見や立場を代表するものではありません。
  • 掲載された内容は古くなっている可能性があります。 特に古い記事では、現在の筆者の考えと異なる主張をしていることがありますが、記録としてそのまま残しております。 予めご了承ください。
ページの先頭へ戻る