新しいiPadとレスポンシブWebデザイン

新しいiPadとレスポンシブWebデザイン

新しいiPad。なぜiPad3と呼ばず、単にnew iPadとしたのか、そしてiPad2と併売していくことにしたのかは若干不可思議ではある。

この新しいiPad（第3世代）がiPad2よりも優れているとされるのは、おもに3つ。5メガピクセルになったカメラ機能、iPad2の2倍の解像度を持つRetinaディスプレイ、そして高速携帯電話ネットワーク対応によるインターネット接続速度の向上だ。iPad2ユーザーからすれば、買い替えを決意するとしたらRetinaディスプレイをどう評価するかによるだろう。

僕はいまのところ買い替えるつもりはないのだが、iPhone4Sも登場時はiPhone4からのマイナーバージョンアップとされて世間の評価が芳しくなく、僕自身も買い替えを見送ったものの数カ月を経てみると売り上げは絶好調、僕もiPhone4から買い替えた。同様にiPad3への正しい評価を下すには、まだ時期尚早ということかもしれない。

ところで、現在Webをビジネスにする者にとって、Webサイト制作時にデスクトップPC・ノートPC・フィーチャーフォン・スマートフォン（iPhone/Android）・タブレット（iPad/Android搭載機）と、表示を最適化しなければならないプラットフォームが多彩化していることに頭を悩ましていると思う。さらに最近では、テレビやデジタルサイネージ用にハイビジョン画面での表示をも気にかけねばならない場合も多くなっている。

従来のWeb制作においては、PCとモバイル（携帯電話）に、それぞれ別のデザイン・別のHTMLを組んでWebサイトを制作していたが、現在ではHTML5とCSS3の組み合わせにより、個別のプラットフォームに違うデザインのWebサイトをつくるのではなく、ディスプレイのサイズ（特に幅）に合わせてデザインを最適化する、可変式のサイト制作が主流になりつつある。これをレスポンシブWebデザインという。

iPhoneおよびiPadの圧倒的な普及をきっかけに、現在ではユーザーがどのデバイスでアクセスしてくるかが判別しづらく、モバイル向けだからといって情報量を著しく削ることはできなくなっている。むしろiPhoneやiPadでの表示を中心に、Webを使った情報公開の戦略を立てていかねばならなくなっている。これまではPCサイトとモバイルサイトで別々のドメインを用意するのが普通だったが、今後は同一のドメインで、PC・スマートフォンのどちらで閲覧されても、ブラウザ判定して自動的に最適なページを表示させなければならない。

そもそもiPhoneが大学生を中心に普及したのは、企業が就職情報サイトを携帯電話用に最適化していなかったので、外出時に学生がそれらのWebサイトを見るための方法として、PCサイトがみやすいデバイスとしてのiPhoneを選んだためらしい。企業側、というよりも、日本のキャリアがモバイルWebをエンターテイメント用としか考えず、企業利用の促進を怠ったために海外のスマートフォンの侵攻を許してしまったのだ。

レスポンシブWebデザインは、原則としてブラウザで表示する幅を相対的に可変表示する、いわゆるリキッドデザインと同じだが、スマートフォンで表示した場合は、レイアウトを変えるだけでなく画像サイズも小さくするなど、細かい制御をする。つまり、表示幅に応じてデザインを切り替える指示をCSSに書き込んでおかねばならない（これをMedia Queryという）。だから、つくり込むのは非常に手間がかかる。

しかし、それでも 1 URL for All Platformのコンセプトは、今後のWeb戦略の絶対原則にならざるをえないだろう。iPad3がさらに大ブレイクすれば、このムーブメントはますます加速するはずだ。

追記：本質的なレスポンシブWebデザインは、ブラウザのサイズをみて自動で表示を変えるので、PC画面でブラウザの幅をスマートフォンなみに（iPhoneなら320ピクセル）狭めれば、表示を切り替えるようになっている。しかし、サイズではなくブラウザ判定によって機種を判別して、アクセスしているデバイスによって表示を切り替えるという手法もある。以下のサイトは同一ドメインでPCとスマートフォンに最適化してある。厳密にはレスポンシブWebデザインではないが、用途としては同じだ。

May’nオフィシャルサイト http://mayn.jp/
板野友美（Tomomi Itano）オフィシャルサイト http://tomomiitano.jp/

【お知らせ】MdN Design Interactiveのコラムも読める無料iPhoneアプリ「MdN News Reader」を公開しました、ぜひご利用ください。
MdN News Reader
URL：http://www.mdn.co.jp/di/newstopics/17571/

■著者の最近の記事

音楽共有サービスSpotifyはNapsterの後継となるか
Facebookページのタイムライン化が引き起こす波紋
ソーシャルゲームの光と闇
開発手法の常識を覆すiOSとOS X Mountain Lion
個人情報を無断で取得したPathは、その成長を止めてしまうのか？
Facebookを活用したリアル製品のソーシャル化
FacebookとIPO、そしてM&A
ソーシャルとモバイルに注力するGoogleの焦り

［筆者プロフィール］
おがわ・ひろし●株式会社モディファイ CEO兼クリエイティブディレクター。著書に『ビジネスブログブック』シリーズ（毎日コミュニケーションズ）、『Web2.0BOOK』（インプレス）、『仕事で使える!「Twitter」超入門』（青春出版社）、『ソーシャルメディアマーケティング』（ソフトバンククリエイティブ／共著）などがある。
twitter：http://www.twitter.com/ogawakazuhiro
facebook：http://www.facebook.com/ogawakazuhiro