明日もデザインで食べていこう![36]回線の遅いパラオで、Retina(高解像度)対応について考えた
── 秋葉秀樹 ──

投稿:  著者:


こんにちは、秋葉です。
パラオ共和国に来ています、とても海がきれいです。こういった日常を離れて他の文化に触れると、いかに私たちは自分の周辺のことにしか見えないことが多いもんだ、と思わされます。

さて、お世話になりましたデジクリも今日が最終回。南国の楽園から「Retina Display(高解像度)対応サイト」という、一気に現実に引き戻すような内容をホテルで書いています。

パラオだけではなく、ITインフラがまだまだ進んでいない国はいっぱいあります。私たちの国、日本は今や「ブロードバンド」って言葉も当たり前すぎてあまり聞かなくなってきたくらい、高速回線でインターネットを使えます。日本は便利な国ですね。

パラオではインターネットは普及しているようですが、いまだダイヤルアップを使っているところもあるそうで、滞在しているホテルもWiFiで無線を飛ばしているようですが、回線が遅すぎて写真ひとつを表示するのも一苦労です。

「YouTubeなんてまともに見れないですよ」って現地の人が言ってました。確かに......。一つの調べものをするときに、ページを読み込むまでの待ち時間が相当必要です。今まであまり意識する必要もないことに直面しています。




さて、iPhone4以降、さらに新型iPad、そして最近リリースされたMacBook Proに搭載された「Retina Display」ってやつ、みなさんも聞いたことがあるかと思います。

肉眼ではドットが分からないくらいの高解像度で、私たちが今まで使っていた1pxという大きさの中に横2px、縦2px、合計4px入るという細かさになります。こないだ店頭でデモ機を見ましたが、たしかにきれいですね。フォントのはらいの部分などは、ピクセルの「段」が肉眼で分かっていたのに、Retinaではもう見えないくらい滑らかです。

そしてWeb上の色んな記事を見ると、この高解像度ディスプレイに合わせてサイトを作り直すべきではないか? という記事まで出てきてます。中には、低解像度(iPhoneで言えば3以前)と高解像度(iPhoneで言えば4以降)のどちらかを判別して、高解像度用の画像と低解像度用の画像を振り分けるといったテクニックを紹介されたりしています。

device-pixel-ratio(ピクセル解像度)で2が出たら高解像度と判断し、用意していた高解像度の画像を表示させる、さもなくば低解像度の画像を表示させる、というもの。iPhone4が出た段階で、みんなこぞってデザインカンプなどを作る際は横幅320pxをやめて640pxで作り始めているようです。

ちょっと混乱気味、という印象が正直なところです。

高解像度と低解像度の2つの画像をそれぞれ用意するという手間、それを判別するための実装。めんどくさい、という本音。そして、建前というわけではないけど、メンテナンス性の低下や、制作コストの問題。

限られた予算の中で、ひとつの画像に対し、倍の工数をかけるのは容易ではありません。もちろん色々なフレームワークが用意されていくでしょうが、多少なりとも手がかかるのは間違いありません。

結局妥協して、すべてを高解像度に合わせてしまうということになるケースも見られます。つまり表示されるすべての画像を、横幅640px(高解像度用)で作り、それをすべてのデバイスでも使うというもの。これで手間を最小限に抑えようという考えですが、これには問題を感じます。

私が今ここパラオからネット回線を利用して、そのすべてが高解像度のサイトを閲覧する場合、今までの4倍のデータ量を持つ画像を読み込むことになります。身をもって気づいたんですが、通常の写真でさえも読み込みが遅くてスライドダウン表示されている状態です。ちょっと問題を感じています。

ターゲット層が「日本の顧客だから」というのは理由にはなりません。日本の中でも電波状況の悪い条件下はいくつもあり、そんな中で情報を閲覧するという目的にそぐわない高解像度って本当に必要でしょうか? 一つ間違えたら、これこそWebという媒体の持つ本来の目的を見失う原因となる気がします。

もちろんのことですが、プロダクトやブランド力をアピールするための高解像度対応は必要かもしれません。しかし、ページ上のすべての画像を高解像度にすることのリスクを、クライアントに理解させるというチカラは大切なことではないでしょうか?

ネイティブアプリ開発では、現在使っているネットワークがWiFi回線なのか3G回線なのかを取得できるAPIがありますので、回線の安定度を推測することができるかもしれません。ブラウザで見るGmailでは、アクセスに時間がかかっていると、それを独自のロジックで探知し表示してくれます。

このように、ピクセル解像度だけで画像を振り分けるのではなく、電波状況も絡めて振り分けることでより安定したサービスを提供できるのではないかと、現地で思ったわけです。

レスポンシブWebデザインとかモバイルファーストとか、なんとなくトレンドを匂わせるキーワードにしても、本当にその環境(デバイス)に対して最適なコンテンツを提供する手法が、ピクセル解像度判定やメディアクエリだけであれば、場合によっては役に立たないので、私たちWeb制作者はまずそういったリスクや問題を認識する必要もあるのではないでしょうか。

正直、今回の問題が理由で、私はこれらの手法の定義がブレたままです。じゃあどうすんだ? って自分でも最適解が見えない状況ですが。。。

日本にいるとなかなか気づかないことが多いだけに、実感という意味でこんな記事になってしまいました。

【あきば・ひでき】hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>

テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、すべてのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。