携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-
XHTML+CSSで一歩進んだモバイルサイトを作るテクニックを幅広く紹介☆
このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
3キャリア対応サイトを作るテーマの今回は3回目です。今回は、各キャリアで発売されている携帯機種で表示できる画像フォーマット(jpegやgif等)についてです。
PCサイトを表示するブラウザでも実は、画像フォーマットの対応状況は異なります。

携帯ブラウザも同じで、各機種によって表示できる画像フォーマットの対応状況が各社・各機種異なりますので、3キャリア対応サイトを作る際には、これらをよく理解しておかなければなりません。

現在汎用性のある画像フォーマットとして挙げられる代表的なものは4つ。「BMP」、「JEPG」、「GIF」、「PNG」です。これらは画像を圧縮保存する際の方式が異なっていますが、どれも画像を扱っているという意味では同じです。

それぞれ特徴があり、写真の内容によって保存時の画像フォーマットが選ばれるのですが、あえてここでは技術的なお話は割愛します。

では、各社の対応状況を見ていきます。

まずは、ドコモ。

3.6. 画像ファイルの対応について:技術情報

を参照すると、GIF画像をメインに対応しているようです。JPEGはiモード独自のHTMLバージョンによって対応状況が異なりますが、現在の多くの機種ではVer4.0以降なので、事実上JPEGにも対応していることになります。

次にauです。
auでは、機種ごとに画像フォーマットの対応状況が詳しく掲載されています。

機種別情報一覧:技術情報

auでは、およそ「GIF」、「JPEG」、「PNG256色」に対応していますが、メインは「JPEG」と「PNG」です。こちらも事実上3フォーマットに対応していることになります。

次に、ボーダフォン。

画像形式:端末情報
png形式およびjpeg形式を表示することができます

と書かれていますから、ボーダフォンの機種は「PNG」と「JPEG」に対応していることになります。GIF画像はボーダフォン3G最新機種のみの対応だそうです。



以上をまとめると、3キャリアですべて対応している画像フォーマットは現時点では『JPEG形式』しかないことになります。従って、3キャリア対応サイトを作成する、またはキャリア別にサイトを作成した場合でも、画像だけは使い回す場合、画像の形式に注意する必要があります。

通常、WEB向けの画像は色数を必要としない画像が多いので、「GIF」画像が容量の点から言って最適かつ一般的です。また、透過画像を使えるのもGIF画像です。

しかし、このような点からJPEG画像しか使用することができないため、画像のサイズや容量、色数には細心の注意を払う必要があります。

次回は、画像を含めたページ容量の制限についてです。





管理者にだけ表示を許可する


承認待ちコメント
このコメントは管理者の承認待ちです
| | 2013/09/25/Wed 02:08 [EDIT]
承認待ちコメント
このコメントは管理者の承認待ちです
| | 2012/10/10/Wed 12:40 [EDIT]
DoCoMoがPNGに対応
書籍からこちらに辿り着きました。
あまり需要はないかもですが、情報展開させていただきます。
2010年1月に機種変したDoCoMo機に iモードブラウザ2.0 が搭載されていたのですが、このブラウザはPNG、BMP画像を表示することが可能になっていました。
iモードブラウザ2.0はまだ搭載機種が少ないですが、フルカラーPNGも表示できれば、サイト容量を大きく落とすことが可能になりますね。
ソース↓
ttp://www.nttdocomo.co.jp/service/imode/make/content/browser/browser2/new_function/
繁茂 | URL | 2010/03/21/Sun 22:56 [EDIT]
アニメーションGIF
お世話になります。
いつもブログ、読ませて頂いて勉強しています。
携帯サイト コーディング&デザインも買いました。
大変勉強になりました。

画像のことで、お伺いしたいのですが、全キャリアでアニメーションGIFは、対応していると考えていいでしょうか。

それと、話は変わってしまうのですが、書籍にもありました、ページ容量、全キャリア対応で考えるには100Kで、製作の目安は50Kとありましたが、違う2008年10月発行書籍では、auが25Kと書かれていました。
平均50Kという話が多そうなので、間違いはないと思うのですが、ちょっと心配なもので。(これからモバイルサイト製作に挑戦なもので・・・すみません)

ご意見伺えるようでしたら、お願いします。
お忙しいところ申し訳ありません。
これからモバイルサイト製作に挑戦 | URL | 2009/02/27/Fri 09:39 [EDIT]
お返事ありがとうございます
シバ犬 管理人さま

こちらこそ、月末バタバタしてまして
お返事遅れてしまってスミマセン。

ご返答いただけてうれしいです。
助かりました~~

なるほど。。。
またまたとても勉強になりますね。
それでは待受画像はこちらの3サイズを使わせていただきます。
ご丁寧な解説、どうもありがとうございました。

まだまだ勉強しなければならないことが山積みですが・・・
余裕ができたらキャリア判別や絵文字にもチャレンジしてみたいと思います!

また何かありましたらよろしくお願いします。
Thomas | URL | 2006/12/27/Wed 19:40 [EDIT]
Re:待受画像について教えてください
Thomasさん、はじめまして。ご返事と遅れて申し訳ありません。

携帯サイト作成にチャレンジされているのですね。
がんばってください。

画像サイズに関するご質問ですが、
結論から言えば、画像サイズに標準の大きさはありません。
というのも、携帯の機種は年々進化していますので、
これにともなって携帯電話の液晶も大画面化、高微細化しており、
一画面で表示できる画面サイズの平均は自ずと大きくなっていくことが予想されるからです。

従って、サイトを作成する際には、その時代時代の機種の標準に合わせるのが妥当なのかなと思います。

Thomasさんがおっしゃるとおり、確かに現在の標準サイズは「横240x縦320」が一般的で主流です。ですからこれに合わせると良いと思います。

例えば、
ドコモの技術情報(http://www.nttdocomo.co.jp/service/imode/
make/content/spec/screen_area/index.html)

auの技術情報(http://www.au.kddi.com/ezfactory/tec/spec/
new_win/ezkishu.html)

をみても、壁紙画像表示サイズが「240×320」になっている機種がほとんどですよね。したがって、壁紙用途としての画像であるなら、このサイズで作っておくのが良心的と言えます。

良心的というのは、壁紙はやはり画面いっぱいにピッタリ表示されたほうが見映えも良く、絶対数で多い機種に合わせた方がよいからです。

もちろん、これは古い機種ではサイズオーバーによって表示できない。一方、最新の機種では、逆に画像が小さくて壁紙には使えないといった弊害も起こりえます。

しかし、すべての機種に合わせることは不可能に近いので、後は携帯固有にある編集機能に各自任せるなどの方針をとるほかないのが実情のようです。

これらを考慮して、壁紙として用意する画像は3種類ほどとし、

1. 120×160
2. 240×320
3. 360×480 (単位はピクセル)

とすると、利用者に対し親切なサイトづくりをしていると言えそうです。
シバ犬@管理人 | URL | 2006/12/18/Mon 15:06 [EDIT]
待受画像について教えてください
はじめまして。
仕事で携帯サイトを作ることになり、作成方法を模索していたところ、貴サイトにたどりつきました。とても勉強になりますね!

実は携帯サイト制作は初めてでわからないことだらけなのですが、PCサイトの携帯版として、まずは絵文字も入れず、キャリアの判別もせずになんとか表示できる、ごくシンプルなサイトを予定しています。

その中でオマケで待受画像も用意することになったのですが、どんなサイズで作ればいいのかさえさっぱりわからず途方に暮れています・・・。PCの壁紙とは訳が違いますよね・・・??待受画像のサイズに「標準」みたいなものって存在するのでしょうか??

そもそもこんな初歩的なサイトで待受を用意する、っていう発想自体、無謀かもしれませんが・・・それでもあえて数種類だけ用意するとしたら代表的なサイズにはどんなものがあるのでしょう??
「240x320」ってそうでしょうか?
他に容量の制限など注意しなければならないことはありますでしょうか・・・??
・・・

つたない質問ばかりで申し訳ありませんが、
何かヒントをいただければ幸いです。
よろしくお願いします。
Thomas | URL | 2006/12/13/Wed 19:06 [EDIT]



TRACK BACK
TB*URL





Copyright © 携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-. all rights reserved.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。