Step 5までで、自分のパソコンに作ったページをインターネット上に公開するところまで出来るようになりました。これでもう自分のホームページは持つことができる訳です♪あとはその作るページを工夫して、より良いページ作りを目指していきましょう。
今回のテーマは「モバイル対応ホームページを作ろう!!」ということなので、ここでは、作ったページをモバイル対応にする方法について説明したいと思います。
ホームページをモバイル対応にするためには、モバイルの特性を理解する必要があります。
各キャリアの公式ホームページ
それぞれのキャリアについて、まずは一覧表にして比較してみましょう。これはあくまで参考資料です。こんなもの覚えていられませんし、すべての意味が分かる必要はありません。
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ページの容量は小さくし、いくつかのページに分けて表示していきます。
文字コードは、一部のSoftBank 3G端末を除いて Shift-JIS が採用されています。普通にメモ帳などで作り、そのままサーバに転送すれば、Shift-JISになると思うので、特に注意する必要はありません。
ホームページの構成言語としては、CHTMLを使いましょう。ほとんどのモバイルで、CHTMLを表示可能です。ただし、完全に同じという訳ではなく、キャリアごとに固有のタグ、対応していないタグなどもあるので、注意が必要です。
CHTMLの解説はこちらを参照してください。
すべての携帯端末で、少なくとも5KBまでは表示できます。NTT DoCoMoでは、公式サイトで 2KB 以内におさめることを推奨していますが、2KB を越えたからと言って表示できないことはほぼ考えられません。
ちなみに5KBってどれくらいなのか分からないかもしれませんが、全角文字数で表現するなら約2500文字になります(ホームページの場合は文章以外に表示されないタグもあるので、実際には2500文字=5KBとはなりませんけど)。
トップページにサイトの説明などは記載しない。サイトの説明は必ず別ページを作り、そこに記載するようにする。 |
トップページはそのサイトにアクセスするごとに表示されます。 初めてアクセスした人には説明文が必要ですが、何度も来ている人には不要です。 不要な説明文のために毎回パケット料を支払うのは何とも阿呆らしいことです。 |
【参考】
ページの容量はプロパティで確認することができます。ブラウザのメニューもしくは右クリックから「プロパティ」を開いてください。
モバイルの画面サイズは非常に多種多様です。画面サイズでは特に、「横の文字数」に気を付ける必要があります。
モバイルでは基本的に横スクロールをせず、縦スクロールのみとなっています。縦はスクロールしてくれるので、それなりにデザインしやすいのですが、横はスクロールせず、画面端で必ず改行されるので、少し工夫が必要になります。
各コンテンツのタイトルは6文字以内にしよう | |||||||
モバイルの画面サイズは横 8文字 もしくは 10文字が基本となっていました。
現在では、もう少し画面サイズが大きくはなっていますが、
いずれにしても画面サイズをを越えると自動的に改行されるため、2行にまたがってしまいます。
個人的に、メニューでは 1行に 1コンテンツを表示する方がキレイだと思っているので、
必ず 1行に収まるようなコンテンツ名をつけるようにしています。 また、タイトルなどはセンタリングしたくなると思いますが、 SoftBankではセンタリングによって左右 1文字ずつ空白になってしまうので、 コンテンツのタイトルは 6文字以内におさめないとスマートに表示されないことになります。
|
文章はやたらと改行しない方が良い |
パソコンでは、画面サイズが大きいため、あまり続けて文章を書くとダラダラして読みづらくなります。
そのため、適度なところで改行していく必要があるのですが、
モバイルではあまり改行しない方がキレイに表示できると思います。
もともと画面サイズが小さくて見えている文字数が少ないので、そのまま続けて書かれていても読みやすいのです。
なお、段落が変わるときには 1行あけた方が良いでしょう。 モバイルの画面サイズは横 8文字だから…と言って、8文字ずつで改行しているサイトをたまに見かけます。 しかし、これは最低なデザインだと思います。 モバイルの画面サイズは絶対に横 8文字という訳ではないので、 例えば横10文字の機種から見たら、はっきり言って変なデザインです。 |
【参考】
パソコンのブラウザで動作確認する場合、ブラウザのサイズを小さく横 8文字くらいにしてみると、多少は参考になります。モバイルシュミレータ(Step 2 参照)があれば、それで確認する方が確実です。
画像、音楽、絵文字については、それぞれのキャリアごとに仕様が違いすぎるため、これを使えば良いというものがありません。そのため、さまざまなキャリアに対応したホームページを作成するときには使わない方が良いと思います。
もし対象を、例えば「i-Mode限定」などとしぼる場合、それぞれのキャリアに対応した画像・音楽・絵文字を使っても良いと思います。ただし、画像と音楽についてはデータ量が大きいため、パケット料金が高くなる、表示が遅くなるなどの理由から、あまり使わない方が良いとも言えます。
画像はできるだけ使わない |
画像はデータ量が大きいため、パケット料金が高くつきますし、受信に時間がかかってスムーズな表示ができません。 そのため、中には(携帯電話の機能を使って)画像を非表示にしている人もいます。 キャリアによって使える画像の種類が違うこともあり、できるだけ使わない方が良いでしょう。 また、背景画像に対応している機種もありますが、やはり使わない方が良いでしょう。 |
上の解説を要約すると、モバイル対応ホームページは、
画像・音楽・絵文字をできるだけ使わず、
|
1ページ5キロバイト以内で、
|
C-HTMLを使って記述する
|
ことで作成可能ということになります。