携帯サイト制作の鉄則
携帯サイトのデザイン
- とりあえず横幅240px、ファイルサイズ100KB以下(画像、Flash、CSS含む)で作っとけ!
- ただしauでは1つあたり4KB以上の外部CSSファイルは読み込まれないので注意!!
- ターゲットにもよるけど、色はPCサイトに比べて派手めにしておいた方がいい。
- 絵文字は機種によって違うので注意。
- 一列に収まらないコピーでは滅びたと思っていたマーキーが大活躍。
- 文字数は意外と入らない。★調査中★
- WEBセーフカラー216色はだいたい同じように発色するので無難
携帯サイトの広告
- キャリアの公式サイトに申請する場合は広告が入れられないので考えなくてよい。
- 入れる場合は・・・(★調査中★)
docomo向けCSS対策ライブラリ
参考:その他キャリア間の差異を埋めるモジュールについて
携帯サイトの表示確認
実機でのテストは非常に手間とコストがかかるので、その前に以下の環境で万全を期しておくこと。
FireMobileSimulatorを使う
こちもFirefox用アドオン。BETA版だけどいいかんじ!今のところ一番いいかも。
- ダウンロードページ ※要Add-onsへのユーザ登録
- Firefoxを簡単に携帯シミュレータにするアドオン「FireMobileSimulator」公開中です! :作者サイト
User agent switcherを使う
- Firefoxのアドオン User agent switcher を導入
- User Agent Switcher の携帯用のXML を公開してくださってる方がいるので、UASにこれらを追加
- Fxからチェック。とりあえずリンク切れとか大体のバランスを見るのには使える。ただしサイトによっては403になったりリクエストがループして見られない。
各キャリアから出てるシミュレータを使う
- iモードHTMLシミュレータII
- Openwave SDK6.2K(au) (公開停止中)
- Softbank ※要会員登録
なんかいまいち見られないサイトが多いのでインストールする必要はないかも。。
【有料】他社から出てるシミュレータを使う
それぞれの精度などについては★調査中★
キャリアのテストセンターを使う
各キャリアで提供しているテストセンターに出向いてテストさせてもらうことができます。
公式サイトを作るときはこちらの利用が必須になる場合もあります。
テストしたい機種数などにより予約の空き具合が変わるので、利用するには
早めのスケジューリングが必要です。
また、一回に使える時間は限られているので、
「すべて完成してから念のため確認する」という気持ちで行ったほうがよいでしょう。
公式サイトを作るときはこちらの利用が必須になる場合もあります。
テストしたい機種数などにより予約の空き具合が変わるので、利用するには
早めのスケジューリングが必要です。
また、一回に使える時間は限られているので、
「すべて完成してから念のため確認する」という気持ちで行ったほうがよいでしょう。
【有料】外部のテスト環境を使う
テスト結果をレポートしてくれる専門の会社があります。
より精密なチェックが必要な場合はそういうところに委託することもできます。
かなり高額になるので、よっぽどの大規模サイトを作るのでなければ使わなくてよいでしょう。
より精密なチェックが必要な場合はそういうところに委託することもできます。
かなり高額になるので、よっぽどの大規模サイトを作るのでなければ使わなくてよいでしょう。
その他忘れがちなこと
- 対応してない機種でアクセスしたときのページを用意する。
- 携帯でも使えるアクセス解析を入れる。Google Analyticsは使えません。
参考リンク
- 【モバイル向けサイト制作】今から始める携帯サイト制作 入門用良記事。
- 携帯開発向けに便利な支援ツール/サイト
- モバゲーのような携帯サイトを作るための12のTips ←このサイトの情報量は凄い
- 3G端末(FOMA・WIN・3GC)のモバイルサイトのコーディング&デザイン
- ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」
iyahhoiの携帯カテゴリ、何気に便利!