新しい「iPad」とウェブデザイン--「Retina Display」がウェブサイトにもたらす影響 - (page 2)

　おそらく、事実上すべてのウェブサイトが最終的にはiPadの高解像度ディスプレイに対応することになるだろう。しかしその中でも、ファッションやアパレルの小売業者、レストラン、ホスピタリティ企業など、画像が製品の販売を支えているブランドにとっては決定的に重要な意味を持つ。

　以下では、自社のウェブサイトを新しいiPadのRetina Displayに対応させるために、今すぐ実行できる4つのステップを紹介する。

　1）重要な画像を優先する。自社のサイトで、訪問者にとって魅力的に見える画像から最適化を始めよう。大抵の場合は製品の画像だ。例えば、ファッションやアパレルの分野では、サイトの画像を使って、生地の質感や縫い目、衣類の品質といった製品詳細のすべてを顧客に見せられるようにしたいと思うだろう。

　ほとんどのウェブ制作のワークフローでは、最初に高解像度のイメージがあって、それをウェブ用に縮小して使う。したがって、ふさわしい画像は既に用意されている。必要なのは、そうした画像をiPadのRetina Displayからアクセスできるようにすることだけだ。

　2）テキストをテキストに変える。Retina Displayでは、実際のテキストが非常に鮮明であるのに比べると、テキストではないテキスト（すなわち、オーバーレイテキスト、ボタンテキスト、ヘッダーやサイドバー、検索バーの中のテキストなど）は、いずれも見栄えが良くない。この問題を解決するためにデザイナーは、a）高解像度のディスプレイで作業して、適切な配置とスタイルを保ちながら、イメージ内のテキストを本当のテキストに変えるか、b）テキストを含んだ画像を複数バージョン用意する、といういずれかの方法を採ることができる。どちらのアプローチでもうまくいくが、イメージ内のテキストを本当のテキストに変える方が拡張可能なデザインへの早道だ。

　3）ボタンを強調する。「今すぐ買う」「さらに詳しく」「登録はこちら」といったボタンは、訪問者を望み通りの結果へと導くものであるため、あらゆるウェブサイトの有効性にとって重要な意味を持つ。新しいiPadのRetina Displayでは、ほとんどすべてのボタンがざらついて不鮮明に見えてしまう。最も良いボタンには、最小限の装飾しかないものだ。ベゼルの反射やグラデーションなどのエフェクトを使うと鮮明度が下がる。ボタンを使う場合には、要素間のコントラストをできるだけ高くすることが重要だ。暗い色の無地の背景に白いテキストを配置するのが最も見やすい。

　4）ロゴサイズを大きくする。まさに、ロゴをもっと大きくするのである。ロゴはすべてのページにあって、パフォーマンスを高めるために高度に最適化されていることが多いため、Retina Displayでは目立たなくなりやすい。多くのサイトにある「通常サイズ」の画像は、新しいiPadではっきりと表示させるには品質が十分ではない。

HDと非HDが混在する世界に対応する

　テレビがSD画質からHD画質へと進化したように、より多くのモバイルデバイスがやがて、新しいiPadや「iPhone 4」「iPhone 4S」のRetina Displayのような、高解像度ディスプレイを搭載するようになるだろう。

　現時点での問題は、高解像度ディスプレイではHD画像を表示しながら、同時にHD画質ではないデバイスでは大きい画像を不必要にダウンロードしないようにすることだ。ここで必要となるのが、超高解像度ディスプレイを検出し、そのようなディスプレイにはより高画質の画像を配信する、クライアント側の適応のためのフレームワークである。

　新しいiPad向けに最適化を実施するかどうかは、最終的にはそれぞれのウェブサイトのオーナーが判断することだ。ただ、Appleの最新タブレットは消費者との接点として非常に強力であり、新しいRetina Displayに対応するブランドは、ウェブ上で注目を集めることができるだろう。

Igor Faletski氏について

　Igor Faletski氏は、Mobifyの最高経営責任者（CEO）である。Mobifyは、Eコマースおよびパブリッシングサイトをモバイル向けに最適化し、2万件超のサイトを運営するウェブプラットフォームだ。