[VGAとQVGA] 2倍の解像度の差が引き起こすデザイン崩れ part.1

シンメトリックが総力をあげて開発して生まれた携帯コンテンツ変換ソフト、ラウンドアバウト。完成に至るまでには数多くの試行錯誤と仕様変更の連続でした。今回はラウンドアバウトの紹介も交えながらその開発話をお話します。

私が初めてラウンドアバウトに触れたのはベータ版が社内公開された3月の終わり。そのころラウンドアバウトには基本的な機能と、端末容量にあわせた自動画像変換機能が備わっていました。 当時のうたい文句は以下のようでした。

「どんなに沢山画像があっても、その画像のバイト数がいくつであっても、絶対オーバーフローしないので、安心してたくさんの画像が使えます！」

開発陣に話を伺ったところ、htmlコーダーの私にも簡単にマルチキャリア対応のコンテンツが作成できる？！とのこと。それならば！と、フィードバックのネタ探しと自分自身の学習も兼ねて大量画像を使ったリッチサイトの作成に取り掛かり始めたのです。

Richなコンテンツを作成したい！

まず、サンプルサイトを作成する上でいくつかの項目を設定してみました。

• 画像を多用した壁紙ダウンロードサイト 。
• 余計なプログラミングは使わない。ラウンドアバウトの機能のみを使った静的なコンテンツ 。
• １ページのなかでTOP画像、アイコン、メニュー、サムネイルなどなど…30枚弱の画像を使用。
• floatやtable。携帯コンテンツに対応したCSSを随所に使用 。
• htmlは1ページ1ソース。
• 且つ、上位端末から下位端末まで美しく表示されるマルチキャリア対応。

このような項目を踏まえた上で設けたデザイン案の一部が下の画像です。

こうしていよいよコンテンツの作成に取り掛かろうと思ったときに、大きな問題と対面することになりました。それは、VGA端末の画像表示対応です。

浮かび上がってきたVGAの画像表示問題

VGAとQVGAの解像度には約二倍の差があります。画像表示サイズにも同じように二倍の表示差が生まれる為、デザインが崩れが発生します。従来の携帯コンテンツではコンテンツの画像はQVGAサイズで作成することが主流でした。 デザインの観点から言えばＶＧＡ端末は切り捨てられることが一般的でした。

QVGAサイズので作成したコンテンツをVGAで表示させるとこのようになります。

VGA端末では全ての画像がQVGAに比べ、二分の一で表示されます。ヘッダー画像の大きさから飛び出る形でテキストが伸びていたり、メインであるバイク画像が縮小されて見えにくい大きさになっていたり、想定していたデザインとは大幅に異なる結果になるのです。
従来では、こういった場合の対応方法として画像に「width=”100%”」を付けることで簡易的に対処されることがほとんどでした。しかしながらその方法は横幅フル(240px)の画像のみでしか使うことが出来ないだけではなく、画像の劣化も目立ちます。

以下のような横幅がフルに満たない画像にいたっては致命的です。プログラムを噛ませて画像自体を出し分ける他に方法はありません。 

ラウンドアバウトの機能をつかってどうにかならないの？

VGAの画像対応は1，２年から携帯コンテンツ開発が抱えていた問題でした。現在でも数多くのコンテンツがその問題に未対応であることも事実です。しかし当時「１ソース１リソース！」「オーバーフローなし！」「リッチコンテンツもドンと来い！」を目玉にしていたラウンドアバウト。デモサイトでは画像が劣化して見えるような「with=”100％” 指定」やVGAのデザインが大幅に崩れるような事態はどうしても避けたい！

悶々とした挙句に、当時実装されていた画像機能を使った対応を試みることを決意しました。（どうしても対応したかったのです。）これはあくまでもサンプルサイト、独自のプログラミングを作る手間はかけたくありません。（というか専門がhtmlコーダーの私には、そんなものは簡単には書けないのです（￣□￣；）!!）
幸いなことに私が抱えた問題を解決する可能性を持ったいくつかの機能は既に実装されていました。

次回は、実際にそれらを使用した際の四方山話をラウンドアバウトの機能説明を交えながらお話する予定です。