当ブログは移行しました。

http://www.symmetric.co.jp/blogに移行しました。
5秒後に自動的に移動します。
移動しない場合はこちらをクリックしてください。
ラベル 携帯サイト開発の問題点とラウンドアバウト の投稿を表示しています。 すべての投稿を表示
ラベル 携帯サイト開発の問題点とラウンドアバウト の投稿を表示しています。 すべての投稿を表示

携帯サイト開発の高コスト構造

携帯コンテンツ変換ソリューションの導入の大きな目的はコスト削減です。どのコストがどの位削減されるかは、前提システムやコンテンツによって大きな差がでますが、開発・運用全体のコスト構造を考える必要があります。一般に開発費以上に保守費が大きな問題とされます。ラウンドアバウトのコスト削減に対するアプローチ、それは...

  • 開発・保守を誰でも可能とし、専門知識を不要にすることで、人件費を抑える

フォント問題は画像で解決できる

テキストには、フォントが不定かつ機種で異なるのでデザイン計算できないという異機種の問題と、1行の文字数は個々の端末としては固定であり自由ではなく、高さもいつも決まった分必要だという問題があります。後者は当たり前のことかもしれませんが、デザインを考える上では制約となってしまします。

ラウンドアバウトの下で画像を使って、TOPメインメニューを作れば、文字数もフォントも自由に、そしてどんな端末でも同じように見えます。下図の例は5つの画像を並べた例です。


携帯端末のフォント問題

昔の端末は1行が8文字~12文字と決まっていて大きさも変更できませんでした。しかし、現在の端末はサイズが選択でき、かつ組込フォントは機種毎に異なり画面幅も違うので、1行に何文字とは決められません。htmlではフォントサイズは指定できますが、表示を正確にコントロールすることはできません。そもそも、HTML自体がフォントを絶対的な大きさで表現する技術ではないので、コントロールできたところで本来あまり意味は無いのですが、携帯サイトでは事情が異なっています。

よくあるのがTOPメインメニューで、ユニクロの携帯サイトを例に取れば、

MEN|WOMEN|KIDS|BABY|HOME

となっています。このメニューの問題を挙げてみましょう。

携帯画像:ブラウザーキャッシュ容量問題:ラウンドアバウトの解決法

ラウンドアバウトは、コンテンツ制作からブラウザーキャッシュ容量の制約を完全に除去します。アプローチとして、ブラウザーのハードウェアの容量を上げられないのであればコンテンツの容量を下げるしかありません。ラウンドアバウトも他の一部のソリューションと同様に画像の品質をダウンさせることで、容量を削減しますが、根本的に違うところは次の1点です。

  • アクセス端末のキャッシュ容量内に収まるように、ページ中の全画像を変換する

携帯画像:ブラウザーキャッシュ容量問題:これまでの対策

ブラウザーキャッシュ問題は昔から携帯開発者を悩ませていた最大の問題です。ブラウザーキャッシュが10Kバイトのような時代には、テキストだけでも制限を越えてしまう場合もあり、1ページあたりの情報を少なくするしかありませんでした。しかし、今日の100Kバイト以上の端末がほとんどを占めるようになると、まずテキストでは超えない制限となったので、画像をいくつ載せるか、どのクオリティにするか、という問題に置き換わってきています。ですから、このBlogでもブラウザーキャッシュ容量問題は画像の話題としています。

携帯サイト画像:VGA問題

画像の問題のもう1つである容量の違いに触れる前に、新しい問題としてVGA対応について触れましょう。

これまでの3~4年間はQVGA(横幅240px)の端末が事実上の標準機であり、仕様上の上級機でした。より古い端末でも200pxを切るような端末は5~6年前でもほとんどありません。つまり、画面サイズは上位機種から15%程度の違いでした。このため、さらに古い端末をサポート対象にせず、単純なレイアウトだけであれば、220px程度を基準に作ることでデザインも概ね大きく崩れることがありませんでした。

このような状況の中でソフトバンクからVGA(横幅480px)の端末が2年位前に発売され、この5月にはドコモの新機種の大部分はVGAサイズとなりました。VGAはQVGA比で縦横2倍、面積4倍という大きさであり、これまでと全くスケールが違います。サイズが大きくなったVGA端末では、当然キャッシュ容量も大きく拡大されています(ドコモ500k,ソフトバンク300k)。このことから、新たな機種違い問題が出てきています。

携帯サイト画像:画面サイズ問題

携帯サイト制作の肝とも言える画像問題について考えます。根本の問題は2つです。

  1. 機種毎に画面サイズが異なる
  2. 機種毎に容量が異なる

ここでは画面サイズの問題にフォーカスします。歴史的経緯(?)から過去の端末において、端末のブラウザーからはみ出してしまうとエラーになり、表示されないという問題がありました。つまり、

  • 大きすぎて表示できない

ということです。この問題に対処するのが一般的な画像変換ソリューションであり、大きすぎてエラーになってしまう事態を防止します。
しかし

HTMLは何を使ったらいいのか?

全キャリア対応の携帯サイトを作る際に最初に決めなければいけないものが、使用するHTMLです。そして、ほとんどの場合、iモードXHTMLを推奨しています。もしサイトが2Gもサポートしたいのであれば、iモードHTML(CHTML)となるか、2G/3Gで2つの言語を出し分けることになります。

細かい仕様の違いは他の情報源を見ていただくとして、実は表現力の違いはiモードXHTMLとCHTMLにはあまりありません。大きなところで背景色が使えるところくらいです。そしてchtmlは2G/3Gで基本的には見れますが、xhtmlは2Gでは見ることができません。なのでxhtmlの時代ということを考えなければCHTML(ver.7)を利用するのは1つの合理的判断だと思います。