モバイルサイトの作り方

3キャリアに対応したウェブサイトを手軽に作るにあたり
最低限、抑えておかなければいけない手順とポイントを記述します。

●XHTMLで記述する
ほとんどの3Gの端末ではHTMLに加え、XHTMLを使うことができます。
XHTMLを使うことによって、文字の背景色を設定できたりするなど、デザイン表現が多彩になっています。
ただdocomoでは、外部CSSを使用することができないため、
3キャリアで共通したhtmlを使用する場合、
style="font-size:middle"など各要素にインラインで組み込むようにします。


●DOCTYPE宣言
・DoCoMo
通常はiモードXHTMLのバージョンによってDOCTYPEが用意されているので、そちらに合わせた方が良いらしいですが
基本はこの共通系で動作します。

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

・au

DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN"  "http://www.openwave.com/DTD/xhtml-basic.dtd"

・SoftBank

DOCTYPE html PUBLIC "-//JPHONE//DTD XHTML Basic 1.0 Plus//EN"  "xhtml-basic10-plus.dtd"


●ドコモ用にContent-Typeをapplication/xhtml+xmlを配信する。
auとSoftBankではPCサイトと同じようにtext/htmlでCSSを読むことができますが、
Docomoの場合はapplication/xhtml+xmlで配信しなければCSSを読み込むことができません。
方法としてはhead内に

meta http-equiv="Content-Type" content="application/xhtml+xml;  charset=UTF-8" 

と記述し、動作しない場合.htaccessに

AddType application/xhtml+xml .html

と一文を追加します。

上記をふまえた上でデザイン&コーディングを進めていきます


●各キャリアを考慮してデザインするには
・ベタ色のタイトル帯、画像回り込みで2カラム風レイアウトなどモバゲー、mixiモバイルなどを代表とするレイアウト。

・サイトロゴは自動縮小を回避するために横220ピクセル ~ 230ピクセルで作成。

・画像を使うよりは、絵文字に対応して見栄えを派手にするのがスタンダード・・・ですが、これにしてしまうと各種キャリアできちんと全ページの表示確認しないといけないので手軽ではなくなります。
http://www.dspt.net/tools/emoji/
http://dspt.blog59.fc2.com/blog-category-5.html

・画像は3キャリアすべてが対応しているjpg、gifを使用する。

●Docomoの癖を考慮した上でのデザイン/マークアップをする
・i-modeではmargin、padding、border(hrでのborder指定は可)、背景画像等は未対応です。
・liにするとなにかと面倒なので、基本div,pなどの要素でレイアウトしたほうが修正など効率が良い。


【参考サイト】
・モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう!
http://dspt.blog59.fc2.com/blog-entry-39.html
・3G端末(FOMA・WIN・3GC)のモバイルサイトのコーディング&デザイン
http://blog.livedoor.jp/ld_directors/archives/51104376.html
・携帯でCCSを用いる場合
http://34567.jpn.org/study1/sakusei/css.html

関連リンク

トラックバック(0)

このブログ記事に対するトラックバックURL

2009年5月

S M T W T F S
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            

Return to page top

社長ブログ

広報ブログ

開発ブログ

IR情報