モバイル対応ホームページを作ろう!!

　Step 5までで、自分のパソコンに作ったページをインターネット上に公開するところまで出来るようになりました。これでもう自分のホームページは持つことができる訳です♪あとはその作るページを工夫して、より良いページ作りを目指していきましょう。

　今回のテーマは「モバイル対応ホームページを作ろう!!」ということなので、ここでは、作ったページをモバイル対応にする方法について説明したいと思います。

【モバイルの特性について理解しよう】

　ホームページをモバイル対応にするためには、モバイルの特性を理解する必要があります。

キャリア	ホームページ
技術情報
DoCoMo	http://www.nttdocomo.co.jp/
http://www.nttdocomo.co.jp/service/imode/make/
SoftBank	http://mb.softbank.jp/mb/
http://creation.mb.softbank.jp/
au by KDDI	http://www.au.kddi.com/
http://www.au.kddi.com/ezfactory/
EMOBILE	http://emobile.jp/
http://developer.emnet.ne.jp/
WILLCOM	http://www.willcom-inc.com/
http://www.willcom-inc.com/ja/service/contents_service/club_air_edge/for_phone/homepage/

　それぞれのキャリアについて、まずは一覧表にして比較してみましょう。これはあくまで参考資料です。こんなもの覚えていられませんし、すべての意味が分かる必要はありません。

		DoCoMo		Softbank	EzWeb	EMOBILE	WILLCOM
		mova	FOMA	Softbank	EzWeb	EMOBILE	WILLCOM
ホ｜ムペ｜ジ閲覧	通信方法	パケット	パケット	パケット	パケット	パケット	パケット
	接続料金（円）	0.3/P	0.02～0.2/P	2/KB 0.3/P	0.27/P	0.042/P	0.021/P
	受信容量（KB）	5～10	不明	6 12	9		メモリ空き容量による
	送信速度（kbps）	9.6	64～384	9.6～384	14.4～64	384	32～128
	受信速度（kbps）	9.6 28.8	384～7200	28.8～3600	14.4～144	3600	32～128
	文字コード	Shift-JIS	Shift-JIS	Shift-JIS UTF-8	Shift-JIS	Shift-JIS	Shift-JIS
	言語	CHTML	CHTML XHTML	MML (CHTML)	XHTML	CHTML XHTML	CHTML
	画像	GIF JPEG	GIF JPEG	PNG GIF JPEG	BMP GIF JPEG	PNG GIF JPEG	BMP PNG GIF JPEG
	音源	MLD	MIDI	SMD SMAF	SMAF Qcelp	SMAF	feelsound MIDI
		DoCoMo		Softbank	EzWeb	EMOBILE	WILLCOM
		mova	FOMA	Softbank	EzWeb	EMOBILE	WILLCOM
メ｜ル機能	送信容量（全角文字）	250	5000	64 3000 6000	5000		1000～5000
	受信容量（全角文字）	250～2000	5000	192 3000 6000	5000		10000～20000

【モバイル対応ホームページの作り方】

　上の表にある通り、各キャリアでかなり仕様が異なっています。このような状況で、どうやってモバイル対応ホームページを作っていくのか。はっきり言って、モバイル対応と言っても、すべてのキャリアに対応したホームページというのは不可能に近いと言えます。

　このように様々な仕様がある場合、

【もっとも一般的、もしくは最低ラインに合わせるように、合わせられないものは使用しないように】

作っていきます。これが基本です。この基本にのっとり…

通信方法	パケット通信
文字コード	Shift-JIS
記述言語	CHTML
１ページ容量	5KB以内
画面サイズ	横8文字
画像	使わない（JPEG）
音楽	使わない
絵文字	使わない

という条件で作っていくことにしましょう。

　この条件で作っていくことで、おそらくほぼすべての携帯端末に対応可能でしょう。

【通信方法はパケット通信】

　i-Modeをはじめとするホームページ閲覧が可能なモバイルは、そのほとんどがパケット通信という通信方法を採用しています。このパケット通信では、基本的に受信したデータ量に応じて課金されていきます。

　そのため、いかに必要なデータを小さくまとめ、分かりやすいホームページを作っていくかが課題となります。１ページの容量は小さくし、いくつかのページに分けて表示していきます。

【文字コードはShift-JIS】

　文字コードは、一部のSoftBank 3G端末を除いて Shift-JIS が採用されています。普通にメモ帳などで作り、そのままサーバに転送すれば、Shift-JISになると思うので、特に注意する必要はありません。

【記述言語はCHTML】

　ホームページの構成言語としては、CHTMLを使いましょう。ほとんどのモバイルで、CHTMLを表示可能です。ただし、完全に同じという訳ではなく、キャリアごとに固有のタグ、対応していないタグなどもあるので、注意が必要です。

　CHTMLの解説はこちらを参照してください。

【１ページの容量は 5KB 以内】

　すべての携帯端末で、少なくとも5KBまでは表示できます。NTT DoCoMoでは、公式サイトで 2KB 以内におさめることを推奨していますが、2KB を越えたからと言って表示できないことはほぼ考えられません。

　ちなみに5KBってどれくらいなのか分からないかもしれませんが、全角文字数で表現するなら約2500文字になります（ホームページの場合は文章以外に表示されないタグもあるので、実際には2500文字＝5KBとはなりませんけど）。

【参考】
　ページの容量はプロパティで確認することができます。ブラウザのメニューもしくは右クリックから「プロパティ」を開いてください。

【画面サイズは横 8文字】

　モバイルの画面サイズは非常に多種多様です。画面サイズでは特に、「横の文字数」に気を付ける必要があります。

　モバイルでは基本的に横スクロールをせず、縦スクロールのみとなっています。縦はスクロールしてくれるので、それなりにデザインしやすいのですが、横はスクロールせず、画面端で必ず改行されるので、少し工夫が必要になります。

【参考】
　パソコンのブラウザで動作確認する場合、ブラウザのサイズを小さく横 8文字くらいにしてみると、多少は参考になります。モバイルシュミレータ（Step 2 参照）があれば、それで確認する方が確実です。

【画像・音楽・絵文字は使わない】

　画像、音楽、絵文字については、それぞれのキャリアごとに仕様が違いすぎるため、これを使えば良いというものがありません。そのため、さまざまなキャリアに対応したホームページを作成するときには使わない方が良いと思います。

　もし対象を、例えば「i-Mode限定」などとしぼる場合、それぞれのキャリアに対応した画像・音楽・絵文字を使っても良いと思います。ただし、画像と音楽についてはデータ量が大きいため、パケット料金が高くなる、表示が遅くなるなどの理由から、あまり使わない方が良いとも言えます。