携帯サイトの作り方は、根本的にはPCサイトと同じです。しかし、携帯電話のスペックに合わせて作る必要があるので、いくつかのルールや特性を把握しなければなりません。
携帯サイトを作る上で押さえておきたいポイントは、一般的に普及している携帯電話がどんなスペックかということです。言い換えれば、ユーザーはどんな環境でサイトにアクセスしてくるのかを想定して作らなければならない、ということになります。
携帯サイトを作るには
携帯サイトを作るには、携帯電話の特徴を理解して、それに合わせてコーディングする必要があります。
| 画面が小さい | 携帯電話の画面は、パソコンのモニターに比べて圧倒的に小さいです。しかも縦長という特徴があります。PC向けのサイトで優れたデザインだとしても、携帯端末で使いやすいかどうかは別の話になります。 |
| 通信が遅い | 携帯電話でネットを利用する際、一般的にパソコンの通信速度よりも遅いので、コンテンツは軽い方が良いことになります。画像やFLASHの容量、1ページに表示するテキストの量などに気を使いましょう。 |
| ブラウザが貧弱 | 携帯電話で使えるブラウザは、PCブラウザで使えるものよりも限定された性能となっています。PCでは普通に使える技術仕様が使えない場合があるので、携帯端末で実現可能な表現の知識を覚える必要があります。 |
| ダウンロードできる容量が少ない | 容量の大きすぎるコンテンツは携帯電話のキャパシティを超えてしまうため、途中で途切れてしまったりエラーが表示されたりします。画像はひとつあたり10KB程度、Webページ全体で100KB程度を目安に作りましょう。 |
| キャリアや端末によって仕様が異なる | docomo、au、Softbankの主要3キャリアを対象としたサイトを作る場合、それぞれどんな仕様の違いがあるのかを確認しておく必要があります。自分の持っている機種でうまく表示されたからと言って、他の機種で全く同じように表示されるとは限りません。 |
簡単なサンプルを作ってみる
携帯向けサイトと言っても、携帯電話でアクセスしたときに表示できるWebページになっていれば良いので、難しく考える必要はありません。初めは最も単純なHTMLで記述してみましょう。
<html>
<head>
<title>携帯サイト</title>
</head>
<body>
<center>携帯サイトです</center>
<hr>
<div>テキストテキストテキストテキスト。<br>
<br>
テキストテキストテキスト。テキストテキストテキスト。<br>
<br>
テキストテキストテキストテキスト。</div>
</body>
</html>
上記のソースで携帯ユーザーに「文字情報を伝える」ことができるようになります。ここから、さらに実現したい表現や追加したい機能に応じて、詳しい携帯サイトの作り方を覚えていけば良いでしょう。
携帯サイトリファレンス
| 項目 | 概要 |
|---|---|
| 携帯サイトの基礎知識 | 携帯サイトを作る時に押さえておくべきポイント |
| 携帯サイトの基本的な作り方 | 携帯サイトで使えるタグは限られているので有効に使いましょう |
| HTMLをXHTML化する | 携帯サイトをHTMLからXHTML化する時に役立つ知識 |
| 3キャリア対応のXHTML携帯サイト | 携帯3キャリア対応の共通ページをXHTMLで作る方法 |
| 携帯サイトのフォントサイズ指定 | 携帯サイトで文字の大きさを決める際のコツを紹介 |
| 携帯サイトの見出し | 画像を使わなくてもできる携帯サイトの見出しサンプル |
| 文字入力モードの指定 | 文字入力が必要なフォームを設置する際の初期値を制御する方法 |