ホーム > HP作成支援 > モバイル対応ホームページを作ろう!! > Step 6

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

Step 6 作ったページをモバイル対応にしてみよう!

 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







通信方法 パケット パケット パケット パケット パケット パケット
接続料金
(円)
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




送信容量
(全角文字)
250 5000 64
3000
6000
5000
1000〜5000
受信容量
(全角文字)
250〜2000 5000 192
3000
6000
5000
10000〜20000


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

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

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

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

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

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

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

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

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

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

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


【文字コードはShift-JIS】

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


【記述言語はCHTML】

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

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


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

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

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

トップページにサイトの説明などは記載しない。サイトの説明は必ず別ページを作り、そこに記載するようにする。
 トップページはそのサイトにアクセスするごとに表示されます。 初めてアクセスした人には説明文が必要ですが、何度も来ている人には不要です。 不要な説明文のために毎回パケット料を支払うのは何とも阿呆らしいことです。

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


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

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

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

各コンテンツのタイトルは6文字以内にしよう
 モバイルの画面サイズは横 8文字 もしくは 10文字が基本となっていました。 現在では、もう少し画面サイズが大きくはなっていますが、 いずれにしても画面サイズをを越えると自動的に改行されるため、2行にまたがってしまいます。 個人的に、メニューでは 1行に 1コンテンツを表示する方がキレイだと思っているので、 必ず 1行に収まるようなコンテンツ名をつけるようにしています。

 また、タイトルなどはセンタリングしたくなると思いますが、 SoftBankではセンタリングによって左右 1文字ずつ空白になってしまうので、 コンテンツのタイトルは 6文字以内におさめないとスマートに表示されないことになります。


メニューの例。画面サイズを越えると強制的に改行されて、2行にまたがってしまう。
メニューでは正常に表示されていた「バイク好き集会」も、センタリングするとSoftBankでは…

バイク好き集

ここは、バイク好
きが集まるホーム
ページです。みん
なで盛り上げてい
きましょう。

文章はやたらと改行しない方が良い
 パソコンでは、画面サイズが大きいため、あまり続けて文章を書くとダラダラして読みづらくなります。 そのため、適度なところで改行していく必要があるのですが、 モバイルではあまり改行しない方がキレイに表示できると思います。 もともと画面サイズが小さくて見えている文字数が少ないので、そのまま続けて書かれていても読みやすいのです。 なお、段落が変わるときには 1行あけた方が良いでしょう。

 モバイルの画面サイズは横 8文字だから…と言って、8文字ずつで改行しているサイトをたまに見かけます。 しかし、これは最低なデザインだと思います。 モバイルの画面サイズは絶対に横 8文字という訳ではないので、 例えば横10文字の機種から見たら、はっきり言って変なデザインです。

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


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

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

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

画像はできるだけ使わない
 画像はデータ量が大きいため、パケット料金が高くつきますし、受信に時間がかかってスムーズな表示ができません。 そのため、中には(携帯電話の機能を使って)画像を非表示にしている人もいます。 キャリアによって使える画像の種類が違うこともあり、できるだけ使わない方が良いでしょう。 また、背景画像に対応している機種もありますが、やはり使わない方が良いでしょう。


【まとめ】

上の解説を要約すると、モバイル対応ホームページは、

画像・音楽・絵文字をできるだけ使わず、
  1ページ5キロバイト以内で、
    C-HTMLを使って記述する

ことで作成可能ということになります。



Presented by
- Tor World -