それっぽい携帯サイトの作り方
ひょんなことから携帯用のページを初めて作ることになったので、そのとき気づいたことをまとめておきます。
作ったのは、PC用なら1ページ程度の内容で、一応コーポレートサイト。
■制作する携帯サイトの基本仕様
・3キャリア対応
DoCoMo、au、Softbankで共通して見れること。更新を考えると1ページで済ませたいです。
・使用言語はhtml
3G専用サイトならxhtmlでもOK。DoCoMoのMOVAは505以降もxhtml対応。
・文字コードはSJIS
MOVAはUTF-8非対応（多分）。3G限定なら何でも大丈夫そう。
・1ページあたり（なるべく）5KB以下で
MOVAは画像込みで1ページあたり5KB以下の制限があったはず。せめて10KB以下にしておけばかなりの端末で見れるはず。この点については公表されているスペックがあてにならない（メーカーが独自に拡張している？）のであやふやです。
・画像はJPEG
Vodafone2GがGIF非対応のため。ただし、MOVAの503以前はJPEG非対応（一部対応機もあるみたい）。
重くなるし、画像はなるべく使わない方針で。
基本的な携帯サイトの作り方はさまざまなサイトで解説されています。Let's Google!
問題になるのが「それっぽい」の部分。基本的な作り方はわかってもデザイン的な部分の解説はなかなか見つかりません。なので、公式サイトをいくつか見て参考にしてみました。インスパイアとかオマージュとも言います。
■携帯サイトのよくあるデザイン
・ヘッダーとフッターはcenter、コンテンツは左寄せ
・hrタグの使い方
いいサイトはhrの使い方がうまいですね。
とりあえず今回はこんな感じにしてみました。
ヘッダーとフッターの区切りは、hr size="2" color="#テーマカラー"
コンテンツ中の区切りは、hr color="サブカラー"
・配色
色使いって難しいですね。
今回はコーポレートカラーが決まっていたので、そのままメインカラーにしました。
背景は白にしたので、メインカラーと白の中間色をサブカラーに。
・フォントカラー
ありがちですが、メインのフォントカラーはグレーに。
好みもあると思いますが、linkは明るいブルーに、vlinkもとりあえずlinkと同じ色にしました。
・見出し記号
3キャリア対応を考えると絵文字は使用できません。
一般的な記号で、今回調べたサイトで見出しに使われていたのが■□★。
主張しすぎない□が気に入ったので、今回は□を採用。□だけだと目立たないので、見出し行のフォントカラーをメインカラーにして本文と区別しました。
・アクセスキー
携帯といえばアクセスキー！数字の0キーを押すとトップページに戻る（例：モバゲー）みたいなあれです。
今回は、0キーを押すとカテゴリートップに戻る「Yahooモバイル」方式にしました。
ついでに9キーでそのページの先頭に戻る、にしましたが、これは一般的ではなさそう。
アクセスキーの表示は、[0]トップページに戻る、のようにテキストで表現しましたが、本来は絵文字か画像で表現したいところ。
・カタカナは半角
全角と半角とでは読みやすさが違います。秀丸のマクロでまとめて最後に変換しました。
■参考書籍
今回、携帯サイト作成の解説本をいくつ見てみましたが、実際役に立ったのは1冊だけでした。
「ケータイHTMLコンパクトリファレンス」（毎日コミュニケーションズ）
どのタグのどの属性がどの機種に対応しているのか、一目瞭然です。
PC用サイトだと、いつも秀和システムの「HTML&CSS&JavaScript辞典」を片手に制作しますが、その携帯用に相当すると思います。
■スクリーンショット
※iモードHTMLシミュレータII使用
■ソース
htmlソース